-2

我正在尝试设置 reCaptcha v3 并且它有点工作。出于某种原因,我第一次提交表单时失败了,但从第二次提交开始就很好了。我不明白为什么会这样?

<script src="https://www.google.com/recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
grecaptcha.ready(function () {
    grecaptcha.execute('MY_SITE_KEY', { action: 'contact' }).then(function (token) {
        var recaptchaResponse = document.getElementById('captcha-response');
        recaptchaResponse.value = token;
    });
});
</script>




 <input type="hidden" name="captcha-response" id="captcha-response">

PHP

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);

     if(!$responseData->score < 0.5) {
      $message .= "Verification failed " . $responseData->score;
  }

当我第一次提交表单时,我收到验证错误,但我的分数是 0.9。

4

2 回答 2

0

为什么你添加了“!” 用“$responseData->score”?您可能需要用以下内容替换您的状况:

替换这个:

if(!$responseData->score < 0.5) {
    $message .= "Verification failed " . $responseData->score;
}

有了这个:

if($responseData->score < 0.5) {
    $message .= "Verification failed " . $responseData->score;
}

PS:以下代码需要几秒钟才能正确加载并获得“captcha-reponse”代码,因此您可能需要禁用所有提交按钮并等到您获得“captcha-reponse”以启用表单中的提交按钮或您需要实施另一种方式来延迟提交仅在您获得“验证码响应”代码后执行,否则您将不断收到“缺少输入响应”错误消息

<script src="https://www.google.com/recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('MY_SITE_KEY', {
      action: 'contact'
    }).then(function(token) {
      var recaptchaResponse = document.getElementById('captcha-response');
      recaptchaResponse.value = token;
    });
  });
</script>
于 2019-09-30T08:37:01.643 回答
0

发生错误表单验证后,您应该重新生成 reCaptcha 令牌。令牌 reCaptcha 仅在 ONE TIME 内有效。

因此,您有两种选择来解决此问题。

1.出现错误时重新加载页面

这是最简单的方法。您只需在发生表单验证错误时重新加载页面。

当然,这会触发 reCaptcha 生成新的令牌。

2. 使用 AJAX 处理(非重载页面)

这是最好的方法,因为这将帮助用户不丢失表单数据并继续填写表单。

所以,这就是你应该做的。

<!-- Put this hidden input inside of your form tag -->
<input name="_recaptcha" type="hidden">

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITEKEY_HERE"></script>
<script>
  // This will generate reCaptcha token and set to input hidden
  const generateRecaptcha = function() {
    grecaptcha.execute(
      "YOUR_SITEKEY_HERE", {
        action: "YOUR_ACTION_NAME"
      }).then(function(token) {
      if (token) {
        document.querySelector("input[name='_recaptcha']").value = token;
      }
    });
  }

  // Call it when page successfully loaded
  grecaptcha.ready(function() {
    generateRecaptcha();
  });

  // Do your AJAX code here
  $.ajax({
    url: "https://example.com",
    success: function(response) {
      console.log(response);
    },
    error: function(error) {
      // Call again the generator token reCaptcha whenever error occured
      generateRecaptcha();
    }
</script>

不要忘记输入您的站点密钥和您的操作名称。确保操作名称与您的后端操作名称匹配。

媒体文章

于 2021-04-23T15:19:55.470 回答