当前位置: 首页 > news >正文

thinkphp think-captcha 前后端分离 图形验证码

think-captcha 本身支持API 接口的形式返回,可以看到源代码:

ob_start();
// 输出图像
imagepng($this->im);
$content = ob_get_clean();
imagedestroy($this->im);

// API调用模式
if ($this->api) {
    return [
        'code' => implode('', $text),
        'img'  => 'data:image/png;base64,' . base64_encode($content),
    ];
}
// 输出验证码图片
return response($content, 200, ['Content-Length' => strlen($content)])->contentType('image/png');

但是官方没有说明,也未提供方法验证。
我们自己实现,逻辑很简单:code就是验证码,img是base64的图形,直接给前端用
我们只需要将验证码存储到redis、file等地方。接下来上代码

// 生成验证码,使用key、value保存
public function captcha()
{
    $captcha = Captcha::create();

    $token = uniqid('captcha_', true);
    Cache::store('redis')->set($token, $captcha['code'], 300);

    return $this->data([
        'vcode' => $token,
        'image' => $captcha['img'],
    ]);
}

// 校验验证码
public function account()
{
   $captcha = Request::param('captcha');
    $vcode = Request::param('vcode');

    // 从 Redis 获取验证码
    $code = Cache::store('redis')->get($vcode);
    if (!$code || strtolower($code) !== strtolower($captcha)) {
        return $this->faiL('验证码错误');
    }
    Cache::store('redis')->delete($vcode);

    ... 其他的业务逻辑
}

前端代码就不写了,接口调用,获取到vcode和image
将vcode返回、image放到图片src中显示

相关文章:

  • 兴起的Spring Ai框架【详解 搭建Spring Ai项目,以及简单的ai大模型智能体应用,附有图文+示例代码】
  • 前缀和与差分算法
  • DeepSeek 1.5B蒸馏模型的J6部署(Llama方式)
  • 【QGIS二次开发】
  • C# 牵手DeepSeek:打造本地AI超能力
  • Hue Load Balance配置
  • Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果
  • Word快速替换修改学术论文所有中的中括号引用未上标格式
  • XML 编辑器:全面指南与最佳实践
  • springboot整合mybatisplus (详细)
  • k8s面试题总结(六)
  • 意识的本质是什么?
  • Vue.js 学习笔记
  • 010 rocketmq批量消息
  • 【STM32F103ZET6——库函数】6.PWM
  • Hue UI展示中文
  • 关于深度学习的一份介绍
  • CentOS vs Ubuntu - 常用命令深度对比及最佳实践指南20250302
  • 谈谈 ES 6.8 到 7.10 的功能变迁(6)- 其他
  • P3398 仓鼠找 sugar【题解】
  • 网站推广的主要方法有哪些/网站推广引流最快方法
  • 抽奖小程序制作/网站排名优化需要多久
  • 网站建设一般多少/自媒体软文发布平台
  • 大兴做网站的公司/互动营销平台
  • adobe mu做可视化网站/5188关键词挖掘工具
  • 免费个人logo设计网站/常见的网络推广方式包括