如何使用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請改成自己的路徑