reCaptcha复选框旋转15秒，然后保持未选中状态

Question

我已将reCaptcha放在网站上。 reCaptcha加载没有问题，但是一旦您单击复选框，它就会旋转15秒，并且保持未选中状态。它还没有与Google建立任何后台连接（POST）来评估点击（应该发生）。

https://us-central1-chatbot-em-react.cloudfunctions.net/conversa

我已将其添加到网站的标题中，这是第一个加载的脚本。

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

我还将此字段添加到了我的登录表单中：

<div class="g-recaptcha" data-sitekey="6LcGv3MUAAAAALdBp38mExUgAAAAAAH_IX522Gr" style="transform:scale(0.75);transform-origin:100% 0;"></div>

当我单击复选框时，没有网络活动（在开发人员工具的“网络”选项卡中），并且在控制台选项卡中唯一看到的是来自reCaptcha的2个奇怪的错误：

我在相同的域和服务器上放置了带有上述修改的纯HTML表单，并且reCaptcha可以正常工作。所以我想这与我现有的大型代码（html和javascript）都有某种冲突。如何找到或解决冲突？

Answer 1

我遇到了同样的问题，一个无限旋转的装载机。 显然，这是由JS库引起的。 https://mootools.net/

Answer 2

我通过切换到显式渲染在网站上解决了此问题：

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit" async defer></script>

...

<div id="recaptcha"></div>

我使用recaptchaOnLoad重设全局recaptcha_rendered变量，因为我的recaptcha位于jQuery Steps向导的第二页上，我认为这使自动渲染感到困惑。我可能不需要此功能（也在上面用于加载recaptcha API的script标记中引用），但是它没有任何害处：

function recaptchaOnLoad() {
    recaptcha_rendered = false;
}

当向导切换到包含Recaptcha的页面时，我使用以下命令重置或渲染该页面：

if( recaptcha_rendered ) {
    grecaptcha.reset();
} else {
    grecaptcha.render( 'recaptcha', {
        'sitekey': 'my-site-key',
        'callback': 'recaptchaOnData',
        'expired-callback': 'recaptchaOnExpiry'
    } );
    recaptcha_rendered = true;
}

现在每次都可以使用。