Вы можете использовать Firebase Authentication, чтобы позволить пользователям входить в ваше приложение, используя один или несколько методов входа, включая вход с адресом электронной почты и паролем, а также федеративных поставщиков удостоверений, таких как вход через Google и Facebook. Это руководство поможет вам начать работу с Firebase Authentication, показывая, как добавить адрес электронной почты и пароль для входа в ваше приложение.
Добавьте и инициализируйте SDK аутентификации
Если вы еще этого не сделали, установите Firebase JS SDK и инициализируйте Firebase .
Добавьте Firebase Authentication JS SDK и инициализируйте Firebase Authentication:
Модульный веб-API
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
Веб-API с пространством имен
import firebase from "firebase/compat/app"; import "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(Необязательно) Создание прототипа и тестирование с помощью Firebase Local Emulator Suite
Прежде чем говорить о том, как ваше приложение аутентифицирует пользователей, давайте представим набор инструментов, которые вы можете использовать для прототипирования и тестирования функций аутентификации: Firebase Local Emulator Suite. Если вы выбираете между методами аутентификации и поставщиками, пробуете разные модели данных с общедоступными и частными данными с помощью правил аутентификации и безопасности Firebase или создаете прототипы пользовательского интерфейса для входа, возможность работать локально без развертывания живых сервисов может быть отличной идеей. .
Эмулятор проверки подлинности является частью пакета Local Emulator Suite, который позволяет вашему приложению взаимодействовать с содержимым и конфигурацией эмулируемой базы данных, а также, при необходимости, с эмулируемыми ресурсами проекта (функциями, другими базами данных и правилами безопасности).
Использование эмулятора аутентификации состоит всего из нескольких шагов:
- Добавление строки кода в тестовую конфигурацию вашего приложения для подключения к эмулятору.
- Из корня вашего локального каталога проекта запустите
firebase emulators:start
. - Использование пользовательского интерфейса Local Emulator Suite для интерактивного прототипирования или REST API эмулятора аутентификации для неинтерактивного тестирования.
Подробное руководство доступно на странице Подключите ваше приложение к эмулятору аутентификации . Для получения дополнительной информации см. введение в Local Emulator Suite .
Теперь давайте продолжим с тем, как аутентифицировать пользователей.
Зарегистрируйте новых пользователей
Создайте форму, позволяющую новым пользователям регистрироваться в вашем приложении, используя свой адрес электронной почты и пароль. Когда пользователь заполняет форму, подтвердите адрес электронной почты и пароль, предоставленные пользователем, а затем передайте их методу createUserWithEmailAndPassword
:
Web modular API
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web namespaced API
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Войти существующих пользователей
Создайте форму, позволяющую существующим пользователям входить в систему, используя свой адрес электронной почты и пароль. Когда пользователь заполнит форму, вызовите метод signInWithEmailAndPassword
:
Web modular API
import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Web namespaced API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Установите наблюдателя состояния аутентификации и получите пользовательские данные
Для каждой из страниц вашего приложения, которым требуется информация о вошедшем в систему пользователе, прикрепите наблюдателя к объекту глобальной аутентификации. Этот наблюдатель вызывается всякий раз, когда изменяется состояние входа пользователя.
Присоедините наблюдателя с помощью метода onAuthStateChanged
. Когда пользователь успешно входит в систему, вы можете получить информацию о пользователе в наблюдателе.
Web modular API
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });
Web namespaced API
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/v8/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Следующие шаги
Узнайте, как добавить поддержку других поставщиков удостоверений и анонимных гостевых учетных записей: