生成验证码

接口代码 

    /**
     * 后台生成图形验证码 ：有效
     * @param response   @PathVariable("key") String key
     * @param
     */
    @GetMapping(value = "/randomImage")
    public SysResult randomImage(HttpServletResponse response){
        SysResult sysResult = new SysResult();
        try {
            //生成验证码
            final String BASE_CHECK_CODES = "qwertyuiplkjhgfdsazxcvbnmQWERTYUPLKJHGFDSAZXCVBNM1234567890";
            String code = RandomUtil.randomString(BASE_CHECK_CODES,4);

            //存到redis中
//            String lowerCaseCode = code.toLowerCase();
//
//            String realKey = Md5Util.md5Encode(lowerCaseCode+key, "utf-8");
//            log.info("获取验证码，Redis checkCode = {}，key = {}", code, key);
//            redisUtil.set(realKey, lowerCaseCode, 60);

            //返回前端
            String base64 = RandImageUtil.generate(code);
            log.info("验证码为："+code);
            sysResult.setData(base64);
        } catch (Exception e) {

            sysResult.setMsg("获取验证码出错"+e.getMessage());
            e.printStackTrace();
        }
        return sysResult;
    }

验证码工具类

直接生成图片返回给前端

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Base64;
import java.util.Random;

/**
 * 登录验证码工具类
 * @author: jeecg-boot
 */
public class RandImageUtil {

    public static final String key = "JEECG_LOGIN_KEY";

    /**
     * 定义图形大小
     */
    private static final int width = 105;
    /**
     * 定义图形大小
     */
    private static final int height = 35;

    /**
     * 定义干扰线数量
     */
    private static final int count = 200;

    /**
     * 干扰线的长度=1.414*lineWidth
     */
    private static final int lineWidth = 2;

    /**
     * 图片格式
     */
    private static final String IMG_FORMAT = "JPEG";

    /**
     * base64 图片前缀
     */
    private static final String BASE64_PRE = "data:image/jpg;base64,";

    /**
     * 直接通过response 返回图片
     * @param response
     * @param resultCode
     * @throws IOException
     */
    public static void generate(HttpServletResponse response, String resultCode) throws IOException {
        BufferedImage image = getImageBuffer(resultCode);
        // 输出图象到页面
        ImageIO.write(image, IMG_FORMAT, response.getOutputStream());
    }

    /**
     * 生成base64字符串
     * @param resultCode
     * @return
     * @throws IOException
     */
    public static String generate(String resultCode) throws IOException {
        BufferedImage image = getImageBuffer(resultCode);

        ByteArrayOutputStream byteStream = new ByteArrayOutputStream();
        //写入流中
        ImageIO.write(image, IMG_FORMAT, byteStream);
        //转换成字节
        byte[] bytes = byteStream.toByteArray();
        //转换成base64串
        String base64 = Base64.getEncoder().encodeToString(bytes).trim();
        //删除 \r\n
        base64 = base64.replaceAll("\n", "").replaceAll("\r", "");

        //写到指定位置
        //ImageIO.write(bufferedImage, "png", new File(""));

        return BASE64_PRE+base64;
    }

    private static BufferedImage getImageBuffer(String resultCode){
        // 在内存中创建图象
        final BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文
        final Graphics2D graphics = (Graphics2D) image.getGraphics();
        // 设定背景颜色
        // ---1
        graphics.setColor(Color.WHITE);
        graphics.fillRect(0, 0, width, height);
        // 设定边框颜色
//		graphics.setColor(getRandColor(100, 200)); // ---2
        graphics.drawRect(0, 0, width - 1, height - 1);

        final Random random = new Random();
        // 随机产生干扰线，使图象中的认证码不易被其它程序探测到
        for (int i = 0; i < count; i++) {
            // ---3
            graphics.setColor(getRandColor(150, 200));

            // 保证画在边框之内
            final int x = random.nextInt(width - lineWidth - 1) + 1;
            final int y = random.nextInt(height - lineWidth - 1) + 1;
            final int xl = random.nextInt(lineWidth);
            final int yl = random.nextInt(lineWidth);
            graphics.drawLine(x, y, x + xl, y + yl);
        }
        // 取随机产生的认证码
        for (int i = 0; i < resultCode.length(); i++) {
            // 将认证码显示到图象中,调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
            // graphics.setColor(new Color(20 + random.nextInt(130), 20 + random
            // .nextInt(130), 20 + random.nextInt(130)));
            // 设置字体颜色
            graphics.setColor(Color.BLACK);
            // 设置字体样式
//			graphics.setFont(new Font("Arial Black", Font.ITALIC, 18));
            graphics.setFont(new Font("Times New Roman", Font.BOLD, 24));
            // 设置字符，字符间距，上边距
            graphics.drawString(String.valueOf(resultCode.charAt(i)), (23 * i) + 8, 26);
        }
        // 图象生效
        graphics.dispose();
        return image;
    }

    private static Color getRandColor(int fc, int bc) { // 取得给定范围随机颜色
        final Random random = new Random();
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }

        final int r = fc + random.nextInt(bc - fc);
        final int g = fc + random.nextInt(bc - fc);
        final int b = fc + random.nextInt(bc - fc);

        return new Color(r, g, b);
    }
}

前端代码：

将得到的数据结果放入即可

		<div data-v-d59ac884="" class="ant-col ant-col-8" style="text-align: right;">
			<img data-v-d59ac884="" src="data:image/jpg;base64,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" style="margin-top: 2px;">
			</div>

 

结果：

 

校验验证码：

        //获得用户发过来的验证码 进行校验
        String captcha = sysLoginModel.getCaptcha();//获得验证码
        if(captcha==null){
            result.error500("验证码无效");
            return result;
        }
        //去除大小写
        String lowerCaseCaptcha = captcha.toLowerCase();
        //与redis中的进行比对。----------------
		String realKey = Md5Util.md5Encode(lowerCaseCaptcha+sysLoginModel.getCheckKey(), "utf-8");
		Object checkCode = redisUtil.get(realKey);
		//当进入登录页时，有一定几率出现验证码错误 #1714
		if(checkCode==null || !checkCode.toString().equals(lowerCaseCaptcha)) {
            log.warn("验证码错误，key= {} , Ui checkCode= {}, Redis checkCode = {}", sysLoginModel.getCheckKey(), lowerCaseCaptcha, checkCode);
			result.error500("验证码错误");
			return result;
		}