javascript - 执行隐形验证码时的"Error: Invalid ReCAPTCHA client id"

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

在head中

首先，我有一个脚本来设置回调并将表单的Submit事件绑定(bind)到验证:

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。

最佳答案

试试这个:-

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

关于javascript - 执行隐形验证码时的"Error: Invalid ReCAPTCHA client id"，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47371102/