使用 JavaScript 通过电话号码进行 Firebase 身份验证

借助 Firebase 身份验证,您可以通过向用户电话发送短信的方式协助用户登录。用户使用短信中包含的一次性验证码登录。

向应用中添加电话号码登录方式的最简单方法是使用 FirebaseUI,它包括一个普适性登录微件,可为电话号码登录方式、基于密码的登录方式和联合登录方式实现登录流程。本文档介绍了如何使用 Firebase SDK 实现电话号码登录流程。

开始之前

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

安全问题

与其他可用的方法相比,仅使用电话号码进行身份验证的方式虽然便捷,但安全性较低,因为同一电话号码很容易流转给不同用户使用。此外,在具有多份用户个人资料的设备上,任何一位可以收到短信的用户都能使用该设备的电话号码登录帐号。

如果您在应用中使用基于电话号码的登录,则应同时提供更安全的登录方法,并将使用电话号码登录的安全隐患告知用户。

为您的 Firebase 项目启用电话号码登录

要让用户能够通过短信登录,您必须先为 Firebase 项目启用电话号码登录功能,操作步骤如下:

  1. Firebase 控制台中,打开身份验证 (Authentication) 部分。
  2. 登录方法页面上,启用电话号码登录方法。
  3. 在同一页面上,如果 OAuth 重定向网域部分未列出将托管您应用的网域,请添加您的网域。

Firebase 的电话号码登录请求的配额非常充足,大多数应用都不会受到配额问题的影响。但是,如果您需要通过电话号码身份验证让数量非常多的用户登录,则可能需要升级您的定价方案。请参阅定价页面。

设置 reCAPTCHA 验证程序

在让用户使用其电话号码登录之前,您必须设置 Firebase 的 reCAPTCHA 验证程序。Firebase 使用 reCAPTCHA 来防止滥用行为,实现方法包括确保电话号码验证请求来自您应用允许的一个网域。

您无需手动设置 reCAPTCHA 客户端;在使用 Firebase SDK 的 RecaptchaVerifier 对象时,Firebase 会自动创建和处理任何必要的客户端加密密钥和解密密钥。

RecaptchaVerifier 对象支持不可见的 reCAPTCHA(通常无需任何用户操作便能验证用户身份)以及 reCAPTCHA 微件(始终需要用户互动才能成功完成验证)。

在底层呈现的 reCAPTCHA 可以根据用户的偏好设置进行本地化,方法是在呈现 reCAPTCHA 之前更新身份验证实例中的语言代码。发送给用户的短信(其中包含验证码)也会相应地进行本地化。

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

使用隐形 reCAPTCHA

要使用隐形 reCAPTCHA,请创建一个 RecaptchaVerifier 对象并将其 size 参数设置为 invisible,同时指定用于提交登录表单的按钮的 ID。例如:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

使用 reCAPTCHA 微件

要使用可见的 reCAPTCHA 微件,请在页面上创建一个包含此微件的元素,然后再创建一个 RecaptchaVerifier 对象,同时指定该容器的 ID。例如:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

可选:指定 reCAPTCHA 参数

您可以选择针对 RecaptchaVerifier 对象设置回调函数,用于在用户解析 reCAPTCHA 或 reCAPTCHA 在用户提交表单前到期的情况下调用:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': function() {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

可选:预呈现 reCAPTCHA

如果您要在提交登录请求之前预呈现 reCAPTCHA,请调用 render

recaptchaVerifier.render().then(function(widgetId) {
  window.recaptchaWidgetId = widgetId;
});

render 进行解析之后,您就会获得 reCAPTCHA 的微件 ID,此 ID 可用于调用 reCAPTCHA API:

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

向用户的电话发送验证码

要启动电话号码登录,请向用户显示一个要求其提供电话号码的界面,然后调用 signInWithPhoneNumber 以请求 Firebase 通过短信向用户电话发送身份验证代码:

  1. 获取用户的电话号码。

    虽然相关的法律要求可能不尽相同,但为了让用户心中有数,最佳做法是您将以下事宜告知用户:如果用户使用电话登录方式,则可能会收到一条验证短信,并需按标准费率支付短信费用。

  2. 调用 signInWithPhoneNumber,向其传递用户的电话号码和您之前创建的 RecaptchaVerifier
    var phoneNumber = getPhoneNumberFromUserInput();
    var appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
        }).catch(function (error) {
          // Error; SMS not sent
          // ...
        });
    
    如果 signInWithPhoneNumber 导致错误,请重置 reCAPTCHA,以便用户重试:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

signInWithPhoneNumber 方法会向用户发起 reCAPTCHA 挑战,如果用户通过这项挑战,则会请求 Firebase 身份验证向用户电话发送一条含有验证码的短信。

使用验证码进行用户登录

signInWithPhoneNumber 调用成功之后,提示用户输入自己通过短信收到的验证码。然后,将此验证码传递给 ConfirmationResult 对象的 confirm 方法(该方法已被传递给 signInWithPhoneNumber 的履行状况处理程序,即它的 then 块),使用户登录到帐号。例如:

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (error) {
  // User couldn't sign in (bad verification code?)
  // ...
});

如果 confirm 调用成功,则表示用户已成功登录。

获取中间 AuthCredential 对象

如果您需要获取用户帐号的 AuthCredential 对象,请将确认结果返回的验证码和相应验证码传递给 PhoneAuthProvider.credential,而不是调用 confirm

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

然后,您可以使用该凭据进行用户登录:

firebase.auth().signInWithCredential(credential);

后续步骤

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

  • 在您的应用中,要了解用户的身份验证状态,建议在 Auth 对象上设置一个观察者。您可以从 User 对象获取用户的个人资料基本信息。请参阅管理用户

  • 在您的 Firebase 实时数据库和 Cloud Storage 安全规则中,您可以从 auth 变量中获取已登录用户的唯一用户 ID,然后用此 ID 来控制用户可以访问哪些数据。

您可以允许用户通过多种身份验证提供方服务登录您的应用,只需将多个身份验证提供方凭据关联至现有用户帐号即可。

要让用户退出登录,可调用 signOut

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

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面