在 JavaScript 中使用电子邮件链接进行 Firebase 身份验证

借助 Firebase 身份验证，您可以通过以下方式让用户登录：向用户发送包含链接的电子邮件，用户点击链接进行登录。在此过程中，用户的电子邮件地址也得到验证。

通过电子邮件登录的好处有很多：

流畅的注册和登录过程。
降低在不同应用中重复使用密码的风险。即使是精心挑选的密码，如果重复使用，安全性也会受到影响。
在验证用户身份的同时，验证用户是否为电子邮件地址的合法所有者。
用户只需一个可访问的电子邮件帐号即可登录，不需要拥有电话号码或社交媒体帐号。
用户可以安全地登录，而无需提供（或记住）密码。在移动设备上，输密码可能是件麻烦事。
以前使用电子邮件标识符（密码或联合登录服务）登录的现有用户可以升级为仅使用电子邮件登录。例如，用户即使忘记密码也仍可以登录，无需重置密码。

开始之前

如果您尚未将初始化代码段从 Firebase 控制台复制到您的项目（如将 Firebase 添加至您的 JavaScript 项目中所述），请先执行此操作。

为 Firebase 项目启用电子邮件链接登录

要让用户能够通过电子邮件链接登录，您必须先为 Firebase 项目启用电子邮件提供方和电子邮件链接登录方法，操作步骤如下：

在 Firebase 控制台中，打开身份验证部分。
在登录方法标签页中，启用电子邮件地址/密码提供方。请注意，必须启用电子邮件/密码登录才能使用电子邮件链接登录。
在同一部分中，启用电子邮件链接（无密码登录）登录方法。
点击保存。

发送身份验证链接到用户的电子邮件地址

要启动身份验证流程，请向用户显示一个要求其提供电子邮件地址的界面，然后调用 sendSignInLinkToEmail 以请求 Firebase 发送身份验证链接到用户的电子邮件地址。

构建 ActionCodeSettings 对象，以向 Firebase 提供有关如何构建电子邮件链接的说明。设置以下字段：
- url：要嵌入的深层链接以及要传递的任何其他状态。您必须在 Firebase 控制台的“已获授权的网域”列表中将链接的网域列入白名单。要找到这些网域，您可以转到“登录方法”标签（“身份验证”->“登录方法”）。
- android 和 ios：在 Android 或 iOS 设备上打开登录链接时使用的应用。详细了解如何配置 Firebase 动态链接以通过移动应用打开电子邮件操作链接。
- handleCodeInApp：设为 true。与其他带外电子邮件操作（密码重置和电子邮件验证）不同，登录操作必须始终在应用中完成。这是因为按照预想，在流程结束时用户应该已经登录，并且他们的身份验证状态应在应用内保持不变。
- dynamicLinkDomain：如果为项目定义了多个自定义动态链接网域，请指定在通过指定的移动应用打开链接时要使用其中哪一个网域（例如，example.page.link），否则，系统将自动选择第一个网域。
```
var actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be whitelisted 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，请参阅在电子邮件操作中传递状态部分的内容。
要求用户输入电子邮件地址。

向用户的电子邮件地址发送身份验证链接，并保存用户的电子邮件地址，因为用户可能在同一设备上完成电子邮件登录。


firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
  .then(function() {
    // 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(function(error) {
    // Some error occurred, you can inspect the code: error.code
  });

使用电子邮件链接完成登录

安全问题

为防止有人以非预期用户身份或在非预期设备上使用登录链接登录，Firebase 身份验证功能会要求在完成登录流程时提供用户的电子邮件地址。要成功登录，此电子邮件地址必须与登录链接最初发送到的地址相一致。

您可以为在请求链接的同一设备上打开登录链接的用户简化此流程，方法是在发送登录电子邮件时于本地存储他们的电子邮件地址（例如使用 localStorage 或 Cookie）。然后，使用这个地址来完成流程。请勿在重定向网址参数中传递用户的电子邮件地址并重复使用该地址，因为这可能会带来会话注入风险。

登录完成后，用户之前未经过验证的登录机制都将被移除，现有会话将失效。例如，如果之前有人使用相同的电子邮件地址和密码创建了一个未经验证的帐号，系统会移除其密码，以防之前冒名顶替并创建了该未验证帐号的人今后使用未验证的电子邮件地址和密码再次登录。

同时，请确保在生产环境中使用 HTTPS 网址，以避免您的链接被中间服务器拦截。

在网页上完成登录

电子邮件链接深层链接的格式与带外电子邮件操作（电子邮件验证、密码重置和撤销电子邮件更改）所用的格式相同。Firebase 身份验证功能提供 isSignInWithEmailLink API 来检查链接是否为电子邮件登录链接，简化了此检查过程。

要在着陆页上完成登录，请使用用户的电子邮件和包含一次性代码的实际电子邮件链接调用 signInWithEmailLink。


// 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(function(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(function(error) {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

在移动应用中完成登录

Firebase 身份验证功能使用 Firebase 动态链接将电子邮件链接发送到移动设备上。要通过移动应用完成登录，必须对应用进行配置，使其检测传入的应用链接，解析底层的深层链接，然后像通过网页流程那样完成登录。

要详细了解如何在 Android 应用中处理使用电子邮件地址登录的链接，请参阅 Android 指南。

要详细了解如何在 iOS 应用中处理使用电子邮件地址登录的链接，请参阅 iOS 指南。

使用电子邮件链接进行关联/重新验证身份

您还可以将此身份验证方法与现有用户相关联。例如，以前使用其他提供方（例如电话号码）进行身份验证的用户，可以将此登录方法添加到其现有帐号。

不同之处在于操作的后半部分：


// 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(function(usercred) {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch(function(error) {
    // Some error occurred.
  });

这也可以用于在执行敏感操作之前重新验证电子邮件链接用户的身份。


// 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(function(usercred) {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch(function(error) {
    // Some error occurred.
  });

但是，由于这个流程可能会在原始用户未登录的其他设备上结束，因此可能无法完成。在这种情况下，系统可以向用户显示错误，要求他们在同一设备上打开链接。部分状态可以在链接中传递，提供有关操作类型和用户 uid 的信息。

区分电子邮件/密码与电子邮件链接

如果您同时支持基于密码和基于链接的“使用电子邮件地址登录”，为了向密码/链接用户区分登录方法，可以使用 fetchSignInMethodsForEmail。这对于标识符优先流程（首先要求用户提供他们的电子邮件地址，然后向用户显示登录方法）非常有用：

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then(function(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(function(error) {
    // Some error occurred, you can inspect the code: error.code
  });
}

如上所述，电子邮件/密码与电子邮件/链接被视为使用不同登录方法的相同 firebase.auth.EmailAuthProvider（即 PROVIDER_ID 相同）。

后续步骤

在用户首次登录后，系统会创建一个新的用户帐号，并将其与该用户登录时使用的凭据（即用户名、密码、电话号码或者身份验证提供方信息）相关联。此新帐号存储为您的 Firebase 项目的一部分，无论用户采用何种方式登录，您项目中的每个应用都可以使用此帐号来识别用户。

在您的应用中，建议采用在 Auth 对象上设置观察者的方式来了解用户的身份验证状态。然后您可以从 User 对象获取用户的个人资料基本信息。请参阅管理用户。
在您的 Firebase 实时数据库和 Cloud Storage 安全规则中，您可以从 auth 变量获取已登录用户的唯一用户 ID，然后用其控制用户可以访问哪些数据。

您可以通过将身份验证提供方凭据关联至现有用户帐号，让用户可以使用多个身份验证提供方登录您的应用。

要让用户退出登录，请调用 signOut：

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});