laravel[mews-captcha]图片验证码API接口形式的获取和校验，如session
时间：2023-03-29 14:24:21
PHP
[mews/captcha]先给出扩展的github地址：https://github.com/mewebstudi...前期准备及使用说明在laravel中使用这个扩展，正常的用法是通过session来保存和验证用户输入的验证码是否正确，但是我现在的项目是完全前后台分离的。前台使用vue框架搭建，后台使用laravel制作API后台界面。前后端使用jwt来识别用户。所以我不能使用session来使用这个扩展。百度了半天，没用。终于在官方论坛找到了解决办法，把解决办法贴在这里，方便大家以后查看。在laravel中引入这个扩展【我的框架版本laravel5.5】composerrequiremews/captcha找到config/app.php下的providers，添加如下代码\Mews\Captcha\CaptchaServiceProvider::class，找到config/app下的别名。php,添加如下代码'Captcha'=>Mews\Captcha\Facades\Captcha::class,发布配置文件phpartisanvendor:publish后，可以在config/captcha.php下配置验证码return['default'=>['长度'=>5,'宽度'=>120,'高度'=>36,'质量'=>90,],//...];正文开头是因为session的正常使用比较简单，这里不再赘述。下面是通过api验证的前后端关键代码。PHP返回验证码//路由Route::get('/cp','\App\Http\Api\V1\Login\LoginController@captcha');//代码publicfunctioncaptcha(){return$this->response->array(['status_code'=>'200','message'=>'创建成功','url'=>app('captcha')->create('default',true)]);}请求返回如下图：注意：这里返回的url.img是base64图片，可以直接放到img标签的src属性中。键值是图片绑定的值，需要传递给后台进行校验。vue发起请求验证码////html关键码
////js请求方法get_cp:()=>axios({url:host.management+'/cp',method:'GET',}),////js获取请求后处理值changeCodeImg(){api.get_cp().then((result)=>{if(result.status_code==200){this.imgcode=result.url.imgthis.ruleForm2.key=result.url.key}})}效果如下：vue发起登录认证验证submitForm(formName){this.$refs[formName].validate((有效)=>{if(有效){让数据={n名称：this.ruleForm2.name，密码：this.ruleForm2.password，验证码：this.ruleForm2.captcha，key：this.ruleForm2.key}api.login(data).then((result)=>{if(result.status_code===200){//验证成功......}else{//验证失败............//请求验证码this.ruleForm2.captcha='';this.changeCodeImg();}})}else{console.log('错误提交!!');返回假；}});}PHPkey验证码////routing,这里是dingoApi扩展的写法$api->post('login','LoginController@login');////验证操作if(!captcha_api_check($request->captcha,$request->key)){return$this->response->array(['status_code'=>400,'message'=>'验证码不匹配']);这里有两种验证方式，第一种是上面只通过一个函数方法，第二种是使用validate来验证：$data=$req->all();$validator=Validator::make($data,['ckey'=>'required','captcha'=>'required|captcha_api:'.$req->input('ckey')]);if($validator->fails()){return['msg'=>'验证失败','errors'=>$validator->messages(),];}else{return['msg'=>'验证通过'];}最后通过句子总结整个过程。首先，Vue请求图片界面。接口返回图片的地址和用户填写的键值后，还要将用户填写的键值和值发送到后台进行校验。就这么简单。结束结束
