SpringMVC集成开源的验证码框架Kaptcha实现验证码效果

来源：互联网发布：一套淘宝店铺装修价格编辑：程序博客网时间：2024/06/09 21:51

流程：本项目是通过maven创建的，首先需要导入Kaptcha的jar包，然后在spring中配置Kaptcha的属性，还需要实现一个生成验证码的controller类，最后在前端显示。

导包：

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

配置Kaptcha的spring文件，我这里是新建一个spring-Kaptcha.xml文件

<bean id="defaultKaptcha" class="com.google.code.kaptcha.impl.DefaultKaptcha">        <property name="config">            <bean class="com.google.code.kaptcha.util.Config">                <constructor-arg>                    <props>                        <!-- 验证码宽度 -->                        <prop key="kaptcha.image.width">110</prop>                        <!-- 验证码高度 -->                        <prop key="kaptcha.image.height">50</prop>                        <!-- 生成验证码内容范围 -->                        <prop key="kaptcha.textproducer.char.string">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</prop>                        <!-- 验证码个数 -->                        <prop key="kaptcha.textproducer.char.length">4</prop>                        <!-- 是否有边框 -->                        <prop key="kaptcha.border">no</prop>                        <!-- 边框颜色 -->                        <prop key="kaptcha.border.color">105,179,90</prop>                        <!-- 边框厚度 -->                        <prop key="kaptcha.border.thickness">1</prop>                        <!-- 验证码字体颜色 -->                        <prop key="kaptcha.textproducer.font.color">black</prop>                        <!-- 验证码字体大小 -->                        <prop key="kaptcha.textproducer.font.size">30</prop>                        <!-- 验证码所属字体样式 -->                        <prop key="kaptcha.textproducer.font.names">楷体</prop>                        <!-- 干扰线颜色 -->                        <prop key="kaptcha.noise.color">black</prop>                        <!-- 验证码文本字符间距 -->                        <prop key="kaptcha.textproducer.char.space">3</prop>                        <!-- 图片样式 :阴影-->                        <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>                    </props>                </constructor-arg>            </bean>        </property>    </bean>

实现一个生成验证码的controller类

/** * Created by xuweijie on 2017/3/8. * 生成验证码Controller. */@Controllerpublic class CaptchaController {    private Producer kaptchaProducer=null;    @Autowired    public void setCaptchaProducer(Producer kaptchaProducer) {        this.kaptchaProducer = kaptchaProducer;    }    @RequestMapping("/kaptcha")    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{        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 = kaptchaProducer.createText();        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);        BufferedImage bi = kaptchaProducer.createImage(capText);        ServletOutputStream out = response.getOutputStream();        ImageIO.write(bi, "jpg", out);        try {            out.flush();        } finally {            out.close();        }        return null;    }}

前端：这里有的js函数的作用是当点击验证码图片的时候会更新验证码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>用户登录</title>    <script type="text/javascript">        function changeVerifyCode() {            var time=new Date().getTime();            document.getElementById("kaptchaImage").src="/kaptcha?d="+time;//为了不让验证码缓存，为了安全起见，需要次次都刷新        }    </script></head><body><br><br><br>    <div align="center">        <h1>登录</h1>        <br><br><br>        <form action="/login" method="POST">            用  户  名：<input type="text" name="username" placeholder="请输入用户名"><br><br><br>            密      码：<input type="password" name="password" placeholder="请输入密码"><br><br>            验  证  码：<input type="text" name="verifyCode" placeholder="请输入验证码"/>            <img src="/kaptcha.jpg" id="kaptchaImage" title="看不清，点击换一张" onclick="changeVerifyCode()"><br><br>            <input type="submit" value="登录">      <input type="reset" value="取消">        </form>    </div></body></html>

最后一步就是做判断验证码输入正不正确啦，由于本项目集成了shiro，所以逻辑是当验证码通过后再去执行shiro的登录认证

 @RequestMapping(value = "/login",method = RequestMethod.POST)    public String login(HttpServletRequest request, Model model){        CustomException customException=null;        String verifyCode=request.getParameter("verifyCode").toUpperCase();        String username=request.getParameter("username");        String password=request.getParameter("password");        //判断验证码输入是否正确        if(verifyCode.equals(request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY))){            if((username!=null && password!=null)){                UsernamePasswordToken token=new UsernamePasswordToken(username,password);                Subject subject= SecurityUtils.getSubject();                try{                    subject.login(token);                }catch (AuthenticationException e){                    customException=new CustomException(e.getMessage());                }                if( subject.isAuthenticated()){                    subject.logout();                    model.addAttribute("username",username);                    return "/loginsuccess";                }else {                    model.addAttribute("exception",customException.getMessage());                    return "/refuse";                }            }        }else {            System.out.print("验证码输入不正确");        }        return "login";    }

0 0