将 Recaptcha 与表单上的现有 onsubmit 处理程序一起使用答案

【问题标题】：Using Recaptcha with an existing onsubmit handler on the form将 Recaptcha 与表单上的现有 onsubmit 处理程序一起使用
【发布时间】：2019-06-27 01:06:48
【问题描述】：

我正在尝试将 Google 的 reCaptcha v2 invisible 集成到表单的 onsubmit 处理程序已经附加了一个执行客户端验证的功能的现有页面上。如果该函数返回true，表单将提交并重定向到另一个页面。

我现有的实现确实会强制显示 recaptcha 验证器，如果它确定您是机器人，但在表单仍然成功提交并重定向到下一页之后立即出现。

预期的结果是，如果客户端验证通过，它应该执行 recaptcha 并显示 recaptcha 验证器，如果它的启发式认为你是机器人并且阻止表单提交，直到你通过它的验证器.

作为参考，我正在通过这种方法测试验证码：https://stackoverflow.com/a/52036368/2684075

这是实现

<form 
  class="elq-form"
  onsubmit="return handleFormSubmit(this)"
  ...
>
...
</form>

...

<div 
  class="g-recaptcha" 
  data-sitekey="MY_SITEKEY"
  data-callback="recaptchaOnSubmit"
  data-size="invisible"
>
</div>

<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

<script>
    function recaptchaOnSubmit() {
      console.log('recaptcha success');
    }

    (function() {
        var form = document.querySelector('.elq-form');
        var originalSubmit = form.onsubmit;
        form.onsubmit = null;

        form.onsubmit = function() {
          var isValid = originalSubmit.call(form);

          if (isValid) {
            window.grecaptcha.execute();
            console.log('grecaptcha executed')
          }

          return isValid;
        }

    })()
</script>

【问题讨论】：

标签： javascript html forms recaptcha invisible-recaptcha

【解决方案1】：

你可以发布handleFormSubmit()函数的内容吗？

我建议使用 jQuery 来处理您的事件，因为这听起来像是在现有项目之上编写？

reCAPTCHA 的隐形版本是第 3 版，对吗？我很感兴趣，如果 reCAPTCHA 通过版本 3 将您视为机器人，您是否显示版本 2？

$('.elq-form').submit(function () {
   // Determine if the reCAPTCHA is successful, ie, use a backend PHP script to validate
   if (response == true) {
      // return true from the form, therefore, it will proceed
      return true;
   }
   else {
      // reCAPTCHA came back as invalid, therefore do not continue.
      // We can display an error (paragraph) or anything you like
      return false;
   }
});

如果您还没有检查过，我也可以建议https://developers.google.com/recaptcha/docs/v3 吗？因为它提供了客户端JS嵌入的示例。

希望这会有所帮助，

【讨论】：