借助 Firebase 身份验证，您可以向用户发送包含链接的电子邮件，让用户点击此链接进行登录。在此过程中，用户的电子邮件地址也会得到验证。
通过电子邮件登录的好处有很多：
- 提供流畅的注册和登录体验。
- 降低在不同应用中重复使用密码的风险。即使是精心挑选的密码，如果重复使用，安全性也会受到影响。
- 能够在验证用户身份的同时，验证用户的确是电子邮件地址的合法所有者。
- 用户只需一个可访问的电子邮件帐号即可登录，不需要拥有电话号码或社交媒体帐号。
- 用户可以安全地登录，而无需提供（或记住）密码。在移动设备上，输密码可能是件麻烦事。
- 以前使用电子邮件标识符（密码或联合登录服务）登录的现有用户可以升级为仅使用电子邮件登录。例如，用户即使忘记密码也仍可登录，无需重置密码。
开始之前
如果您尚未将初始化代码段从 Firebase 控制台复制到您的项目（如将 Firebase 添加到您的 JavaScript 项目中所述），请先执行此操作。
为 Firebase 项目启用电子邮件链接登录
为了让用户能够通过电子邮件链接登录，您必须先为 Firebase 项目启用电子邮件服务提供商和电子邮件链接登录方法：
- 在 Firebase 控制台中，打开 Auth 部分。
- 在 Sign in method 标签页中，启用电子邮件地址/密码提供商。请注意，必须启用电子邮件地址/密码登录才能使用电子邮件链接登录。
- 在同一部分中，启用电子邮件链接（无密码登录）登录方法。
- 点击保存。
向用户的电子邮件地址发送身份验证链接
要启动身份验证流程，请向用户显示一个要求其提供电子邮件地址的界面，然后调用 sendSignInLinkToEmail，请求 Firebase 向该用户的电子邮件地址发送身份验证链接。
构建
ActionCodeSettings对象，以向 Firebase 提供有关如何构建电子邮件链接的说明。设置以下字段：url：要嵌入的深层链接以及要传递的其他任何状态。您必须在 Firebase 控制台的“已获授权的网域”列表中添加链接的网域。如需找到这些网域，您可以转到 Sign-in method 标签页 (Authentication -> Sign-in method)。android和ios：在 Android 或 iOS 设备上打开登录链接时使用的应用。详细了解如何配置 Firebase 动态链接以通过移动应用打开电子邮件操作链接。handleCodeInApp：设置为 true。与其他带外电子邮件操作（密码重置和电子邮件验证）不同，登录操作必须始终在应用中完成。这是因为，在流程结束时用户应该已经登录，并且他们的身份验证状态应在应用内保持不变。dynamicLinkDomain：如果为项目定义了多个自定义动态链接网域，请选择在通过指定的移动应用打开链接时应使用的网域（例如example.page.link）。否则，系统会自动选择第一个网域。Web 版本 9
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' };Web 版本 8
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' };
如需详细了解 ActionCodeSettings，请参阅在电子邮件操作中传递状态部分的内容。
要求用户输入电子邮件地址。
向用户的电子邮件地址发送身份验证链接，并保存用户的电子邮件地址，以免用户在同一设备上完成电子邮件登录时重复输入该地址。
Web 版本 9
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; // ... });Web 版本 8
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; // ... });
使用电子邮件链接完成登录
安全考量
为防止有人以非原定用户身份或在非原定设备上使用登录链接登录，Firebase Authentication 要求在完成登录流程时提供用户的电子邮件地址。要成功登录，此电子邮件地址必须与登录链接最初发送到的地址相一致。
您可以为在请求链接的同一设备上打开登录链接的用户简化此流程，方法是在发送登录电子邮件时于本地存储他们的电子邮件地址（例如使用 localStorage 或 Cookie）。然后，使用这个地址来完成该流程。请勿在重定向网址参数中传递用户的电子邮件地址并重复使用该地址，这可能会带来会话注入风险。
登录完成后，用户之前未经过验证的登录机制都将被移除，现有会话将失效。 例如，如果之前有人使用相同的电子邮件地址和密码创建了一个未经验证的帐号，系统会移除其密码，以防之前冒名顶替并创建了该未验证帐号的人今后使用未验证的电子邮件地址和密码再次登录。
同时，请确保在生产环境中使用 HTTPS 网址，以免您的链接被中间服务器拦截。
在网页上完成登录
电子邮件链接深层链接的格式与带外电子邮件操作（电子邮件验证、密码重置和撤销电子邮件更改）所用的格式相同。Firebase Auth 提供 isSignInWithEmailLink API 来检查链接是否为通过电子邮件链接进行登录的链接，简化了此检查过程。
要在着陆页上完成登录，请使用用户的电子邮件地址和包含一次性代码的实际电子邮件链接调用 signInWithEmailLink。
Web 版本 9
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 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.
});
}
Web 版本 8
// 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.
});
}
在移动应用中完成登录
Firebase Authentication 使用 Firebase Dynamic Links 将电子邮件链接发送到移动设备。要通过移动应用完成登录，必须对应用进行配置，使其检测传入的应用链接，解析底层的深层链接，然后像通过网页流程那样完成登录。
要详细了解如何在 Android 应用中处理通过电子邮件链接进行的登录，请参阅 Android 指南。
要详细了解如何在 iOS 应用中处理通过电子邮件链接进行的登录，请参阅 iOS 指南。
使用电子邮件链接进行关联/重新验证身份
您还可以将此身份验证方法与现有用户相关联。例如，以前使用其他提供商（例如电话号码）进行身份验证的用户，可以将此登录方法添加到其现有帐号。
不同之处在于操作的后半部分：
Web 版本 9
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.
});
Web 版本 8
// 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.
});
这也可以用于在执行敏感操作之前重新验证电子邮件链接用户的身份。
Web 版本 9
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.
});
Web 版本 8
// 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.
});
但是，由于这个流程可能会在原始用户未登录的其他设备上结束，因此可能无法完成。在这种情况下，系统可以向用户显示错误，要求他们在同一设备上打开链接。部分状态可以在链接中传递，提供有关操作类型和用户 uid 的信息。
区分电子邮件地址/密码与电子邮件链接
如果您同时支持基于密码和基于链接的电子邮件登录功能，为了区分密码/链接用户的登录方法，可以使用 fetchSignInMethodsForEmail。这对于标识符优先流程（首先要求用户提供他们的电子邮件地址，然后向用户显示登录方法）非常有用：
Web 版本 9
import { getAuth, fetchSignInMethodsForEmail, EmailAuthProvider} from "firebase/auth";
// After asking the user for their email.
const email = window.prompt('Please provide your email');
const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
.then((signInMethods) => {
// This returns the same array as fetchProvidersForEmail but for email
// provider identified by 'password' string, signInMethods would contain 2
// different strings:
// 'emailLink' if the user previously signed in with an email/link
// 'password' if the user has a password.
// A user could have both.
if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
// User can sign in with email/password.
}
if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
// User can sign in with email/link.
}
})
.catch((error) => {
// Some error occurred, you can inspect the code: error.code
});
Web 版本 8
// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
.then((signInMethods) => {
// This returns the same array as fetchProvidersForEmail but for email
// provider identified by 'password' string, signInMethods would contain 2
// different strings:
// 'emailLink' if the user previously signed in with an email/link
// 'password' if the user has a password.
// A user could have both.
if (signInMethods.indexOf(
firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
// User can sign in with email/password.
}
if (signInMethods.indexOf(
firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
// User can sign in with email/link.
}
})
.catch((error) => {
// Some error occurred, you can inspect the code: error.code
});
如上所述，电子邮件/密码和电子邮件/链接被认为是使用不同登录方法的相同 firebase.auth.EmailAuthProvider（PROVIDER_ID 相同）。
后续步骤
在用户首次登录后，系统会创建一个新的用户帐号，并将其与该用户登录时使用的凭据（即用户名和密码、电话号码或者身份验证服务提供商信息）相关联。此新帐号存储在您的 Firebase 项目中，无论用户采用何种方式登录，您项目中的每个应用都可以使用此帐号来识别用户。
-
在您的应用中，建议采用在
Auth对象上设置观察者的方式来了解用户的身份验证状态。然后您可以从User对象获取用户的基本个人资料信息。请参阅管理用户。 在您的 Firebase Realtime Database 和 Cloud Storage 安全规则中，您可以从
auth变量获取已登录用户的唯一用户 ID，然后利用此 ID 来控制用户可以访问哪些数据。
您可以将身份验证服务提供商凭据关联至现有用户帐号，让用户可以使用多个身份验证服务提供商登录您的应用。
如需将用户退出登录，请调用 signOut：
Web 版本 9
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
Web 版本 8
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});