• SpringBoot-生成验证码


    🧑‍🎓 个人主页Silence Lamb
    📖 本章内容:【SpringBoot-生成验证码


    问题描述

    • 🌳 后台生成验证码,用于登陆验证

    在这里插入图片描述


    前端代码

    (1)前台一个用于输入验证码;一个用于展示验证码

    (2)验证码生成以及展示,点击刷新功能,可以为绑定click事件

    (3)click事件绑定一个获取后端数据的方法,通过后台生成处理好的数据

    <div class="login-code">
    	<img :src="codeUrl" @click="getCode" class="login-code-img" alt="验证码"/>
    div>
    
    • 1
    • 2
    • 3
     getCode() {
          getCodeImage().then(response => {
           this.codeUrl = "data:image/gif;base64," + response.data.img;
          });
    },
    
    • 1
    • 2
    • 3
    • 4
    • 5

    后端代码

    1️⃣添加依赖

     <!-- 验证码 -->
    <dependency>
       <groupId>com.github.penggle</groupId>
       <artifactId>kaptcha</artifactId>
       <exclusions>
          <exclusion>
             <artifactId>javax.servlet-api</artifactId>
             <groupId>javax.servlet</groupId>
          </exclusion>
       </exclusions>
    </dependency>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2️⃣验证码文本

    /**
     * @author SilenceLamb
     * @apiNote 验证码文本
     */
    public class CaptchaText extends DefaultTextCreator {
        private static final String[] NUMBERS = "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();
            int randomoperands = random.nextInt(3);
            if (randomoperands == 0) {
                result = x * y;
                suChinese.append(NUMBERS[x]);
                suChinese.append("*");
                suChinese.append(NUMBERS[y]);
            } else if (randomoperands == 1) {
                if ((x != 0) && y % x == 0) {
                    result = y / x;
                    suChinese.append(NUMBERS[y]);
                    suChinese.append("/");
                    suChinese.append(NUMBERS[x]);
                } else {
                    result = x + y;
                    suChinese.append(NUMBERS[x]);
                    suChinese.append("+");
                    suChinese.append(NUMBERS[y]);
                }
            } else {
                if (x >= y) {
                    result = x - y;
                    suChinese.append(NUMBERS[x]);
                    suChinese.append("-");
                    suChinese.append(NUMBERS[y]);
                } else {
                    result = y - x;
                    suChinese.append(NUMBERS[y]);
                    suChinese.append("-");
                    suChinese.append(NUMBERS[x]);
                }
            }
            suChinese.append("=?@" + result);
            return suChinese.toString();
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    3️⃣验证码配置

    /**
     * @author SilenceLamb
     * @apiNote 验证码配置
     */
    @Configuration
    public class CaptchaConfig {
        @Bean(name = "captchaProducer")
        public DefaultKaptcha getKaptchaBean() {
            DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
            Properties properties = new Properties();
            // 是否有边框 默认为true 我们可以自己设置yes,no
            properties.setProperty(KAPTCHA_BORDER, "yes");
            // 验证码文本字符颜色 默认为Color.BLACK
            properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "black");
            // 验证码图片宽度 默认为200
            properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
            // 验证码图片高度 默认为50
            properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
            // 验证码文本字符大小 默认为40
            properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "38");
            // KAPTCHA_SESSION_KEY
            properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");
            // 验证码文本字符长度 默认为5
            properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
            // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
            properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
            // 图片样式 水纹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);
            defaultKaptcha.setConfig(config);
            return defaultKaptcha;
        }
    
        @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");
            // 验证码文本生成器
            properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL, "com.silence.framework.config.captcha.CaptchaText");
            // 验证码文本字符间距 默认为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.WaterRipple");
            Config config = new Config(properties);
            defaultKaptcha.setConfig(config);
            return defaultKaptcha;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70

    4️⃣验证码生成工具类

    /**
     * @author SilenceLamb
     * @apiNote 验证码生成工具类
     */
    public class CaptchaUtils {
        @Resource(name = "captchaProducer")
        private Producer captchaProducer;
    
        @Resource(name = "captchaProducerMath")
        private Producer captchaProducerMath;
    
        public Map<String, Object> creatCaptcha(String classify) {
            Map<String, Object> map = new HashMap<>();
            String capStr = null, code = null;
            BufferedImage image = null;
            if ("math".equals(classify)) {
                String capText = captchaProducerMath.createText();
                capStr = capText.substring(0, capText.lastIndexOf("@"));
                code = capText.substring(capText.lastIndexOf("@") + 1);
                image = captchaProducerMath.createImage(capStr);
                map.put("capStr", capStr);
                map.put("code", code);
                map.put("image", image);
                return map;
            } else if ("char".equals(classify)) {
                capStr = code = captchaProducer.createText();
                image = captchaProducer.createImage(capStr);
                map.put("capStr", capStr);
                map.put("code", code);
                map.put("image", image);
            }
    
            return map;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    5️⃣测试生成验证码

        /**
         * 生成验证码
         */
        @GetMapping("/captchaImage")
        public AjaxResult getCode(HttpServletResponse response) throws IOException {
            AjaxResult ajax = AjaxResult.success();
    
            // 保存验证码信息
            String uuid = IdUtils.simpleUUID();
            String verifyKey = RedisCacheConstant.CAPTCHA_CODE_KEY + uuid;
            String capStr = null;
            String code = null;
            BufferedImage image = null;
     
            // 生成验证码
            Map<String, Object> map = captchaUtils.creatCaptcha("math");
            image = (BufferedImage) map.get("image");
            capStr = (String) map.get("capStr");
            code = (String) map.get("code");
    
            redisUtils.setCacheObject(verifyKey, code, CommonConstant.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("capStr", capStr);
            ajax.put("img", Base64Utils.encode(os.toByteArray()));
            return ajax;
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    👉🏽访问http://localhost:8080/captchaImage

    在这里插入图片描述
    👉🏽图片显示:data:image/gif;base64,/+img

    data:image/gif;base64,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
    
    • 1

    在这里插入图片描述


    🏅 全栈小狐狸的逆袭之路:📢💨Java学习路线
  • 相关阅读:
    实验五:图像傅里叶变换
    哪些有哪些搜索引擎及app的下拉词可以·5月昔年优化新盘点
    刷题笔记16——数组的花式输出
    Java数据结构之稀疏数组
    MATLAB与Excel的数据交互
    为什么只会编程的程序员无法成为优秀的开发者?
    基于python的火车票售票系统/基于django火车票务网站/火车购票系统
    python 数据结构与算法 < >链表
    事务的隔离级别
    MATLAB算法实战应用案例精讲-【图像处理】机器视觉
  • 原文地址:https://blog.csdn.net/m0_46914264/article/details/126623350