SpringSceurity(3)---图形验证码功能实现

短命女 2022-09-03 15:12 215阅读 0赞

# 前言 #

从狂神的视频中只学了认证授权，记住我等功能，他没有录制关于图形验证码功能的视频，在看了前两篇文章后，看到关于图片验证码功能的博客，就一起都学了吧。写着博客记录着，忘了也没关系，以后那天用到了在回来看看。

**原文**：[https://www.cnblogs.com/qdhxhz/p/12791083.html][https_www.cnblogs.com_qdhxhz_p_12791083.html]

--------------------

有关springSceurity之前有写过两篇文章：

[1、SpringSecurity(1)—认证+授权代码实现][1_SpringSecurity_1]

[2、SpringSecurity(2)—记住我功能实现][2_SpringSecurity_2]

这篇我们来讲图形验证码功能实现。

--------------------

# 一、思路 #

springSceurity整合图形验证码的大致思路：

1.  首先对于验证码本身而言,应该有三部分组成
    
    1.  存放验证码的背景图片
    2.  验证码
    3.  验证码的有效时间。
2.  对于springSceurity而言,验证码的执行校验顺序肯定是在UsernamePasswordAuthenticationFilter之前的，因为如果验证码都不对，那么根本都不需要验证账号密码。所以我们需要自定义一个验证码过滤器，并且配置在UsernamePasswordAuthenticationFilter之前执行。
3.  对于获取验证码的接口，肯定是不需要进行认证限制的。
4.  对于获取验证码的接口的时候，需要把该验证码信息+当前浏览器的SessonId绑定在一起存在Seesion中,为了后面校验的时候通过SessonId  
    去取这个验证码信息。
5.  登陆请求接口，除了带上用户名和密码之外，还需要带上验证码信息。在进入验证码过滤器的时候,首先通过SessonId获取存在Sesson中的验证码信息，拿到验证码信息之后首先还要校验该验证码是否在有效期内。之后再和当前登陆接口带来的验证码进行对比，如果一致，那么当前验证码这一关就过了，就开始验证下一步账号和密码是否正确了。

整个流程大致就是这样。下面现在是具体代码，然后进行测试。

# 二、代码展示 #

这里只展示核心代码，有需要的可以去原文找github地址，下载下来第三个项目就是。

**原文**：[https://www.cnblogs.com/qdhxhz/p/12791083.html][https_www.cnblogs.com_qdhxhz_p_12791083.html]

## 1、ImageCodeProperties ##

这个是一个bean实体，是一个图形验证码的默认配置。

@Data
    public class ImageCodeProperties { 
        /** * 验证码宽度 */
        private int width = 67;
        /** * 验证码高度 */
        private int height = 23;
        /** * 验证码长度 */
        private int length = 4;
        /** * 验证码过期时间 */
        private int expireIn = 60;
        /** * 需要验证码的请求url字符串，用英文逗号隔开 */
        private String url = "/login";
    
    }

2、ImageCode  
这个是图片验证码的完整信息,也会将这个完整信息存放于Sesson中。

图片验证码信息 由三部分组成 :

1.  图片信息（长、宽、背景色等等）。
2.  code就是真正的验证码,用来验证用。
3.  该验证码的有效时间。

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class ImageCode { 
    
        private BufferedImage image;
        private String code;
        private LocalDateTime expireTime;
    
        public ImageCode(BufferedImage image, String code, int expireIn) { 
            this.image = image;
            this.code = code;
            this.expireTime = LocalDateTime.now().plusSeconds(expireIn);
        }
        /** * 校验是否过期 */
        public boolean isExpired() { 
            return LocalDateTime.now().isAfter(expireTime);
        }
    }

## 3、ValidateCodeGeneratorService ##

获取验证码的接口

public interface ValidateCodeGeneratorService { 
    
        /** * 生成图片验证码 * * @param request 请求 * @return ImageCode实例对象 */
        ImageCode generate(ServletWebRequest request);
    }

## 4、ImageCodeGeneratorServiceImpl ##

获取图片验证码的接口的实现类

@Data
    public class ImageCodeGeneratorServiceImpl implements ValidateCodeGeneratorService { 
    
        private static final String IMAGE_WIDTH_NAME = "width";
        private static final String IMAGE_HEIGHT_NAME = "height";
        private static final Integer MAX_COLOR_VALUE = 255;
    
        private ImageCodeProperties imageCodeProperties;
    
        @Override
        public ImageCode generate(ServletWebRequest request) { 
            //设置图片的宽度和高度
            int width = ServletRequestUtils.getIntParameter(request.getRequest(), IMAGE_WIDTH_NAME, imageCodeProperties.getWidth());
            int height = ServletRequestUtils.getIntParameter(request.getRequest(), IMAGE_HEIGHT_NAME, imageCodeProperties.getHeight());
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics g = image.getGraphics();
            //验证码随机数
            Random random = new Random();
    
            // 生成画布
            g.setColor(getRandColor(200, 250));
            g.fillRect(0, 0, width, height);
            g.setFont(new Font("Times New Roman", Font.ITALIC, 20));
            g.setColor(getRandColor(160, 200));
            for (int i = 0; i < 155; i++) { 
                int x = random.nextInt(width);
                int y = random.nextInt(height);
                int xl = random.nextInt(12);
                int yl = random.nextInt(12);
                g.drawLine(x, y, x + xl, y + yl);
            }
    
            // 生成数字验证码
            StringBuilder sRand = new StringBuilder();
            for (int i = 0; i < imageCodeProperties.getLength(); i++) { 
                String rand = String.valueOf(random.nextInt(10));
                sRand.append(rand);
                g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
                g.drawString(rand, 13 * i + 6, 16);
            }
    
            g.dispose();
            //这样验证码的图片 、数字、有效期都有组装好了
            return new ImageCode(image, sRand.toString(), imageCodeProperties.getExpireIn());
        }
    
        /** * 生成随机背景条纹 * * @param fc 前景色 * @param bc 背景色 * @return RGB颜色 */
        private Color getRandColor(int fc, int bc) { 
            Random random = new Random();
            if (fc > MAX_COLOR_VALUE) { 
                fc = MAX_COLOR_VALUE;
            }
            if (bc > MAX_COLOR_VALUE) { 
                bc = MAX_COLOR_VALUE;
            }
            int r = fc + random.nextInt(bc - fc);
            int g = fc + random.nextInt(bc - fc);
            int b = fc + random.nextInt(bc - fc);
            return new Color(r, g, b);
        }
    }

## 5、ValidateCodeController ##

获取验证码的请求接口。

@RestController
    public class ValidateCodeController { 
    
        /** * 前缀 */
       public static final String SESSION_KEY = "SESSION_KEY_IMAGE_CODE";
        private static final String FORMAT_NAME = "JPEG";
       @Autowired
        private ValidateCodeGeneratorService imageCodeGenerator;
        private SessionStrategy sessionStrategy = new HttpSessionSessionStrategy();
    
        @GetMapping("/code/image")
        public void createCode(HttpServletRequest request, HttpServletResponse response) throws IOException { 
            // 第一步：根据请求生成一个图形验证码对象
            ImageCode imageCode = imageCodeGenerator.generate(new ServletWebRequest(request));
            // 第二步：将图形验证码对象存到session中,第一个参数可以从传入的请求中获取session
            sessionStrategy.setAttribute(new ServletRequestAttributes(request), SESSION_KEY, imageCode);
            // 第三步：将生成的图片写到接口的响应中
            ImageIO.write(imageCode.getImage(), FORMAT_NAME, response.getOutputStream());
        }
    
    }

到这里，我们可用请求获取图片验证码的信息了。接下来我们就要登陆请求部分的代码。

## 6、ValidateCodeFilter ##

自定义过滤器，这里面才是核心的代码,首先继承OncePerRequestFilter(直接继承Filter也是可用的)，实现InitializingBean是为了初始化一些初始数据。

**这里走的逻辑就是把存在session中的图片验证码和当前请求的验证码进行比较，如果相同则放行，否则直接抛出异常。**

@Data
    @Slf4j
    @Component
    public class ValidateCodeFilter extends OncePerRequestFilter implements InitializingBean { 
    
        private static final String SUBMIT_FORM_DATA_PATH = "/login";
    
        /** * 失败处理器 */
        @Autowired
        private AuthenctiationFailHandler authenctiationFailHandler;
        /** * 验证码属性类 */
        @Autowired
        private ImageCodeProperties imageCodeProperties;
        
        /** * 存放需要走验证码请求url */
        private Set<String> urls = new HashSet<>();
    
        /** * 处理session工具类 */
        private SessionStrategy sessionStrategy = new HttpSessionSessionStrategy();
        /** * 正则配置工具 */
        private final AntPathMatcher antPathMatcher = new AntPathMatcher();
        /** * 在初始化bean的时候都会执行该方法 */
        @Override
        public void afterPropertiesSet() throws ServletException { 
            super.afterPropertiesSet();
            String[] configUrls = StringUtils.split(imageCodeProperties.getUrl(), ",");
            // 登录的链接是必须要进行验证码验证的
            urls.addAll(Arrays.asList(configUrls));
        }
    
        /** * 拦截请求进来的方法。 */
        @Override
        protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { 
            boolean action = false;
            for (String url : urls) { 
                // 如果实际访问的URL可以与用户在imageCodeProperties中url配置的相同，那么就进行验证码校验
                log.info("request.getRequestURI = {}",request.getRequestURI());
                if (antPathMatcher.match(url, request.getRequestURI())) { 
                    action = true;
                }
            }
            //说明需要校验
            if (action) { 
                try { 
                    validate(new ServletWebRequest(request));
                } catch (ValidateCodeException e) { 
                    authenctiationFailHandler.onAuthenticationFailure(request, response, e);
                    return;
                }
            }
    
            //进入下一个过滤器
            filterChain.doFilter(request, response);
        }
    
        /** * 验证码校验逻辑 * */
        private void validate(ServletWebRequest request) throws ServletRequestBindingException { 
            // 从session中获取图片验证码
            ImageCode imageCodeInSession = (ImageCode) sessionStrategy.getAttribute(request, ValidateCodeController.SESSION_KEY);
    
            // 从请求中获取用户填写的验证码
            String imageCodeInRequest = ServletRequestUtils.getStringParameter(request.getRequest(), "imageCode");
            if (StringUtils.isBlank(imageCodeInRequest)) { 
                throw new ValidateCodeException("验证码不能为空");
            }
            if (null == imageCodeInSession) { 
                throw new ValidateCodeException("验证码不存在");
            }
            if (imageCodeInSession.isExpired()) { 
                sessionStrategy.removeAttribute(request, ValidateCodeController.SESSION_KEY);
                throw new ValidateCodeException("验证码已过期");
            }
    
            log.info("session中获取的验证码={},sessionId ={}",imageCodeInSession.getCode(),request.getSessionId());
            log.info("登陆操作传来的验证码={}",imageCodeInRequest);
            if (!StringUtils.equalsIgnoreCase(imageCodeInRequest, imageCodeInSession.getCode())) { 
                throw new ValidateCodeException("验证码不匹配");
            }
            // 验证成功，删除session中的验证码
            sessionStrategy.removeAttribute(request, ValidateCodeController.SESSION_KEY);
        }
    }

## 7、WebSecurityConfig ##

SpringSecurity的Java 配置类也需要做一点点改动。那就是需要设置ValidateCodeFilter要在UsernamePasswordAuthenticationFilter之前进行拦截过滤。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]  
到这里整个图形验证码的功能就开发完成了。

## 三、测试 ##

原程序需要连接数据库，数据库和 [SpringSecurity(2)—记住我功能实现][2_SpringSecurity_2]  
是同一个数据库，所以这里我就直接拿过来用了。

/*创建用户表*/
    CREATE TABLE `persistent_logins` (
      `username` varchar(64) NOT NULL,
      `series` varchar(64) NOT NULL,
      `token` varchar(64) NOT NULL,
      `last_used` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
      PRIMARY KEY (`series`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    /*创建j角色表*/
    CREATE TABLE `roles` (
      `id` int NOT NULL AUTO_INCREMENT,
      `name` varchar(32) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
    
    /*创建用户关联角色表*/
    CREATE TABLE `roles_user` (
      `id` int NOT NULL AUTO_INCREMENT,
      `rid` int DEFAULT '2',
      `uid` int DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=133 DEFAULT CHARSET=utf8;
    
    
    /*这里密码对应的明文 还是123456*/
    INSERT INTO `user` (`id`, `username`, `nickname`, `password`, `enabled`)
    VALUES
    	(1, '小小', '小小', 'e10adc3949ba59abbe56e057f20f883e', 1);
    
    /*三种角色*/
    INSERT INTO `roles` (`id`, `name`)
    VALUES
    	(1, '校长'),
    	(2, '教师'),
    	(3, '学生');
    	
    /*小小用户关联了 教师和校长角色*/
    INSERT INTO `roles_user` (`id`, `rid`, `uid`)
    VALUES
    	(1, 2, 1),
    	(2, 3, 1);

不过这里要补充一下，原来的SQL语句中没有user表，所以需要自己创建，我就随便弄了一个  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 1]  
然后config下的DalModule中修改点内容：

这时我按照我的数据库进行的修改。

![在这里插入图片描述][0ae8e96db5e74213ade2555431f2fcc4.PNG_pic_center]

(奇了怪了，这个项目能正常启动，为啥第二个项目会连环报错……)

因为没有写前端代码，所以直接用posman用请求来获取验证码,获取验证码之后再进行登陆操作。

## 1、获取验证码 ##

## 2、登陆成功 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 3]

## 3、登陆失败 ##

因为配置的时候图片验证码有效期为60秒，所以在我们获取验证码后，过60秒再去登陆，就能发现，验证码已过期。

[https_www.cnblogs.com_qdhxhz_p_12791083.html]: https://www.cnblogs.com/qdhxhz/p/12791083.html
[1_SpringSecurity_1]: https://blog.csdn.net/weixin_44096353/article/details/119500682?spm=1001.2014.3001.5501
[2_SpringSecurity_2]: https://blog.csdn.net/weixin_44096353/article/details/119518393?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/359cbd07fd754fd49ec2c4932b2365a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/6eb6b476321644fc9159682ab5484d55.png
[0ae8e96db5e74213ade2555431f2fcc4.PNG_pic_center]: /images/20220829/cd118a4801094cba8070427e64127c00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/12ca785c163f4e55bb6109687a74ca1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220829/cc185242558847ec9a3b5c4ab0b88dfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220829/93ebe84d82ec4727852920b7a5311da2.png