简介
kaptcha是谷歌开源的简单实用的验证码生成工具。通过设置参数，可以自定义验证码大小、颜色、显示的字符等等。
Maven引入
增加了com.google.code.kaptcha:kaptcha 依赖，pom.xml 配置文件如下：
<dependency>
<groupId>com.github.axet</groupId>
<artifactId>kaptcha</artifactId>
<version>${kaptcha.version}</version>
</dependency>
配置
配置类如下
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
/* ... */
/**
* 生成验证码配置
*
*/
@Configuration
public class KaptchaConfig {
@Bean
public DefaultKaptcha producer() {
Properties properties = new Properties();
properties.put("kaptcha.border", "no");
properties.put("kaptcha.textproducer.font.color", "black");
properties.put("kaptcha.textproducer.char.space", "5");
Config config = new Config(properties);
DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
Controller层
Controller 层的相关代码如下，通过captcha.jpg请求验证码，设置验证码文本，返回对应图片；验证登录时会使用该文本信息。
/**
* 登录相关
*
*/
@Controller
public class SysLoginController {
@Autowired
private Producer producer;
@RequestMapping("captcha.jpg")
public void captcha(HttpServletResponse response)throws IOException {
response.setHeader("Cache-Control", "no-store, no-cache");
response.setContentType("image/jpeg");
//生成文字验证码
String text = producer.createText();
//生成图片验证码
BufferedImage image = producer.createImage(text);
//保存到shiro session
ShiroUtils.setSessionAttribute(Constants.KAPTCHA_SESSION_KEY, text);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(image, "jpg", out);
}
/**
* 登录
*/
@ResponseBody
@RequestMapping(value = "/sys/login", method = RequestMethod.POST)
public R login(String username, String password, String captcha) {
String kaptcha = ShiroUtils.getKaptcha(Constants.KAPTCHA_SESSION_KEY);
if(!captcha.equalsIgnoreCase(kaptcha)){
return R.error("验证码不正确");
}
try{
Subject subject = ShiroUtils.getSubject();
UsernamePasswordToken token = new UsernamePasswordToken(username, password);
subject.login(token);
}catch (UnknownAccountException e) {
return R.error(e.getMessage());
}catch (IncorrectCredentialsException e) {
return R.error("账号或密码不正确");
}catch (LockedAccountException e) {
return R.error("账号已被锁定,请联系管理员");
}catch (AuthenticationException e) {
return R.error("账户验证失败");
}
return R.ok();
}
/* ... */
}
前端
页面代码如下。
<div class="form-group has-feedback">
<input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
<a href="javascript:;" @click="refreshCode">点击刷新</a>
</div>
效果图如下
js代码如下
<script type="text/javascript">
var vm = new Vue({
el:'#rrapp',
data:{
username: '',
password: '',
captcha: '',
error: false,
errorMsg: '',
src: 'captcha.jpg'
},
beforeCreate: function(){
if(self != top){
top.location.href = self.location.href;
}
},
methods: {
refreshCode: function(){
this.src = "captcha.jpg?t=" + $.now();
},
login: function (event) {
var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
$.ajax({
type: "POST",
url: "sys/login",
data: data,
dataType: "json",
success: function(result){
if(result.code == 0){//登录成功
parent.location.href ='index.html';
}else{
vm.error = true;
vm.errorMsg = result.msg;
vm.refreshCode();
}
}
});
}
}
});
</script>
kaptcha配置表
可通过如下参数来自定义验证码
| 配置 | 描述 |
|---|---|
| kaptcha.border | 是否有边框 默认为true 我们可以自己设置yes，no |
| kaptcha.border.color | 边框颜色 默认为Color.BLACK |
| kaptcha.border.thickness | 边框粗细度 默认为1 |
| kaptcha.producer.impl | 验证码生成器 默认为DefaultKaptcha |
| kaptcha.textproducer.impl | 验证码文本生成器 默认为DefaultTextCreator |
| kaptcha.textproducer.char.string | 验证码文本字符内容范围 默认为abcde2345678gfynmnpwx |
| kaptcha.textproducer.char.length | 验证码文本字符长度 默认为5 |
| kaptcha.textproducer.font.names | 验证码文本字体样式 默认为new Font(“Arial”, 1, fontSize), new Font(“Courier”, 1, fontSize) |
| kaptcha.textproducer.font.size | 验证码文本字符大小 默认为40 |
| kaptcha.textproducer.font.color | 验证码文本字符颜色 默认为Color.BLACK |
| kaptcha.textproducer.char.space | 验证码文本字符间距 默认为2 |
| kaptcha.noise.impl | 验证码噪点生成对象 默认为DefaultNoise |
| kaptcha.noise.color | 验证码噪点颜色 默认为Color.BLACK |
| kaptcha.obscurificator.impl | 验证码样式引擎 默认为WaterRipple |
| kaptcha.word.impl | 验证码文本字符渲染 默认为DefaultWordRenderer |
| kaptcha.background.impl | 验证码背景生成器 默认为DefaultBackground |
| kaptcha.background.clear.from | 验证码背景颜色渐进 默认为Color.LIGHT_GRAY |
| kaptcha.background.clear.to | 验证码背景颜色渐进 默认为Color.WHITE |
| kaptcha.image.width | 验证码图片宽度 默认为200 |
| kaptcha.image.height | 验证码图片高度 默认为50 |
| kaptcha.session.key | session中存放验证码的key键 |
