I have implemented google Captcha in my angularjsApp.
I have this HTML
<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn()"></div>
And in my controller I have:
$scope.enableBtn = function(){
$scope.captchaSigned = true;
};
$scope.key = "xyz";
But not working and in my console return :
ReCAPTCHA couldn't find user-provided function: enableBtn()
How can I make a data-callback with Angularjs?
In your html put :
<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn"></div>
And in your controller, put :
var enableBtn = function(){
$scope.captchaSigned = true;
};
$scope.key = "xyz";
window.enableBtn = enableBtn;
This should work as it will bind the function in controller.
I have resolved with this library https://github.com/VividCortex/angular-recaptcha
instead of $scope.enableBtn = function(){ define your function as window.enableBtn = function(){
Ensure you use data-callback="enableBtn" and NOT data-callback="enableBtn()"
In Controller :
window.wrongCaptchaResponse = true;
window.recaptchaResponse = function(key) {
window.wrongCaptchaResponse = false;
};
In HTML page:
<button type="submit" ng-disabled="loginForm.$invalid || wrongCaptchaResponse">Login</button>
You can initialize recaptcha in your angular controller. eg.
inside your controller add this on a button click or initialize or timeout if you need it on page load. :
function showRecaptcha(){
if(typeof grecaptcha !='undefined'){
grecaptcha.render('register-recaptcha', {
'sitekey' : 'your_site_key',
'callback' : recaptchaCallback,
});
}
}
function recaptchaCallback(resp){
console.log(11,resp);
}<div id="register-recaptcha"></div>