使用 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 參考文件。

使用電子郵件地址和密碼登入使用者

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

  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 參考文件。

建議做法：設定密碼政策

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

如要為專案設定密碼政策，請在 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