新的ReCaptcha(隐形)不起作用

Question

我正在尝试实现新的隐形reCaptcha,但它无法正常工作.

首先,事件艰难我用"隐形"选项创建了一个新密钥,更改了我的应用程序中的密钥,当我查看我的控制台时,我可以看到这个请求:

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

我认为这不是正确的api,对吧？

我的导入部分的代码是这样的:

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

哪个是正确的根据文件......

其次,我选择将验证码放在div中(根据文档可以):

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

我也使用render函数来声明回调和site-key:

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

这可以作为验证码解决方案,但不是隐形的,因为它仍然显示框.我知道我也必须使用执行功能,但由于我仍然看到了这个盒子,我想我还没有进入那个阶段......有人能帮帮我吗？

Answer 1

在"不可见"重访的情况下,grecaptcha.render()api采用可选的第三个布尔参数调用inherit并默认为false.如果将其值指定为true,则只有recaptcha使用.g-recaptcha元素上的现有data-*属性作为未在选项中指定的参数render(),否则它将视为缺少参数.

由于您没有使用true值传递此参数,因此它永远不会读取data-size="invisible"您对HTML元素的值,从而继续将其呈现为可见的重新绑定.

试试这个:

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