Начало работы с Firebase Authentication на сайтах

Вы можете использовать Firebase Authentication, чтобы разрешить пользователям входить в ваше приложение одним или несколькими способами, в том числе с помощью адреса электронной почты и пароля, а также через поставщиков интегрированных решений для входа, таких как "Войти с аккаунтом Google" и Facebook Login. В этом руководстве Firebase Authenticationрассказывается, как добавить в приложение возможность входа с помощью адреса электронной почты и пароля.

Как добавить и инициализировать Authentication SDK

  1. Если вы ещё этого не сделали, установите Firebase JS SDK и инициализируйте Firebase.

  2. Добавьте Firebase Authentication JS SDK и инициализируйте 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. Если вы выбираете методы аутентификации и поставщиков, тестируете разные модели данных с общедоступными и частными данными с помощью Authentication и Firebase Security Rules или создаете прототипы интерфейса входа, возможность работать локально без развертывания действующих сервисов может быть очень полезной.

Эмулятор Authentication входит в состав Local Emulator Suite, который позволяет приложению взаимодействовать с эмулируемым контентом и конфигурацией базы данных, а также, при необходимости, с эмулируемыми ресурсами проекта (функциями, другими базами данных и правилами безопасности).

Чтобы использовать эмулятор Authentication, выполните следующие действия:

  1. Добавление строки кода в конфигурацию тестирования приложения для подключения к эмулятору.
  2. Выполните команду firebase emulators:start в корневом каталоге локального проекта.
  3. Используйте интерфейс 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
    // ...
  }
});

Дальнейшие действия

Узнайте, как добавить поддержку других поставщиков идентификационной информации и анонимных гостевых аккаунтов: