Error: No reCAPTCHA clients exist (reCAPTCHA v3)

Question

我已经在我的一个表单中集成了 reCAPTCHA v3。在 onload 中，右下角会生成一个令牌和 google 验证码徽标。但是当我提交表单时，在控制台中显示错误 "Error: No reCAPTCHA clients exist"。此外，似乎 "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 2 交互之前。所以，我有一个提交按钮，它触发一个检查 recaptcha 值的 JS 函数。为了解决没有客户端存在的问题，我做了：

try {
   data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
   data["reCaptcha"] = "";
}

然后数据对象被发送到验证 recaptcha 的后端脚本。后端还会检查该字段是否为空。

Answer 3

我相信这个错误发生在 reCaptcha api.js 加载时，但您的容器还没有出现在页面上（至少对于 v2）。当我导航到页面而不是第一次加载它时，我在 React 应用程序中发生了这个错误。我没有使用 render=explicit 并使用全局命名空间 onLoadCallback，而是能够通过手动呈现验证码元素来解决它。

与其创建 <div class="g-recaptcha"></div>，不如仅给容器 div 一个 ID (<div id="recaptcha-container"></div>) 并在您的 JS 代码中呈现它（例如，在 componentDidMount 中反应应用程序）：

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

Answer 4

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

Answer 5

我遇到这个问题是因为当网站上没有任何 Recaptcha 活动时我正在调用 grecaptcha.reset();

grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
    at MX (recaptcha__en.js:507)
    at Object.Zn [as reset] (recaptcha__en.js:514)
    at <anonymous>:1:13

Answer 6

我使用的是 React，有时只渲染我的验证码容器。通过隐藏验证码按钮而不是不呈现它来修复。