Google/Firebase reCaptcha not working with angular

问题

Following documentation for new Firebase phone authentication. They have introduced a recaptcha as a security/spam measure. According to the js documentation the recaptcha is injected into the DOM with:

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

However this does not appear to work in AngularJS. I have tried swapping out window. for $window and ensured this was available in my controller, but still no luck.

Any help or guidance would be greatly appreciated.

This is the js documentation I've been following: https://firebase.google.com/docs/auth/web/phone-auth

回答1:

I discussed this in a thread on the GitHub repo: Support for PhoneNumber Auth #990

Heres a copy-paste, it will get you signed in via phone and obviously get the recaptcha working:

UPDATED: (Resolved)

I can confirm I am now able to sign in via mobile from angular! Make sure if you want to use the ReCaptcha as a widget, ensure that that the containing div is created when the object is initialized.

I prefer the 'invisible' method, so I first put an empty div somewhere on my html page:

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

and inside ngOnInit() i have instantiated it:

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?
  }
});

The form submit function which is fired when the recaptcha is solved is:

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);
});

In order to access the global variable grecaptcha to call grecaptcha.reset([widgetId]), which you will want to do in the case that the recaptcha has expired or there is an error signing in and users need to try again.

npm install @types/grecaptcha --save

and back in your component module where your recaptcha is, directly under your imports declare the variable: declare var grecaptcha: any;

in my code I have replaced the comment // Reset reCAPTCHA? with the following call:

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

All works great now!

来源：https://stackoverflow.com/questions/44607414/google-firebase-recaptcha-not-working-with-angular

标签

javascript

angularjs

firebase

ionic-framework

recaptcha