Springboot实现验证码登录

1.背景

本人近期正在完成毕业设计（旅游信息管理系统）的制作，采用的SpringBoot+Thymeleaf的模式。在登录网站时想要添加验证码验证，通过网上查找资料，决定整合Kaptcha来实现验证码登录

2.过程

后端代码

2.1 在pom.xml中导入Kaptcha和ajax依赖

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

<!-- https://mvnrepository.com/artifact/cljs-ajax/cljs-ajax -->
<dependency>
    <groupId>cljs-ajax</groupId>
    <artifactId>cljs-ajax</artifactId>
    <version>0.8.1</version>
</dependency>

这里我用的是Maven项目，非Maven的可以下载相关的jar包；

2.2 新建kaptchaConfig类，配置kaptcha

@Component
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "no");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "black");
        //边框厚度
        properties.setProperty("kaptcha.border.thickness", "1");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "200");
        // 图片高
        properties.setProperty("kaptcha.image.height", "50");
        //图片实现类
        properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");
        //文本实现类
        properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");
        //文本集合，验证码值从此集合中获取
        properties.setProperty("kaptcha.textproducer.char.string", "01234567890");
        //验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        //字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体");
        //字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        //文字间隔
        properties.setProperty("kaptcha.textproducer.char.space", "3");
        //干扰实现类
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
        //干扰颜色
        properties.setProperty("kaptcha.noise.color", "blue");
        //干扰图片样式
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
        //背景实现类
        properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");
        //背景颜色渐变，结束颜色
        properties.setProperty("kaptcha.background.clear.to", "white");
        //文字渲染器
        properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

2.3 新建CommonUtil工具类

public class CommonUtil {

    /**
     * 生成验证码图片
     * @param request 设置session
     * @param response 转成图片
     * @param captchaProducer 生成图片方法类
     * @param validateSessionKey session名称
     * @throws Exception
     */
    public static void validateCode(HttpServletRequest request, HttpServletResponse response, DefaultKaptcha captchaProducer, String validateSessionKey) throws Exception{
        // Set to expire far in the past.
        response.setDateHeader("Expires", 0);
        // Set standard HTTP/1.1 no-cache headers.
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        // Set standard HTTP/1.0 no-cache header.
        response.setHeader("Pragma", "no-cache");

        // return a jpeg
        response.setContentType("image/jpeg");

        // create the text for the image
        String capText = captchaProducer.createText();

        // store the text in the session
        request.getSession().setAttribute(validateSessionKey, capText);

        // create the image with the text
        BufferedImage bi = captchaProducer.createImage(capText);

        ServletOutputStream out = response.getOutputStream();

        // write the data out
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }
    }
}

2.4 编写控制层代码，新建MainController类

@Controller
public class MainController {

    @Resource
    private DefaultKaptcha captchaProducer;

    @RequestMapping(value = {"/"})
    public String index() {
        return "/index";
    }

    /**
     * 登录验证码SessionKey
     */
    public static final String LOGIN_VALIDATE_CODE = "login_validate_code";
    /**
     * 登录验证码图片
     */
    @RequestMapping(value = {"/loginValidateCode"})
    public void loginValidateCode(HttpServletRequest request, HttpServletResponse response) throws Exception{
        CommonUtil.validateCode(request,response,captchaProducer,LOGIN_VALIDATE_CODE);
    }

    /**
     * 检查验证码是否正确
     */
    @RequestMapping("/checkLoginValidateCode")
    @ResponseBody
    public HashMap checkLoginValidateCode(HttpServletRequest request, @RequestParam("validateCode")String validateCode) {
        String loginValidateCode = request.getSession().getAttribute(LOGIN_VALIDATE_CODE).toString();
        HashMap<String,Object> map = new HashMap<String,Object>();
        if(loginValidateCode == null){
            map.put("status",null);//验证码过期
        }else if(loginValidateCode.equals(validateCode)){
            map.put("status",true);//验证码正确
        }else if(!loginValidateCode.equals(validateCode)){
            map.put("status",false);//验证码不正确
        }
        map.put("code",200);
        return map;
    }
}

前端代码

到这里后端的部分已经完成了，大部分都是一样的，只需要轻微改动

2.5 登录界面

这里直接将我网站的登录界面直接贴出，不需要的代码可自行删除。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员中心-登录</title>
</head>
<body>
    <table class="login_tab" width="270" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>验证码：</td>
                        <td><input type="text" id="validateCode" name="validateCode" value="" placeholder="请输入验证码"/></td><td>&nbsp;&nbsp;</td>
                        <td><img id="loginValidateCode" height="35" width="80"  style="cursor: pointer;" src="/loginValidateCode" onclick="uploadLoginValidateCode();"></td>
                    </tr>
                  <tr>
                    <td></td>
                    <td>
                        <button class="log_b" type="submit">登 录</button>
                    </td>
                  </tr>
                </table>
<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/kaptcha.js"></script>//导入kaptcha.js文件
<script type='text/javascript'></script>
</body>
</html>

2.6 编写js代码，新建kaptcha.js

$(function () {
    $("#validateCode").keyup(function(){
        
        checkLoginValidateCode($(this).val());
    });

});

function uploadLoginValidateCode() {
       //点击验证码刷新验证码
    $("#loginValidateCode").attr("src","/loginValidateCode?random="+new Date().getMilliseconds());
}


function checkLoginValidateCode(validateCode) {
    var error = $("#validateCode").parent().next();
    if(validateCode != null && validateCode != ""){
        $.ajax({
            type: "POST",
            async:false,
            url: "/checkLoginValidateCode?validateCode="+validateCode,
            success : function(json) {
                if(json != null && json.code == 200 && json.status != null) {
                    if (json.status == true) {
                        error.html("恭喜你验证码，正确！！！");
                    } else if(json.status == false){
                        error.html("验证码错误，请重新输入");
                    }else{
                        error.html("验证码过期，请重新输入");
                        uploadLoginValidateCode();
                    }
                }
                return false;
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert("服务器错误！状态码："+XMLHttpRequest.status);
                // 状态
                console.log(XMLHttpRequest.readyState);
                // 错误信息
                console.log(textStatus);
                return false;
            }
        });
    }else{
        error.html("请输入验证码！");
    }
}

2.7效果图