Чтобы понять службу аутентификации firebase, давайте создадим простое веб-приложение, которое будет взаимодействовать с firebase.
1) Создайте проект Firebase
- Создайте проект firebase на https://console.firebase.google.com.
- Перейти к обзору проекта - ›Нажмите« Добавить firebase в свое веб-приложение ».
- Откроется всплывающее окно, в котором вы найдете точки доступа и конечные точки в соответствии с настройками вашего проекта.
- Вы будете использовать эти данные в своем внешнем html файле, который будет подключаться к firebase.
2) Включить метод входа с помощью аутентификации
- Вы находитесь внутри своего проекта на https://console.firebase.google.com.
- Перейдите на вкладку «Аутентификация» в меню слева.
- Щелкните метод входа в систему. Вы увидите все поддерживаемые методы, такие как электронная почта / пароль, телефон, Google, Facebook, Twitter и т. Д.
- Включите электронную почту / пароль и Google.
3) Создайте интерфейсное веб-приложение
- Я использую node.js в качестве локального сервера для обслуживания страницы. Если вы хотите использовать node.js, ознакомьтесь со следующей статьей:
- У меня есть одна страница с именем index.html и файл конфигурации с именем firebaseconf.js внутри общедоступного. В файле конфигурации есть все фиктивные данные. Вы должны заменить свои фактические конфигурации проекта. Я использую jquery для доступа к элементу dom.
- Откройте firebaseconf.js внутри общей папки.
- Добавьте код инициализации firebase.
// Инициализируем Firebase
var config = {
apiKey: «bjfuawfbajbawfbawawfbfawbbawflf»,
authDomain: «testproject.firebaseapp.com»,
databaseURL: «https://testproject.firebaseio.com,
projectId: «тестпроект»,
storageBucket: «testproject.appspot.com»,
messagingSenderId: «123456789123»
};
firebase.initializeApp (конфигурация);
Перейдите в index.html. Я уже создал элементы и добавил прослушиватель событий для вызова firebase. Однако, если вы хотите создать свой собственный, выполните следующие действия.
- Создайте поле электронной почты и пароля и 4 кнопки. Войти, зарегистрироваться, войти с помощью Google, выйти
- Добавить прослушиватель событий для всех кнопок.
- Вызовите службу аутентификации firebase для соответствующих действий.
- Сервис Google обработает все условия ошибки. Вам не о чем беспокоиться. Проверяйте консоль после каждого события.
Регистрация пользователя:
- Во время регистрации пользователя получите адрес электронной почты и пароль и вызовите службу аутентификации firebase createUserWithEmailAndPassword.
- Если электронная почта уже используется, попробуйте войти в систему с помощью входа в Google. Код входа в Google упомянут в статье ниже.
- После успешного создания пользователя вы можете найти его в консоли firebase.
- Зайдите в свой проект внутри https://console.firebase.google.com.
- Зайдите в «Аутентификация» - ›« Пользователи ».
- Вы можете найти информацию о вновь созданном пользователе.
- Вы также можете добавить / удалить учетную запись пользователя из консоли firebase.
$ («# Регистр»). Click (function (e) {
var email = $ («# электронная почта»). val ();
var password = $ («# пароль»). val ();
if (! email ||! пароль) {
вернуть console.log («требуется адрес электронной почты и пароль»);
}
firebase.auth (). createUserWithEmailAndPassword (адрес электронной почты, пароль)
.then (функция (результат) {
console.log (результат);
})
.catch (функция (ошибка) {
// Если пользователь уже зарегистрирован с таким же адресом электронной почты
// затем попытаемся войти в систему с помощью входа в Google
if (error.code === ‘auth / email-already-in-use’) {
var credential = firebase.auth.EmailAuthProvider.credential (электронная почта, пароль);
var provider = new firebase.auth.GoogleAuthProvider ();
firebase.auth (). signInWithPopup (провайдер)
.then (функция (результат) {
console.log (результат);
})
.catch (function (error1) {
console.log («Ошибка входа в Google», error1);
});
}
})
});
Вход пользователя:
- Во время входа пользователя получите адрес электронной почты и пароль и вызовите службу аутентификации firebase signInWithEmailAndPassword.
- Протестируйте электронную почту, которой нет в firebase.
$ («# Signin»). Click (function (e) {
var email = $ («# электронная почта»). val ();
var password = $ («# пароль»). val ();
if (! email ||! пароль) {
вернуть console.log («требуется адрес электронной почты и пароль»);
}
firebase.auth (). signInWithEmailAndPassword (электронная почта, пароль)
.then (функция (результат) {
console.log (результат);
})
.catch (функция (ошибка) {
console.log («ошибка входа», ошибка);
})
});
Вход в Google:
- Будет работать, если страница обслуживается с сервера.
- Если вы напрямую откроете index.html или свой статический файл в браузере, он может не работать. Так что лучше использовать любой статический сервер для размещения страницы. Я использую для этого node.js.
- Получите поставщика аутентификации и используйте его для вызова службы.
- Я использую всплывающее окно для ввода учетных данных Google, поэтому вызываю signInWithPopup ().
- Вы даже можете использовать signInWithRedirect ()
$ («# Gsignin»). Click (function () {
$ («# Сообщение»). Текст («»);
// Войти через Google
var provider = new firebase.auth.GoogleAuthProvider ();
provider.addScope («профиль»);
provider.addScope ("электронная почта");
return firebase.auth (). signInWithPopup (поставщик)
.then (функция (результат) {
console.log (результат);
})
.catch (функция (ошибка) {
console.log («Ошибка входа в Google», ошибка);
});
});
Выход пользователя:
Вызовите функцию auth signOut ().
$ («# Выход»). Click (function () {
firebase.auth (). signOut ();
});
Прослушивание состояния аутентификации:
- Поместите следующий код после загрузки документа. Он не является частью прослушивателя событий кнопки.
- Он будет записывать данные пользовательского объекта в консоль для целей отладки каждый раз, когда происходит изменение состояния аутентификации, такое как регистрация пользователя, вход в систему, выход из системы и т. Д.
firebase.auth (). onAuthStateChanged (функция (пользователь) {
console.log («пользователь», пользователь);
});
Для получения дополнительной информации посетите ссылку на официальную документацию firebase, указанную ниже.
Первоначально опубликовано на www.fullstacktechnos.com 21 октября 2017 г.
