網頁

▼

reCaptcha設定方法

  • 進入recaptcha網站以gmail帳號登入後，點選”Get reCAPTCHA” 即可進入下圖的畫面，輸入label 名稱及欲使用網站的domain name，會在個人的reCAPTCHA sites中產生一筆記錄如下圖步驟3所示。


  • 點選上圖步驟3後，即可進入你設定的site reCAPTCHA內容畫面，如下圖所示。其中步驟1為client端的設定方式(即登入畫面)，步驟2為server端的驗證方法。
  • 以下為Login畫面的程式其中”your_site_key”可放入上圖data-sitekey內容。


<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
    var verifyCallback = function(response) {
    alert(response);
    };
    var widgetId1;
    var onloadCallback = function() {
       widgetId1 = grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
       });
    };
   function checkHumanLogin(){
      strMessage=grecaptcha.getResponse(widgetId1);
      if (strMessage.trim()==""){
      alert("請點選　［我不是機器人］　選項");
      return false;
      }
   }
</script>
</head>
<body>
   <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit" onClick="return checkHumanLogin();">
  </form>
  <script src="https://www.google.com/recaptcha/api.js onload=onloadCallback&render=explicit" async defer>
   </script>
</body>
</html>



  • server端為防止駭客攻繫，請務必進行驗證，無證以get或post的方式傳送若成功送出，在server端會取得一個g-recaptcha-response的變數，server 端可以此變數內容加上secret的key內容至api網址https://www.google.com/recaptcha/api/siteverify?secret=XXX&response=XXX
  • secret變數值為secret key的內容，response變數值為g-recaptcha-response的回傳內容。讀取回傳的json資料，其格式如下

API Response

The response is a JSON object:
{
 "success": true|false,
 "error-codes": [...]   // optional
}



沒有留言:

張貼留言