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

文章目录

1.下载mews/captcha
2.找到config\app.php中的providers，添加如下代码
3.找到config\app.php中的aliases，添加如下代码
4.发布配置文件
5.控制器代码
6. 后端验证代码
7.一些问题解析
8.结语
- 参考文章

废话少说，直接开始。

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'); //keyif (!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.一些问题解析

这里为什么调用的是captcha_api_check,而不是captcha_check？

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

调用create方法时，第二个参数不传就好了。注意要开启session！ 如果使用的是api的话，应该是在Kernel中的$middlewareGroups数组中配置，这个不太确定，没有试。
验证码验证一次，就失效了，怎么办？
首先是在vendor\mews\captcha\src目录下的Captcha类中的check_api方法校验验证码。
这里的第一句代码就是：
```
if (!Cache::pull($this->get_cache_key($key))) {return false;
}
```
关键就是这个pull方法。Cache详解可参考
pull方法是获取到缓存以后，就把缓存清空了。所以只能验证一次。只需要把这里的pull换成get就OK了。
如何解决使用session存储验证码的时候，只能验证一次验证码的问题？
在vendor\mews\captcha\src目录下的Captcha类中的check方法，将以下这段代码注释掉应该就OK了。
```
if ($check) {$this->session->remove('captcha');}
```

8.结语

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

参考文章

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

详解laravel中使用mews/captcha、前后端分离相关推荐

Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）
基础准备: 1.npm安装vue-cli脚手架后,通过命令" vue init webpack 项目名 "来创建项目: 2.了解mockjs,能拦截ajax请求,返回模拟的响应数据 ...
程序开发中：什么是前后端分离？你搞清楚了吗？
今天这篇文章来分析一下什么是前后端分离的相关知识,很多小伙伴不清楚到底什么是前端,什么是后端,什么是前后端分离.在说前后端分离之前,我们先要弄清楚这几个概念,大家可能经常听到前端,后端或者是大前端的一 ...
SSM中通过Json做前后端分离
场景前面项目已经搭建到SSM中进行注解式和XML配置式事务管理阶段参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/851 ...
详解 Laravel 中的依赖注入和 IoC
作为开发者,我们一直在尝试通过使用设计模式和尝试新的健壮型框架来寻找新的方式来编写设计良好且健壮的代码.在本篇文章中,我们将通过 Laravel 的 IoC 组件探索依赖注入设计模式,并了解它如何改进 ...
laravel mysql注入_详解 Laravel 中的依赖注入和 IoC
Laravel 作为开发者,我们一直在尝试通过使用设计模式和尝试新的健壮型框架来寻找新的方式来编写设计良好且健壮的代码.在本篇文章中,我们将通过 Laravel 的 IoC 组件探索依赖注入设计模式, ...
laravel mews/captcha 图形验证码前后端分离
1. 说明:在laravel框架中使用验证码如果前后端分离,就不能使用session来保存和验证验证码正确与否,在网上找了很久终于找到解决办法: 2.原文档地址:https://segmentfaul ...
关于大型网站技术演进的思考（十五）--网站静态化处理—前后端分离—中（7）
出处:夏天的森林博客上篇里我讲到了一种前后端分离方案,这套方案放到服务端开发人员面前比放在web前端开发人员面前或许得到的掌声会更多,我想很多资深前端工程师看到这样的技术方案可能会有种说不出来的矛盾 ...
关于大型网站技术演进的思考（十五）--网站静态化处理—前后端分离—中（7）...
2019独角兽企业重金招聘Python工程师标准>>> 出处:夏天的森林博客上篇里我讲到了一种前后端分离方案,这套方案放到服务端开发人员面前比放在web前端开发人员面前或许得到的掌 ...
Vue 实现前后端分离项目
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue实现前后端分离项目的初体验经过之前学习的Vue的知识: vue基本指令 vue组件 vue- ...