1.Composer 安装 Captcha 扩展包:
在cmd命令行切换到当前的项目根目录,执行
composer require mews/captcha
注:Windows中使用该扩展包还需要安装 GD2 扩展(在php.ini中取消extension=php_gd2.dll前面的注释)
注:Windows中使用该扩展包还需要安装 php_fileinfo扩展(在php.ini中取消extension=php_fileinfo.dll前面的注释)
2.使用Captcha服务提供者之前还需要在config/app.php中注册服务提供者:
在 providers 数组内追加如下内容
'providers' => [
Mews\Captcha\CaptchaServiceProvider::class,
]
在 aliases 数组内追加如下内容
'aliases' => [
// ...
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]
3.运行
php artisan vendor:publish
然后选择你需要的资源序号,并回车就好
生成配置文件 config/captcha.php
4.打开captcha.php文件
<?php
return [
'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',
'default' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
],
'flat' => [
'length' => 6,
'width' => 160,
'height' => 46,
'quality' => 90,
'lines' => 6,
'bgImage' => false,
'bgColor' => '#ecf2f4',
'fontColors'=> ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
'contrast' => -5,
],
'mini' => [
'length' => 3,
'width' => 60,
'height' => 32,
],
'inverse' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
'sensitive' => true,
'angle' => 12,
'sharpen' => 10,
'blur' => 2,
'invert' => true,
'contrast' => -5,
]
];
可以看到这些配置选项都非常通俗易懂,你可以在此修改对应选项自定义验证码的长度、背景颜色、文字颜色等属性,在此不做过多叙述。
至此,此扩展包就安装完成了。
5.给用户展示验证码
扩展包提供了两个函数用于展示验证码:
captcha_img() - 返回 img 格式的验证码;
captcha_src() - 返回验证码的 url 地址。
在你的模板文件里(如:register.blade.php)直接调用即可:
<div class="form-group code">
<label>验证码</label>
<input class="tt-text" name="captcha">
{!! captcha_img() !!}
</div>
又或者
<div class="form-group code">
<label>验证码</label>
<input class="tt-text" name="captcha">
<img src="{{captcha_src()}}" onclick="this.src='{{captcha_src()}}'+Math.random()" title="点击图片重新获取验证码">
或者
<img src="{{captcha_src('flat')}}" onclick="this.src='{{captcha_src('flat')}}'+Math.random()" title="点击图片重新获取验证码">
或者
<img src="{{captcha_src('mini')}}" onclick="this.src='{{captcha_src('mini')}}'+Math.random()" title="点击图片重新获取验证码">
或者
<img src="{{captcha_src('inverse')}}" onclick="this.src='{{captcha_src('inverse')}}'+Math.random()" title="点击图片重新获取验证码">
</div>
onclick中的链接写成这样也可以
this.src='/captcha/flat?'+Math.random()" title="点击图片重新获取验证码"
flat,可以根据模式不同切换
使用自定义样式的验证码
可以看到当前有4中模式default、flat、mini、inverse按着自己的随意配置
如果想使用自定义的验证码,如上文配置文件captcha.php里的 inverse 选项:
return [
...
'default' => [
...
],
'inverse' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
'sensitive' => true,
'angle' => 12,
'sharpen' => 10,
'blur' => 2,
'invert' => true,
'contrast' => -5,
]
];
例如以下调用即可
{!! captcha_img('inverse') !!}
{{captcha_src('inverse')}}
判断用户输入的验证码是否正确
扩展包使用了 自定义验证规则 方式扩展了验证规则,我们只要在对应的 Controller 添加以下的规则即可:
$this->validate($request, [
'captcha' => 'required|captcha'
]);