错误：不存在任何reCAPTCHA客户端（reCAPTCHA v3）

Question

我以一种形式集成了reCAPTCHA v3。在onload中，在右下角产生了一个令牌和google captcha徽标。但是，当我提交表单时，在控制台中显示了一个错误，“错误：不存在reCAPTCHA客户端”。同样，似乎没有数据通过“ g-recaptcha-response”获取，并且$ _POST [“ g-recaptcha-response”]保持为空。

这是示例代码：

<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>

提交表单时，它不会产生任何“ g-recaptcha-response”。

我对Google reCaptcha不太了解。我遵循了他们提供的文档，并以适当的方式使用了站点和密钥。

谁能告诉我问题出在哪里以及可能的解决方法是什么？

Answer 1

在尝试发送请求之前，您是否尝试过加载脚本？

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

Answer 2

我相信在加载reCaptcha api.js时会发生此错误，但是您的容器尚未出现在页面上（至少对于v2而言）。当我导航到页面而不是首先加载页面时，我在React应用程序中发生了此错误。我不再使用render=explicit和使用全局名称空间onLoadCallback，而是能够通过手动呈现captcha元素来解决它。

而不是创建一个<div class="g-recaptcha"></div>，只给容器div一个id（<div id="recaptcha-container"></div>），然后在您的JS代码中呈现它（例如，在componentDidMountReact应用程序中）：

grecaptcha.ready(function() {
  grecaptcha.render("recaptcha-container", {
    "sitekey": "your-site-key"
  });
});

Answer 3

当我在 reCAPTCHA v3 中遇到这个问题时，是因为我没有将正确的站点密钥传递给它。