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

【问题标题】：New ReCaptcha (invisible) not working新的 ReCaptcha（不可见）不起作用
【发布时间】：2017-03-19 23:04:56
【问题描述】：

我正在尝试实现新的隐形 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>

我也在使用渲染函数来声明回调和站点键：

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

这可以用作验证码解决方案，但不能用作不可见的解决方案，因为它仍在显示框。我知道我也必须使用执行功能，但由于我仍然看到该框，我想我还没有处于那个阶段..有人可以帮助我吗？

【问题讨论】：

标签： recaptcha invisible-recaptcha

【解决方案1】：

在“不可见”recaptcha 的情况下，grecaptcha.render() api 采用名为inherit 的可选第三个布尔参数，默认为false。如果它的值被指定为true，那么只有当recaptcha 使用.g-recaptcha 元素上现有的data-* 属性来处理render() 的选项中未指定的参数时，否则它就将其视为缺少参数。

由于您没有使用 true 值传递此参数，因此它永远不会读取您在 HTML 元素上拥有的 data-size="invisible" 值，从而继续将其呈现为可见的 recaptcha。

试试这个：

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

【讨论】：