開始在網站上使用 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，嘗試使用公開和私人資料的不同資料模型，或製作登入使用者介面設計的原型。如果您不想部署實際服務，也可以在本機上進行驗證，這麼做可以讓您不必部署實際服務，就能測試驗證機制。

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

Web

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

登入現有使用者

建立表單，讓現有使用者透過他們的電子郵件地址登入 和密碼。使用者填寫表單後，請呼叫 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;
  });
auth_signin_password.js

Web

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

設定驗證狀態觀察器並取得使用者資料

針對需要登入使用者資訊的每個應用程式頁面，請將觀察器附加至全域驗證物件。每當使用者的登入狀態變更時，系統就會呼叫這個觀察器。

使用 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
    // ...
  }
});
auth_state_listener.js

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

後續步驟

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