Google is committed to advancing racial equity for Black communities. See how.
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

網站上的Firebase認證入門

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

將您的應用程序連接到Firebase

安裝Firebase SDK 。確保按照說明將配置代碼粘貼到您的網頁中。

(可選)使用Firebase Local Emulator Suite進行原型製作和測試

在討論您的應用程序如何對用戶進行身份驗證之前,讓我們介紹一套可用於原型化和測試身份驗證功能的工具:Firebase Local Emulator Suite。如果您要決定使用哪種身份驗證技術和提供程序,請使用“身份驗證和Firebase安全規則”或使用登錄UI設計原型來嘗試使用公共數據和私有數據創建不同的數據模型,那麼能夠在本地工作而無需部署實時服務可能是個好主意。

身份驗證仿真器是本地仿真器套件的一部分,它使您的應用程序可以與仿真的數據庫內容和配置以及可選的仿真的項目資源(功能,其他數據庫和安全規則)進行交互。請注意,本地仿真器套件尚不支持仿真的雲存儲。

使用身份驗證仿真器僅涉及幾個步驟:

  1. 在應用程序的測試配置中添加一行代碼以連接到仿真器。
  2. 在本地項目目錄的根目錄中,運行firebase emulators:start
  3. 使用Local Emulator Suite UI進行交互式原型製作,或使用Authentication emulator REST API進行非交互式測試。

有關將您的應用程序連接到身份驗證仿真器的詳細指南,請參見。有關更多信息,請參見Local Emulator Suite簡介

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

註冊新用戶

創建一個允許新用戶使用其電子郵件地址和密碼向您的應用程序註冊的表單。用戶填寫表單後,請驗證用戶提供的電子郵件地址和密碼,然後將它們傳遞給createUserWithEmailAndPassword方法:

Web v8

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

Web 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方法:

Web v8

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

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

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

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

下一步

了解如何添加對其他身份提供者和匿名來賓帳戶的支持: