Начало работы с аутентификацией Firebase на веб-сайтах

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

Добавьте и инициализируйте SDK Authentication .

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

  2. Добавьте 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 . Если вы выбираете между методами и поставщиками аутентификации, тестируете различные модели данных с использованием общедоступных и закрытых данных с помощью 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;
    // ..
  });
auth_signup_password.js

Web 

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Войти в систему для существующих пользователей

Создайте форму, которая позволит существующим пользователям входить в систему, используя свой адрес электронной почты и пароль. После заполнения формы пользователем вызовите метод 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;
  });
auth_signin_password.js

Web 

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

Настройте наблюдатель состояния аутентификации и получите данные пользователя.

Для каждой страницы вашего приложения, которой требуется информация о вошедшем в систему пользователе, добавьте наблюдатель к глобальному объекту аутентификации. Этот наблюдатель вызывается всякий раз, когда изменяется состояние авторизации пользователя.

Прикрепите наблюдателя с помощью метода 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
    // ...
  }
});
auth_state_listener.js

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
    // ...
  }
});
index.js

Следующие шаги

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