spring security 图片验证码

淩亂°似流年 2023-02-14 02:39 9阅读 0赞

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

### spring security 图片验证码 ###

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**util 层**

**ImageCode**

@Data
    public class ImageCode {
    
        private BufferedImage image;
        private String code;
        private LocalDateTime expireTime;
    
        public ImageCode(){
    
        }
    
        public ImageCode(BufferedImage image,String code,LocalDateTime expireTime){
            this.image=image;
            this.code=code;
            this.expireTime=expireTime;
        }
    
        public boolean isExpire(){
            return LocalDateTime.now().isAfter(expireTime.plusMinutes(1));
        }
    }

**ImageCodeUtil：生成图片验证码**

package com.example.demo.util;
    
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.time.LocalDateTime;
    import java.util.Random;
    
    public class ImageCodeUtil {
    
        public static ImageCode createImageCode(){
            int width=60;
            int height=30;
    
            BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    
            Graphics graphics=image.getGraphics();
            graphics.setColor(getRandomColor());     //设置填充色
            graphics.fillRect(0,0,width,height);
    
            graphics.setColor(getRandomColor());     //设置随机条纹
            Random random=new Random();
            for (int i=0;i<100;i++){
                int x1=random.nextInt(width);
                int y1=random.nextInt(height);
    
                int x2=x1+random.nextInt(10);
                int y2=y1+random.nextInt(10);
    
                graphics.drawLine(x1,y1,x2,y2);
            }
    
            StringBuilder builder=new StringBuilder();  //设置随机数字
            for (int i=0;i<4;i++){
                String s=String.valueOf(random.nextInt(10));
                builder.append(s);
    
                graphics.setColor(new Color(10+random.nextInt(10*(i+1)),
                        10+random.nextInt(10*(i+1)),10+random.nextInt(10*(i+1))));
                graphics.drawString(s,12*i+5,20);
            }
    
            graphics.dispose();
    
            return new ImageCode(image,builder.toString(), LocalDateTime.now());
        }
    
        private static Color getRandomColor(){
            Random random=new Random();
    
            int red=Math.abs(random.nextInt())%50+200;
            int green=Math.abs(random.nextInt())%50+200;
            int black=Math.abs(random.nextInt())%50+200;
    
            return new Color(red,green,black);
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**filter 层**

**ImageCodeFilter：验证码拦截过滤**

@Component
    public class ImageCodeFilter extends OncePerRequestFilter {
    
        @Resource
        private AuthenticationFailureHandler authenticationFailureHandler;
    
        @Override
        protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
            if (StringUtils.equals("/login/image", httpServletRequest.getRequestURI())
                    && StringUtils.equalsIgnoreCase(httpServletRequest.getMethod(), "POST")) {
                HttpSession session=httpServletRequest.getSession();
                ImageCode imageCode = (ImageCode) session.getAttribute("image_code");
    
                try {
                    if (imageCode == null) {
                        throw new BadCredentialsException("没有申请验证码");
                    }
    
                    if (imageCode.isExpire()) {
                        throw new BadCredentialsException("验证码过期");
                    }
    
                    if (!imageCode.getCode().equals(httpServletRequest.getParameter("image_code"))) {
                        throw new BadCredentialsException("验证码出错");
                    }
                }catch (AuthenticationException e){
                    authenticationFailureHandler.onAuthenticationFailure(httpServletRequest,httpServletResponse,e);
    
                    return;
                }
    
                session.removeAttribute("image_code");
            }
    
            filterChain.doFilter(httpServletRequest, httpServletResponse);
        }
    }

**CustomAuthenticationFailureHandler：验证码出错相关处理**

@Component
    public class CustomAuthenticationFailureHandler implements AuthenticationFailureHandler {
    
        @Override
        public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
            httpServletResponse.setContentType("application/json;charset=UTF-8");
            httpServletResponse.getWriter().write(e.getMessage());
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**service 层**

**CustomUserDetailsService**

@Component
    public class CustomUserDetailsService implements UserDetailsService {
    
        @Resource
        private PasswordEncoder passwordEncoder;
    
        @Override
        public UserDetails loadUserByUsername(String s) throws UsernameNotFoundException {
            String name="gtlx";
            String password=passwordEncoder.encode("123456");
    
            List<GrantedAuthority> authorities=new ArrayList<>();
            authorities.add(new SimpleGrantedAuthority("ROLE_USER"));
    
            return new User(name,password,authorities);
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**config 层**

**WebConfig**

@Configuration
    public class WebConfig implements WebMvcConfigurer {
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
            registry.addViewController("/login/form").setViewName("login");
        }
    }

**WebSecurityConfig**

@Configuration
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    
        @Resource
        private CustomUserDetailsService userDetailsService;
    
        @Resource
        private ImageCodeFilter imageCodeFilter;
    
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.formLogin().loginPage("/login/form").loginProcessingUrl("/login/image")
                    .and().authorizeRequests()
                    .antMatchers("/hello").hasAuthority("ROLE_USER")
                    .antMatchers("/**").permitAll()
                    .and().addFilterBefore(imageCodeFilter, UsernamePasswordAuthenticationFilter.class);
        }
    
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
            auth.userDetailsService(userDetailsService)
                    .passwordEncoder(initPasswordEncoder());
        }
    
        @Bean
        public PasswordEncoder initPasswordEncoder(){
            return new BCryptPasswordEncoder();
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**controller 层**

**HelloController**

@RestController
    public class HelloController {
    
        @RequestMapping("/image/code")
        public void imageCode(HttpServletRequest request, HttpServletResponse response) throws Exception{
            ImageCode imageCode= ImageCodeUtil.createImageCode();
            System.out.println(imageCode.getCode());
    
            request.getSession().setAttribute("image_code",imageCode);
            ImageIO.write(imageCode.getImage(),"JPEG",response.getOutputStream());
        }
    
        @RequestMapping("/hello")
        public String hello(Principal principal){
            return "hello "+principal.getName();
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**前端页面**

**login.html**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#image").click(function () {
                    $(this).attr("src","/image/code?r="+Math.random())
                })
            })
        </script>
    </head>
    <body>
    <form th:action="@{/login/image}" method="post" align="center">
        用户名: <input type="text" name="username"><br>
        密码 : <input type="text" name="password"><br>
        验证码: <input type="text" name="image_code">
        <img id="image" src="/image/code"><br>
        <button>提交</button>
    </form>
    </body>
    </html>

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**使用测试**

**localhost:8080/hello**

![20200603163905466.png][]

**点击图片验证码，可刷新图片**

![20200603163912414.png][]

**认证通过后，输出：hello gtlx**

[20200603163905466.png]: https://img-blog.csdnimg.cn/20200603163905466.png
[20200603163912414.png]: https://img-blog.csdnimg.cn/20200603163912414.png