完全來自 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
});