Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

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

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

Web version 9

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 version 8

import firebase from "firebase/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, который позволяет вашему приложению взаимодействовать с содержимым и конфигурацией эмулируемой базы данных, а также, при необходимости, с эмулируемыми ресурсами проекта (функциями, другими базами данных и правилами безопасности).

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

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

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

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

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

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

Web version 9

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 version 8

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 version 9

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 version 8

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 version 9

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

Web version 8

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

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

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