在 JavaScript 中使用電子郵件連結進行 Firebase 驗證

您可以使用 Firebase 驗證功能，向使用者傳送電子郵件 內含連結，只要按一下即可登入。在過程中，使用者的 電子郵件地址也會通過驗證

使用電子郵件登入有以下優點：

  • 簡化註冊和登入程序。
  • 降低在不同應用程式間重複使用密碼的風險，可能導致安全性降低 甚至是已選取的密碼
  • 能夠驗證使用者身分，同時驗證使用者身分 電子郵件地址的合法擁有者。
  • 使用者只需具備可存取的電子郵件帳戶即可登入。不具備 必須提供電話號碼或社群媒體帳戶。
  • 使用者不需提供 (或記得) 存取 密碼，對行動裝置來說可能很麻煩。
  • 先前以電子郵件 ID (密碼) 登入的現有使用者 或聯合) 的電子郵件，只要以電子郵件登入即可。舉例來說 使用者就算忘記密碼，仍然可以登入， 重設密碼。

事前準備

如果尚未複製，請複製 依 所述，對專案 Firebase 控制台 將 Firebase 新增至您的 JavaScript 專案。

如要透過電子郵件連結登入使用者，您必須先啟用電子郵件服務供應商，並 以電子郵件登入 Firebase 專案：

  1. 在 Firebase 控制台中開啟「Auth」專區。
  2. 在「Sign in method」分頁中，啟用「Email/Password」供應商。注意事項 必須啟用電子郵件/密碼登入功能才能使用電子郵件連結登入。
  3. 在同一部分中啟用「電子郵件連結 (無密碼登入)」登入功能 方法。
  4. 按一下 [儲存]。

如要啟動驗證流程，請向使用者顯示 提示使用者提供電子郵件地址，然後 sendSignInLinkToEmail：要求 Firebase 傳送驗證連結 使用者的電子郵件。

  1. 建構 ActionCodeSettings 物件，該物件提供 Firebase 提供的 有關如何建立電子郵件連結的指示。設定下列欄位：

    • url：要嵌入的深層連結，以及要一併傳遞的任何其他狀態。 請在 Firebase 控制台的 只要前往 [登入方式] 分頁即可找到 (「驗證」->「設定」)。
    • android 和 ios：在 Android 或 Apple 裝置。進一步瞭解如何 設定 Firebase Dynamic Links ，透過行動應用程式開啟電子郵件動作連結。
    • handleCodeInApp：設為 true。每次登入作業都必須 在 app 中完成與其他頻帶電子郵件動作的方式不同 (密碼) 重設和電子郵件驗證)。這是因為流程結束時 使用者應可登入，且驗證狀態會保留在 應用程式

    • dynamicLinkDomain：定義多個自訂動態連結網域時 請指定要在透過連結開啟連結時使用的 指定行動應用程式 (例如 example.page.link)。否則， 系統會自動選取第一個網域。

      Web

      const actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      auth_email_link_actioncode_settings.js

      Web

      var actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      email-link-auth.js

    如要進一步瞭解 ActionCodeSettings，請參閱 電子郵件動作中的通過狀態 專區。

  2. 要求使用者提供電子郵件地址。

  3. 傳送驗證連結至使用者的電子郵件，並儲存使用者的電子郵件 在使用者在同一部裝置上完成電子郵件地址登入程序。

    Web

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

const auth = getAuth();
sendSignInLinkToEmail(auth, email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });
    auth_email_link_send.js

    Web

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    email-link-auth.js

安全疑慮

防止他人透過非預期使用者身分登入 非預期裝置；Firebase 驗證會要求使用者的電子郵件地址 所提供的密碼。為確保登入成功，這封電子郵件 位址必須與最初登入連結的收件地址相符。

當使用者以相同方式開啟登入連結時， 使用者要求連結的裝置，方法是將電子郵件地址儲存在本機， 傳送登入電子郵件時，使用 localStorage 或 Cookie。接著： 使用此位址完成流程 請勿在重新導向網址參數中傳遞使用者的電子郵件，然後重新使用 這可能會啟用工作階段插入功能

登入完成後，系統會採用先前的任何未經驗證登入機制 ，且所有現有工作階段都會失效。 舉例來說，假設有人 電子郵件地址，系統會移除使用者密碼，以免 以模擬人的身分，提出擁有權並建立了未經驗證的帳戶 使用未經驗證的電子郵件地址和密碼重新登入。

此外，請務必在正式環境中使用 HTTPS 網址，避免使用者看到你的連結 也可能會遭到中介伺服器攔截

在網頁中完成登入程序

電子郵件連結深層連結的格式與 錶帶外電子郵件操作所用的格式 (電子郵件驗證、密碼重設和電子郵件變更撤銷)。 Firebase Auth 透過提供 isSignInWithEmailLink API，簡化了這項檢查作業 檢查連結是否為以電子郵件連結登入。

如要完成到達網頁的登入程序，請呼叫 signInWithEmailLink，並使用 電子郵件以及含有一次性驗證碼的實際電子郵件連結。

Web

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email_link_complete.js

Web

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email-link-auth.js

在行動應用程式中完成登入程序

Firebase 驗證會使用 Firebase Dynamic Links 將電子郵件連結傳送至 使用行動裝置如要透過行動應用程式完成登入程序，應用程式 您必須設定成偵測傳入的應用程式連結，剖析 基礎深層連結，然後按照網頁流程完成登入程序。

進一步瞭解如何在 Android 中處理電子郵件連結登入作業 請參閱 Android 指南。

進一步瞭解如何在 Apple 中運用電子郵件連結登入 請參閱 Apple 平台指南。

您也可以將這種驗證方法連結至現有的使用者。例如： 使用者先前已透過其他供應商 (如電話號碼) 完成驗證。 可以在現有帳戶中新增這種登入方式。

差異如下：作業的後半部：

Web

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_link.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

在執行 機密作業

Web

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

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_reauth.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

不過，由於流程最終可能會發生在原始使用者的裝置上 未登入，可能無法完成這個流程。在此情況下，錯誤可能 才能強制使用者在相同裝置上開啟連結。只有部分通知 狀態，以提供作業類型相關資訊 和使用者 uid

如果您是在 2023 年 9 月 15 日當天或之後建立專案，請透過電子郵件列舉項目 系統會預設啟用保護措施。這項功能可以提高 專案的使用者帳戶，但將 fetchSignInMethodsForEmail() 停用 方法 (先前建議用來實作 ID 優先流程)。

雖然您可以為專案停用電子郵件列舉防護功能， 並建議不要這樣做

請參閱電子郵件列舉防護功能說明文件 ，掌握更多詳細資訊。

連結登入的預設電子郵件範本

預設的電子郵件範本包含主旨和電子郵件內文中的時間戳記 這樣後續的電子郵件就不會收合成單一會話串，並附上連結 設為隱藏。

這個範本適用於下列語言：

程式碼 語言
ar 阿拉伯文
簡體中文 中文 (簡體)
zh-TW 中文 (繁體)
nl 荷蘭文
en 英文
en-GB 英文 (英國)
fr 法文
de 德文
id 印尼文
it 義大利文
ja 日文
ko 韓文
pl 波蘭文
pt-BR 葡萄牙文 (巴西)
pt-PT 葡萄牙文 (葡萄牙)
ru 俄語
es 西班牙文
es-419 西班牙文 (拉丁美洲)
th 泰文

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶 也就是使用者的名稱和密碼 號碼或驗證提供者資訊，也就是使用者登入時使用的網址。這項新功能 帳戶儲存為 Firebase 專案的一部分，可用來識別 即可限制使用者登入專案中的所有應用程式

  • 在應用程式中得知使用者的驗證狀態，建議做法是 在 Auth 物件上設定觀察器。接著，您就能取得使用者的 User 物件的基本個人資料資訊。詳情請見 管理使用者。

  • 在你的Firebase Realtime Database和Cloud Storage中 查看安全性規則 透過 auth 變數取得已登入使用者的不重複使用者 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