一. 安装验证码composer扩展包
1.安装扩展包:
composer require mews/captcha
2.生成配置文件,并选择Mews\Captcha\CaptchaServiceProvider 代表的数字回车
php artisan vendor:publish
3.修改config/captcha.php ,修改flat长度为4位
return [ | |
'characters' => ['2', '3', '4', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'm', 'n', 'p', 'q', 'r', 't', 'u', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'X', 'Y', 'Z'], | |
'default' => [ | |
'length' => 9, | |
'width' => 120, | |
'height' => 36, | |
'quality' => 90, | |
'math' => false, | |
], | |
'math' => [ | |
'length' => 9, | |
'width' => 120, | |
'height' => 36, | |
'quality' => 90, | |
'math' => true, | |
], | |
'flat' => [ | |
'length' => 4, | |
'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, | |
] | |
]; |
4.修改注册模板,添加验证码(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> |
5.后端添加验证码captcha验证(app/Http/Controllers/Auth/RegisterController.php)
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:8', 'confirmed'], | |
'captcha' => ['required', 'captcha'], | |
], [ | |
'captcha.required' => '验证码不能为空', | |
'captcha.captcha' => '请输入正确的验证码', | |
]); | |
} |
6.预览效果