開始在網站上使用 Firebase 驗證

您可以使用 Firebase Authentication 允許使用者透過一或多種登入方式登入應用程式，包括電子郵件地址和密碼登入，以及聯合身分識別提供者 (例如 Google 登入和 Facebook 登入)。本教學課程會介紹 Firebase Authentication 的入門知識，說明如何在應用程式中加入電子郵件地址和密碼登入功能。

新增並初始化 Authentication SDK

  1. 如果尚未安裝，請 安裝 Firebase JS SDK 並初始化 Firebase。

  2. 新增 Firebase Authentication JavaScript 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;
    // ..
  });
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

後續步驟

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