spring整合kaptcha验证码的实现

kaptcha简介:

kaptcha是一个很有用的验证码生成工具，由于它有许多可配置项，所以用它可以简单快捷的生成各式各样的验证码。

开发工具及使用的核心技术:

1、eclipse

2、mybatis

3、spring

4、springmvc

5、kaptcha

本文将介绍kaptcha两种使用方式:

方式一:在 spring-kaptcha.xml 中配置

方式二:在 web.xml 中配置

正式开始:

 一、搭骨架

1、添加依赖:

  
   com.github.penggle
   kaptcha
   2.3.2
  

要使用kaptcha验证码，除了spring和mybatis那些依赖，只需引入这一个即可。

2、完善配置文件

①spring-dao.xml

 
 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 

 
 
  
  
  

注意:这里get传的参数名为“verifyCodeActual”，那么等下在页面中验证码的name值也得为这个。
接下来就可以使用验证码了！
4、用户登录的Controller
UserController.java

@Controller
@RequestMapping("/user")
public class UserController {

  @Autowired
  private UserService userService;

  @RequestMapping("/login")
  public String login(@RequestParam("userName") String userName, @RequestParam("passWord") String passWord,
      HttpServletRequest request) {
    boolean result = userService.login(userName, passWord);
    if (!CodeUtil.checkVerifyCode(request)) {
      request.setAttribute("codeErr", "验证码有误!");
      return "fail";
    } else {
      if (result) {
 request.setAttribute("user", userName);
 return "success";
      } else {
 request.setAttribute("errMsg", "用户名或密码错误!");
 return "fail";
      }
    }
  }
}

注:这里调用CodeUtil工具类比对输入的验证码是否正确。
5、前端页面
login.jsp

<%@ page language="java" import="java.util.*"
  contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>




 






  
  



success.jsp


  欢迎登录，${user}


fail.jsp


  对不起，登录失败，原因:

 ${codeErr}
  ${errMsg}


注:login.jsp的js代码是完成“点击更换”功能;注意验证码的name要和传入工具类中的名字一样，src就是生成验证码的controller路由加上.jpg。
6、测试:
输入正确的验证码:

登录成功:

输入错误的验证码:

页面显示验证码有误:

点击验证码可以更换！
 方式二、在web.xml中配置验证码
相比于方式一，一增二减。
减:
1、在上面那个项目的基础上，把 CodeController.java删掉 。
2、把 spring-kaptcha.xml删掉 ，其他的保留。
增:
1、在 web.xml 中 添加 如下配置:


  
    Kaptcha
    com.google.code.kaptcha.servlet.KaptchaServlet
    
    
      kaptcha.border
      no
    
    
    
      kaptcha.textproducer.font.color
      black
    
    
    
      kaptcha.image.width
      135
    
    
    
      kaptcha.textproducer.char.string
      ACDEFHKPRSTWX345679
    
    
    
      kaptcha.image.height
      50
    
    
    
      kaptcha.textproducer.font.size
      43
    
    
    
      kaptcha.noise.color
      red
    
    
    
      kaptcha.textproducer.char.length
      4
    
    
    
      kaptcha.textproducer.font.names
      Arial
    
  
  
    Kaptcha
    /kaptcha.jpg
  


注:这段配置就是用来配置验证码的，注意最后的 /kaptcha.jpg 要与验证码中的 src = "kaptcha.jpg" 对应。
这样就完成了验证码的配置，接下来测试。 测试:
输入错误的验证码:

页面显示验证码错误:

输入正确的验证码:

登录成功:

测试通过！
 总结:
1、在页面中加验证码很简单，只需要添加  即可。用一个img标签，然后通过src指向生成验证码的controller的路由加上 .jpg (验证码用spring方式配置)，或者通过src指向
/kaptcha.jpg ，即 src="kaptcha.jpg" 。
2、点击更换也简单，就是给img标签加一个onclick事件，然后用js完成。
点击更换的js:



然后在img标签中加上 onclick="refresh()" ，这样就完成了这个点击事件。
3、更多kaptcha属性的配置


  

    

      
Constant
      
描述
      
默认值
    
    

      
kaptcha.border
      
图片边框，合法值：yes , no
      
yes
    
    

      
kaptcha.border.color
      
边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.
      
black
    
    

      
kaptcha.border.thickness
      
边框厚度，合法值：>0
      
1
    
    

      
kaptcha.image.width
      
图片宽
      
200
    
    

      
kaptcha.image.height
      
图片高
      
50
    
    

      
kaptcha.producer.impl
      
图片实现类
      
com.google.code.kaptcha.impl.DefaultKaptcha
    
    

      
kaptcha.textproducer.impl
      
文本实现类
      
com.google.code.kaptcha.text.impl.DefaultTextCreator
    
    

      
kaptcha.textproducer.char.string
      
文本集合，验证码值从此集合中获取
      
abcde2345678gfynmnpwx
    
    

      
kaptcha.textproducer.char.length
      
验证码长度
      
5
    
    

      
kaptcha.textproducer.font.names
      
字体
      
Arial, Courier
    
    

      
kaptcha.textproducer.font.size
      
字体大小
      
40px.
    
    

      
kaptcha.textproducer.font.color
      
字体颜色，合法值： r,g,b  或者 white,black,blue.
      
black
    
    

      
kaptcha.textproducer.char.space
      
文字间隔
      
2
    
    

      
kaptcha.noise.impl
      
干扰实现类
      
com.google.code.kaptcha.impl.DefaultNoise
    
    

      
kaptcha.noise.color
      
干扰 颜色，合法值： r,g,b 或者 white,black,blue.
      
black
    
    

      
kaptcha.obscurificator.impl
      
图片样式： 

      水纹com.google.code.kaptcha.impl.WaterRipple 

      鱼眼com.google.code.kaptcha.impl.FishEyeGimpy

      阴影com.google.code.kaptcha.impl.ShadowGimpy
      
com.google.code.kaptcha.impl.WaterRipple
    
    

      
kaptcha.background.impl
      
背景实现类
      
com.google.code.kaptcha.impl.DefaultBackground
    
    

      
kaptcha.background.clear.from
      
背景颜色渐变，开始颜色
      
light grey
    
    

      
kaptcha.background.clear.to
      
背景颜色渐变， 结束颜色
      
white
    
    

      
kaptcha.word.impl
      
文字渲染器
      
com.google.code.kaptcha.text.impl.DefaultWordRenderer
    
    

      
kaptcha.session.key
      
session key
      
KAPTCHA_SESSION_KEY
    
    

      
kaptcha.session.date
      
session date
      
KAPTCHA_SESSION_DATE
    
  


以上内容属于个人笔记整理，如有错误，欢迎批评指正！