ReCaptcha3：用户执行操作时如何调用执行？

Question

当像这样包含 ReCaptcha3 时，我设法让 ReCaptcha3 正常工作：

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
       document.getElementById("googletoken").value= token;
    });
</script>

然而，在 docs 中我发现了以下注释：

Note: reCAPTCHA tokens expire after two minutes. If you're protecting an action with reCAPTCHA, make sure to call execute when the user takes the action.

由于我在联系表上使用了 reCAPTCHA，因此用户可能会花两分钟以上的时间来写东西。

因此，我尝试在提交时执行密钥（警报仅用于测试）：

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {
        alert('hi');
        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
           alert('Iam invisible');
           document.getElementById("googletoken").value= token;
        });
      }, false);
  });
</script>

现在提示 "Hi"，但不会显示 "Iam invisible"。因此，我在服务器端得到一个 missing-input-response 。为什么 then 没有在 addEventListener 内触发？

Answer 1

问题是在异步调用 grecaptcha.execute 完成之前提交了表单。要解决此问题，需要手动提交：

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {

        event.preventDefault();

        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {

           document.getElementById("googletoken").value= token; 
           document.getElementById('contactform').submit();
        });

      }, false);

  });
</script>