前后分离图形验证码校验(mews/captcha)

代码备份录—— laravel6.0 前后分离使用图形验证码校验

直接上代码

引入扩展
1、composer require mews/captcha

控制器
use Mews\Captcha\Facades\Captcha;

public function captchaSrc(){ 
    门面
    return $this->returnJson(self::$req_code,"ok",[
    "imageUrl"=>Captcha::create("default",true)
    ]); 
}

注:Captcha::create("default",true) 将返回 图片base64格式+key+sensitive 3个字段
主要图片用于显示
key用于传回服务端做本次用户输入的于它进行校验

校验方式[建议这种方式,用Validator::make可能并不兼容其他版本]
// $par["captcha"] 表示用户输入的值
// $par["key"] 表示上方返回的参数
if(!captcha_api_check($par["captcha"],$par["key"])){
  return $this->returnJson(self::$req_code,"验证码错误",[],self::$err_parameter);
}

本作品采用《CC 协议》,转载必须注明作者和本文链接
朝着梦,踏平坎坷
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 4

React ,前端如何嵌入呢?没有看明白!

3年前 评论
wavebossy6666 (楼主) 3年前
前端请求接口返回的数据,设置图片的src即可【下方是jquery设置属性】
myAjax("/api/admin/captchaSrc",{},"get",function(res){
       $("#captchaPic").attr("src",res.data.img);
       return false;
 });
3年前 评论
dongzhiyu 3年前

vue 写法
html部分

<div class="yzmBox">
    <div>
        ...
        <el-input ref="authCode" v-model="loginForm.authCode" placeholder="验证码" name="authCode" type="text" class="yzmImg" tabindex="1" auto-complete="on" />
        </el-form-item>
    </div>
    <img :src="yzm" alt="" @click="abish">
    ...
</div>

js部分

abish() { // 点击图片进行刷新
    this.$request({
    url: '/api/admin/captchaSrc',
    methods: 'get',
    }).then(res => {
        this.yzm = res.data.img 
    })
}

mounted() {
    this.abish();
}
2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!