一： 安装扩展
composer require gregwar/captcha
二 ： 创建三个基本路由
1：登录页面的路由
//登录页面
Route::get('login',[LoginController::class,'index'])->name('login');
2：处理登录数据的路由
//登录处理
Route::post('login',[LoginController::class,'login'])->name('login');
3： 验证码的路由
//验证码
Route::get('img_code',[LoginController::class,'imgCode'])->name('admin.img_code');
三 ： 生成验证码的方法
/***
* 验证码
*/
public function imgCode()
{
$phrase = new PhraseBuilder();
// 设置验证码位数 后面可以设置验证码为纯数字
$code = $phrase->build(4,'0123456789');
// 生成验证码图片的Builder对象，配置相应属性
$builder = new CaptchaBuilder($code, $phrase);
// 设置背景颜色25,25,112
$builder->setBackgroundColor(25, 25, 112);
// 设置倾斜角度
$builder->setMaxAngle(0);
// 设置验证码后面最大行数 图片验证码的横线
$builder->setMaxBehindLines(0);
// 设置验证码前面最大行数 图片验证码的横线
$builder->setMaxFrontLines(0);
// 设置验证码颜色
$builder->setTextColor(230, 81, 175);
// 可以设置图片宽高及字体
$builder->build($width = 150, $height = 40, $font = null);
// 获取验证码的内容
$phrase = $builder->getPhrase();
// 把内容存入 cache，10分钟后过期
$client_id = md5( rand(1,1000).time());
Cache::put($client_id, $phrase, Carbon::now()->addMinutes(10));
// 组装接口数据
$data = [
'client' => $client_id,
'captcha' => $builder->inline(),
];
return $data;
}
四 ： 图片验证码在表单展示
<div class="form-group">
<input name="captcha" class="input-text size-L" type="text" placeholder="验证码" onblur="if(this.value==''){this.value='验证码:'}" onclick="if(this.value=='验证码:'){this.value='';}" value="" style="width:150px;">
<img id="img_code" src="" onclick="getCaptCha()"> <a id="kanbuq" onclick="getCaptCha()" href="javascript:;" rel="external nofollow" >看不清，换一张</a>
</div>
六 ： 图片验证码在表单下面的调用 （需要引入JQ,引入JQ后才会体现出来)
<script>
//页面加载完毕事件
$(function(){
getCaptCha();
});
//获取图形验证码的方法
var getCaptCha = function (){
$.ajax({
url:"{{route('admin.img_code')}}",
success(res){
$("#client").val(res.client);
$("#img_code").attr('src',res.captcha);
}
})
}
</script>
七 ： 后台方法处理验证码
//取出验证码是否一致
$captcha = Cache::get($params['client']);
if ($params['captcha'] != $captcha){
return redirect(route('login'))->withErrors(['error' => '验证码错误']);
}
八、效果图片
