Google/Firebase reCaptcha 无法使用 Angular答案

【问题标题】：Google/Firebase reCaptcha not working with angularGoogle/Firebase reCaptcha 无法使用 Angular
【发布时间】：2017-11-20 07:16:59
【问题描述】：

以下有关新 Firebase 电话身份验证的文档。他们引入了验证码作为安全/垃圾邮件措施。根据 js 文档，recaptcha 被注入到 DOM 中：

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

但是这在 AngularJS 中似乎不起作用。我试过换出窗口。对于 $window 并确保它在我的控制器中可用，但仍然没有运气。

任何帮助或指导将不胜感激。

这是我一直关注的 js 文档： https://firebase.google.com/docs/auth/web/phone-auth

【问题讨论】：

嗯，这是一个有趣的问题，但我不认为这是因为角度问题。 'recaptcha-container' 是否作为 ID 存在于您的 html 中？那行代码执行了吗？
是的，我只是使用 id="recaptcha-container" 的 div。同样有趣的是，如果我将 firebase.auth.RecaptchaVerifier 分配给 $scope 变量并 console.log 它，我可以看到它确实填充了某种形式的对象。
知道了，还有两件事，如果你尝试做$scope.$apply() 会怎样？我怀疑它会解决它，但只是一个想法。您是否在控制台中看到错误？
不幸的是，scope.apply 没有运气，控制台中什么也没有。现在只是搜索一些 Firebase/Ionic 论坛，所以当我找到解决方案时会更新

标签： javascript angularjs firebase ionic-framework recaptcha

【解决方案1】：

我在 GitHub 存储库的一个帖子中讨论了这个问题：Support for PhoneNumber Auth #990

这是一个复制粘贴，它会让您通过电话登录，并且显然可以让 recaptcha 正常工作：

更新：（已解决）

我可以确认我现在可以通过手机从 Angular 登录了！确保如果要将 ReCaptcha 用作小部件，请确保在初始化对象时创建包含 div。

我更喜欢 'invisible' 方法，所以我首先在我的 html 页面的某处放置了一个空 div：

<div id="phone-sign-in-recaptcha"></div>

在 ngOnInit() 里面我已经实例化了它：

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

解决recaptcha时触发的表单提交函数是：

this.auth.signInWithPhoneNumber(phoneNumber,     window['phoneRecaptchaVerifier']).then(function(confirmationResult){
  var code = prompt('We have send a code to ' + phoneNumber + ', please enter it here', "");
  if (code) {
    confirmationResult.confirm(code).then(function (result) {
      // User signed in successfully.
      // Reset reCAPTCHA?
      // ...
    }).catch(function (error) {
      // User couldn't sign in (bad verification code?)
      // Reset reCAPTCHA?
      // ...
    });
  }
}).catch(function(error){
  console.log(error.message);
});

为了访问全局变量grecaptcha 以调用grecaptcha.reset([widgetId])，在recaptcha 已过期或登录出错且用户需要重试的情况下，您需要这样做。

npm install @types/grecaptcha --save

然后回到你的recaptcha所在的组件模块，直接在你的导入下声明变量： declare var grecaptcha: any;

在我的代码中，我已将注释 // Reset reCAPTCHA? 替换为以下调用：

    window['phoneRecaptchaVerifier'].render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });

现在一切都很好！

【讨论】：

P.S.注意使用：window['phoneRecaptchaVerifier'] 而不是 window.phoneRecaptchaVerifier