前后分离图形验证码校验（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 协议》，转载必须注明作者和本文链接

朝着梦，踏平坎坷

wavebossy6666

课程读者 86 声望

暂无个人描述~

1 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

讨论数量: 4

dongzhiyu

130 声望

React ,前端如何嵌入呢？没有看明白！

4年前评论

wavebossy6666 （楼主）

captchaSrc 这个接口返回的数据【如imageUrl.img】,直接显示在图片的src上即可

wavebossy6666

课程读者 86 声望

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

4年前评论

dongzhiyu

有没有VUE，或者React 的呢？

wavebossy6666

课程读者 86 声望

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();
}

3年前评论

dongzhiyu

130 声望

可以不错

3年前评论

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

帮助

前后分离图形验证码校验（mews/captcha）

直接上代码

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

前后分离图形验证码校验（mews/captcha）

直接上代码

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录