在網站上開始使用 Firebase 身份驗證

您可以使用 Firebase 身份驗證來允許用戶使用一種或多種登錄方法(包括電子郵件地址和密碼登錄)以及聯合身份提供商(例如 Google 登錄和 Facebook 登錄)登錄您的應用。本教程通過向您展示如何將電子郵件地址和密碼登錄添加到您的應用,從而幫助您開始使用 Firebase 身份驗證。

將您的應用連接到 Firebase

安裝火力地堡SDK 。請務必按照說明將配置代碼粘貼到您的網頁中。

(可選)使用 Firebase 本地模擬器套件進行原型設計和測試

在討論您的應用如何對用戶進行身份驗證之前,讓我們先介紹一組可用於對身份驗證功能進行原型設計和測試的工具:Firebase 本地模擬器套件。如果您正在決定身份驗證技術和提供商,使用身份驗證和 Firebase 安全規則嘗試具有公共和私有數據的不同數據模型,或者對登錄 UI 設計進行原型設計,那麼無需部署實時服務即可在本地工作可能是一個好主意.

身份驗證模擬器是本地模擬器套件的一部分,它使您的應用程序能夠與模擬的數據庫內容和配置以及可選的模擬項目資源(函數、其他數據庫和安全規則)進行交互。

使用身份驗證模擬器只需幾個步驟:

  1. 在應用程序的測試配置中添加一行代碼以連接到模擬器。
  2. 從您的本地項目的根目錄下,運行firebase emulators:start
  3. 使用本地模擬器套件 UI 進行交互式原型設計,或使用身份驗證模擬器 REST API 進行非交互式測試。

詳細指南可在連接你的應用程序,以驗證仿真器。欲了解更多信息,請參閱本地仿真套件介紹

現在讓我們繼續如何驗證用戶。

註冊新用戶

創建一個表單,允許新用戶使用他們的電子郵件地址和密碼註冊您的應用程序。當用戶完成該表格,驗證由用戶提供的電子郵件地址和密碼,然後將它們傳遞到createUserWithEmailAndPassword方法:

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

網頁版 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方法:

網頁版 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;
  });

網頁版 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方法。當用戶成功登錄後,您可以在觀察者中獲取有關該用戶的信息。

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

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

下一步

了解如何添加對其他身份提供商和匿名訪客帳戶的支持: