Вы можете использовать Firebase Authentication , чтобы разрешить пользователям входить в ваше приложение, используя один или несколько методов входа, включая вход по адресу электронной почты и паролю, а также федеративные поставщики удостоверений, такие как вход в Google и вход в Facebook. Из этого руководства вы узнаете, как начать работу с Firebase Authentication , показав, как добавить адрес электронной почты и пароль для входа в ваше приложение.
Добавьте и инициализируйте SDK Authentication .
Установите Firebase JS SDK и инициализируйте Firebase , если вы еще этого не сделали.
Добавьте JS SDK Firebase Authentication и инициализируйте Firebase Authentication :
Web
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);
Web
import firebase from "firebase/compat/app";
import "firebase/compat/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
Прежде чем говорить о том, как ваше приложение выполняет аутентификацию пользователей, давайте представим набор инструментов, которые вы можете использовать для прототипирования и тестирования функций Authentication : Firebase Local Emulator Suite . Если вы выбираете методы и поставщики аутентификации, пробуете различные модели данных с общедоступными и частными данными с использованием Firebase Security Rules Authentication и безопасности Firebase или создаете прототипы проектов пользовательского интерфейса для входа в систему, возможность работать локально без развертывания действующих сервисов может быть отличной идеей. .
Эмулятор Authentication является частью Local Emulator Suite , который позволяет вашему приложению взаимодействовать с содержимым и конфигурацией эмулируемой базы данных, а также, при необходимости, с ресурсами эмулируемого проекта (функциями, другими базами данных и правилами безопасности).
Использование эмулятора Authentication включает всего несколько шагов:
- Добавление строки кода в тестовую конфигурацию вашего приложения для подключения к эмулятору.
- Из корня локального каталога проекта запустите
firebase emulators:start. - Использование пользовательского интерфейса Local Emulator Suite для интерактивного прототипирования или REST API эмулятора Authentication для неинтерактивного тестирования.
Подробное руководство доступно в разделе «Подключите приложение к эмулятору Authentication . Дополнительную информацию см. во введении к Local Emulator Suite .
Теперь давайте продолжим, как аутентифицировать пользователей.
Регистрация новых пользователей
Создайте форму, которая позволит новым пользователям регистрироваться в вашем приложении, используя свой адрес электронной почты и пароль. Когда пользователь заполняет форму, проверьте адрес электронной почты и пароль, предоставленные пользователем, а затем передайте их методу createUserWithEmailAndPassword :
Web
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed up
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});Web
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
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
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
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
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
// ...
}
});Следующие шаги
Узнайте, как добавить поддержку других поставщиков удостоверений и анонимных гостевых учетных записей: