javascript - Google/Firebase reCaptcha无法与angular一起使用

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

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

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

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

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

最佳答案

我在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])，如果重新验证已过期或登录错误并且用户需要重试，则需要执行此操作。

npm install @types/grecaptcha --save

返回到您的Recaptcha所在的组件模块中，直接在导入下声明变量：
declare var grecaptcha: any;

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

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

现在一切正常！