流程：本项目是通过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. */ @Controller public 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="看不清，点击换一张" οnclick="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"; }
