recaptcha - 错误：不存在 reCAPTCHA 客户端 (reCAPTCHA v3)

Question

我已将 reCAPTCHA v3 集成到我的一种形式中。在 onload 中，右下角有一个生成的令牌和谷歌验证码标志。但是当我提交表单时，在控制台中显示一个错误，“错误：不存在 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 了解不多。我遵循了他们提供的文档，并以正确的方式使用了站点和密钥。

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

score 14 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

<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>

score 5 · Accepted Answer

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

score 3 · Accepted Answer

我遇到了这个问题，因为我grecaptcha.reset();在网站上没有任何 Recaptcha 活动时打电话

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

score 2 · Accepted Answer

在用户与之交互之前，这也发生在 Recaptcha 2 中。所以，我有一个提交按钮，它触发一个 JS 函数来检查 recaptcha 的值。为了解决没有客户端存在的问题，我做了：

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

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

score 1 · Accepted Answer

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

recaptcha - 错误：不存在 reCAPTCHA 客户端 (reCAPTCHA v3)

6 回答 6

Related

Reference