详解laravel中使用mews/captcha、前后端分离


废话少说,直接开始。

1.下载mews/captcha

默认下载的是最新版,我这里下载的是3.2版本。

composer require mews/captcha
2.找到config\app.php中的providers,添加如下代码

关于Provider的介绍!

\Mews\Captcha\CaptchaServiceProvider::class,
3.找到config\app.php中的aliases,添加如下代码

关于aliases的介绍!

'Captcha' => Mews\Captcha\Facades\Captcha::class,
4.发布配置文件
php artisan vendor:publish

于是便可以在config\captcha.php下,配置验证码。这里使用的default

return [
    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
    ],
    // ...
];
5.控制器代码
public function code()
    {
        return [
            'code' => 101,
            'message' => '请求成功',
            'result' => app('captcha')->create('default', true) //create是生成验证码的方法
            //这里可以直接app('captcha')的原因就是因为在config\app.php中的providers中添加了这一句\Mews\Captcha\CaptchaServiceProvider::class,然后在CaptchaServiceProvider中的register绑定了bind的名字是captcha。
        ];
    }

返回结果:

{
    "code": 101,
    "message": "请求成功",
    "result": {
        "sensitive": false,
        "key": "$2y$10$20a0XmywfMWedCV6GfFK2.EF0OaGtAiBTUkorbOAjqUqKoGLBhsBa",
        "img": "data:image/png;base64,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"
    }
}

sensitive:大小写是否敏感,在config\captcha.php中的default数组里可以添加这一选项,true代表区分大小写,默认false。
key:生成的key。
img:base_64的图片。

6. 后端验证代码

这里注意,一个key对应的验证码只能验证一次!就是说拿着前端传来的key和code去做校验的时候,不论验证成功或者失败,这一组key和code都没用了,要再去刷新验证码。

第一种:

//调用captcha_api_check方法。
$captcha = $request->input('captcha'); //验证码
$key = $request->input('key'); //key
 
if (!captcha_api_check($captcha , $key)){
     echo '验证不通过';
 }

第二种:

$data = $req->all();
 
$validator = Validator::make($data, [
    'key' => 'required',
    'captcha' => 'required|captcha_api:' . $req->input('ckey')
]);
 
if (!$validator->fails()) {
    echo '验证不通过';
}

两种方法的原理都是一样的,都是去调用了captcha_api_check方法。
第二种方法,在CaptchaServiceProvider类中的启动方法(boot)中定义了,

$validator->extend('captcha_api', function ($attribute, $value, $parameters) {
            return captcha_api_check($value, $parameters[0], $parameters[1] ?? 'default');
        });//实质上还是调用了captcha_api_check。
7.一些问题解析
  1. 这里为什么调用的是captcha_api_check,而不是captcha_check?

    因为调用生成图片验证码的方法create的时候,传递了第二个参数为true。
    调用的其实就是在vendor\mews\captcha\src目录下的Captcha类中的create方法。第二个参数为true,代表$api = true;即为存储在Cache中的前后端分离用的验证码!而不是存储在session中的验证码。

  2. 如何使用session中的验证码?

    调用create方法时,第二个参数不传就好了。注意要开启session! 如果使用的是api的话,应该是在Kernel中的$middlewareGroups数组中配置,这个不太确定,没有试。

  3. 验证码验证一次,就失效了,怎么办?
    首先是在vendor\mews\captcha\src目录下的Captcha类中的check_api方法校验验证码。
    这里的第一句代码就是:
    if (!Cache::pull($this->get_cache_key($key))) {
        return false;
    }
    
    关键就是这个pull方法Cache详解可参考
    pull方法是获取到缓存以后,就把缓存清空了。所以只能验证一次。只需要把这里的pull换成get就OK了。
  4. 如何解决使用session存储验证码的时候,只能验证一次验证码的问题?
    在vendor\mews\captcha\src目录下的Captcha类中的check方法,将以下这段代码注释掉应该就OK了。
    if ($check) {
            $this->session->remove('captcha');
        }
    
  5. 当使用算数验证码的时候,再去调用验证方法,就需要通过以下方式。需要传入第三个config参数
    	if (!captcha_api_check($captcha , $key, 'math')){
         	echo '验证不通过';
     	}
    
8.结语

当然,现在基本都是前后端分离,我更喜欢把key存入redis,从redis中获取key,然后去校验验证码即可。

参考文章

laravel mews/captcha 图形验证码 前后端分离

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值