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:
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./docs/auth/web/phone-auth
Share Improve this question edited Aug 7, 2017 at 8:33 Vadim Kotov 8,2848 gold badges50 silver badges63 bronze badges asked Jun 17, 2017 at 17:25 MNelmesMNelmes 1242 silver badges19 bronze badges 4- Hmm that's an interesting problem, but I don't think it's because of angular. Does the 'recaptcha-container' exist as an ID in your html? Does that line of code execute? – Daniel Jamrozik Commented Jun 17, 2017 at 17:51
- yes, i'm simply using a div with the id="recaptcha-container". Also interestingly, if I assign the firebase.auth.RecaptchaVerifier to a $scope variable and console.log it, I can see it does have some form of object populated. – MNelmes Commented Jun 17, 2017 at 19:29
-
Gotcha, ok two more things, what if you tried doing
$scope.$apply()
? I doubt it will fix it, but just an idea. And do you see an errors in the console? – Daniel Jamrozik Commented Jun 17, 2017 at 21:32 - Unfortunately no luck with the scope.apply, nothing in the console. Just scouring some of the Firebase/Ionic forums now so will update when I find the solution – MNelmes Commented Jun 18, 2017 at 9:26
1 Answer
Reset to default 9I 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 ponent module where your recaptcha is, directly under your imports declare the variable:
declare var grecaptcha: any;
in my code I have replaced the ment // Reset reCAPTCHA?
with the following call:
window['phoneRecaptchaVerifier'].render().then(function(widgetId) {
grecaptcha.reset(widgetId);
});
All works great now!