簡(jiǎn)介
圖片驗(yàn)證碼在站點(diǎn)管理平臺(tái)許多場(chǎng)景中會(huì)使用，例如登錄、注冊(cè)等。使用php的composer工具可下載許多優(yōu)秀的開源組件，例如gragwar/captcha。同時(shí)也可以自己編寫適合自己的圖片驗(yàn)證碼類并融合到框架中作為工具類使用。
1. 使用gragwar/captcha庫(kù)
CAPTCHA 是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)和人的公共全自動(dòng)程序。這個(gè)問題可以由計(jì)算機(jī)生成并評(píng)判，但是必須只有人類才能解答。由于計(jì)算機(jī)無法解答CAPTCHA的問題，所以回答出問題的用戶就可以被認(rèn)為是人類。
1.1 下載組件
Gregwar/Captcha在Github地址為 https://github.com/Gregwar/Captcha
方式1 使用composer命令下載組件：
composer require gregwar/captcha
方式2 使用手工方式下載安裝組件：
在composer.json文件中加入配置項(xiàng)
"require": {
"gregwar/captcha": "1.*"
},
使用composer命令更新并下載
composer update
下載文件保存在 /vendor/gregwar/captcha 目錄下
1.2 使用組件
[案例] 在登錄控制器中創(chuàng)建圖片驗(yàn)證碼以及獲取驗(yàn)證碼操作
登錄路由 \app\Http\routes.php
//{rnd}作為隨機(jī)數(shù)，用于當(dāng)點(diǎn)擊圖片時(shí)自動(dòng)更換驗(yàn)證碼。
Route::get('admin/captcha/{rnd}','Admin\LoginController@captcha');
Laravel5.2.9路由自動(dòng)應(yīng)用了web中間件，若添加web中間件則會(huì)造成模板中session無法獲取數(shù)據(jù)。
登錄控制器 \app\Http\Controllers\Admin\LoginController.php
//引入圖片驗(yàn)證碼類
use Gregwar\Captcha\CaptchaBuilder;
//通過HTTP請(qǐng)求(Request $request)訪問或設(shè)置session實(shí)例
public function captcha(Request $request)
{
// 實(shí)例化驗(yàn)證碼類
$captcha = new CaptchaBuilder;
// 創(chuàng)建驗(yàn)證碼
$captcha->build($width=100, $height=40);
// 獲取驗(yàn)證碼
$captcha= $captcha->getPhrase();
// 將驗(yàn)證碼保存在session中
$request->session()->set('captcha',$captcha);
// 頁(yè)面輸出驗(yàn)證碼圖片
header('Cache-Control:no-cache, must-revalidate');
header('Content-Type: image/png');
$captcha->output();
}
登錄視圖 \resources\views\admin\login.blade.php
<input type="text" class="code" name="vcode" id="vcode"/>
[圖片上傳失敗...(image-8510b9-1526307486684)]}})
注意：驗(yàn)證碼圖片路徑需設(shè)置為/admin/captcha/0與路由保存一致，并添加默認(rèn)隨機(jī)數(shù)供點(diǎn)擊更換時(shí)使用。
1.3 圖片驗(yàn)證碼session的處理
由于在不同框架中會(huì)單獨(dú)提供session的處理，因此在圖片驗(yàn)證碼類中并不建議將其存儲(chǔ)到session中。
在Laravel控制器中可通過HTTP請(qǐng)求Request $request對(duì)象的來設(shè)置和獲取session。在模板中可使用session()全局方法獲取session。
// 設(shè)置驗(yàn)證碼保存至session
$request->session()->set('phrase',$phrase);
// 從session中獲取驗(yàn)證碼
$request->session()->get('phrase');
1.4 圖片驗(yàn)證碼點(diǎn)擊更換
考慮到不同瀏覽器對(duì)圖片地址處理不一樣，某些瀏覽器會(huì)對(duì)圖片地址解析，若圖片地址和原始請(qǐng)求一樣，則不發(fā)送新的請(qǐng)求。因此，需在點(diǎn)擊更換圖片驗(yàn)證碼時(shí)，將圖片的src地址添加動(dòng)態(tài)隨機(jī)數(shù)，以欺騙瀏覽器認(rèn)為是不同請(qǐng)求。
[圖片上傳失敗...(image-64b1ea-1526307486685)]}})
//點(diǎn)擊更換驗(yàn)證碼
$('#captcha').on('click',function(){
// 將圖片路徑以/分隔為數(shù)組
var arr = $(this).attr('src').split('/');
// 剔除數(shù)組中最后一項(xiàng)元素
arr.pop();
// 向數(shù)組末尾中添加隨機(jī)數(shù)
arr.push(Math.random());
// 用/連接數(shù)組元素為字符串后設(shè)置圖片路徑
$(this).attr('src',arr.join('/'));
})
也可采用直接在元素中添加事件的方式，但并不推薦此做法雖然簡(jiǎn)便一些。
[圖片上傳失敗...(image-49d9d7-1526307486686)]}})
1.5 驗(yàn)證碼輸入控制
針對(duì)驗(yàn)證碼輸入的單行文本域，首先需根據(jù)圖片驗(yàn)證碼的個(gè)數(shù)限制其輸入長(zhǎng)度，其次需對(duì)驗(yàn)證碼的大小寫做約定。
<input type="text" class="code" name="vcode" id="vcode"/>
//驗(yàn)證碼輸入個(gè)數(shù)限制并轉(zhuǎn)小寫
$('#vcode').on('keyup',function(){
var val = $(this).val();
if(val.length<6){
$(this).val(val.toLowerCase());
}else{
$(this).val(val.substr(0,5));
}
});
2. 使用手動(dòng)添加組件生成驗(yàn)證碼
待更新
小結(jié)
簡(jiǎn)書的Markdown有個(gè)蛋疼的問題，在使用```輸出img標(biāo)簽時(shí)，當(dāng)src存在內(nèi)容時(shí)，會(huì)自動(dòng)解析為markdown的語(yǔ)法。
