执行不可见的验证码时出现"错误:ReCAPTCHA客户端ID无效"

Question

我正在尝试在Wordpress网站上以HTML格式实施Google的Invisible 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-captchaID直接传递给该函数作为字符串(例如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 docs: - https://developers.google.com/recaptcha/docs/display#js_api