如何实现图形验证码

使用Redis操作验证码

import org.springframework.data.redis.core.StringRedisTemplate;
/*
* desc: 该类用于操作验证码
*/
public class VerifyCodeManager {

    private final StringRedisTemplate stringRedisTemplate;

    /**
     * 生成图形验证码，并放入 Redis 中
     */
    public String genImgVerifyCode(String sessionId) throws IOException {
        // 生成4位随机数字
        String verifyCode = ImgVerifyCodeUtils.getRandomVerifyCode(4);
        // 生成图像验证码
        String img = ImgVerifyCodeUtils.genVerifyCodeImg(verifyCode);
        // 生成的同时需要写入redis数据库，设置5分钟的有效时长
        stringRedisTemplate.opsForValue().set(CacheConsts.IMG_VERIFY_CODE_CACHE_KEY + sessionId,
            verifyCode, Duration.ofMinutes(5));
        return img;
    }

    /**
     * 校验图形验证码
     */
    public boolean imgVerifyCodeOk(String sessionId, String verifyCode) {
        // 以用户sessionId为key
        return Objects.equals(stringRedisTemplate.opsForValue()
            .get(CacheConsts.IMG_VERIFY_CODE_CACHE_KEY + sessionId), verifyCode);
    }

    /**
     * 从 Redis 中删除验证码
     */
    public void removeImgVerifyCode(String sessionId) {
        // 以用户sessionId为key
        stringRedisTemplate.delete(CacheConsts.IMG_VERIFY_CODE_CACHE_KEY + sessionId);
    }
}

生成验证码图片

/*
* desc: 该类用于生成图形验证码
*/
public class ImgVerifyCodeUtils {

    /**
     * 随机产生只有数字的字符串
     */
    private final String randNumber = "0123456789";

    /**
     * 图片宽
     */
    private final int width = 100;

    /**
     * 图片高
     */
    private final int height = 38;

    private final Random random = new Random();

    /**
     * 获得字体
     */
    private Font getFont() {
        return new Font("Fixed", Font.PLAIN, 23);
    }


    /**
     * 生成校验码图片
     */
    public String genVerifyCodeImg(String verifyCode) throws IOException {
        // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        // 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
        Graphics g = image.getGraphics();
        //图片大小
        g.fillRect(0, 0, width, height);
        //字体大小
        //字体颜色
        g.setColor(new Color(204, 204, 204));
        // 绘制干扰线
        // 干扰线数量
        int lineSize = 40;
        for (int i = 0; i <= lineSize; i++) {
            drawLine(g);
        }
        // 绘制随机字符
        drawString(g, verifyCode);
        g.dispose();
        //将图片转换成Base64字符串
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        ImageIO.write(image, "JPEG", stream);
        return Base64.getEncoder().encodeToString(stream.toByteArray());
    }

    /**
     * 绘制字符串
     */
    private void drawString(Graphics g, String verifyCode) {
        for (int i = 1; i <= verifyCode.length(); i++) {
            g.setFont(getFont());
            g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                .nextInt(121)));
            g.translate(random.nextInt(3), random.nextInt(3));
            g.drawString(String.valueOf(verifyCode.charAt(i - 1)), 13 * i, 23);
        }
    }

    /**
     * 绘制干扰线
     */
    private void drawLine(Graphics g) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(13);
        int yl = random.nextInt(15);
        g.drawLine(x, y, x + xl, y + yl);
    }

    /**
     * 获取随机的校验码
     */
    public static String getRandomVerifyCode(int num) {
        int randNumberSize = randNumber.length();
        StringBuilder verifyCode = new StringBuilder();
        for (int i = 0; i < num; i++) {
            String rand = String.valueOf(randNumber.charAt(random.nextInt(randNumberSize)));
            verifyCode.append(rand);
        }
        return verifyCode.toString();
    }

}

操作Redis的缓存变量

/**
* desc：缓存相关常量
*/
public class CacheConsts {
    /**
     * 图片验证码缓存 KEY
     */
    public static final String IMG_VERIFY_CODE_CACHE_KEY =
        REDIS_CACHE_PREFIX + "imgVerifyCodeCache::";
}

DTO

@Data
@Builder
public class ImgVerifyCodeRespDto {

    /**
     * 当前会话ID，用于标识改图形验证码属于哪个会话
    **/
    private String sessionId;

    /**
     * Base64 编码的验证码图片
    **/
    private String img;

}

Controller

// 验证码相关
public class ResourceController {
    
    @Resource
    private final ResourceService resourceService;
    
    @PostMapping("imgVerifyCode")
    public RestResp<ImgVerifyCodeRespDTO> getImgVerifyCode() throws IOException {
        return resourceService.getImgVerifyCode();
    }
    
}

// 登录相关
...

Service

// 验证码相关
public class ResourceService {
 
    @Override
    public RestResp<ImgVerifyCodeRespDTO> getImgVerifyCode() throws IOException {
        String sessionId = IdWorker.get32UUID();
        return RestResp.ok(
            // lombok支持将类改成建造者模式
            ImgVerifyCodeRespDto.builder()
               .sessionId(sessionId)
               .img(verifyCodeManager.genImgVerifyCode(sessionId))
            .build()
        );
    }
    
}

// 登录相关
public class UserService {
 
    @Override
    public RestResp<LoginRespDTO> login() throws IOException {
        // 校验图形验证码是否正确
        if (!verifyCodeManager.imgVerifyCodeOk(dto.getSessionId(), dto.getVelCode())) {
            // 图形验证码校验失败
            throw new BusinessException(ErrorCodeEnum.USER_VERIFY_CODE_ERROR);
        }

        // 验证用户名密码
         ...
             
        // 登录成功
         ...
               
        // 删除验证码
        verifyCodeManager.removeImgVerifyCode(dto.getSessionId());
    }  
    
}

前端显示base64编码的图片

示例代码

<img src="inputImg">

</script>
   inputImg = 'data:image/jpeg;base64,' + res.data.body.data
</script>