Google 新版 Captcha 系統 - NoCAPTCHA reCAPTCHA

Google 買了 reCatpcha 後, 就大量將 Captcha 用在各種地方來避免 Spam 干擾, 但是 reCaptcha 有些圖和文字實在都難到只有機器人看得懂, 不過以省事來說, 只好犧牲點使用者體驗, 換取工程師的時間.

前陣子有看到 Google 服務出現 "我不是機器人" 可以勾選的 reCAPTCHA, 只要勾選 "我不是機器人", 就不需要輸入驗證碼了~ 於是在找都沒找到哪邊可以公開呼叫使用, 現在總算發佈囉~

• 詳見: Google Online Security Blog: Are you a robot? Introducing “No CAPTCHA reCAPTCHA”
• 新聞可見: 防止惡意廣告！Google 更新 CAPTCHA 驗證系統

介紹

使用範例

• WordTalks 《我的代表字》
• 意見反映 - Feebee 飛比價格

Google 新版 Captcha 系統 - NoCAPTCHA reCAPTCHA

簡化後的此 Captcha 功能命名為 NoCAPTCHA reCAPTCHA, 在點勾選時, Google 會去判斷你是不是機器人, 如果他認為你是機器人, 就會出現一些問題來詢問, 來達到防止機器人的目的.

註: NoCaptcha 新開放推出, 可能會有些問題, 請小心服用, 詳可見: Egor Homakov: The No CAPTCHA problem

開發文件

這次改版後, API 也方便許多, 蠻容易就可以全部改好, API 等資料可見下述:

• recaptcha - Google recaptcha 介紹
• API Document: reCAPTCHA — Google Developers
• API 呈現部份: Displaying the widget - reCAPTCHA
• API 驗證部份: Verifying the user's response - reCAPTCHA
• Google 於此 Open Source 有提供簡易範例: google/ReCAPTCHA - ReCAPTCHA is a free CAPTCHA service that protect websites from spam and abuse

寫法說明

簡單說一下寫法:

顯示 Captcha 部份

1. 於 HTML Header 加上:
   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
2. 於 Form 要顯示驗證碼的地方加入: (也可以將上面的 JS 與此段 HTML 擺放在一起即可), 記得要將 your_site_key 修改為申請得 site-key
   <div class="g-recaptcha" data-sitekey="your_site_key"></div>

驗證部份

<?php
// 此為非常簡化版的驗證範例, 請斟酌修改
$secret_key = 'abcdef'; // 這個變數為申請的 Key, 請依照自己的案例修改
$url = sprintf('https://www.google.com/recaptcha/api/siteverify?secret=%s&response=%s&remoteip=%s', $secret_key, $_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
$res = json_decode(file_get_contents($url));
var_dump($res->success); // true / false
?>

上述寫法包成 Function 可見: tsung/NoCAPTCHA-reCAPTCHA-PHP

相關網頁

• Google Upgrades "reCAPTCHA" Codes to "noCAPTCHA" And Makes It Easy For Users
• Google's New CAPTCHA Is Easier For Proving Your Humanity
• HowToSetUpRecaptcha - recaptcha - How to set up reCAPTCHA. - Plugins and libraries for the reCAPTCHA API - 舊版