開始在網站上使用 Firebase 驗證

您可以使用 Firebase Authentication，允許使用者透過一或多種登入方式登入應用程式，包括電子郵件地址和密碼登入，以及 Google 登入和 Facebook 登入等聯合身分識別資訊提供者。本教學課程會說明如何在應用程式中新增電子郵件地址和密碼登入功能，協助您開始使用 Firebase Authentication。

新增並初始化 Authentication SDK

  1. 如果尚未 安裝 Firebase JS SDK 並初始化 Firebase，請先完成這些步驟。

  2. 新增 Firebase Authentication JS SDK 並初始化 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 嘗試不同的公開和私人資料模型，或設計登入 UI 原型，那麼在本機作業而不部署實際服務，會是很好的做法。

Authentication 模擬器是 Local Emulator Suite 的一部分，可讓應用程式與模擬的資料庫內容和設定互動，以及模擬的專案資源 (函式、其他資料庫和安全性規則)。

使用 Authentication 模擬器只需幾個步驟：

  1. 在應用程式的測試設定中加入一行程式碼，以便連線至模擬器。
  2. 在本機專案目錄的根目錄中，執行 firebase emulators:start。
  3. 使用 Local Emulator Suite UI 進行互動式原型設計，或使用 Authentication 模擬器 REST API 進行非互動式測試。

如需詳細指南，請參閱「將應用程式連結至 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;
    // ..
  });

Web

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

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

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

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

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

後續步驟

瞭解如何新增其他識別資訊提供者和匿名訪客帳戶的支援：