TienChin 验证码响应结果分析&验证码生成接口分析

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容Redis),内存型 2GB
简介: 首先从前端开始进行分析,进入到登录页面,打开开发者工具(f12),找到 network,f5 刷新一下页面,然后,筛选一下,筛选内容为 Fetch/XHR:

验证码响应结果分析


首先从前端开始进行分析,进入到登录页面,打开开发者工具(f12),找到 network,f5 刷新一下页面,然后,筛选一下,筛选内容为 Fetch/XHR



你会发现列表中有两项内容,我们只需要查看 captchaImage 即可,从名字就可以看出是验证码图片的意思,然后我们查看这个响应结果是什么,响应结果

{
    "msg": "操作成功",
    "img": "...",
    "code": 200,
    "captchaEnabled": true,
    "uuid": "f17217c9743a445298ec85e317f29537"
}


  • captchaEnabled: 验证码是否需要开启,true 开启,false 不开启
  • img:Base64 编码的图片(如果返回二进制会乱码不好理解,前端可以将 Base64 渲染成为图片)
  • uuid:整个系统的 securityId(登录后端有个 session,返回给前端存储到 Cookie 当中,每次带着 Cookie 服务端就知道你已经登录过了,这是传统的方式与做法,ruoyi 使用的是 JWT,但是和传统的 Session 与 Cookie 差不多,换汤不换药)


?> Base64 字符串转图片: https://tool.jisuapi.com/base642pic.html

2105804-20230622171847679-1856792256.png

验证码生成接口分析

通过如上的介绍我们其实已经拿到了验证码接口的名称了,复制一下,去后端当中全局搜这个名字(ctrl + shift + f),会出现如下结果:

2105804-20230622172335093-446470077.png

到这里我其实介绍了一下,遇到了新项目如何去找接口的位置,这是我比较推荐的一种方式,其它方式就是自己去后端工程当中进行搜寻,这种如果项目比较小还好,太大了我还是推荐我第一种推荐的方式也是现在一直在用的方式进行接口定位。


CaptchaController

captchaImage 方法解刨,如下代码首先去确认了一下验证码是否需要开启:

boolean captchaEnabled = configService.selectCaptchaEnabled();


如果为 false 直接返回响应结果,则前端没有验证码需要进行填写。


!> 这个结果是可以去数据库更改,但是数据库更改了不会立马生效因为更改之前的配置结果保存在 Redis 有一份,所以还需要去删除掉 Redis 在重新加载才会生效



如果 captchaEnabled 为 true,继续往下走,生成验证码,验证码类型分为 mathchar,根据不同的类型去生成,captchaTypeRuoYiConfig 中获取,我们来看看 RuoYiConfig 是什么:



可以看到是从我们的外部配置文件动态装配进来的我们去看看这个文件内容的大致结构,其实就是从 application.yml 中获取,我们自定义了一个关键词为 tienchin 在下面配置了一个 captchaType



math

数值计算的验证码也就是需要自己根据生成的验证码自己计算正确的结果,例如,7+7=?, 那么底层是如何解析这个正确的答案的呢,关键代码如下:



8+1=?@9,根据 @ 截取,前面部分的返回给前端,后面的正确答案会放入 Redis 进行存储,然后通过 Base64 转换返回给前端了。


char

char 就是典型的验证码形式,就是将一串字符以一张图片的形式展示给用户进行填写,我们将正确的验证码结果,存储在 Redis,登录的时候拿着用户输入的与我们 Redis 存在的进行对比即可完成校验。


最终 captchaImage 接口各个部分的代码解释如下:

/**
 * 生成验证码
 */
@GetMapping("/captchaImage")
public AjaxResult getCode() {
    // 创建一个 AjaxResult 这个是用于返回响应结果是实体类对象
    AjaxResult ajax = AjaxResult.success();
    // 查看验证码的配置是否开启了验证码
    boolean captchaEnabled = configService.selectCaptchaEnabled();
    // 将标志写入到响应结果中
    ajax.put("captchaEnabled", captchaEnabled);
    // 如果没有开启则直接返回告诉前端
    if (!captchaEnabled) {
        return ajax;
    }
    // 得到一个UUID
    String uuid = IdUtils.simpleUUID();
    // 生成验证码的Redis保存Key
    String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + uuid;
    // 定义变量
    String capStr, code = null;
    // 定义一个缓冲的图片流用于将验证码写给前端使用转换为流的形式
    BufferedImage image = null;
    // 生成验证码
    String captchaType = RuoYiConfig.getCaptchaType();
    if ("math".equals(captchaType)) {
        // 逻辑略过(因为太简单)
        String capText = captchaProducerMath.createText();
        capStr = capText.substring(0, capText.lastIndexOf("@"));
        code = capText.substring(capText.lastIndexOf("@") + 1);
        image = captchaProducerMath.createImage(capStr);
    } else if ("char".equals(captchaType)) {
        // 逻辑略过(因为太简单)
        capStr = code = captchaProducer.createText();
        image = captchaProducer.createImage(capStr);
    }
    // 写入Redis
    redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
    // 转换流信息写出,创建了一个输出流
    FastByteArrayOutputStream os = new FastByteArrayOutputStream();
    try {
        // 逻辑略过(因为太简单)
        assert image != null;
        ImageIO.write(image, "jpg", os);
    } catch (IOException e) {
        // 逻辑略过(因为太简单)
        return AjaxResult.error(e.getMessage());
    }
    // 逻辑略过(因为太简单)
    ajax.put("uuid", uuid);
    ajax.put("img", Base64.encode(os.toByteArray()));
    return ajax;
}

?> 觉得逻辑清晰写的不错,还请麻烦给个关注与点赞支持一下博主,这将成为博主更新的动力。

目录
相关文章
|
7天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1327 7
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
305 130
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
16天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1399 87
|
4天前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
5天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
301 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
|
6天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程(新手图文详细流程)
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程,涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤,助您快速完成网站上线前的准备工作。
234 82
2025年阿里云域名备案流程(新手图文详细流程)