Google/Firebase reCaptcha无法使用angular

Question

以下是新Firebase电话身份验证的文档.他们引入了recaptcha作为安全/垃圾邮件措施.根据js文档,recaptcha注入到DOM中:

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

但是,这似乎不适用于AngularJS.我试过换掉窗户.对于$ window并确保这在我的控制器中可用,但仍然没有运气.

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

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

Answer 1

我在GitHub repo的一个帖子中讨论过这个:支持PhoneNumber Auth#990

这是一个复制粘贴,它将让你通过电话登录,显然得到recaptcha工作:

更新:(已解决)

我可以确认我现在能够通过移动设备从角落登录!确保是否要将ReCaptcha用作窗口小部件,确保在初始化对象时创建包含div.

我更喜欢"隐形"方法,所以我首先在我的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);
    });

一切都很棒!