SpringMVC验证码生成，点击刷新及验证--基于kaptcha

川长思鸟来 2022-08-20 06:10 404阅读 0赞

直接看结果

实验结果

这里写图片描述

输入正确的验证码

这里写图片描述

输入错误的验证码

这里写图片描述

验证码错误后自动刷新

这里写图片描述

除了数字，验证码的内容可以是多种多样的
下面看一下，数字，字母和中文混合的验证码

这里写图片描述

还有其他的设置会在后面讲解

这个验证码不是我写的，是用google的kaptcha实现的，所以首先需要引入kaptcha的jar包

kaptcha-2.3.2.jar

可以在项目的jar包中下载

https://github.com/peer44/testwechat/tree/master/WebContent/WEB-INF/lib

配置bean

其次在springmvc的配置文件配置一个bean

  1. <!-- 配置验证码 -->
  2.     <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
  3.         <property name="config">
  4.             <bean class="com.google.code.kaptcha.util.Config">
  5.                 <constructor-arg>
  6.                     <props>
  7.                         <!-- 图片边框 -->
  8.                         <prop key="kaptcha.border">no</prop>
  9.                         <!-- 图片宽度 -->
  10.                         <prop key="kaptcha.image.width">95</prop>
  11.                         <!-- 图片高度 -->
  12.                         <prop key="kaptcha.image.height">45</prop>
  13.                         <!-- 验证码背景颜色渐变，开始颜色 -->
  14.                         <prop key="kaptcha.background.clear.from">248,248,248</prop>
  15.                         <!-- 验证码背景颜色渐变，结束颜色 -->
  16.                         <prop key="kaptcha.background.clear.to">248,248,248</prop>
  17.                         <!-- 验证码的字符 -->
  18.                         <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz快过年了我想回家</prop>
  19.                         <!-- 验证码字体颜色 -->
  20.                         <prop key="kaptcha.textproducer.font.color">0,0,255</prop>
  21.                         <!-- 验证码的效果，水纹 -->
  22.                         <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.WaterRipple</prop>
  23.                         <!-- 验证码字体大小 -->
  24.                         <prop key="kaptcha.textproducer.font.size">35</prop>
  25.                         <!-- 验证码字数 -->
  26.                         <prop key="kaptcha.textproducer.char.length">4</prop>
  27.                         <!-- 验证码文字间距 -->
  28.                         <prop key="kaptcha.textproducer.char.space">2</prop>
  29.                         <!-- 验证码字体 -->
  30.                         <prop key="kaptcha.textproducer.font.names">new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)</prop>
  31.                         <!-- 不加噪声 -->
  32.                         <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
  33.                     </props>
  34.                 </constructor-arg>
  35.             </bean>
  36.         </property>
  37.     </bean>

验证码可以设置，基本的用法都进行了注释，可以根据自己的需求进行修改

开发Controller

  1. package com.wechat.controller;
  3. import com.google.code.kaptcha.Constants;
  4. import com.google.code.kaptcha.Producer;
  5. import org.apache.commons.lang3.StringUtils;
  6. import org.apache.commons.logging.Log;
  7. import org.apache.commons.logging.LogFactory;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.ui.Model;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  12. import org.springframework.web.bind.annotation.RequestMethod;
  13. import org.springframework.web.bind.annotation.RequestParam;
  14. import org.springframework.web.bind.annotation.ResponseBody;
  15. import org.springframework.web.servlet.ModelAndView;
  17. import javax.imageio.ImageIO;
  18. import javax.servlet.ServletOutputStream;
  19. import javax.servlet.http.HttpServletRequest;
  20. import javax.servlet.http.HttpServletResponse;
  21. import java.awt.image.BufferedImage;
  22. import java.io.IOException;
  24. /** * 验证码相关的接口 * * @author gaowei.cheng */
  25. @Controller
  26. @RequestMapping(value = "/captcha")
  27. public class CaptchaController { 
  29.     private static final Log log = LogFactory.getLog(CaptchaController.class);
  30.     @Autowired
  31.     private Producer captchaProducer;
  33.     /** * 页面入口 * @param model * @return */
  34.     @RequestMapping(value = "/getCaptcha", method = RequestMethod.GET)
  35.     public String getCaptcha(Model model) {
  36.         model.addAttribute("timestamp", System.currentTimeMillis());
  37.         return "captcha";
  38.     }
  40.     /** * 生成带验证码的图片 * @param model * @param request * @param response * @param timestamp * @return * @throws IOException */
  41.     @RequestMapping(value = "/getCaptchaImage.jpg", method = RequestMethod.GET)
  42.     public ModelAndView getCaptchaImage(Model model,HttpServletRequest request, HttpServletResponse response,
  43.                                         @RequestParam(value = "timestamp", required = false) String timestamp) throws IOException {
  44.         if (StringUtils.isEmpty(timestamp)) {
  45.             //System.out.println("没有时间戳\ttimestamp:" + timestamp);
  46.             model.addAttribute("timestamp", System.currentTimeMillis());
  47.         } else {
  48.             //System.out.println("有时间戳\ttimestamp:" + timestamp);
  49.             model.addAttribute("timestamp", timestamp);
  50.         }
  52.         response.setDateHeader("Expires", 0);
  53.         response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
  54.         response.addHeader("Cache-Control", "post-check=0, pre-check=0");
  55.         response.setHeader("Pragma", "no-cache");
  56.         response.setContentType("image/jpeg");
  57.         String capText = captchaProducer.createText();
  59.         request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
  60.         log.info("======生成了一个验证码，内容为：" + capText);
  61.         BufferedImage bi = captchaProducer.createImage(capText);
  62.         ServletOutputStream out = response.getOutputStream();
  63.         ImageIO.write(bi, "jpg", out);
  64.         try {
  65.             out.flush();
  66.         } finally {
  67.             out.close();
  68.         }
  69.         return null;
  70.     }
  72.     /** * * @param timestamp * @param code * @param request * @return true或fasle,ture表示验证成功,false表示验证失败 */
  73.     @RequestMapping(value = "/checkCaptcha", method = RequestMethod.POST)
  74.     @ResponseBody
  75.     public String checkCaptcha(@RequestParam(value = "timestamp", required = false) String timestamp, @RequestParam(value = "code", required = false) String code,HttpServletRequest request) {
  76.         boolean returnStr = false;
  78.         String original =(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
  79.         log.info("======用户输入的验证码：" + code);
  80.         log.info("======正确的验证码：" + original);
  82.         if (StringUtils.isNotEmpty(code)) {
  83.             if (code.equalsIgnoreCase(original)) {
  84.                 returnStr = true;
  85.             }
  86.         }
  88.         log.info("======验证结果" + returnStr);
  89.         return returnStr + "";
  91.     }
  92. }

开发页面

captcha.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>验证码</title>
  8. <c:catch var="importError0">
  9.     <c:import url="common/base.jsp" charEncoding="utf-8"></c:import>
  10. </c:catch>
  11. <c:out value="${importError0}"></c:out>
  12. </head>
  13. <body>
  14.     <img id="imgObj" alt="验证码" src="${base }/captcha/getCaptchaImage.jpg" onclick="changeImg()">
  15.     <form action="" id="loginform">
  16.         请输入验证码:<input id="imageContent" name="imageContent" type="text"><br>
  17.         <input id="timestamp" name="timestamp" value="${timestamp }" type="hidden" >
  18.         <button>提交</button>
  19.     </form>
  20. </body>
  21. <script type="text/javascript"> var base = "${base}"; function checkImageCode(code) { var timestamp = $("#timestamp").val().trim(); console.log(code + " " + timestamp); var haha = ""; $.ajax({ type : 'post', async : false, url : base+'/captcha/checkCaptcha', data : { "code" : code }, success : function(data) { haha = data; } }); console.log(haha); return haha; } $("form").submit(function check(){ var code = $("#imageContent").val().trim(); if(code.length != 0 ){ var status = checkImageCode(code).trim(); //alert(status); if(status.indexOf("true")>=0){ alert("成功"); }else{ changeImg(); alert("失败"); } }else{ alert("请输入验证码"); } return false; }); function changeImg() { var imgSrc = $("#imgObj"); var src = imgSrc.attr("src"); imgSrc.attr("src", chgUrl(src)); }; //时间戳 //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳 function chgUrl(url) { var timestamp = (new Date()).valueOf(); var stamp = $("#timestamp"); /* alert(url); url = url.substring(0, 60); if ((url.indexOf("&") >= 0)) { url = url + "×tamp=" + timestamp; } else { url = url + "?timestamp=" + timestamp; stamp.val(timestamp); } */ return url; }; </script>
  22. </html>

captcha.jsp中需要引入一些js，js在common/base.jsp中统一引入了

common/base.jsp和js文件在项目中，项目下载地址

https://github.com/peer44/testwechat

项目比较杂，是平时写着玩的一些示例

参考文献

http://stone02111.iteye.com/blog/1688195
http://www.aliog.com/19828.html

发表评论

表情：
评论列表 （有 0 条评论，404人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Kaptcha生成图片验证码

    Kaptcha简介 kaptcha 是一个很有用的验证码生成工具。由于它是可配置的，有了它，你能够生成各种样式的验证码。 Kaptcha 是一个可高度配置的实用验证码

    傷城~傷城~/ 0 赞/ 499 阅读