执行不可见的验证码时出现“错误：无效的 ReCAPTCHA 客户端 id”

Question

我正在尝试在 WordPress 网站中以 HTML 形式实现 Google 的隐形 reCAPTCHA。

在

head

首先，我有设置回调并将表单的提交事件绑定到验证的脚本：

jQuery(document).ready(function() {
  var valid = false;

  window.recaptchaOkay = function(token) {
    valid = true;
    jQuery('#cadastro').submit();
  };

  document.getElementById('cadastro').addEventListener('submit', function validate(event) {
    if (valid) {
      return true;
    }

    var cap = document
        .getElementById('cadastro')
        .querySelector('.g-recaptcha');
    grecaptcha.execute(cap);

    event.preventDefault();
    return false;
  });
});

然后，我加载 reCAPTCHA 脚本，正如文档中所示：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

在

body

这是我正在使用的表格：

<form action="https://example.com/" method="post" id="cadastro">
    <div
        class="g-recaptcha"
        data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
        data-callback="recaptchaOkay"
        data-size="invisible"
        id="cadastro-captcha">
    </div>
    <button type="submit" id="cadastro-submit">Enviar</button>
</form>

发生了什么

我填写表格并提交，然后抛出以下错误（在带有

grecaptcha.execute

的行中）：

Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]

还尝试将

cadastro-captcha

ID 作为字符串直接传递给该函数（例如

grecaptcha.execute("cadastro-captcha")

），但发生了相同的错误（显然 id 不同）。同样，如果我不传递任何参数，也会发生相同的错误，除了它指的是

undefined

。

Answer 1

试试这个：--

grecaptcha.reset() 方法接受一个可选的 widget_id 参数，如果未指定，则默认为创建的第一个小部件。对于创建的每个小部件，从 grecaptcha.render() 方法返回一个 widget_id。因此，您需要存储此 ID，并使用它来重置该特定小部件：

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

如果需要更多信息，请阅读 google recaptcha 文档：-- https://developers.google.com/recaptcha/docs/display#js_api

Answer 2

您应该遵循 render 方法的

未记录

行为：

const widget_id = grecaptcha.render(
  container,
  parameters
)

（来源：https://developers.google.com/recaptcha/docs/display#js_api）

调用该方法实际上会返回一个

widget_id

，如果页面上存在多个小部件，则需要使用它来引用正确的小部件。

感谢@dewd 在评论中指出了这一点。