使用 Google reCAPTCHA 驗證表單提交

Question

我看過這個問題

並嘗試將該問題的答案實施到我的代碼中以驗證我的表單，以便在驗證碼尚未完成時它不會提交。

但是什么也沒有發生 - 它只是提交表單。

這是我的代碼：

 <head>

        <script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'my_site_key'
    });
  };
</script>

 </head>

          <div id="html_element"></div>
      <br>

      <input type="submit" value="Submit" onclick="myFunction">

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
function myFunction() {    
if(grecaptcha.getResponse() == "")
    alert("You can't proceed!");
else
    alert("Thank you");}
 </script>

任何人都可以幫忙嗎？

編輯

<html>
<head>
        <script type="text/javascript">

var onloadCallback = function() {
    grecaptcha.render('html_element', {
    'sitekey' : 'site-key'
  });
};
onloadCallback();

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});
           </script>
</head>
<body>
        <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>

 </script>
    </body>

Answer 1

您需要在event 中觸發if語句。 如果您使用 jQuery，您可以很容易地做到這一點：

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

請參閱此處的工作示例： JSFiddle

在 JavaScript 中執行此操作的問題在於，如果用戶願意，可以輕松偽造結果。 如果您真的想檢查用戶是否是機器人，您仍然應該使用您的 reCAPTCHA 密鑰在服務器端比較用戶（通過 POST）提交的結果。

Answer 2

這是服務器端解決方案，除了谷歌提供的嵌入代碼外，不需要 jQuery/javascript。

當用戶在您的站點上提交包含 reCaptcha 的表單時，請在服務器端查找“g-recaptcha-response”POST 參數。

然后將您自己的 http post 請求發送到此網址： https : //www.google.com/recaptcha/api/siteverify

您作為此請求的一部分發送的 POST 參數是：

秘密 - 必需。 您的站點和 reCAPTCHA 之間的共享密鑰。

響應 - 必需。 reCAPTCHA 提供的用戶響應令牌，用於驗證您網站上的用戶。

remoteip - 可選。 用戶的 IP 地址。

然后你應該從谷歌得到這樣的東西，你可以檢查是否成功。

{ "success": true|false, "challenge_ts": timestamp, // 挑戰加載的時間戳（ISO 格式 yyyy-MM-dd'T'HH:mm:ssZZ） "hostname": string, // 主機名解決 reCAPTCHA 的站點“錯誤代碼”：[...] // 可選 }

如果 success = true，則顯示成功消息，或重定向到成功頁面。

如果成功 = false，則再次顯示該表單，並顯示一條消息，說明它們有可能是機器人，請再試一次。

請參閱此處了解更多信息：

https://developers.google.com/recaptcha/docs/verify , http://dotnettec.com/google-recaptcha-example-javascript/

使用 Google reCAPTCHA 驗證表單提交

問題描述

2 個解決方案

解決方案1
6 已采納 2015-12-07 12:49:30

解決方案2
-1 2018-01-17 19:28:24

使用 Google reCAPTCHA 驗證表單提交

問題描述

2 個解決方案

解決方案1 6 已采納 2015-12-07 12:49:30

解決方案2 -1 2018-01-17 19:28:24

解決方案1
6 已采納 2015-12-07 12:49:30

解決方案2
-1 2018-01-17 19:28:24