recaptcha - 错误 : No reCAPTCHA clients exist (reCAPTCHA v3)

Question

我在我的一种表单中集成了 reCAPTCHA v3。在 onload 中，右下角有一个生成的 token 和谷歌验证码标志。但是当我提交表单时，在控制台中会显示一个错误，“错误:不存在 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”。

我对谷歌 reCaptcha 不太了解。我遵循了他们提供的文档，并以正确的方式使用了站点和 key 。

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

Answer 1

我相信当 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"
  });
});