RuoYi若依系统的验证码如何替换为更美观的EasyCaptcha

Posted 2023-04-18

参考技术A 图片验证码经常验证如下一些场景。（1）用户登录，防止机器人登录；（2）论坛留言，防止恶意灌水；（3）短信验证码发送，防止盗刷短信。

Kaptcha 是一个由谷歌Googel出品的可高度配置的实用验证码生成工具，是一个非常经典的图片验证码解决方案。但，这个开源的工具生成的图片比较素雅，美观度一般，且项目已经基本不维护了，从github上看，最近的一次更新是在3年前。

（1）在 ruoyi-frameworkpom.xml 添加依赖：

（2）在应用子系统中修改验证码生成的代码，比如ruoyi-admin的CaptchaController中修改getCode方法的代码：

（3）在前端项目中，RuoYi-Vue3srcviewslogin.vue的getCode方法中修改如下：

（4）再分别重启前后端系统，就可以看到效果了。

【本文结束】

若依登陆模块探究

若依注册登陆模块探究

后端

验证码的实现

运用技术：DefaultKaptcha

官网：klesh/kaptcha

在com.ruoyi.framework.config.CaptchaConfig类中对验证码进行默认配置

验证码操作在com.ruoyi.web.controller.common.CaptchaController类中

在Redis里面除了放验证码的正确结果，还放了一个UUID，用来校验请求是否被劫持

package com.ruoyi.web.controller.common;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import com.ruoyi.common.config.RuoYiConfig;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.FastByteArrayOutputStream;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import com.google.code.kaptcha.Producer;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.utils.sign.Base64;
import com.ruoyi.common.utils.uuid.IdUtils;
import com.ruoyi.system.service.ISysConfigService;

/**
 * 验证码操作处理
 * 
 * @author ruoyi
 */
@RestController
public class CaptchaController

    @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);
        
        //将uuid，结果和过期时间放入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());
        
        //将uuid传给前端，用来提交表单的时候做验证
        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    

注册流程的实现

注册中各个模块用到的类

JWT json web token

什么是 JWT – JSON WEB TOKEN - 简书 (jianshu.com)

在com.ruoyi.framework.web.service.TokenService 类中实现了 令牌验证处理 的业务

token 认证的流程：

• 用户使用用户名密码来请求服务器
• 服务器进行验证用户的信息
• 服务器通过验证发送给用户一个token
• 客户端存储token，并在每次请求时附送上这个token值
• 服务端验证token值，并返回数据

在com.ruoyi.framework.web.service.SysPermissionService 中实现了用户权限处理的业务，包括可以返回当前用户权限字符串的set

在com.ruoyi.framework.web.service.SysRegisterService 类中实现注册校验的方法

注册流程

注册的请求和路由控制在com.ruoyi.web.controller.system.SysRegisterController类中实现