kaptcha验证码组件 | 天涯路远

简介

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">
  &nbsp;&nbsp;&nbsp;&nbsp;<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键