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

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

事前準備

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

建立密碼帳戶

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

1. 當新使用者透過應用程式的註冊表單註冊時，請完成應用程式要求的任何新帳戶驗證步驟，例如驗證新帳戶的密碼是否輸入正確，且符合複雜度規定。
2. 將新使用者的電子郵件地址和密碼傳遞至 createUserWithEmailAndPassword，藉此建立新帳戶：

   Web

   進一步瞭解樹狀結構可分離模組化 Web API，並升級使用命名空間 API。

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

為了保護您的專案免受濫用行為的影響，Firebase 會限制應用程式在短時間內透過相同 IP 位址使用新的電子郵件/密碼和匿名註冊的次數。您可以透過 Firebase 主控台申請並排定這項配額的暫時性變更。

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

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

1. 使用者登入應用程式時，請將使用者的電子郵件地址和密碼傳遞至 signInWithEmailAndPassword：

   Web

   進一步瞭解樹狀結構可分離模組化 Web API，並升級使用命名空間 API。

   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 主控台的「驗證設定」頁面中開啟「密碼政策」分頁：

驗證設定

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

進一步瞭解樹狀結構可分離模組化 Web API，並升級使用命名空間 API。

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