新聞發(fā)布
管理系統(tǒng)近，我們的客戶的網(wǎng)站之一，一直在處理大量的惡意僵尸注冊其電子郵件時事通訊。有處理BOT交通幾個常用的策略：
蜜罐：從用戶隱藏表單輸入，但可以看到它們的機器人，所以如果他們被填充，我們就知道它是由一個機器人訪問
確認電子郵件：用戶會收到一封電子郵件，并通過電子郵件發(fā)送的鏈接，以確認該郵件是有效的
驗證碼：某種謎/疑問，一個機器人將有麻煩的回答
由于復(fù)雜性和機器人的體積，我們決定為這個網(wǎng)站優(yōu)雅的解決方案是使用一個驗證碼系統(tǒng)。但是，什么captcha系統(tǒng)？人機識別系統(tǒng)通常包括顯示用戶一個字的圖像，用戶必須鍵入出來的字。通常情況下，圖像的方式，一臺計算機將有一個艱難的時間識別它扭曲。
不幸的是，我們已經(jīng)得到了一些在那里機器人比在本場比賽人類更加美好的地步，所以我們轉(zhuǎn)向谷歌的NoCaptcha的reCAPTCHA。
對于大多數(shù)用戶來說，NoCaptcha驗證碼很簡單，用戶可以點擊一個復(fù)選框。
谷歌的驗證碼使用IP地址，餅干，和鼠標移動，以確定該用戶是一個機器人。還有其他專有的策略，但谷歌有什么動力去釋放這些......因為它會破解驗證碼容易。
如果谷歌不能從眼前的行為告訴我們，如果一個用戶是一個機器人與否，有時用戶會需要完成一個簡單的匹配測驗是這樣的：
讓我們把它建成！
先決條件
我們正在與一個標準工作船現(xiàn)場，并能夠通過一個JavaScript模塊，前端接口。驗證碼是很靈活的，所以這只是一種可能的實現(xiàn)。
您還需要注冊你的網(wǎng)站與谷歌獲得一個站點密鑰和私鑰。測試地點密鑰和秘密密鑰可用于開發(fā)在這里。
發(fā)展
首先，我們需要顯示在HTML中reCAPTCHA小工具：
標記<form method="post" action=""><div id="recaptcha-widget"></div></form><script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script><script type="text/javascript">
var recaptcha;
var onloadCallback = function(response) {
recaptcha = grecaptcha.render('recaptcha-widget', {
'sitekey' : 'sitekey_goes_here',
'theme' : 'light',
'callback' : recaptchaCallback });
};</script>有相當多的事情怎么回事，讓我們打破它。
第一行是我們的一個div容器的ReCaptcha部件將在接下來異步從谷歌加載必要的驗證碼數(shù)據(jù)的腳本可以看出形式。后，我們有一個腳本，實際上將呈現(xiàn)reCAPTCHA小工具。我們選擇其中的div小部件插入到'的reCAPTCHA小部件“。我們還包括了必要的驗證碼sitekey，定型選項（無論是亮或暗），并且當用戶完成驗證碼將執(zhí)行回調(diào)函數(shù)。
現(xiàn)在的ReCaptcha能否正常顯示，讓我們構(gòu)建一個JavaScript模塊中的回調(diào)函數(shù)：
JAVASCRIPT的window.recaptchaCallback = function(recaptchaResponse){ };該reCAPTCHA小工具呈現(xiàn)之前，此功能必須在初始化，如回調(diào)函數(shù)必須存在被束縛的ReCaptcha。此外，您還可以看到該函數(shù)屬于“窗口”到它，所以它可以在全球范圍內(nèi)進行訪問。
當回調(diào)函數(shù)被調(diào)用時，它會通過一個變量（recaptchaResponse），這是當用戶完成驗證碼生成的唯一令牌。為了驗證此令牌是有效的，我們需要調(diào)用谷歌API來確認。讓我們通過這篇文章要求一個插件控制器：
JAVASCRIPT的window.recaptchaCallback = function(recaptchaResponse){
$.post('/', {
action: 'recaptchas/verify',
response: recaptchaResponse }, function(data, textStatus, jqXHR) {
});};如果你想知道為什么我們要發(fā)布'/'，那是因為我們的路線是通過操作變量實際傳遞。這是一個特定的工藝，方法，javascript和一個工藝品插件控制器之間傳遞信息。現(xiàn)在將在Recaptchas控制器執(zhí)行actionVerify功能。
里面我們的插件控制器，我們做一個簡單的post請求，發(fā)送了所有必要的信息：
PHPpublic function actionVerify() {
$recaptchaResponse = craft()->request->getParam('response');
$secret = 'google_recaptcha_secret_key';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$fields = array('secret' => $secret, 'response' => $recaptchaResponse);
$fields_string = http_build_query($fields);
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
$json = json_decode($result, true);
return $this->returnJson(array('success' => $json['success']));}這是非常簡單的。我們正在建立一個POST請求谷歌的reCAPTCHA API。我們有兩個參數(shù)，我們網(wǎng)站的密鑰和驗證碼生成的recaptchaResponse。然后到后期的響應(yīng)將是一個布爾值，如果recaptchaResponse是有效的。現(xiàn)在，讓我們解析響應(yīng)后面的模塊中：
JAVASCRIPT的window.recaptchaCallback = function(recaptchaResponse){
$.post('/', {
action: 'recaptchas/verify',
response: recaptchaResponse }, function(data, textStatus, jqXHR) {
if (data['success']) {
_submitEmailToList($form);
}
});};如果響應(yīng)是成功的，現(xiàn)在我們調(diào)用一個函數(shù)來提交電子郵件電子報。它也可以是添加的方式來重設(shè)驗證碼是一個好主意，在情況下，用戶需要多次提交表單。我們只需添加一個簡單的函數(shù)if語句后：
JAVASCRIPT的grecaptcha.reset(recaptcha);
后的想法
谷歌的NoCaptcha的reCAPTCHA是過濾掉討厭的機器人整齊的工具。我大的挫折就是他們?nèi)狈Φ腞eCaptcha框樣式選項。有兩種不同的尺寸選項和兩個顏色選項。除此之外，有沒有辦法改變驗證碼是什么樣子。幸運的是，這個盒子是很小的，可與大多數(shù)網(wǎng)站的設(shè)計希望搖擺。但總體而言，實施是不是太棘手，并在網(wǎng)站上的偉大工程。
