在 Firebase 中管理使用者

新增使用者

您可以呼叫 createUserWithEmailAndPassword 方法，或使用聯合識別資訊提供者 (例如 Google 登入或 Facebook 登入)，在 Firebase 專案中建立新使用者。

您也可以透過 Firebase 控制台的「驗證」專區、「使用者」頁面，或使用 Admin SDK，建立新的密碼驗證使用者。

取得目前登入的使用者

如要取得目前的使用者，建議您在 Auth 物件設定觀察器：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

網路命名空間 API

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

使用觀察器，可確保取得目前使用者時，Auth 物件並非處於初始化狀態，例如初始化。使用 signInWithRedirect 時，onAuthStateChanged 觀察器會等到 getRedirectResult 解析後才會觸發。

您也可以使用 currentUser 屬性，取得目前登入的使用者。如果使用者未登入，currentUser 為空值：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/auth.user
  // ...
} else {
  // No user is signed in.
}
auth_current_user.js

網路命名空間 API

const user = firebase.auth().currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/v8/firebase.User
  // ...
} else {
  // No user is signed in.
}
index.js

注意： 由於 Auth 物件尚未完成初始化，因此 currentUser 也可能是空值。如果您使用觀察器追蹤使用者的登入狀態，就不需要處理這個情況。

取得使用者的個人資料

如要取得使用者的個人資料資訊，請使用 User 的執行個體屬性。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getToken() instead.
  const uid = user.uid;
}
auth_get_user_profile.js

網路命名空間 API

const user = firebase.auth().currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getIdToken() instead.
  const uid = user.uid;
}
manage.js

重要事項： 設定 (及之後顯示) 可能向使用者顯示的 UI 值 (例如 displayName 和 photoURL) 時，請務必謹慎。但 API 不會篩選這些值，以免發生潛在的 XSS 類型攻擊。

取得使用者供應商專屬個人資料

如要從與使用者連結的登入提供者擷取個人資訊，請使用 providerData 屬性。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
auth_get_user_profile_provider.js

網路命名空間 API

const user = firebase.auth().currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
manage.js

更新使用者的個人資料

您可以使用 updateProfile 方法更新使用者的基本個人資料資訊，包括使用者的顯示名稱和個人資料相片。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_profile.js

網路命名空間 API

const user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});  
manage.js

設定使用者的電子郵件地址

您可以使用 updateEmail 方法設定使用者的電子郵件地址。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth, updateEmail } from "firebase/auth";
const auth = getAuth();
updateEmail(auth.currentUser, "[e-mail]").then(() => {
  // Email updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_email.js

網路命名空間 API

const user = firebase.auth().currentUser;

user.updateEmail("[e-mail]").then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

重要事項： 使用者近期必須登入，才能設定使用者的電子郵件地址。請參閱「重新驗證使用者」。

向使用者傳送驗證電子郵件

您可以使用 sendEmailVerification 方法將電子郵件地址驗證電子郵件傳送給使用者。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

const auth = getAuth();
sendEmailVerification(auth.currentUser)
  .then(() => {
    // Email verification sent!
    // ...
  });
auth_send_email_verification.js

網路命名空間 API

firebase.auth().currentUser.sendEmailVerification()
  .then(() => {
    // Email verification sent!
    // ...
  });
email.js

您可以在 Firebase 控制台的「電子郵件範本」頁面中，自訂用於「驗證」部分的電子郵件範本。請參閱 Firebase 說明中心的「電子郵件範本」一文。

您也可以在傳送驗證電子郵件時，透過繼續網址傳遞狀態，將狀態重新導向回應用程式。

此外，您也可以在傳送電子郵件前更新驗證執行個體上的語言代碼，將驗證電子郵件本地化。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

網路命名空間 API

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

設定使用者密碼

您可以使用 updatePassword 方法設定使用者的密碼。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

const auth = getAuth();

const user = auth.currentUser;
const newPassword = getASecureRandomPassword();

updatePassword(user, newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_update_password.js

網路命名空間 API

const user = firebase.auth().currentUser;
const newPassword = getASecureRandomPassword();

user.updatePassword(newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

重要事項： 使用者近期必須登入，才能設定使用者密碼。請參閱「重新驗證使用者」。

傳送重設密碼電子郵件

您可以使用 sendPasswordResetEmail 方法將密碼重設電子郵件傳送給使用者。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

const auth = getAuth();
sendPasswordResetEmail(auth, email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_send_password_reset.js

網路命名空間 API

firebase.auth().sendPasswordResetEmail(email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

您可以在 Firebase 控制台的「電子郵件範本」頁面中，自訂用於「驗證」部分的電子郵件範本。請參閱 Firebase 說明中心的「電子郵件範本」一文。

您也可以在傳送密碼重設電子郵件時，透過繼續網址傳遞狀態，將狀態重新導向回應用程式。

此外，您也可以在傳送電子郵件前更新驗證執行個體上的語言代碼，將密碼重設電子郵件本地化。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

網路命名空間 API

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

您也可以透過 Firebase 控制台傳送密碼重設電子郵件。

刪除使用者

您可以使用 delete 方法刪除使用者帳戶。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

const auth = getAuth();
const user = auth.currentUser;

deleteUser(user).then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_delete_user.js

網路命名空間 API

const user = firebase.auth().currentUser;

user.delete().then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

重要事項： 使用者近期必須登入，您才能刪除使用者。請參閱「重新驗證使用者」。

您也可以前往 Firebase 控制台的「使用者」頁面，從「驗證」專區刪除使用者。

重新驗證使用者

某些攸關安全的動作 (例如刪除帳戶、設定主要電子郵件地址，以及變更密碼) 使用者必須最近才登入，如果您執行上述其中一項操作，但使用者登入的時間太長，動作就會失敗並顯示錯誤。在這種情況下，請從使用者取得新的登入憑證，並將憑證傳遞至 reauthenticateWithCredential，重新驗證使用者。例如：

網頁模組 API

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

const auth = getAuth();
const user = auth.currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

reauthenticateWithCredential(user, credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_reauth_with_credential.js

網路命名空間 API

const user = firebase.auth().currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

user.reauthenticateWithCredential(credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

匯入使用者帳戶

您可以使用 Firebase CLI 的 auth:import 指令，將檔案中的使用者帳戶匯入 Firebase 專案。例如：

firebase auth:import users.json --hash-algo=scrypt --rounds=8 --mem-cost=14