跳至主要內容

springSecurity 图片验证码

xw2021年2月24日大约 6 分钟SpringJavaSpring Boot

验证码（CAPTCHA）的全称是 Completely Automated Public Turing test to tell Computers and
Humans Apart，翻译过来就是“全自动区分计算机和人类的图灵测试”。通俗地讲，验证码就是为了防
止恶意用户暴力重试而设置的。不管是用户注册、用户登录，还是论坛发帖，如果不加以限制，一旦
某些恶意用户利用计算机发起无限重试，就很容易使系统遭受破坏。

通过过滤器实现

自定义过滤器
在Spring Security中，实现验证码校验的方式有很多种，最简单的方式就是自定义一个专门处理验
证码逻辑的过滤器，将其添加到Spring Security过滤器链的合适位置。当匹配到登录请求时，立刻对验
证码进行校验，成功则放行，失败则提前结束整个验证请求。
图形验证码过滤器

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

首先配置一个kaptcha实例

package club.xwzzy.springbootsecurity_imageverification.config;

import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class CaptchaConfig {

    @Bean
    public Producer captcha() {
        // 配置图形验证码的基本参数
        Properties properties = new Properties();
        // 图片宽度
        properties.setProperty("kaptcha.image.width", "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);
        // 使用默认的图形验证码实现，当然也可以自定义实现
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

接着创建一个CaptchaController，用于获取图形验证码。

package club.xwzzy.springbootsecurity_imageverification.controller;

import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
public class CaptchaController {

    @Autowired
    private Producer captchaProducer;

    @GetMapping("/captcha.jpg")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 设置内容类型
        response.setContentType("image/jpeg");
        // 创建验证码文本
        String capText = captchaProducer.createText();
        // 将验证码文本设置到session
        request.getSession().setAttribute("captcha", capText);
        // 创建验证码图片
        BufferedImage bi = captchaProducer.createImage(capText);
        // 获取响应输出流
        ServletOutputStream out = response.getOutputStream();
        // 将图片验证码数据写到响应输出流
        ImageIO.write(bi, "jpg", out);
        // 推送并关闭响应输出流
        try {
            out.flush();
        } finally {
            out.close();
        }
    }

}

当用户访问/captcha.jpg时，即可得到一张携带验证码的图片，验证码文本则被存放到session中用于后续的校验。

package club.xwzzy.springbootsecurity_imageverification.exception;

import org.springframework.security.core.AuthenticationException;

public class VerificationCodeException extends AuthenticationException {

    public VerificationCodeException () {
        super("图形验证码校验失败");
    }

}


package club.xwzzy.springbootsecurity_imageverification.filter;


import club.xwzzy.springbootsecurity_imageverification.authentication.SecurityAuthenticationFailureHandler;
import club.xwzzy.springbootsecurity_imageverification.exception.VerificationCodeException;
import org.springframework.security.web.authentication.AuthenticationFailureHandler;
import org.springframework.util.StringUtils;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

public class VerificationCodeFilter extends OncePerRequestFilter {

    private AuthenticationFailureHandler authenticationFailureHandler = new SecurityAuthenticationFailureHandler();

    @Override
    protected void 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 void verificationCode (HttpServletRequest httpServletRequest) throws VerificationCodeException {
        String requestCode = httpServletRequest.getParameter("captcha");
        HttpSession session = httpServletRequest.getSession();
        String savedCode = (String) session.getAttribute("captcha");
        if (!StringUtils.isEmpty(savedCode)) {
            // 随手清除验证码，不管是失败还是成功，所以客户端应在登录失败时刷新验证码
            session.removeAttribute("captcha");
        }
        // 校验不通过抛出异常
        if (StringUtils.isEmpty(requestCode) || StringUtils.isEmpty(savedCode) || !requestCode.equals(savedCode)) {
            throw new VerificationCodeException();
        }
    }
}


 // 将过滤器添加在UsernamePasswordAuthenticationFilter之前
        http.addFilterBefore(new VerificationCodeFilter(), UsernamePasswordAuthenticationFilter.class);

<!DOCTYPE HTML>
<html>
    <head>
        <title>登录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div class="login">
            <h2>Acced Form</h2>
            <div class="login-top">
                <h1>LOGIN FORM</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" width="150px" style="margin-left: 20px;">
                    </div>
                    <div class="forgot">
                        <a href="#">forgot Password</a>
                        <input type="submit" value="Login" >
                    </div>
                </form>
            </div>
            <div class="login-bottom">
                <h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>
            </div>
        </div>

        <style>
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
            article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
            ol,ul{list-style:none;margin:0;padding:0;}
            blockquote,q{quotes:none;}
            blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
            table{border-collapse:collapse;border-spacing:0;}
            a{text-decoration:none;}
            nav.vertical ul li{	display:block;}
            nav.horizontal ul li{	display: inline-block;}
            img{max-width:100%;}
            body{
                background: #3f3f3f;
                padding:100px 0px 30px 0px;
                font-family: 'Roboto', sans-serif;
                font-size: 100%;
            }
            .login {
                width: 32%;
                margin: 0 auto;
            }
            .login h2 {
                font-size: 30px;
                font-weight: 700;
                color: #fff;
                text-align: center;
                margin: 0px 0px 50px 0px;
                font-family: 'Droid Serif', serif;
            }
            .login-top {
                background: #E1E1E1;
                border-radius: 25px 25px 0px 0px;
                -webkit-border-radius:  25px 25px 0px 0px;
                -moz-border-radius: 25px 25px 0px 0px;
                -o-border-radius: 25px 25px 0px 0px;
                padding: 40px 60px;
            }
            .login-top h1 {
                text-align: center;
                font-size: 27px;
                font-weight: 500;
                color: #F45B4B;
                margin: 0px 0px 20px 0px;
            }
            .login-top input[type="text"] {
                outline: none;
                font-size: 15px;
                font-weight: 500;
                color: #818181;
                padding: 15px 20px;
                background: #CACACA;
                border: 1px solid #ccc;
                border-radius:25px;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                -o-border-radius: 25px;
                margin: 0px 0px 12px 0px;
                width: 88%;
                -webkit-appearance: none;
            }
            .login-top input[type="password"]{
                outline: none;
                font-size: 15px;
                font-weight: 500;
                color: #818181;
                padding: 15px 20px;
                background: #CACACA;
                border: 1px solid #ccc;
                border-radius:25px;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                -o-border-radius: 25px;
                margin: 0px 0px 12px 0px;
                width: 88%;
                -webkit-appearance: none;
            }
            .forgot  a{
                font-size: 13px;
                font-weight: 500;
                color: #F45B4B;
                display: inline-block;
                border-right: 2px solid #F45B4B;
                padding: 0px 7px 0px 0px;
            }
            .forgot  a:hover{
                color: #818181;
            }
            .forgot input[type="submit"] {
                background: #F45B4B;
                color: #FFF;
                font-size: 17px;
                font-weight: 400;
                padding: 8px 7px;
                width: 20%;
                display: inline-block;
                cursor: pointer;
                border-radius: 6px;
                -webkit-border-radius: 19px;
                -moz-border-radius: 6px;
                -o-border-radius: 6px;
                margin: 0px 7px 0px 3px;
                outline: none;
                border: none;
            }
            .forgot input[type="submit"]:hover {
                background:#818181;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            .forgot {
                text-align: right;
            }
            .login-bottom {
                background: #E15748;
                padding: 30px 65px;
                border-radius: 0px 0px 25px 25px;
                -webkit-border-radius:  0px 0px 25px 25px;
                -moz-border-radius: 0px 0px 25px 25px;
                -o-border-radius: 0px 0px 25px 25px;
                text-align: right;
                border-top: 2px solid #AD4337;
            }
            .login-bottom h3 {
                font-size: 14px;
                font-weight: 500;
                color: #fff;
            }
            .login-bottom h3 a {
                font-size: 25px;
                font-weight: 500;
                color: #fff;
            }
            .login-bottom h3 a:hover {
                color:#696969;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            .copyright p {
                font-size: 15px;
                font-weight: 400;
                color: #fff;
            }
            .copyright p a{
                font-size: 15px;
                font-weight: 400;
                color: #E15748;
            }
            .copyright p a:hover{
                color: #fff;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            @media(max-width:1440px){
                .login {
                    width: 35%;
                }
            }
            @media(max-width:1366px){
                .login {
                    width: 37%;
                }
            }
            @media(max-width:1280px){
                .login {
                    width: 40%;
                }
            }
            @media(max-width:1024px){
                .login {
                    width: 48%;
                }
            }
            @media(max-width:768px){
                .login {
                    width: 65%;
                }
                .login-top h1 {
                    font-size: 25px;
                }
                .login-bottom h3 a {
                    font-size: 22px;
                }
                body {
                    padding: 100px 0px 0px 0px;
                }
                .login h2 {
                    font-size: 28px;
                }
            }
            @media(max-width:640px){
                .login-top h1 {
                    font-size: 23px;
                }
                .forgot input[type="submit"] {
                    font-size: 15px;
                    width: 22%;
                }
                .login-top input[type="text"] {
                    padding: 12px 20px;
                }
                .login-top input[type="password"] {
                    padding: 12px 20px;
                }
                .login-bottom h3 a {
                    font-size: 19px;
                }
                .login-bottom h3 {
                    font-size: 13px;
                }
                body {
                    padding: 110px 0px 0px 0px;
                }
            }
            @media(max-width:480px){
                .login {
                    width: 80%;
                }
                .login-top h1 {
                    font-size: 21px;
                }
                .login-top input[type="text"] {
                    width: 85%;
                }
                .login-top {
                    padding: 30px 40px;
                }
                .login-top input[type="password"] {
                    width: 85%;
                }
                .login h2 {
                    font-size: 25px;
                }
            }
            @media(max-width:320px){
                .login {
                    width: 90%;
                }
                .login-top {
                    padding: 20px 25px;
                }
                .login-top input[type="text"] {
                    width: 81%;
                    padding: 10px 20px;
                    font-size: 13px;
                    margin: 0px 0px 7px 0px;
                }
                .login-top input[type="password"] {
                    width: 81%;
                    padding: 10px 20px;
                    font-size: 13px;
                    margin: 0px 0px 7px 0px;
                }
                .forgot input[type="submit"] {
                    font-size: 11px;
                    width: 25%;
                    padding: 6px 7px;
                }
                .forgot  a {
                    font-size: 11px;
                }
                .login-bottom {
                    padding: 20px 25px;
                }
                .login-bottom h3 {
                    font-size: 11px;
                }
                .login-bottom h3 a {
                    font-size: 17px;
                }
                body {
                    padding: 50px 0px 0px 0px;
                }
                .copyright p {
                    font-size: 13px;
                }
                .copyright p a{
                    font-size: 13px;
                }
                .login h2 {
                    font-size: 23px;
                    margin:0px 0px 35px 0px;
                }
            }
        </style>
    </body>
</html>

至此，使用过滤器的方式实现验证码结束，属于Servlet层面，简单、易理解。
代码地址open in new window