Google recaptcha is not working with AngularJS

Question

I'm trying to implement Google captcha like this:

<form name="myForm" ng-submit="doSomething()">
   <div class="g-recaptcha" data-sitekey="my-key"></div>
   <input type="submit" value="Submit">
</form>

In my head tag:

<script src='https://www.google.com/recaptcha/api.js'></script>

And the captcha is not showing there. What am I missing?

Answer 1

I had the same problem, I was using "grunt server" and grunt was running the application at 0.0.0.0:9000. With that reCaptcha would not show, when I changed to localhost:9000 or 127.0.0.1 it worked.

I hope it helped.

Answer 2

if you using recapcha + AngularJS, on alter route, normaly you lost the reference of recapcha, more the solution on captcha async is:

in the callback function , before de reload script, create a simple validation,

Note: 'captchaContainer' is the trigger of reload or not (not create two instance in same page) then you can alter the route infinitily.

example:

 if (captchaContainer == undefined) {
    var captchaContainer = null;
    var loadCaptcha = function () {
        try {
            captchaContainer = grecaptcha.render('captcha_container', {
                'sitekey': 'Your_key_____'
            });
        } catch (e) {
            if (e.message != 'ReCAPTCHA placeholder element must be empty') {
                return setTimeout('loadCaptcha();', 300);
            }
        }
    };
    loadCaptcha();
}