2016年4月29日 星期五

如何使用Google的圖形驗證碼(reCAPTCHA)防止機器人


前言


因為MyAndroid這個網站也有一段時間了,開放留言就算有圖形驗證碼還是保受留言機器人騷擾之苦… 索性直接關閉所有人的留言功能
等到有空再來自幹一個防止機器人的驗證程序,但這個過程一拖就是好多年了 (平日上班太忙)
直到最近想說,乾脆就整合Google的圖形驗證碼吧

順便做個教學


正文




1. 先到 Google reCAPTCHA去註冊一個key
CAPTCHA的後臺

在Register a new site輸入網站的資訊

Label是標籤,方便自己識別用
Domains可以填多個網址,例如你有 www.myandroid.tw 與 www.airweb.tw
就可以都填上 (一行一個)


然後可以取得Key了
接下來其實Google有教學

不過這邊還是說明一下
在要顯示認證的頁面,加上這個Script

 <script src='https://www.google.com/recaptcha/api.js'></script>
 


和要顯示的位置放上這個DIV
 <div class="g-recaptcha" data-sitekey="Google 給的KEY"></div>
 

(注意:是 Site key 不是 Secret Key!!)

然後你的Server端如果是PHP,可以使用現成的套件來處理
(https://github.com/google/recaptcha)
使用 Composer來取得套件
 composer require google/recaptcha "~1.1"
 


在檢核的PHP頁面加上
 require('./vendor/google/recaptcha/src/autoload.php');
 // _GOOGLE_RECAPTCHA_SEC_KEY 就是 google 給的 Secret Key
 $recaptcha = new \ReCaptcha\ReCaptcha(_GOOGLE_RECAPTCHA_SEC_KEY);
 $gRecaptchaResponse = $_POST['g-recaptcha-response'];
 $remoteIp = $_SERVER['REMOTE_ADDR'];
 $resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
 if(!$resp->isSuccess()){
  echo '請先證明您不是機器人';
  return;
 }
 


其中require請改成自己的路徑