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("请输入验证码！");

    }

}

巴特西

Springboot实现验证码登录

Springboot实现验证码登录

1.背景

2.过程

后端代码

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

2.2 新建kaptchaConfig类，配置kaptcha

2.3 新建CommonUtil工具类

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

前端代码

2.5 登录界面

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

2.7效果图

最新文章

热门文章