脩茅脰隴脗毛 · tp5文檔

# 驗證碼本篇主要介紹`ThinkPHP5`的驗證碼的使用和配置。 - - [安裝類庫](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u5B89u88C5u7C7Bu5E93) - [驗證碼顯示](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u663Eu793A) - [驗證碼檢測](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u68C0u6D4B) - [驗證碼配置](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u9A8Cu8BC1u7801u914Du7F6E) - [改變字體大小和驗證碼長度](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u6539u53D8u5B57u4F53u5927u5C0Fu548Cu9A8Cu8BC1u7801u957Fu5EA6) - [中文驗證碼](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u4E2Du6587u9A8Cu8BC1u7801) - [添加背景圖片](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u6DFBu52A0u80CCu666Fu56FEu7247) - [添加驗證碼資源](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179235#u6DFBu52A0u9A8Cu8BC1u7801u8D44u6E90) - [同時使用多個驗證碼](http://www.hmoore.net/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正確'); } } } ``` ```