ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Springboot实现验证码登录

2020-10-01 09:31:39  阅读：218  来源： 互联网

标签：Springboot 登录 kaptcha 验证码 validateCode setProperty properties impl


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效果图

标签：Springboot,登录,kaptcha,验证码,validateCode,setProperty,properties,impl
来源： https://www.cnblogs.com/wtao0730/p/13757308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有