laravel第三方验证码的使用
二,安装前准备
请勿务必安装PHP的gd拓展!!!
如果没安装可以采用下列代码
apt-get install php-gd
网上好多教程上面都写着php5-gd或者php7-gd,经过浅农实现,在Ubuntu18.0版本上不可取。
三,安装 mews/captcha
简单说一下, mews/captcha是比较适合Laravel项目的第三方验证码包,样式也很好看。
预览图:
$ composer require "mews/captcha"
注册:
在config/app.php下的providers数组里面追加一下代码
Mews\Captcha\CaptchaServiceProvider::class,
**aliases **数组里面追加
'Captcha' => Mews\Captcha\Facades\Captcha::class,
在composer命令行下执行
php artisan vendor:publish
生成配置文件captcha.php
四,配置验证码
config/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,
]
];
基本上是不怎么需要配置的,大家看看就好
五,前端引用
<img src="{{captcha_src()}}" style="cursor: pointer"
onclick="this.src='{{captcha_src()}}'+Math.random()">
作者:浅水码农
链接:https://www.jianshu.com/p/a36e7c9dad49
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1. 前端展示
接下来我们请将注册页面模板 register.blade.php 内容替换为以下:
resources/views/auth/register.blade.php
<div class="form-group row">
<label for="captcha" class="col-md-4 col-form-label text-md-right">验证码</label>
<div class="col-md-6">
<input id="captcha" class="form-control{{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" required>
<img class="thumbnail captcha mt-3 mb-2" src="{{ captcha_src('flat') }}" onclick="this.src='/captcha/flat?'+Math.random()" title="点击图片重新获取验证码">
@if ($errors->has('captcha'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('captcha') }}</strong>
</span>
@endif
</div>
</div>
代码讲解:
我们首先将此文件里的英文翻译为中文;
在『确认密码』区块代码下,我们增加了『验证码』区块代码;
captcha_src() 方法是 mews/captcha 提供的辅助方法,用于生成验证码图片链接;
『验证码』区块中 onclick() 是 JavaScript 代码,实现了点击图片重新获取验证码的功能,允许用户在验证码太难识别的情况下换一张图片试试。
因涉及到样式代码编译,请确保虚拟机里的 $ npm run watch-poll 命令处于运行中。
2. 后端验证
mews/captcha 是专门为 Laravel 量身定制的扩展包,能很好的兼容 Laravel 生成的注册逻辑。我们只需要在注册的时候,添加上表单验证规则即可:
app/Http/Controllers/Auth/RegisterController.php
<?php
.
.
.
class RegisterController extends Controller
{
.
.
.
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
return Validator::make($data, [
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:6', 'confirmed'],
'captcha' => ['required', 'captcha'],
], [
'captcha.required' => '验证码不能为空',
'captcha.captcha' => '请输入正确的验证码',
]);
}
.
.
.
}
我们添加了验证规则:
'captcha' => ['required', 'captcha'],
表达式里的第二个 captcha 是 mews/captcha 自定义的表单验证规则。扩展包非常巧妙地利用了 Laravel 表单验证器提供的 自定义表单验证规则 功能。令我们在开发验证码时非常方便。
Validator 表单验证的 make () 方法第三个参数是自定义错误提示,这里我们对验证码的错误提示进行自定义。
————————————————
原文作者:GuanJie
转自链接:https://learnku.com/articles/23704
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接。