时间戳

首页 > 解决方案 > 将 Recaptcha 与表单上的现有 onsubmit 处理程序一起使用

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

问题描述

我正在尝试将 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>

标签： javascripthtmlformsrecaptchainvisible-recaptcha

解决方案

您可以发布 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 嵌入提供了一个示例。

希望这可以帮助，

推荐阅读