新的ReCaptcha（不可见）不起作用

Question

I am trying to implement the new invisible reCaptcha, but it is not working.

First, event tough I have created a new key with the "invisible" option, changed the key in my application, when I look in my console I can see this request:

https://www.google.com/recaptcha/ api2 /anchor?k=.....

I think this is not the correct api, right?

My code for the importing part is like this:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Which is right according to the doc...

Second, I chose to put the captcha in a div (which is ok according to the doc):

<div id="captchaSignup" class="g-recaptcha" data-size="invisible" data-badge="inline"></div>

I am also using the render function to declare the callback and the site-key:

grecaptcha.render(document.getElementById('captchaSignup'), { 'sitekey' : '...', 'callback' : function(response) {$rs.validCaptcha=response;$s.$apply()} });

This works as a captcha solution, but not as the invisible one since it is still showing the box. I know that I also have to use the execute function, but since I am still seeing the box, I think I am not in that phase yet.. Can anybody help me?

Answer 1

In case of "invisible" recaptcha, grecaptcha.render() api takes optional third boolean parameter called inherit and defaults to false . If its value is specified as true , only then recaptcha uses existing data-* attributes on .g-recaptcha element for parameters not specified in options to render() , otherwise it treats as if the parameter is missing.

Since you are not passing this parameter with true value, it never reads data-size="invisible" value that you have on your HTML element and thereby goes on to render it as visible recaptcha.

Try this:

grecaptcha.render(document.getElementById('captchaSignup'), {
                    'sitekey' : '...',
                    'callback' : function(response) { ... }
                  }, true);       // <-- this is the change. Pass "true" here