Spring Boot | 接入Google kaptcha+Redis实现图片验证码登录

深碍√TFBOYSˉ_ 2022-10-30 01:21 193阅读 0赞

#### 前言 ####

本文将基于Kaptcha实现图片验证码登录，Kaptcha是Google官方做的一个验证码库。

用验证码登录的思路及步骤如下：

1.  前台登录界面生成时发送请求**从后台获取验证码图片**
2.  后台生成验证码图片后，再生成uuid，**把验证码对应的正确字符str和这个uuid进行KV映射存储到Redis**中，返回给前台，顺便**把验证码的uuid放到请求的Cookie中**。
3.  用户登录：用户输入账号密码、验证码，随后带**着Cookie中的uuid一起发送**给后台。
4.  后台把redis中的字符值和前台传入的进行**比较**，如果可行，那么就继续比对账号密码，看是否正确。

#### 前台展示实现 ####

我们首先需要一个普遍的登录界面，这里就以thymeleaf的一个模板登录为例,当然也可以自己实现，只是一个展示界面而已。

不过，需要注意的是上面的验证码显示方式，直接src加上自己后台的接口路径即可。

**src**要对应后台接口地址，当请求的时候，把Cookie和账号密码一起发送给后台

post('/user-rest/login', {
        
                    'email': email,
                    'password': md5(password),
                    'verifyCode':verificationCode,
                    'verifyCodeUid':getCookie("verifyCodeKey")
                }, function (data) {
        
                    localStorage.setItem('token', data);
                    location.reload();
                });

获取Cookie方法如下：

大概是这样一个界面

![image-20210215001007508][]

除此之外，事实上，应该为验证码点击事件做监听，每点击一次，就刷新验证码一次。

// 刷新验证码
    $('#verifyCode').on('click', function () {
        
    
        //加时间戳，防止浏览器利用缓存
        const src = "/verifyCode/getVerifyCode?" + new Date().getTime();
        $('#verifyCode').attr("src", src);
    });

![在这里插入图片描述][20210216171503564.gif_pic_center]

#### 后台验证码逻辑实现 ####

Kaptcha在github上貌似并没有Google Kaptcha的直接仓库，我们使用penggle老兄的Copy就可以。

![image-20210214233446106][]

引入Pom文件

<dependency>
        <groupId>com.github.penggle</groupId>
        <artifactId>kaptcha</artifactId>
        <version>2.3.2</version>
    </dependency>

可以对Kaptcha对验证码的样式做进一步的配置

/**
     * 验证码配置
     */
    @Configuration
    public class KaptchaConfig {
        
        @Bean
        public DefaultKaptcha getDefaultKaptcha() {
        
            DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
            Properties properties = new Properties();
            // 图片边框
            properties.setProperty("kaptcha.border", "yes");
            // 边框颜色
            properties.setProperty("kaptcha.border.color", "105,179,90");
            // 字体颜色
            properties.setProperty("kaptcha.textproducer.font.color", "red");
            // 图片宽
            properties.setProperty("kaptcha.image.width", "110");
            // 图片高
            properties.setProperty("kaptcha.image.height", "40");
            // 字体大小
            properties.setProperty("kaptcha.textproducer.font.size", "30");
            // session key
            properties.setProperty("kaptcha.session.key", "code");
            // 验证码长度
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            // 字体
            properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
            Config config = new Config(properties);
            defaultKaptcha.setConfig(config);
    
            return defaultKaptcha;
        }
    }

进一步生成验证码图片，实现一个验证码Util类

public class VerifyCodeUtil {
        
    
        // 传入BufferedImage对象，并将生成好的验证码保存到BufferedImage中
        public static String drawRandomText(int width, int height, BufferedImage verifyImg) {
        
    
            Graphics2D graphics = (Graphics2D) verifyImg.getGraphics();
            //设置画笔颜色-验证码背景色
            graphics.setColor(Color.WHITE);
            //填充背景
            graphics.fillRect(0, 0, width, height);
            graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));
    
            //数字和字母的组合
            String baseNumLetter = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
    
            StringBuilder builder = new StringBuilder();
            //旋转原点的 x 坐标
            int x = 10;
            String ch;
            Random random = new Random();
    
            for (int i = 0; i < 4; i++) {
        
                graphics.setColor(getRandomColor());
    
                //设置字体旋转角度,角度小于30度
                int degree = random.nextInt() % 30;
                int dot = random.nextInt(baseNumLetter.length());
    
                ch = baseNumLetter.charAt(dot) + "";
                builder.append(ch);
    
                //正向旋转
                graphics.rotate(degree * Math.PI / 180, x, 45);
                graphics.drawString(ch, x, 45);
    
                //反向旋转
                graphics.rotate(-degree * Math.PI / 180, x, 45);
                x += 48;
            }
    
            //画干扰线
            for (int i = 0; i < 6; i++) {
        
                // 设置随机颜色
                graphics.setColor(getRandomColor());
    
                // 随机画线
                graphics.drawLine(random.nextInt(width), random.nextInt(height),
                        random.nextInt(width), random.nextInt(height));
    
            }
    
            //添加噪点
            for (int i = 0; i < 30; i++) {
        
                int x1 = random.nextInt(width);
                int y1 = random.nextInt(height);
    
                graphics.setColor(getRandomColor());
                graphics.fillRect(x1, y1, 2, 2);
            }
            return builder.toString();
        }
    
        /**
         * 随机取色
         */
        private static Color getRandomColor() {
        
            Random ran = new Random();
            return new Color(ran.nextInt(256),
                    ran.nextInt(256), ran.nextInt(256));
    
        }
    }

@Controller
    @RequestMapping("/verifyCode")
    @AllArgsConstructor
    public class KaptchaController {
        
    
        RedisUtil redisUtil;
        /* 获取验证码图片*/
    
        @RequestMapping("/getVerifyCode")
        public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) throws IOException {
        
    
            int width = 200;
            int height = 69;
            //生成对应宽高的初始图片
            BufferedImage verifyImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            //单独的一个类方法，出于代码复用考虑，进行了封装。功能是生成验证码字符并加上噪点，干扰线，返回值为验证码字符
            String randomText = VerifyCodeUtil.drawRandomText(width, height, verifyImg);
            // 保存到redis中
            String verifyCodeKey = IdUtils.simpleUUID();
            redisUtil.setEx(Constant.CAPTCHA_CODE_KEY+verifyCodeKey, randomText, 10, TimeUnit.MINUTES);
            //必须设置响应内容类型为图片，否则前台不识别
            response.setContentType("image/png");
            Cookie cookie = new Cookie("verifyCodeKey",verifyCodeKey);
            cookie.setHttpOnly(false);
            // ！！！注意这里一定要设置成 前台获取界面的界面路径，这里我是'/''，不然获取不到cookie
            cookie.setPath("/");
            response.addCookie(cookie);
            //获取文件输出流
            OutputStream os = response.getOutputStream();
            //输出图片流
            ImageIO.write(verifyImg, "png", os);
            os.flush();
            os.close();//关闭流
    
        }
    }

![image-20210215232110777][]

有了前面的铺垫，后台接口逻辑理解起来就很简单了，去redis里取出来uuid和对应的验证码即可。

@Override
        public ResultModel<String> emailLogin(UserEmailLoginRequest request) {
        
            // 判断请求是否合法
            UserValidator.emailLogin(request);
            // 根据uuid去redis找正确的验证码
            String rightCode = redisUtil.get(Constant.CAPTCHA_CODE_KEY + request.getVerifyCodeUid());
            // 与前台传来的进行比对
            if (!request.getVerifyCode().equals(rightCode)) {
        
                // 登陆失败
                return ResultModelUtil.fail(ErrorCodeEn.USER_VERIFY_CODE_ERROR);
            }
            // 登陆成功
            return ResultModelUtil.success(userManager.emailLogin(request));
        }

![c6d0ffc55880762c8df3035b0eb78948.gif][]

#### 总结 ####

本篇博文参考了一些文章，但进行了自己的改动，其他文章的实现验证码的demo都是往session中放，并且是放\*\*“verifycode”：验证码值\*\*这样的键值对，事实上，这样是不可行的，测试还行，但是如果要真正写服务，是这样是不能实现多人登录的。

需要注意的是，uuid是保存在前台的，需要在返回给前台图片验证码的时候，就把uuid设置到cookie上，便于映射。

部分参考以下文章：

https://www.jb51.net/article/121398.htm
    
    https://blog.csdn.net/hao65103940/article/details/81906718

[image-20210215001007508]: /images/20221024/ca4d4374d4fc40438101ae625ec793d1.png
[20210216171503564.gif_pic_center]: /images/20221024/b76e9b9ae9a34748af3523e293b3be50.png
[image-20210214233446106]: /images/20221024/c508ebe99d2f445197dc6b82291a8fee.png
[image-20210215232110777]: /images/20221024/8594113c19f047878c4d090e6210d7c3.png
[c6d0ffc55880762c8df3035b0eb78948.gif]: /images/20221024/a7940c6749f94762843d3ef0426985cb.png