開始在網站上使用 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 Emulator 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

後續步驟

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