脩茅脰陇脗毛 · tp5文档

# 验证码本篇主要介绍`ThinkPHP5`的验证码的使用和配置。 - - [安装类库](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u5B89u88C5u7C7Bu5E93) - [验证码显示](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u663Eu793A) - [验证码检测](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u68C0u6D4B) - [验证码配置](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u914Du7F6E) - [改变字体大小和验证码长度](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u6539u53D8u5B57u4F53u5927u5C0Fu548Cu9A8Cu8BC1u7801u957Fu5EA6) - [中文验证码](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u4E2Du6587u9A8Cu8BC1u7801) - [添加背景图片](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u6DFBu52A0u80CCu666Fu56FEu7247) - [添加验证码资源](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u6DFBu52A0u9A8Cu8BC1u7801u8D44u6E90) - [同时使用多个验证码](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179235#u540Cu65F6u4F7Fu7528u591Au4E2Au9A8Cu8BC1u7801) ## 安装类库在使用验证码之前，必须使用`Composer`来安装验证码类库，在命令行下面切换到你的应用根目录下面，执行： ``` <pre class="calibre18"> ``` composer require topthink/think-captcha ``` ``` 执行`composer`安装后显示如下信息： ``` <pre class="calibre18"> ``` >composer require topthink/think-captcha Using version ^1.0 for topthink/think-captcha ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) - Installing topthink/think-captcha (v1.0.7) Downloading: 100% Writing lock file Generating autoload files ``` ``` 表示验证码类库安装完成。 ## 验证码显示创建一个`Captcha`控制器类，添加验证码显示方法： ``` <pre class="calibre18"> ``` <?php namespace app\index\controller; class Captcha extends \think\Controller{ // 验证码表单 public function index() { return $this->fetch(); } } ``` ``` 创建模板文件(`application/index/view/captcha/index.html`） ``` <pre class="calibre18"> ``` <!doctype html><html><head><meta charset="UTF-8"><title>验证码示例</title><style>body { font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; padding:5px; }.form{ padding: 15px; font-size: 16px; }.form .text { padding: 3px; margin:2px 10px; width: 240px; height: 24px; line-height: 28px; border: 1px solid #D4D4D4; }.form .btn{ margin:6px; padding: 6px; width: 120px; font-size: 16px; border: 1px solid #D4D4D4; cursor: pointer; background:#eee; }a{ color: #868686; cursor: pointer; }a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; }div{ margin:8px; }.info{ padding: 12px 0; border-bottom: 1px solid #eee; }.copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; }</style></head><body><h2>验证码示例</h2><FORM method="post" class="form" action="{:url('check')}"> 输入验证码：<INPUT type="text" class="text" name="code"><br/><div>{:captcha_img()}</div><INPUT type="submit" class="btn" value=" 提交 "></FORM><div class="copyright"><a title="官方网站" href="http://www.thinkphp.cn">ThinkPHP</a><span>V5</span><span>{ 十年磨一剑-为API开发设计的高性能框架 }</span></div></body></html> ``` ``` 访问 ``` <pre class="calibre18"> ``` http: //tp5.com/index/captcha ``` ``` 后显示页面如下： ![](https://img.kancloud.cn/dd/3d/dd3db62a1046adf0de1e385f9e54943b_796x471.png) 模板中我们使用captcha\_img函数显示验证码图片，细心的用户不难发现，验证码图片的URL地址其实是： ``` <pre class="calibre18"> ``` http: //tp5.com/captcha.html ``` ``` 这是扩展类库给验证码图片自动注册了一个`captcha`的路由地址，因此请确保你已经开启URL路由。 ## 验证码检测下面来进行验证码检测，在控制器中添加验证方法`check`，代码如下： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; class Captcha extends \think\Controller{ // 验证码表单public function index(){ return $this->fetch(); } // 验证码检测public function check($code=''){ $captcha = new \think\captcha\Captcha(); if (!$captcha->check($code)) { $this->error('验证码错误'); } else { $this->success('验证码正确'); } } } ``` ``` 当我们输入一个错误的验证码后，页面提示： ![](https://img.kancloud.cn/d7/40/d740c39e80c5d4b7d6e3533e2b9de2b5_600x362.png) 如果输入正确，则显示： ![](https://img.kancloud.cn/4c/c3/4cc38db435f73dbf56166da47b40c208_587x339.png) 扩展包内置提供了助手函数`captcha_check`用来检测验证码，所以`check`方法可以简化为： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; class Captcha extends \think\Controller{ // 验证码表单public function index(){ return $this->fetch(); } // 验证码检测public function check($code){ if (!captcha_check($code)) { $this->error('验证码错误'); } else { $this->success('验证码正确'); } } } ``` ``` 更简单的用法可以使用控制器的`validate`方法进行验证，例如： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; use think\Request; class Captcha extends \think\Controller{ // 验证码表单public function index(){ return $this->fetch(); } // 验证码检测public function check(Request $request){ if (true !== $this->validate($request->param(),[ 'code|验证码'=>'require|captcha' ])) { $this->error('验证码错误'); } else { $this->success('验证码正确'); } } } ``` ``` ## 验证码配置验证码的配置参数统一在应用配置文件（`application/config.php`）中添加`captcha`配置参数，例如： ``` <pre class="calibre18"> ``` 'captcha' => [ // 字体大小'fontSize' => 35, // 验证码长度（位数）'length' => 4, ], ``` ``` 或者配置 ``` <pre class="calibre18"> ``` // 扩展配置文件'extra_config_list' => ['database', 'route', 'validate', 'captcha'], ``` ``` 然后在应用目录下面添加`captcha.php`配置文件，内容如下： ``` <pre class="calibre18"> ``` return [ // 字体大小'fontSize' => 35, // 验证码长度（位数）'length' => 4, ]; ``` ``` 支持的配置参数包括：参数描述 seKey 验证码加密Key codeSet 验证码字符集合 expire 验证码过期时间（秒） useZh 使用中文验证码 useImgBg 使用背景图片 fontSize 字体大小（px） useCurve 是否添加混淆曲线 useNoise 是否添加杂点 imageH 验证码图片高度 imageW 验证码图片宽度 length 验证码长度 fontttf 验证码字体 bg 验证码图片背景色 reset 验证成功后是否重置下面举例进行一些说明： ### 改变字体大小和验证码长度 ``` <pre class="calibre18"> ``` 'captcha' => [ // 字体大小'fontSize' => 35, // 验证码长度（位数）'length' => 4, ], ``` ``` ![](https://img.kancloud.cn/ae/35/ae35e51893595b86a9264475c1c34aa4_853x503.png) ### 中文验证码 ``` <pre class="calibre18"> ``` 'captcha' => [ // 使用中文验证码'useZh' =>true, // 字体大小'fontSize' => 35, // 验证码长度（位数）'length' => 4, ], ``` ``` ![](https://img.kancloud.cn/73/f8/73f8c9c6e965ab7068b71a05dacc3f23_789x471.png) ### 添加背景图片 ``` <pre class="calibre18"> ``` 'captcha' => [ // 使用背景图片'useImgBg' => true// 验证码长度（位数）'length' => 4, ], ``` ``` ![](https://img.kancloud.cn/d5/62/d56283b3950f82b98319c37104dda1c5_802x461.png) ### 添加验证码资源如果需要添加额外的验证码字体、背景图等，可以在 `vendor/topthink/think-captcha/assets/`下面自己扩展目录作用 bgs 背景图 ttfs 英文字体 zhttfs 中文字体## 同时使用多个验证码如果页面上需要使用多个验证码验证不同的提交，可以采用下面的方式。首先，修改模板文件显示两个验证码，如下： ``` <pre class="calibre18"> ``` <h2>多个验证码示例</h2> <FORM method="post" class="form" action="{:url('check1')}"> 验证码1：<INPUT type="text" class="text" name="code"> <div>{:captcha_img(1)}</div> <INPUT type="submit" class="btn" value=" 提交 "> </FORM> <FORM method="post" class="form" action="{:url('check2')}"> 验证码2：<INPUT type="text" class="text" name="code"> <div>{:captcha_img(2)}</div> <INPUT type="submit" class="btn" value=" 提交 "> </FORM> ``` ``` 注意，最关键的地方在于调用`captcha_img`函数显示验证码的时候，我们传入了额外的参数以标识不同的验证码。 ![](https://img.kancloud.cn/f8/a1/f8a1710dbf8e1235ec80f26e6ec69abe_777x758.png) 使用多个验证码的时候，验证码图片的资源地址变成： ``` <pre class="calibre18"> ``` http: //tp5.com/captcha/1.html // 验证码1 http: //tp5.com/captcha/2.html // 验证码2 ``` ``` 控制器类的代码进行如下修改： ``` <pre class="calibre42"> ``` <?phpnamespace app\index\controller; class Captcha extends \think\Controller{ // 验证码表单public function index(){ return $this->fetch(); } // 验证码1检测public function check1($code = ''){ if (!captcha_check($code, 1)) { $this->error('验证码1错误'); } else { $this->success('验证码1正确'); } } // 验证码2检测public function check2($code = ''){ if (!captcha_check($code, 2)) { $this->error('验证码2错误'); } else { $this->success('验证码2正确'); } } } ``` ```