Question

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

我现有的实现确实会在确定自己是机器人的情况下强制显示Recaptcha验证器，但是在表单仍然成功提交并重定向到下一页之后立即显示。

预期结果是，如果客户端验证通过，则应执行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>

Answer 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嵌入的示例。

希望这会有所帮助，

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

1 个答案: