您可以使用 Firebase 驗證,讓使用者以自己的電子郵件地址和密碼透過 Firebase 進行驗證,以及管理應用程式的密碼帳戶。
事前準備
- 將 Firebase 新增至您的 JavaScript 專案。
- 如果您尚未將應用程式連結至 Firebase 專案,請透過 Firebase 控制台進行。
- 啟用電子郵件/密碼登入功能:
- 在 Firebase 控制台開啟「驗證」專區。
- 在「Sign in method」分頁中,啟用「Email/password」登入方式,然後按一下「Save」。
建立以密碼為基礎的帳戶
如要使用密碼建立新的使用者帳戶,請在應用程式的註冊頁面中完成下列步驟:
- 當新使用者透過應用程式的註冊表單註冊時,請完成應用程式所需的新帳戶驗證步驟,例如確認新帳戶的密碼是否正確輸入,並且符合複雜性的要求。
- 將新使用者的電子郵件地址和密碼傳送至
createUserWithEmailAndPassword
,即可建立新帳戶:網頁模組 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; // .. });
網路命名空間 API
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
您也能在這裡找出並處理錯誤。如需錯誤代碼清單,請參閱驗證參考文件。
透過電子郵件地址和密碼登入使用者帳戶
使用密碼登入使用者的步驟與建立新帳戶的步驟類似。在應用程式的登入頁面中,執行下列操作:
- 當使用者登入應用程式時,請將使用者的電子郵件地址和密碼傳遞至
signInWithEmailAndPassword
:網頁模組 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; });
網路命名空間 API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
您也能在這裡找出並處理錯誤。如需錯誤代碼清單,請參閱驗證參考文件。
建議:啟用電子郵件列舉防護功能
有些 Firebase 驗證方法會將電子郵件地址當做參數,在需要註冊的情況下 (例如使用電子郵件地址和密碼登入時),或是因電子郵件地址和密碼不能使用而註冊時 (例如變更使用者電子郵件地址時),就會擲回特定錯誤。儘管這有助於向使用者建議特定補救方式,但也可能遭不肖人士濫用,找出使用者註冊的電子郵件地址。
為降低這個風險,我們建議您使用 Google Cloud gcloud
工具,為專案啟用電子郵件列舉防護功能。請注意,啟用這項功能會變更 Firebase 驗證的錯誤回報行為,請確保應用程式不會依賴更具體的錯誤。
後續步驟
使用者首次登入時,系統會建立新的使用者帳戶,並連結至憑證 (即使用者名稱與密碼、電話號碼或驗證提供者資訊),也就是使用者登入時使用的憑證。這個新帳戶會儲存在您的 Firebase 專案中,可用來識別專案中各個應用程式的使用者 (無論使用者登入方式為何)。
-
如要在應用程式中瞭解使用者的驗證狀態,建議在
Auth
物件上設定觀察器。接著,您就能從User
物件取得使用者的基本個人資料資訊。請參閱管理使用者一文。 在 Firebase 即時資料庫和 Cloud Storage 安全性規則中,您可以透過
auth
變數取得登入使用者的專屬 ID,並使用該 ID 控管使用者可存取哪些資料。
您可以將驗證供應商憑證連結至現有的使用者帳戶,讓使用者透過多個驗證服務提供者登入您的應用程式。
如要登出使用者,請呼叫
signOut
:
網頁模組 API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
網路命名空間 API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });