若依前后端分离框架——生成数字验证码功能源码学习

最新推荐文章于 2024-04-17 23:27:48 发布
最新推荐文章于 2024-04-17 23:27:48 发布
阅读量2k 收藏 11
点赞数 4
分类专栏： 若依 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17616169/article/details/122086292
版权

使用版本：Ruo-Vue 3.8.0

项目地址：https://gitee.com/y_project/RuoYi-Vue

0.1：验证码生成流程图

流程图

0.2：验证码生成时序图

时序图

0.3：验证码的配置项

代码位置：com.google.code.kaptcha.Constants

public class Constants
{
  // session key
  public final static String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";
  // session date
  public final static String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";
  
  public final static String KAPTCHA_SESSION_CONFIG_KEY = "kaptcha.session.key";

  public final static String KAPTCHA_SESSION_CONFIG_DATE = "kaptcha.session.date";
  // 是否有边框 默认为true 我们可以自己设置yes，no
  public final static String KAPTCHA_BORDER = "kaptcha.border";
  // 边框颜色 默认为Color.BLACK
  public final static String KAPTCHA_BORDER_COLOR = "kaptcha.border.color";
  // 边框宽度
  public final static String KAPTCHA_BORDER_THICKNESS = "kaptcha.border.thickness";
  // 验证码噪点颜色 默认为Color.BLACK
  public final static String KAPTCHA_NOISE_COLOR = "kaptcha.noise.color";
  // 干扰实现类
  public final static String KAPTCHA_NOISE_IMPL = "kaptcha.noise.impl";
  // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
  public final static String KAPTCHA_OBSCURIFICATOR_IMPL = "kaptcha.obscurificator.impl";
  // 图片实现类
  public final static String KAPTCHA_PRODUCER_IMPL = "kaptcha.producer.impl";
  // 验证码文本生成器
  public final static String KAPTCHA_TEXTPRODUCER_IMPL = "kaptcha.textproducer.impl";
  // 文本集合，验证码值从此集合中获取
  public final static String KAPTCHA_TEXTPRODUCER_CHAR_STRING = "kaptcha.textproducer.char.string";
  // 验证码文本字符长度 默认为5
  public final static String KAPTCHA_TEXTPRODUCER_CHAR_LENGTH = "kaptcha.textproducer.char.length";
  // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
  public final static String KAPTCHA_TEXTPRODUCER_FONT_NAMES = "kaptcha.textproducer.font.names";
  // 验证码文本字符颜色 默认为Color.BLACK
  public final static String KAPTCHA_TEXTPRODUCER_FONT_COLOR = "kaptcha.textproducer.font.color";
  // 验证码文本字符大小 默认为40
  public final static String KAPTCHA_TEXTPRODUCER_FONT_SIZE = "kaptcha.textproducer.font.size";
  // 验证码文本字符间距 默认为2
  public final static String KAPTCHA_TEXTPRODUCER_CHAR_SPACE = "kaptcha.textproducer.char.space";
  // 文字渲染
  public final static String KAPTCHA_WORDRENDERER_IMPL = "kaptcha.word.impl";
  // 背景实现类
  public final static String KAPTCHA_BACKGROUND_IMPL = "kaptcha.background.impl";
  // 背景颜色渐变，开始颜色
  public static final String KAPTCHA_BACKGROUND_CLR_FROM = "kaptcha.background.clear.from";
  // 背景颜色渐变，结束颜色
  public static final String KAPTCHA_BACKGROUND_CLR_TO = "kaptcha.background.clear.to";
  // 验证码图片宽度 默认为200
  public static final String KAPTCHA_IMAGE_WIDTH = "kaptcha.image.width";
  // 验证码图片高度 默认为50
  public static final String KAPTCHA_IMAGE_HEIGHT = "kaptcha.image.height";
}

1：获取验证码的入口

代码位置：com.ruoyi.web.controller.common.CaptchaController#getCode

@Resource(name = "captchaProducer")
private Producer captchaProducer;

@Resource(name = "captchaProducerMath")
private Producer captchaProducerMath;

@Autowired
private RedisCache redisCache;

@Autowired
private ISysConfigService configService;
/**
 * 生成验证码
 */
@GetMapping("/captchaImage")
public AjaxResult getCode(HttpServletResponse response) throws IOException
{
    // 是否需要生成验证码
    AjaxResult ajax = AjaxResult.success();
    // 
    boolean captchaOnOff = configService.selectCaptchaOnOff();
    ajax.put("captchaOnOff", captchaOnOff);
    if (!captchaOnOff)
    {
        return ajax;
    }

    String uuid = IdUtils.simpleUUID();
    String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

    String capStr = null, 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
    {
        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;
}

这里重点研究如何生成验证码

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

以下是对自定义生成验证码类进行分析

1.1：自定义captchaProducerMath

代码位置：com.ruoyi.framework.config.CaptchaConfig#getKaptchaBeanMath

@Bean(name = "captchaProducerMath")
public DefaultKaptcha getKaptchaBeanMath()
{
    DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
    Properties properties = new Properties();
    // 是否有边框 默认为true 我们可以自己设置yes，no
    properties.setProperty(KAPTCHA_BORDER, "yes");
    // 边框颜色 默认为Color.BLACK
    properties.setProperty(KAPTCHA_BORDER_COLOR, "105,179,90");
    // 验证码文本字符颜色 默认为Color.BLACK
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "blue");
    // 验证码图片宽度 默认为200
    properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
    // 验证码图片高度 默认为50
    properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
    // 验证码文本字符大小 默认为40
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "35");
    // KAPTCHA_SESSION_KEY
    properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCodeMath");
    // 验证码文本生成器【1】
    properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL, "com.ruoyi.framework.config.KaptchaTextCreator");
    // 验证码文本字符间距 默认为2
    properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_SPACE, "3");
    // 验证码文本字符长度 默认为5
    properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "6");
    // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
    properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
    // 验证码噪点颜色 默认为Color.BLACK
    properties.setProperty(KAPTCHA_NOISE_COLOR, "white");
    // 干扰实现类
    properties.setProperty(KAPTCHA_NOISE_IMPL, "com.google.code.kaptcha.impl.NoNoise");
    // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
    properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
    Config config = new Config(properties);
    //【2】
    defaultKaptcha.setConfig(config);
    return defaultKaptcha;
}
  • 【1】这里使用了自定义的验证码文本生成器，以下为自定义的验证码文本生成器的源码
  • 【2】在这里使用反射的方式将自定义的文本生成器反射到DefaultKaptcha里

1.2：自定义的文本生成器

代码位置：com.ruoyi.framework.config.KaptchaTextCreator

/**
 * 验证码文本生成器
 * 
 * @author ruoyi
 */
 // 【1】
public class KaptchaTextCreator extends DefaultTextCreator
{
    private static final String[] CNUMBERS = "0,1,2,3,4,5,6,7,8,9,10".split(",");

    @Override
    public String getText()
    {
        Integer result = 0;
        Random random = new Random();
        int x = random.nextInt(10);
        int y = random.nextInt(10);
        StringBuilder suChinese = new StringBuilder();
        // 【2】
        int randomoperands = (int) Math.round(Math.random() * 2);
        if (randomoperands == 0)
        {
            // 【3】
            result = x * y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("*");
            suChinese.append(CNUMBERS[y]);
        }
        else if (randomoperands == 1)
        {
            // 【4】
            if (!(x == 0) && y % x == 0)
            {
                // 【5】
                result = y / x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("/");
                suChinese.append(CNUMBERS[x]);
            }
            else
            {
                // 【6】
                result = x + y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("+");
                suChinese.append(CNUMBERS[y]);
            }
        }
        else if (randomoperands == 2)
        {
            // 【7】
            if (x >= y)
            {
                // 【8】
                result = x - y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[y]);
            }
            else
            {
                // 【9】
                result = y - x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[x]);
            }
        }
        else
        {
            // 【10】
            result = x + y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("+");
            suChinese.append(CNUMBERS[y]);
        }
        suChinese.append("=?@" + result);
        return suChinese.toString();
    }
}
  • 【1】：需要继承DefaultTextCreator类
  • 【2】：Math.round会取到最接近的整数，所以Math.round(Math.random() * 2)的结果只会是0、1、2
  • 【3】【4】【7】【10】：做了一个小测试，这四个分支的的占比大约是25：50：25：0
  • 【5】【6】：这两个分支的占比大约是16：34
  • 【8】【9】：这两个分支的占比大约是14：11
leo的心
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JAVA上百实例源码以及开源项目
01-03
Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,系统相关,数字签名,数字证书 　Java 数字签名、数字证书的相关实例。 　关于数字签名：产生RSA密钥对(myKeyPair)，得到RSA密钥对，产生Signature对象,...
JAVA上百实例源码以及开源项目源代码
09-17
Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,系统相关,数字签名,数字证书 　Java 数字签名、数字证书的相关实例。 　关于数字签名：产生RSA密钥对(myKeyPair)，得到RSA密钥对，产生Signature对象,...
若依框架讲解后端利用DefaultKaptcha生成验证码及校验
ProZuoy的博客
05-14 1900
若依框架之验证码生成与消炎
引入kaptcha图形验证码及其配置
ElendaLee的专栏
10-21 1082
引入kaptcha图形验证码及其配置
学生信息管理系统毕业设计---SpringBoot+Vue前后端分离
最新发布
mr_lili_111的博客
04-17 5985
学生信息管理系统毕业设计
google kaptcha 验证码组件使用简介
lisheng19870305的专栏
05-11 3043
kaptcha 是一个非常实用的验证码生成工具。有了它，你可以生成各种样式的验证码，因为它是可配置的。kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一个图片。同时将生成的验证码字符串放到 HttpSession中。 使用kaptcha可以方便的配置： 验证码的字体 验证码字体的大小 验证码字体的字体颜色 验证码内容的范围(数字，字母，中文汉字！) 验证码图片的大小，边框，边框粗细，边框颜色 验证码的干扰线(可以
Kaptcha谷歌验证码生成策略
qq_53782835的博客
04-11 454
在config包下新建KaptchaConfig，配置验证码生成的规则。
java constants_Java中的Constants类
weixin_32646781的博客
02-12 2130
1、遇到代码中的问题String userName = (String) request.getParameter("userName");String passWord = (String) request.getParameter("passWord");String inputKaptcha = (String) request.getParameter("kaptcha");//下面这句代...
若依前后端分离框架——初始化参数功能源码学习
一点点
12-22 1260
版本：Ruo-Vue 3.8.0 项目地址：https://gitee.com/y_project/RuoYi-Vue 0：初始化参数时序图 1：init() 初始化代码位置：com.ruoyi.system.service.impl.SysConfigServiceImpl#init @PostConstruct public void init() { loadingConfigCache(); } @PostConstruct ：@PostContruct是Java自带的注解，在方法上加
ASP.NET源码——[CMS程序]KingCMS for ASP.net v1.0.0.74.zip
10-09
ASP.NET是微软推出的服务器端Web应用程序框架，以其强大的性能、安全性和易用性著称。它支持Web Forms、MVC和Web API等多种开发模式，可以构建动态、交互式的Web应用。 KingCMS的核心功能包括： 1. **内容管理**：...
java web项目——BBS论坛（程序源论坛）
04-23
4. **MVC (Model-View-Controller)**：设计模式，将业务逻辑、数据和界面显示分离，提高代码可维护性。 5. **MySQL**：关系型数据库管理系统，用于存储用户信息、帖子内容、评论等数据。 二、系统功能模块 1. **...
com.google.code.kaptcha:2.3.2 谷歌验证码依赖下载
02-10
com.google.code.kaptcha:2.3.2 谷歌验证码依赖下载
PHP实例开发源码-源码交易网站平台 php版.zip
11-23
《PHP实例开发源码——构建源码交易网站平台》 PHP作为一款强大的开源脚本语言，广泛应用于Web开发，尤其在构建动态交互式网站方面表现出色。本实例开发源码提供了一个基于PHP的源码交易网站平台，为开发者提供了一...
Ruoyi框架源码研读（一）—— 验证码的生成
羽路星尘的博客
07-18 1091
Ruoyi框架的深入研究，内容持续更新中。
RuoYi(若依开源框架)-前后端分离版-前端流程简单分析
热门推荐
qq_41607217的博客
07-21 1万+
RuoYi(若依开源框架)-前后端分离版-前端项目流程简单分析 项目结构 ├── build // 构建相关 ├── bin // 执行脚本 ├── public // 公共文件 │ ├── favicon.ico // favicon图标 │ └── index.html // html模板 ├── src
【SpringBoot进阶】动态验证码生成
最爱吃大米的博客
04-05 1910
话不多说，直接上代码 @RestController public class CaptchaController { @Resource(name = "captchaProducer") private Producer captchaProducer; @Resource(name = "captchaProducerMath") private Producer captchaProducerMath; @Autowired private Red
一个很好用且开源的java验证码框架kaptcha
qyhua的专栏
12-26 1277
kaptcha是一个优秀的验证码框架 ，在不多的项目中使用了很多年很稳定，功能强大配置项很丰富，可以根据不同的需求配置不同的效果。
对若依框架的步骤解读之生成验证码
qq_56823707的博客
02-27 1606
对若依框架的步骤解读之验证码
若依项目学习之登录生成验证码
wsb_2526的博客
02-12 573
若依项目学习之登录生成验证码
若依框架生成前端资源
09-27
若依框架生成前端资源的过程可以通过以下步骤来实现： 1. 在若依框架的后端项目中，使用@maven-plugin插件来生成前端资源。该插件会将前端资源打包并输出到指定的目录。 2. 在前端项目中，使用npm命令安装相关的前端依赖。 3. 在前端项目的配置文件中，配置若依框架的后端接口地址，并根据需要进行其他相关配置。 4. 在前端项目中，使用webpack等构建工具对前端资源进行编译和打包。可以配置不同的构建任务，例如开发环境和生产环境。 5. 构建完成后，前端资源会生成在指定的目录中。可以通过访问该目录下的index.html文件来访问若依框架生成的前端页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

leo的心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值