Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

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

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

Подключите свое приложение к Firebase

Установите Firebase SDK . Обязательно вставьте код конфигурации на свою веб-страницу, как описано.

(Необязательно) Прототип и тестирование с помощью Firebase Local Emulator Suite

Прежде чем говорить о том, как ваше приложение аутентифицирует пользователей, давайте представим набор инструментов, которые вы можете использовать для прототипирования и тестирования функциональности аутентификации: Firebase Local Emulator Suite. Если вы выбираете методы аутентификации и поставщиков, пробуете разные модели данных с общедоступными и частными данными с использованием правил аутентификации и безопасности Firebase или создаете прототипы пользовательского интерфейса для входа в систему, возможность работать локально без развертывания живых сервисов может быть отличной идеей .

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

Использование эмулятора аутентификации включает всего несколько шагов:

  1. Добавление строки кода в тестовую конфигурацию вашего приложения для подключения к эмулятору.
  2. Из корня локального каталога проекта запускаем firebase emulators:start .
  3. Использование пользовательского интерфейса Local Emulator Suite для интерактивного прототипирования или REST API-интерфейса эмулятора аутентификации для неинтерактивного тестирования.

Подробное руководство доступно на странице Подключите свое приложение к эмулятору аутентификации . Для получения дополнительной информации см. Введение в Local Emulator Suite .

Теперь продолжим, как аутентифицировать пользователей.

Зарегистрируйте новых пользователей

Создайте форму, которая позволит новым пользователям регистрироваться в вашем приложении, используя свой адрес электронной почты и пароль. Когда пользователь заполняет форму, проверьте адрес электронной почты и пароль, предоставленные пользователем, а затем передайте их методу createUserWithEmailAndPassword :

Интернет v8

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

Интернет v9

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

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

Создайте форму, позволяющую существующим пользователям входить в систему, используя свой адрес электронной почты и пароль. Когда пользователь заполняет форму, вызовите метод signInWithEmailAndPassword :

Интернет v8

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

Интернет v9

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;
  });

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

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

Присоедините наблюдателя с onAuthStateChanged метода onAuthStateChanged . Когда пользователь успешно входит в систему, вы можете получить информацию о пользователе в наблюдателе.

Интернет v8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Интернет v9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

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

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