Lavarel之图片验证码 captcha

图片验证码

简介

图片验证码在站点管理平台许多场景中会使用，例如登录、注册等。使用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的语法。