Kaptcha 简介
Kaptcha 是一个可高度配置的实用验证码生成工具,可自由配置的选项如:
验证码的字体验证码字体的大小验证码字体的字体颜色验证码内容的范围(数字,字母,中文汉字!)验证码图片的大小,边框,边框粗细,边框颜色验证码的干扰线验证码的样式(鱼眼样式、3D、普通模糊、…)
Kaptcha 详细配置表
用法
可以去官网/p/kaptcha/下载jar,或者在pom.xml中导入
<dependency><groupId>com.google.code.kaptcha</groupId><artifactId>kaptcha</artifactId><version>2.3</version></dependency>
或者
<dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>
项目结构分层
主要代码
@Componentpublic class KaptchaConfig {@Beanpublic DefaultKaptcha getDDefaultKaptcha() {DefaultKaptcha dk = new DefaultKaptcha();Properties properties = new Properties();// 图片边框properties.setProperty("kaptcha.border", "yes");// 边框颜色properties.setProperty("kaptcha.border.color", "105,179,90");// 字体颜色properties.setProperty("kaptcha.textproducer.font.color", "red");// 图片宽properties.setProperty("kaptcha.image.width", "110");// 图片高properties.setProperty("kaptcha.image.height", "40");// 字体大小properties.setProperty("kaptcha.textproducer.font.size", "30");// session keyproperties.setProperty("kaptcha.session.key", "code");// 验证码长度properties.setProperty("kaptcha.textproducer.char.length", "4");// 字体properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");Config config = new Config(properties);dk.setConfig(config);return dk;}}
KaptchaController.java
@Controllerpublic class KaptchaController {/*** 验证码工具*/@AutowiredDefaultKaptcha defaultKaptcha;@RequestMapping("/defaultKaptcha")public void defaultKaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception {byte[] captcha = null;ByteArrayOutputStream out = new ByteArrayOutputStream();try {// 将生成的验证码保存在session中String createText = defaultKaptcha.createText();request.getSession().setAttribute("rightCode", createText);BufferedImage bi = defaultKaptcha.createImage(createText);ImageIO.write(bi, "jpg", out);} catch (Exception e) {response.sendError(HttpServletResponse.SC_NOT_FOUND);return;}captcha = out.toByteArray();response.setHeader("Cache-Control", "no-store");response.setHeader("Pragma", "no-cache");response.setDateHeader("Expires", 0);response.setContentType("image/jpeg");ServletOutputStream sout = response.getOutputStream();sout.write(captcha);sout.flush();sout.close();}/*** 校对验证码* * @param request* @param response* @return*/@RequestMapping(value = "/login", method = RequestMethod.POST)public ModelAndView imgvrifyControllerDefaultKaptcha(HttpServletRequest request, HttpServletResponse response) {ModelAndView model = new ModelAndView();String rightCode = (String) request.getSession().getAttribute("rightCode");String tryCode = request.getParameter("tryCode");System.out.println("rightCode:" + rightCode + " ———— tryCode:" + tryCode);if (!rightCode.equals(tryCode)) {model.addObject("info", "验证码错误,请再输一次!");model.setViewName("login");} else {model.addObject("info", "登陆成功");model.setViewName("index");}return model;}/*** 返回首页* * @return*/@RequestMapping(value = "/login", method = RequestMethod.GET)public ModelAndView index() {return new ModelAndView("login");}}
前端页面
login.html
<!DOCTYPE html><html xmlns:th=""><head lang="en"><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="/jquery/2.1.1/jquery.min.js"></script><script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">body {padding: 10px;}#inputtext {width: 100%;}#login{width: 300px;margin:0px auto;padding-top: 60px;}#flushimg{text-decoration: underline;}#butt{width: 60%;}</style></head><body><div id="login"><form action="/login" method="post"><h2 align="center">L O G I N</h2><br/><br/><input type="text" name="userName" class="form-control" id="inputtext" required autofocus placeholder="-----请输入用户名-----"/><br/><input type="password" name="userName" class="form-control" id="inputtext" required placeholder="----请输入用户密码----"/><br/><div id="flushimg"><img alt="验证码" onclick="this.src='/defaultKaptcha?d=' + new Date()*1" src="/defaultKaptcha" /><a>看不清?点击图片刷新一下</a></div> <input type="text" name="tryCode" class="form-control" required placeholder="-----请输入验证码-----" /><h4 th:text="${info}" style="color: red"></h4><input type="checkbox" name="rememberMe"/>记住我<br/><div style="width: 100%;text-align: center;"><input type="submit" value="登 录" id="butt" class="btn btn-success" /></div></form></div></body></html>
index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h2>验证成功!</h2></body></html>