javascript - 隐形 ReCapcha 不调用回调

Question

我有这样的隐形验证码设置：

<!-- CAPCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha"
    data-sitekey="6LchqW0UAAAAANOoHruD0Ql5aNJIZld4EwLiaf-W"
    data-callback="capchaDone" data-size="invisible">
</div>

并且回调函数在这里定义：

window.capchaDone = function(response) {
    console.log("DONE");
    console.log("RES", response);
};

但是没有任何记录。我还尝试在 Javascript 中找到一个简单的实现。但没有关于此的真实文档

Answer 1

从文档开始，如果您将操作附加到 DIV，您还必须grecaptcha.execute();从 JavaScript 调用，以便执行 reCAPTCHA。假设您有这样的表格：

<!-- CAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha"
    data-sitekey="6LchqW0UAAAAANOoHruD0Ql5aNJIZld4EwLiaf-W"
    data-callback="capchaDone" data-size="invisible">
</div>

<form id="loginForm">
  <input type="text" name="username" id="usernameField" />
  <input type="password" name="password" id="passwordField" />
  <input type="submit" />
</form> 

并附加一个提交事件监听器，你必须在那里调用 reCAPTCHA：

document.querySelector("#loginForm").addEventListener("submit", function() {
  /** Validate input **/
  grecaptcha.execute(); // hand execution off to `data-callback`
});

data-callback验证响应后，您可以在函数中提交表单。

function capchaDone(response) {
  console.log(response)
  /** Validate reCAPTCHA **/
  document.querySelector("#loginForm").submit() // at last, submit the form
}