完全来自 javascript 的隐形重新验证码，无需提交表单

Question

我正在尝试在通过 JS 提交的表单上使用不可见的 re-captcha v2。 我在网上看到的每个示例都显示了一个普通的普通 HTML 提交的表单，带有指定的操作和方法，但我在表单上使用preventDefault()来使用 ajax 提交它。 这似乎是一件很简单的事情，但我已经搜索了几个小时，但在网上找不到一个曾经这样做过的人。

HMTL：

<form id="form-login">
  <!-- ...form fields... -->

  <div
      class="g-recaptcha"
      data-sitekey="<site_key>"
      data-size="invisible"
    ></div>
  <button class="uk-button uk-button-primary" type="submit">Submit</button>
</form>

JS：

$('#form-login').submit(function(event) {
  event.preventDefault();

  console.log(grecaptcha.getResponse()); // <-- always comes back empty
});

我可以看到验证码正在初始化，因为我可以看到右下角的图标。

我见过grecaptcha.execute()但它似乎对我没有任何作用。

控制台中没有错误。

Answer 1

最近我遇到了像你这样的问题，让验证码不可见给我带来了很多问题，例如https://github.com/google/recaptcha/issues/269这仍然是 GitHub 上的未解决问题。

我在每次提交表单时使用动态生成的验证码解决了这个问题。 这是我使用的一些代码。 （注释代码是调用后端以使用 Google API 验证响应）。

https://gist.github.com/ANTOSzbk/75ed7003e914162550f61399122a3bd4

然后你只需像这样使用我的 function ：

$('#form-login').submit(async function(event) {
  event.preventDefault();
  const response = await captchaVerification();
  if (response) { } // proper submit code execution
  else { } // on invalid captcha response
});