使用kaptcha 在SSM框架下实现登录验证码的功能

xu.wang

发布于 2019.12.26 00:04 阅读 2286 评论 0

为了防止系统登录只使用账号与密码致使登录安全非常薄弱，所以在登录账号与密码的基础上增加验证码验证功能，增强了部分安全性。

下面为使用 kaptcha 来实现登录验证码的功能。

首先： 在POM中引用kaptcha

 <!-- 验证码 jar kaptcha-->
 <dependency>
     <groupId>com.github.penggle</groupId>
     <artifactId>kaptcha</artifactId>
     <version>2.3.2</version>
</dependency>

 

第二步： 在spring配置文件applicationContext.xml中配置kaptcha的bean

   <!-- 验证码 -->
    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg>
                    <props>
                        <!-- 是否有边框 可选yes 或者 no -->
                        <prop key="kaptcha.border">yes</prop>
                        <!-- 边框颜色 -->
                        <prop key="kaptcha.border.color">105,179,90</prop>
                        <!-- 验证码文本字符颜色 -->
                        <prop key="kaptcha.textproducer.font.color">blue</prop>
                        <!-- 验证码文本字符大小 -->
                        <prop key="kaptcha.textproducer.font.size">45</prop>
                        <!-- 验证码图片的宽度 默认200 -->
                        <prop key="kaptcha.image.width">125</prop>
                        <!-- 验证码图片的高度 默认50 -->
                        <prop key="kaptcha.image.height">45</prop>
                        <!-- 验证码文本字符长度  默认为5 -->
                        <prop key="kaptcha.textproducer.char.length">4</prop>
                        <!-- 验证码文本字体样式  默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)  -->
                        <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
                    </props>
                </constructor-arg>
            </bean>
        </property>
    </bean>

第三步： 编写获取验证码图片的controller

package com.jtexplorer.controller.admin;

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

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

@Controller
public class VerifyImageCotroller {

    @Autowired
    private Producer captchaProducer = null;

    /**
     * 生成验证码
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping(value = "verifyImage")
    public void getVerifyImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        HttpSession session = request.getSession();
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");

        //生成验证码文本
        String capText = captchaProducer.createText();
        //将文本放到session中
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        //利用生成的字符串构建图片
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);

        try {
            out.flush();
        } finally {
            out.close();
        }
    }

}

第四步： 编写登录验证controller

 //判断是否生成验证码
        if(session.getAttribute(Constants.KAPTCHA_SESSION_KEY) != null) {
            //获取session中的验证码
            String verifyCodeInSession = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
            //判断验证码是否正确
            if(verifyCode.equals(verifyCodeInSession)){
                // TODO: 2019/12/26 验证成功 
            }
        }

第五步： 编写测试页面进行测试

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<table>
    <tr><img name="randImage" id="randImage" src="" width="64" height="20" border="1" align="top">
    </tr>
</table>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    //获取验证码
    $(function() {
        $("#randImage").attr("src","${prc }/verifyImage?"+Math.random());
    });

    //点击图片重置二维码
    $("#randImage").click(function() {
        $("#randImage").attr("src","${prc }/verifyImage?"+Math.random());
    });

</script>
</body>
</html>