使用 JavaScript 以密碼式帳戶向 Firebase 驗證

您可以使用 Firebase Authentication，讓使用者透過電子郵件地址和密碼向 Firebase 驗證身分，並管理應用程式的密碼型帳戶。

事前準備

  1. 將 Firebase 新增至 JavaScript 專案。
  2. 如果尚未將應用程式連結至 Firebase 專案，請從 Firebase 控制台進行連結。
  3. 啟用電子郵件地址/密碼登入功能：
    1. 在 Firebase 控制台中，開啟「Auth」(驗證) 部分。
    2. 在「登入方式」分頁中，啟用「電子郵件地址/密碼」登入方式，然後按一下「儲存」。

建立密碼帳戶

如要建立新的使用者帳戶和密碼，請在應用程式的註冊頁面完成下列步驟：

  1. 當新使用者透過應用程式的註冊表單註冊時，請完成應用程式要求的任何新帳戶驗證步驟，例如確認新帳戶的密碼輸入正確，且符合複雜度規定。
  2. 將新使用者的電子郵件地址和密碼傳遞至 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
    如果系統建立新帳戶，使用者會自動登入。請參閱下方的「後續步驟」一節，瞭解如何取得已登入的使用者詳細資料。

    您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

透過電子郵件地址和密碼登入使用者帳戶

使用密碼登入使用者的步驟，與建立新帳戶的步驟類似。在應用程式的登入頁面中，請按照下列步驟操作：

  1. 使用者登入應用程式時，請將使用者的電子郵件地址和密碼傳遞至 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
    請參閱下方的「後續步驟」一節，瞭解如何取得已登入的使用者詳細資料。

    您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

建議：設定密碼政策

您可以強制規定密碼複雜度，提高帳戶安全性。

如要為專案設定密碼政策，請在 Firebase 控制台的「Authentication Settings」頁面中，開啟「Password policy」分頁：

驗證設定

Firebase Authentication 密碼政策支援下列密碼規定：

  • 須有小寫字元

  • 須有大寫字元

  • 必須包含數字字元

  • 須有非英數字元

    下列字元符合非英數字元規定： ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • 密碼長度下限 (6 到 30 個字元，預設為 6 個字元)

  • 密碼長度上限 (最多 4096 個半形字元)

您可以透過下列兩種模式強制執行密碼政策：

  • 要求：使用者如未改用符合政策的密碼，就無法註冊。

  • 通知：使用者可以註冊不符合規定的密碼。使用這個模式時，您應在用戶端檢查使用者的密碼是否符合政策規定，如果不符合，請以某種方式提示使用者更新密碼。

新使用者一律須選擇符合政策的密碼。

如果您有活躍使用者，建議不要啟用「登入時強制升級」，除非您打算禁止密碼不符合政策的使用者存取帳戶。請改用通知模式，讓使用者以目前的密碼登入，並告知他們密碼不符合哪些規定。

在用戶端驗證密碼

import { getAuth, validatePassword } from "firebase/auth";

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

建議：啟用電子郵件列舉防護功能

如果電子郵件地址必須註冊但未註冊 (例如使用電子郵件地址和密碼登入時)，或必須未使用但已註冊 (例如變更使用者的電子郵件地址時)，部分以電子郵件地址做為參數的 Firebase Authentication 方法會擲回特定錯誤。雖然這有助於向使用者建議特定解決方法，但惡意行為人也可能濫用這項功能，找出使用者註冊的電子郵件地址。

為降低這類風險，建議您使用 Google Cloud gcloud 工具，為專案啟用電子郵件列舉保護機制。請注意，啟用這項功能會變更 Firebase Authentication 的錯誤回報行為，請確保應用程式不會依賴更具體的錯誤。

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶，並連結至使用者登入時使用的憑證 (即使用者名稱和密碼、電話號碼或驗證供應商資訊)。這個新帳戶會儲存在 Firebase 專案中，可用於識別專案中每個應用程式的使用者，無論使用者登入方式為何。

  • 在應用程式中，如要瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您就可以從 User 物件取得使用者的基本個人資料資訊。請參閱「管理使用者」。

  • 在 Firebase Realtime Database 和 Cloud Storage 安全規則中，您可以從 auth 變數取得已登入使用者的專屬使用者 ID， 並使用該 ID 控制使用者可存取的資料。

您可以將驗證供應商憑證連結至現有使用者帳戶，允許使用者透過多個驗證供應商登入應用程式。

如要登出使用者，請呼叫 signOut：

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js