完全来自 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

那你就这样使用我的函数：

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

完全来自 javascript 的不可见重新验证码，无需提交表单

Invisible re-captcha fully from javascript without form submission

javascript

recaptcha

invisible-recaptcha