如何使用Firebase隐形reCAPTCHA用于角度Web应用程序？

Question

希望看到一个有效的例子.搜索了一下,似乎无法让它在本地工作.始终显示隐私条款徽标,用户必须与验证码进行互动.

这是我为加快速度而创建的一个codepen.

来自Firebase-Docs:

使用隐形reCAPTCHA

要使用不可见的reCAPTCHA,请创建一个RecaptchaVerifier对象,其size参数设置为不可见,指定提交登录表单的按钮的ID.

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

基本上我在init的这个视图中有什么:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved - will proceed with submit function
    console.log(response);
  },
  'expired-callback': function() {
    // Reset reCAPTCHA?
  }
});

<form name="mobile" novalidate>
  <label class="item item-input">
    <i class="icon placeholder-icon"></i>
    <input type="tel" name="number" ng-model="$ctrl.user.mobile">
  </label>
  <button id="sign-in-button" ng-click="$ctrl.onSignInSubmit(user.mobile)"></button>
</form>
<div id="phone-sign-in-recaptcha"></div>

这是在提交时调用的函数:

ctrl.onSignInSubmit = function() {
  var phoneNumber = '+1' + ctrl.user.mobile;
  var appVerifier = window.recaptchaVerifier;

  firebase.auth()
    .signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function(confirmationResult) {
      ctrl.hasCodeToVerify = true;
      console.log('confirmationResult', confirmationResult);
      window.confirmationResult = confirmationResult;
    }).catch(function(error) {
      console.log('error', error);
    });
};

Answer 1

这是一个不可见的 reCAPTCHA 的工作示例：

https://github.com/firebase/quickstart-js/blob/master/auth/phone-invisible.html

在您的代码中，在调用 后signInWithPhoneNumber，不可见的 reCAPTCHA 应该显示一个质询，该质询在解决后，用 解决待处理的承诺confirmationResult，或者直接解决而不显示任何质询。

当该承诺以 解决时confirmationResult，您应该向用户询问 SMS 代码。然后您调用confirmationResult.confirm(code) 这将完成用户的登录。

firebase
  .auth()
  .signInWithPhoneNumber(phoneNumber, appVerifier)
  .then(function(confirmationResult) {
    var code = window.prompt("Please enter your code");
    return confirmationResult.confirm(code);
  })
  .then(function(result) {
    // User is signed in now.
  })
  .catch(function(error) {
    console.log("error", error);
  });