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
②spring-service.xml
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
③spring-web.xml
④web.xml
spring-dispatcher
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:spring/spring-*.xml
spring-dispatcher
/
encodingFilter
org.springframework.web.filter.CharacterEncodingFilter
true
encoding
UTF-8
encodingFilter
/*
至此，骨架就搭起来了，接下来完成对数据库的操作。
二、对数据库的操作
1、entity层
User.java
public class User {
private int uid;
private String userName;
private String passWord;
}
2、dao层
UserDao.java
public interface UserDao {
User findUserByUserName(String userName);
}
UserDao.xml
/p>
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
SELECT *
FROM tb_user
WHERE
user_name=#{userName}
3、service层
UserServiceImpl.java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public boolean login(String userName, String passWord) {
User user = userDao.findUserByUserName(userName);
if (passWord.equals(user.getPassWord())) {
return true;
} else {
return false;
}
}
}
注:写到dao层和service层应该做一下Junit测试，测试比较简单，这里就不做说明了。
三、整合kaptcha
方式一、通过spring-kaptcha.xml配置
1、在resources的spring文件夹下新建 spring-kaptcha.xml 配置文件，内容如下:
spring-kaptcha.xml
yes
105,179,90
blue
125
45
45
code
4
宋体,楷体,微软雅黑
注:这个bean就是配置了一些验证码的属性，也可以直接写在spring-web.xml中，根据个人习惯，我喜欢把不同模块的配置写在不同的文件中。
2、新建一个controller用于生成验证码
CodeController.java
@Controller
public class CodeController {
@Autowired
private Producer captchaProducer = null;
@RequestMapping("/kaptcha")
public void 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);
//向客户端写出
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
}
}
注意:这个controller的路由为“kaptcha”，那么等下前端验证码的src就为kaptcha.jpg 。
3、新建一个工具类用于比对验证码
CodeUtil.java
public class CodeUtil {
/**
* 将获取到的前端参数转为string类型
* @param request
* @param key
* @return
*/
public static String getString(HttpServletRequest request,String key) {
try {
String result = request.getParameter(key);
if(result != null) {
result = result.trim();
}
if("".equals(result)) {
result = null;
}
return result;
}catch(Exception e) {
return null;
}
}
/**
* 验证码校验
* @param request
* @return
*/
public static boolean checkVerifyCode(HttpServletRequest request) {
//获取生成的验证码
String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//获取用户输入的验证码
String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual");
if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) {
return false;
}
return true;
}
}
注意:这里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
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
登录function refresh() {
document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
}
userName:
password:
验证码:
οnclick="refresh()" src="kaptcha.jpg" />
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:
function refresh() {
document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
}
然后在img标签中加上 οnclick="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
以上内容属于个人笔记整理，如有错误，欢迎批评指正！
