Spring boot 集成 Kaptcha 实现前后端分离验证码功能

简述:
在web开发中验证码是一个常见的功能。不论是防止机器人还是爬虫都有一定的作用,我们可以自己编写验证码的工具类,也可以使用比较方便的验证码工具。

本文使用Spring boot 集成 Kaptcha 实现前后端分离验证码功能,这里为什么强调前后端分离,拿登陆功能为例,在登陆我们要请求后台返回一张验证码图片,然后输入用户名密码加上验证码,再次提交给后台,如果不是前后端分离,可轻松的从session中获取用户信息;现在前后端分离了,session失效了,第二次请求认为是一个新的用户,这问题就产生了,我们不能确定当前传过的这个验证码是否是第一次给这个用户的,本文就是要解决这个问题,在前后端分离项目中实现验证码校验功能。


解决思路:
1、前端请求后端,后端返回验证码图片和TOKEN。
2、后端将TOKEN和验证码记录在数据库中。
3、前端请求登陆,传入TOKEN和验证码及相关登陆信息,让后端匹配验证码。
4、后端按TOKEN查出验证码,对刚传入的验证码进行匹配。
5、匹配成功,登陆成功;匹配失败,返回异常信息。

Spring boot 集成 Kaptcha 实现前后端分离验证码功能_第1张图片

具体实现:
一、首先,搭建一个Spring boot 工程,在我博客中可以找到具体的搭建文章。
二、导入kaptcha的依赖

  
    com.github.penggle  
    kaptcha  
    2.3.2  
三、配置kaptcha
/**
 * 生成验证码配置
 *
 * @author shanming.yang
 * @email a78270528@126.com
 * @date 2017-04-20 19:22
 */
@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", "10");
        properties.put("kaptcha.textproducer.char.length","4");
        properties.put("kaptcha.image.height","34");
        properties.put("kaptcha.textproducer.font.size","25");
        
        properties.put("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}
四、后端创建请求验证码接口

1、请求验证码接口

	@ResponseBody
	@RequestMapping(value = "/captcha", method = RequestMethod.POST)
	public Map captcha(HttpServletResponse response) throws ServletException, IOException {

		// 生成文字验证码

		String text = producer.createText();
		// 生成图片验证码
		ByteArrayOutputStream outputStream = null; 
		BufferedImage image = producer.createImage(text);
		
		outputStream = new ByteArrayOutputStream();  
		ImageIO.write(image, "jpg", outputStream);  
	    
		// 对字节数组Base64编码  
		BASE64Encoder encoder = new BASE64Encoder();  
	    
		// 生成captcha的token
		Map map = captchaService.createToken(text);
		map.put("img", encoder.encode(outputStream.toByteArray()));

		return map;
	}
2、登陆接口
   /**
     * 登录
     */
    @IgnoreAuth
    @PostMapping("login")
    @ApiOperation(value = "登录",notes = "登录")
    @ApiImplicitParams({
        @ApiImplicitParam(paramType = "query", dataType="string", name = "account", value = "账号", required = true),
        @ApiImplicitParam(paramType = "query", dataType="string", name = "password", value = "密码", required = true),
        @ApiImplicitParam(paramType = "query", dataType="string", name = "captcha", value = "验证码", required = true)
    })
    public R login(HttpServletRequest request,String account, String password,String captcha,String ctoken){
        Assert.isBlank(account, "账号不能为空");
        Assert.isBlank(password, "密码不能为空");
        Assert.isBlank(password, "验证码不能为空");
        String token = request.getHeader("token");
        CaptchaEntity captchaEntity  = captchaService.queryByToken(ctoken);

	if(!captcha.equalsIgnoreCase(captchaEntity.getCaptcha())){
		return R.error("验证码不正确");
	}
        
        //用户登录
        String userId = userService.login(account, password);

        //生成token
        Map map = tokenService.createToken(userId);

        return R.ok(map);
    }
3、具体实现
@Service("captchaService")
public class CaptchaServiceImpl implements CaptchaService {
	@Autowired
	private CaptchaDao captchaDao;
	//1小时后过期
	private final static int EXPIRE = 3600 * 1;

	@Override
	public CaptchaEntity queryByCaptcha(String captcha) {
		return captchaDao.queryByCaptcha(captcha);
	}

	@Override
	public CaptchaEntity queryByToken(String token) {
		return captchaDao.queryByToken(token);
	}

	@Override
	public void save(CaptchaEntity token){
		captchaDao.save(token);
	}
	
	@Override
	public void update(CaptchaEntity token){
		captchaDao.update(token);
	}
	
	@Override
	public boolean isExpired(Date expireTime){
		Date d=new Date();
		return d.getTime()>expireTime.getTime()?true:false;
	}

	@Override
	public Map createToken(String captcha) {
		//生成一个token
		String token = UUID.randomUUID().toString();
		//当前时间
		Date now = new Date();

		//过期时间
		Date expireTime = new Date(now.getTime() + EXPIRE * 1000);

		//判断是否生成过token
		CaptchaEntity tokenEntity = queryByCaptcha(captcha);
		if(tokenEntity == null){
			tokenEntity = new CaptchaEntity();
			tokenEntity.setCaptcha(captcha);
			tokenEntity.setToken(token);
			tokenEntity.setUpdateTime(now);
			tokenEntity.setExpireTime(expireTime);

			//保存token
			save(tokenEntity);
		}else{
			tokenEntity.setToken(token);
			tokenEntity.setUpdateTime(now);
			tokenEntity.setExpireTime(expireTime);

			//更新token
			update(tokenEntity);
		}

		Map map = new HashMap<>();
		map.put("token", token);
		map.put("expire", EXPIRE);

		return map;
	}

	@Override
	public void deleteByToken(String token) {
		captchaDao.deleteByToken(token);
	}
}
4、DAO
/**
 * 验证码
 * 
 * @author shanming.yang
 * @email a78270528@126.com
 * @date 2017-11-22 15:22:07
 */
public interface CaptchaDao extends BaseDao {
    
	CaptchaEntity queryByCaptcha(String captcha);

	CaptchaEntity queryByToken(String token);

	void deleteByToken(String token);
	
}
5、Mapper


	

	
	 
	
		insert into u_token
		(
			`user_id`, 
			`token`, 
			`expire_time`, 
			`update_time`
		)
		values
		(
			#{userId}, 
			#{token}, 
			#{expireTime}, 
			#{updateTime}
		)
	
	 
	
		update u_token 
		
			`token` = #{token}, 
			`expire_time` = #{expireTime}, 
			`update_time` = #{updateTime}
		
		where user_id = #{userId}
	
	
	 
		delete from u_token where token = #{value}
	

五、前端AJAX(VUE)
login: function (event) {
//alert(localStorage.getItem("ctoken"));
var data = "account="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha+"&ctoken="+localStorage.getItem("ctoken");
$.ajax({
    type: "POST",
    url: basePath+"api/login",
    headers:{'token':localStorage.getItem("token")},
    data: data,
    dataType: "json",
    success: function(result){
    	//alert(result.code);
		if(result.code == 0){//登录成功
			var token=result.token;
			var expire=result.expire;
			localStorage.setItem("token",token);
			parent.location.href = 'sysindex.html';
		}else{
			vm.error = true;
			vm.errorMsg = result.msg;
			
			vm.refreshCode();
		}
	}
});

function ajaxcaptcha(){
	$.ajax({
		type: "POST",
	    url: basePath+"captcha",
	    dataType: "json",
	    success: function(result){
		//JQUERY
	    	//$("#captchaimg").prop('src', 'data:image/jpeg;base64,'+result.img);
	    	localStorage.setItem("ctoken",result.token);
	    	vm.src = 'data:image/jpeg;base64,'+result.img;
		}
	});
}
六、前端HTML页面

七、注意

生成的Base64编码前要加入data:image/jpeg;base64,可通过http://imgbase64.duoshitong.com/来判断生成的Base64图片是否正确,粘入代码,如果正确,会显示对应图片,否则生成Base64错误。(感谢同事小岳岳的帮助)

Spring boot 集成 Kaptcha 实现前后端分离验证码功能_第2张图片

到此,使用Spring boot 集成 Kaptcha 实现前后端分离验证码功能已完成。

你可能感兴趣的:(JAVA,Spring,boot)