laravel 【mews/captcha】图片验证码 api接口形式获取、验证，不通过sessio

sunnyxd 发布于2019-07-01 10:51 / 2665人阅读

摘要：首先给出扩展地址前期准备与说明在中使用此扩展，正常的用法是通过来保存与验证用户输入的验证码是否正确，但我目前的项目是前后台彻底分离的。前后台通过来标识用户。值是与图片绑定的数值，之后需传给后台验证。

[mews/captcha]

首先给出扩展GitHub地址：https://github.com/mewebstudi...

前期准备与说明 在laravel 中使用此扩展，正常的用法是通过session来保存与验证用户输入的验证码是否正确，但我目前的项目是前后台彻底分离的。前台使用vue框架来搭建，后台用laravel来做api后台的接口。前后台通过jwt来标识用户。所以没法使用session来使用这个扩展，百度了好久，无用，最终还是在官方论坛找到解决方案，在此贴出方案，以便后来人查阅

在laravel中引入此扩展【我的框架版本laravel5.5】

composer require mews/captcha

找到config/app.php下的providers，添加如下代码

MewsCaptchaCaptchaServiceProvider::class,

找到config/app.php下的aliases，添加如下代码

"Captcha" => MewsCaptchaFacadesCaptcha::class,

发布配置文件

php artisan vendor:publish

之后便可以在 config/captcha.php下，配置验证码

return [
    "default"   => [
        "length"    => 5,
        "width"     => 120,
        "height"    => 36,
        "quality"   => 90,
    ],
    // ...
];

正文开始 因为正常用session的使用方案比较简单，在此不赘述。

下面放上通过api来验证的前后端的关键代码

PHP返回验证码

//路由
Route::get("/cp", "AppHttpApiV1LoginLoginController@captcha");
//代码
public function captcha()
{
   return $this->response->array([
       "status_code" => "200",
       "message" => "created succeed",
       "url" => app("captcha")->create("default", true)
   ]);
}

请求返回如下图：

 ![请求验证码接口返回的数据](https://img-blog.csdn.net/20181022160100203?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VyaWNfQWxpdmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

说明：这里返回的url.img是base64后的图片，可直接放入img标签中的src属性中。key值是与图片绑定的数值，之后需传给后台验证。

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.img
              this.ruleForm2.key = result.url.key
          }
     })
}

效果如下图：

vue发起登录认证验证

submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        let data = {name: this.ruleForm2.name, password: this.ruleForm2.password , captcha: 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("error submit!!");
        return false;
      }
    });
}

PHP关键验证代码

////路由，这里是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" => "Validation failed",
        "errors" => $validator->messages(),
    ];
} else {
    return [
        "msg" => "Validation passes"
    ];
}

最后通过语句来总结一下整个流程
首先是vue请求图片接口，接口返回图片的地址与key值。用户填写完后，要把这个key值与用户填写的值一同传给后台做验证。就这么简单。

结束 THE END

GPU云服务器云服务器图片验证码api接口验证码验证api接口获取验证码接口验证码接口api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29550.html

laravel开发扩展记录

摘要：自动代码扩展开发时遵守的代码风格是项目开发规范。遵照此规范，在实际操作中，有许多重复，接下来推荐一款专为此规范量身定制的代码生成器。可以利用此扩展来快速构建项目原型。后续还会为大家带来一些最新的技术扩展。 whoops 错误提示扩展 whoops 是一个非常优秀的 PHP Debug 扩展，它能够使你在开发中快速定位出错的位置。laravel默认安装。showImg(https://s...

fancyLuo 2019-08-02 12:07 评论0 收藏0
laravel开发扩展记录

摘要：自动代码扩展开发时遵守的代码风格是项目开发规范。遵照此规范，在实际操作中，有许多重复，接下来推荐一款专为此规范量身定制的代码生成器。可以利用此扩展来快速构建项目原型。后续还会为大家带来一些最新的技术扩展。 whoops 错误提示扩展 whoops 是一个非常优秀的 PHP Debug 扩展，它能够使你在开发中快速定位出错的位置。laravel默认安装。showImg(https://s...

魏宪会 2019-07-01 10:59 评论0 收藏0
下载量最高 100 个 Laravel 扩展包推荐

摘要：本文经授权转自社区，后续更新将以帖子内容和内容为准。说明另一个令人喜欢的地方，是拥有活跃的开发者社区，而活跃的开发者社区带来的，是繁华的扩展包生态。本文对上打了标签的扩展包进行整理，截止到现在年月号，有超过个扩展包，以下是下载量最大的个。本文经授权转自 PHPHub 社区，后续更新将以 PHPHub 帖子内容和 GitHub 内容为准。说明 Laravel 另一个令人喜欢的地方...

Tychio 2019-06-27 14:13 评论0 收藏0
PHP / Laravel API 开发推荐阅读清单

showImg(https://segmentfault.com/img/bV6aHV?w=1280&h=800); 社区优秀文章 Laravel 5.5+passport 放弃 dingo 开发 API 实战，让 API 开发更省心 - 自造车轮。 API 文档神器 Swagger 介绍及在 PHP 项目中使用 - API 文档撰写方案推荐 Laravel API 项目必须使用的 8 个...

shmily 2019-06-28 18:34 评论0 收藏0