<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency
 
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
 
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

@Configuration
public class CaptchaConfig {
 
    @Bean
    public Producer captcha() {
        // 配置圖形驗證碼的基本參數(shù)
        Properties properties = new Properties();
        // 圖片寬度
        properties.setProperty("kaptcha.image.wth", "150");
        // 圖片長度
        properties.setProperty("kaptcha.image.height", "50");
        // 字符集
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789");
        // 字符長度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        Config config = new Config(properties);
        // 使用默認的圖形驗證碼實現(xiàn)，當(dāng)然也可以自定義實現(xiàn)
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
 
}

@Controller
public class CaptchaController {
 
    @Autowired
    private Producer captchaProducer;
 
    @GetMapping("/captcha.jpg")
    public vo getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 設(shè)置內(nèi)容類型
        response.setContentType("image/jpeg");
        // 創(chuàng)建驗證碼文本
        String capText = captchaProducer.createText();
        
        // 將驗證碼文本設(shè)置到session
        request.getSession().setAttribute("captcha", capText);
        
        // 創(chuàng)建驗證碼圖片
        BufferedImage bi = captchaProducer.createImage(capText);
        // 獲取響應(yīng)輸出流
        ServletOutputStream out = response.getOutputStream();
        // 將圖片驗證碼數(shù)據(jù)寫到響應(yīng)輸出流
        ImageIO.write(bi, "jpg", out);
        
        // 推送并關(guān)閉響應(yīng)輸出流
        try {
            out.flush();
        } finally {
            out.close();
        }
    }
 
}

public class VerificationCodeException extends AuthenticationException {
 
    public VerificationCodeException () {
        super("圖形驗證碼校驗失敗");
    }
 
}

/**
 * 基于過濾器實現(xiàn)圖形驗證碼的驗證功能,這屬于Servlet層面,簡單易理解.
 */
public class VerificationCodeFilter extends OncePerRequestFilter {
 
    private AuthenticationFailureHandler authenticationFailureHandler = new SecurityAuthenticationFailureHandler();
 
    @Overre
    protected vo doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        // 非登錄請求不校驗驗證碼，直接放行
        if (!"/login".equals(httpServletRequest.getRequestURI())) {
            filterChain.doFilter(httpServletRequest, httpServletResponse);
        } else {
            try {
                //校驗驗證碼
                verificationCode(httpServletRequest);
                
                //驗證碼校驗通過后，對請求進行放行
                filterChain.doFilter(httpServletRequest, httpServletResponse);
            } catch (VerificationCodeException e) {
                authenticationFailureHandler.onAuthenticationFailure(httpServletRequest, httpServletResponse, e);
            }
        }
    }
 
    public vo verificationCode (HttpServletRequest httpServletRequest) throws VerificationCodeException {
        HttpSession session = httpServletRequest.getSession();
        String savedCode = (String) session.getAttribute("captcha");
        if (!StringUtils.isEmpty(savedCode)) {
            // 隨手清除驗證碼，不管是失敗還是成功，所以客戶端應(yīng)在登錄失敗時刷新驗證碼
            session.removeAttribute("captcha");
        }
 
        String requestCode = httpServletRequest.getParameter("captcha");
        // 校驗不通過拋出異常
        if (StringUtils.isEmpty(requestCode) || StringUtils.isEmpty(savedCode) || !requestCode.equals(savedCode)) {
            throw new VerificationCodeException();
        }
    }
 
}

/**
 * @Author: 一一哥
 * 增加圖形驗證碼功能.
 */
@EnableWebSecurity(debug = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Overre
    protected vo configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers("/admin/api/**")
                .hasRole("ADMIN")
                .antMatchers("/user/api/**")
                .hasRole("USER")
                .antMatchers("/app/api/**", "/captcha.jpg")
                .permitAll()
                .anyRequest()
                .authenticated()
                .and()
                .formLogin()
                .failureHandler(new SecurityAuthenticationFailureHandler())
                .successHandler(new SecurityAuthenticationSuccessHandler())
                .loginPage("/myLogin.html")
                .loginProcessingUrl("/login")
                .permitAll()
                .and()
                .csrf()
                .disable();
 
        //將過濾器添加在UsernamePasswordAuthenticationFilter之前
        http.addFilterBefore(new VerificationCodeFilter(), UsernamePasswordAuthenticationFilter.class);
    }
 
    @Bean
    public PasswordEncoder passwordEncoder() {
        return NoOpPasswordEncoder.getInstance();
    }
 
}

<body>
    <div class="login">
        <h2>Access Form</h2>
        <div class="login-top">
            <h1>登錄驗證</h1>
            <form action="/login" method="post">
                 <input type="text" name="username" placeholder="username" />
                 <input type="password" name="password" placeholder="password" />
                 <div style="display: flex;">
                     <!-- 新增圖形驗證碼的輸入框 -->
                     <input type="text" name="captcha" placeholder="captcha" />
                     <!-- 圖片指向圖形驗證碼API -->
                     <img src="/captcha.jpg" alt="captcha" height="50px" wth="150px" style="margin-left: 20px;">
                 </div>
                 <div class="forgot">
                     <a href="#">忘記密碼</a>
                     <input type="submit" value="登錄" >
                 </div>
            </form>
       </div>
       <div class="login-bottom">
           <h3>新用戶&nbsp;<a href="#">注&nbsp;冊</a></h3>
       </div>
   </div>
</body>