### 验证码
* 一、安装验证码
* 二、模板中使用
* 三、修改验证码配置
* 四、自定义验证码
* * 1\. 创建
* 2\. 配置
* 3\. 使用
* 五、验证
TP6 有内置验证码插件,只需简单安装和配置即可使用,而且验证码的验证也非常方便,下面开始表演。
# 一、安装验证码
~~~bash
composer require topthink/think-captcha
~~~
# 二、模板中使用
将原来静态页面的验证码图片替换为`{:captcha_img()}`,这个会自动生成验证码图片。
~~~html
<div style="margin-left: 10px;">{:captcha_img()}
</div>
~~~
生成的html代码为:
~~~html
<img src="/captcha.html?0.12285642498823002" alt="captcha" onclick="this.src="/captcha.html?"+Math.random();">
~~~
从生成的代码可以看出,点击图片可以切换图片。生成的图片:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203225340644.png)
> 如果图片没有出来,检查下路径是否正确,路由是否正确。浏览器直接访问`http://tp6.com/captcha`也会显示二维码,如果没有显示就考虑路由的正确性。
# 三、修改验证码配置
在`config`目录新建`captcha.php`:
~~~php
<?phpreturn ['length' => 4,'codeSet' => '0123456789','useCurve' => false
];
~~~
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203231721294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5MTI4MTUzOTYyNg==,size_16,color_FFFFFF,t_70)
具体可配置的项:
| 参数 | 描述 | 默认 |
| :-- | :-- | :-- |
| codeSet | 验证码字符集合 | 略 |
| expire | 验证码过期时间(s) | 1800 |
| math | 使用算术验证码 | false |
| useZh | 使用中文验证码 | false |
| zhSet | 中文验证码字符串 | 略 |
| useImgBg | 使用背景图片 | false |
| fontSize | 验证码字体大小(px) | 25 |
| useCurve | 是否画混淆曲线 | true |
| useNoise | 是否添加杂点 | true |
| imageH | 验证码图片高度,设置为0为自动计算 | 0 |
| imageW | 验证码图片宽度,设置为0为自动计算 | 0 |
| length | 验证码位数 | 5 |
| fontttf | 验证码字体,不设置是随机获取 | 空 |
| bg | 背景颜色 | \[243, 251, 254\] |
| reset | 验证成功后是否重置 | true |
# 四、自定义验证码
## 1\. 创建
除了使用默认的方式`{:captcha_img()}`,还可以通过`think\captcha\facade\Captcha`类自行创建验证码。
~~~php
<?phpnamespace app\admin\controller;
use think\captcha\facade\Captcha;class Verify
{public function index(){return Captcha::create();}
}
~~~
通过这个控制器也能正常返回验证码:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203232440265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5MTI4MTUzOTYyNg==,size_16,color_FFFFFF,t_70)
## 2\. 配置
自定义验证码也可以配置,可以在`config/captcha.php`文件里定义一个配置,然后在创建的时候传入配置key即可:
`captcha.php`:
~~~php
<?phpreturn ['length' => 4,'codeSet' => '0123456789','useCurve' => false,// 配置名称可以随意取'my_set' => ['length' => 3,'codeSet' => 'abcdefg']
];
~~~
修改`Verify`控制器:
~~~php
return Captcha::create('my_set');
~~~
秀一下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203233014620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5MTI4MTUzOTYyNg==,size_16,color_FFFFFF,t_70)
## 3\. 使用
~~~html
<img src="{:url('verify/index')}" class="layadmin-user-login-codeimg">
~~~
想要点击切换验证码,可以添加个onclick事件,自行仿照原生的做法。
# 五、验证
框架的内置验证功能:
~~~php
$this->validate($data,['captcha|验证码'=>'require|captcha'
]);
~~~
如果没有使用内置验证功能,则可以调研内置的函数手动验证
~~~php
if(!captcha_check($captcha)){// 验证失败
};
~~~
> 这里需要注意的是`TP6`默认没有开启`Session`,需要自行开启,而这里的验证码验证需要使用到`session`功能,所以修改app目录下的中间件文件`middleware.php`,将`\think\middleware\SessionInit::class`的注释放开即可。
- 空白目录
- 使用thinkphp6搭建后端api接口流程
- tp6 uniapp vue 前后端跨域解决方案
- 操作记录
- api00
- 你看看有没有用
- 6666
- Docker安装LNMP环境的详细过程(可部署TP项目)
- LNMP部署thinkphp
- 玩客云Armbian 安装LNMP环境 Docker
- ThinkPHP6项目基操(16.实战部分 redis+token登录)
- ThinkPHP6项目基操(11.实战部分 部署后台静态页面模板及后台登录页面)
- ThinkPHP6项目基操(13.实战部分 项目中的自定义异常处理总结 错误页面API错误)
- ThinkPHP6项目基操(14.实战部分 中间件处理登录流程)
- ThinkPHP6项目基操(12.实战部分 验证码)
- ThinkPHP6项目基操(18.实战部分 表单令牌Token 防CSRF)
- ThinkPHP6项目基操(19.实战部分 Mysql模型事务操作)
- ThinkPHP6项目基操(20.实战部分 数据库操作返回值总结)
- 浏览器端判断当前设备的运行环境
- api
- api异常捕捉
- 写一个中间件
- 统一的参数返回形式
- ThinkPHP6调用模型的方法
- thinkphp6控制器、验证器、模型、service,各层写的内容