laravel:前后端分离的图形验证码(10.27.0 / gregwar/captcha v1.2.0)
一，第三方库：
官方代码库:
https://github.com/Gregwar/Captcha二，安装第三方库
1,用composer安装
liuhongdi@lhdpc:/data/laravel/dignews$ composer require gregwar/captcha2,安装完成后查看已安装库的版本:
liuhongdi@lhdpc:/data/laravel/dignews$ composer show gregwar/captcha
name : gregwar/captcha
descrip. : Captcha generator
keywords : bot, captcha, spam
versions : * v1.2.0
…三，后端php代码
1,captcha封装类:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?phpnamespace App\extend\captcha;use Gregwar\Captcha\CaptchaBuilder;use Gregwar\Captcha\PhraseBuilder;class captcha { //生成图形验证码 static public function getCaptcha($codeLength,$width,$height) { // 包含哪些字符 $chars = '0123456789abcefghijklmnopqrstuvwxyz'; $builder = new PhraseBuilder($codeLength, $chars); $captcha = new CaptchaBuilder(null, $builder); // 生成验证码 $captcha->build($width, $height, $font = null); // base64 image $image = $captcha->inline(); //uniqid $uniqid = uniqid().mt_rand(1000,9999); //value $value = $captcha->getPhrase(); //json return ['code' => 0, 'image'=>$image,'uniqid'=>$uniqid,'value'=>$value]; }} |
2,在controller中引用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\extend\captcha\captcha;use Illuminate\Support\Facades\Redis;class ImageController extends Controller{ /** * 输出验证码图像 */ public function captcha(Request $request){ $captArr = captcha::getCaptcha(4,100,40); //设置值 Redis::setex($captArr['uniqid'],600, $captArr['value']); $ret = [ 'code'=>0, 'image'=>$captArr['image'], 'uniqid'=>$captArr['uniqid'], ]; return json_encode($ret); } /** * 检查验证码是否正确 */ public function checkCapt(Request $request) { $uniqid = $request->post('uniqid'); $captcode = $request->post('captcode'); //验证码: $value = Redis::get($uniqid); //检查验证码是否正确 if (strtolower($captcode) !== strtolower($value)) { return json(['code' => 400, 'msg' => '输入的验证码不正确']); } }} |
四，前端js代码中使用:
html
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<el-form-item label="" prop="captcode" style="margin-bottom: 20px;"> <el-input v-model="account.captcode" placeholder="请输入验证码" style="width: 66%;float:left;"> <!--<template #suffix><i class="el-icon-unlock el-input__icon"></i></template>--> </el-input> <img style="vertical-align: middle;float:right;background: #ccc;border-radius:3px;cursor:pointer;margin-left:14px;" :src="captImg" width="120" height="40" alt="请输入验证码" @click="getCaptImg()" /></el-form-item> |
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
export default { name: 'LayoutLogin', setup() { const captId = ref(''); const captImg = ref(""); //获取验证码图片信息 const getCaptImg =()=>{ console.log('begin get capt img'); let url = "/api/image/captcha"; let getData = { //msg:'hello', }; axios({ method:"get", url:url, params:getData, }).then((res) => { console.log(res.data); if (res.data.code == 0) { captId.value = res.data.uniqid; captImg.value = res.data.image; } else { alert("error:"+res.data.msg); } } ).catch(err=>{ console.log(err); alert('网络错误:'+err.message); }); }; getCaptImg(); |
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/10/29/laravel-tu-xing-yan-zheng-ma-10-27-gregwar-captcha-v1-2/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
五，测试效果
接口的返回：
2,在前端显示：
六,查看laravel框架的版本:
liuhongdi@lhdpc:/data/laravel/dignews$ php artisan --version
Laravel Framework 10.27.0
