kaptcha 验证码技术

来源：互联网发布：淘宝机票代理加盟编辑：程序博客网时间：2024/06/08 18:22

1、添加依赖：

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

2、配置web.xml

<servlet>      <servlet-name>Kaptcha</servlet-name>      <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>  </servlet>  <servlet-mapping>      <servlet-name>Kaptcha</servlet-name>      <url-pattern>/kaptcha.jpg</url-pattern> </servlet-mapping>

3、applicationContext:

<!-- 验证码 --><bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">          <property name="config">              <bean class="com.google.code.kaptcha.util.Config">                  <constructor-arg>                      <props>                          <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.image.width">125</prop>                          <prop key="kaptcha.image.height">45</prop>                          <prop key="kaptcha.textproducer.font.size">36</prop>                          <prop key="kaptcha.session.key">code</prop>                          <prop key="kaptcha.textproducer.char.length">4</prop>                          <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>                      </props>                  </constructor-arg>              </bean>          </property>      </bean>

4、Controller

@Controller  @RequestMapping("/code")  public class CaptchaController {            @Autowired      private Producer captchaProducer = null;        @RequestMapping(value = "/captcha-image")      public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {          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.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);          System.out.println("验证码: " + capText );         BufferedImage bi = captchaProducer.createImage(capText);          ServletOutputStream out = response.getOutputStream();          ImageIO.write(bi, "jpg", out);          try {              out.flush();          } finally {              out.close();          }          return null;      }              @RequestMapping(value = "/captchaVerify",method=RequestMethod.POST)      @ResponseBody    public Map<String,Object> captchaVerify( String kaptchaCode,HttpServletRequest request, HttpServletResponse response) throws Exception {      Map<String,Object> result=new HashMap<>();    HttpSession session = request.getSession();      String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);     System.out.println("kaptchaCode:"+kaptchaCode+"  ;code:"+code);    if(StringUtils.isNotBlank(kaptchaCode)&&kaptchaCode.equalsIgnoreCase(code)){    result.put("isOK", "OK");    }else{    result.put("isOK", "WRONG");    }    return result;    }  }

5.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ddd</title><script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){//debugger;//生成验证码             $('#kaptchaImage').click(function () {      $(this).hide().attr('src', 'code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn(); }); $("#commitBtn").click(function () {var kaptchaCode=$("#kaptchaCode").val().trim();console.log(JSON.stringify(kaptchaCode));if(kaptchaCode!=""){$.ajax({type:"POST",url:"code/captchaVerify",data:{"kaptchaCode":kaptchaCode},dataType: "json",success:function(data){console.log(JSON.stringify(data));if(data.isOK=="OK"){alert("验证码OK");}else{alert("验证码WRONG");}}});}});});       function changeCode() {  //刷新    $('#kaptchaImage').hide().attr('src', 'code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn();  }  </script> <body class="easyui-layout"><div class="form-group">     <label>验证码 </label>    <input name="j_code" type="text" id="kaptchaCode" maxlength="4" class="form-control" />   <br/>    <img src="   "  id="kaptchaImage"  style="margin-bottom: -3px"/>          <a href="#" onclick="changeCode()">看不清?换一张</a>  </div>    <div><button id="commitBtn" >提交</button></div></body></html>

0 0