laravel:前后端分离的图形验证码(10.27.0 / gregwar/captcha v1.2.0)

一，第三方库：

官方代码库:

https://github.com/Gregwar/Captcha

二，安装第三方库

1,用composer安装

liuhongdi@lhdpc:/data/laravel/dignews$ composer require gregwar/captcha

2,安装完成后查看已安装库的版本:

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
<?php
namespace 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
<?php
 
namespace 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
posted @ 2023-10-31 08:16  刘宏缔的架构森林  阅读(723)  评论(0)    收藏  举报