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