使用springboot+kaptcha生成验证码并校验
1 添加kaptcha依赖
这里使用gralde,使用maven替换成对应写法就好了
//验证码
compile "com.github.penggle:kaptcha:${kaptchaVersion}"
kaptchaVersion是2.3.2
2 配置文件内配置功能开启开关
#############################kaptcha验证码相关配置##################################################################
kaptcha.enabled=true
3 配置kaptcha
这里使用@ConditionalOnProperty
读取配置文件内配置,判断是否进行配置
package com.iscas.base.biz.config.verification.code;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
/**
* //TODO
*
* @author zhuquanwen
* @vesion 1.0
* @date 2020/8/17 20:52
* @since jdk1.8
*/
@Configuration
@ConditionalOnProperty(havingValue = "true", value = "kaptcha.enabled", matchIfMissing = false)
public class VerificationCodeConfig {
@Bean
public DefaultKaptcha getKaptcheCode() {
DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
Properties properties = new Properties();
properties.setProperty("kaptcha.border", "no");
properties.setProperty("kaptcha.textproducer.font.color", "black");
properties.setProperty("kaptcha.image.width", "100");
properties.setProperty("kaptcha.image.height", "36");
properties.setProperty("kaptcha.textproducer.font.size", "30");
properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.ShadowGimpy");
properties.setProperty("kaptcha.session.key", "code");
properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
properties.setProperty("kaptcha.background.clear.from", "232,240,254");
properties.setProperty("kaptcha.background.clear.to", "232,240,254");
properties.setProperty("kaptcha.textproducer.char.length", "4");
properties.setProperty("kaptcha.textproducer.font.names", "彩云,宋体,楷体,微软雅黑");
Config config = new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
4 编写controller内的接口
第一个接口获取验证码,第二个接口进行验证码校验
package com.iscas.base.biz.controller.common;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import com.iscas.base.biz.util.SpringUtils;
import com.iscas.templet.common.BaseController;
import com.iscas.templet.common.ResponseEntity;
import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.condition.ConditionalOnBean;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.util.Objects;
/**
*
* @author zhuquanwen
* @vesion 1.0
* @date 2020/8/17 20:49
* @since jdk1.8
*/
@RestController
@Api(description = "验证码控制器")
@Slf4j
@ConditionalOnProperty(havingValue = "true", value = "kaptcha.enabled", matchIfMissing = false)
public class VerificationCodeController extends BaseController {
@Autowired
private Producer producer;
/**
* 获取验证码
* */
@GetMapping("/verification/code")
public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
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 = producer.createText();
log.debug("*************验证码已经生成为:{}******************", capText);
// 将验证码存于session中,分布式部署需要共享session,或存入共享存储中
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
BufferedImage bi = producer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
// 向页面输出验证码
ImageIO.write(bi, "jpg", out);
try {
// 清空缓存区
out.flush();
} finally {
// 关闭输出流
out.close();
}
}
/**
* 校验验证码
* */
@GetMapping("/verification/code/verify")
public ResponseEntity verify(String code) throws Exception {
ResponseEntity response = getResponse();
// 获取Session中验证码
Object storeCode = SpringUtils.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
// 判断验证码是否为空
if (StringUtils.isEmpty(code)) {
response.setValue(false);
} else {
// 校验验证码的正确与否
boolean result = Objects.equals(code, storeCode);
if (result) {
//将验证码从session中删掉
SpringUtils.getSession().removeAttribute(Constants.KAPTCHA_SESSION_KEY);
}
response.setValue(result);
}
return response;
}
}
5 前端测试代码
提交用户名密码前先进行验证码校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="CryptoJS/rollups/aes.js"></script>
<script type="text/javascript" src="CryptoJS/components/mode-ecb.js"></script>
<script type="text/javascript" src="CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="CryptoJS/components/core.js"></script>
<script>
var $1 = function(id) {
return document.getElementById(id);
};
......
function tosubmit(){
//验证验证码
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('get', 'http://localhost:7901/demo/verification/code/verify?code=' + $1("code").value);
xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonx = JSON.parse(xhr.responseText);
if(jsonx.status != 200){
console.log(jsonx.message);
var verifySuccess = jsonx.value;
if (verifySuccess == true) {
//发送用户名密码
submitUserAndPwd();
} else {
alert("验证码校验失败");
}
}else{
console.log(jsonx.data);
}
}else{
// var json = JSON.parse(xhr.responseText);
console.log(xhr.responseText);
}
};
}
function submitUserAndPwd() {
......
}
</script>
<title>登录</title>
</head>
<body>
用户名:<input type="text" value="" id="user"/> <br/>
密码:<input type="text" id="pwd" /><br/>
验证码:<img src="http://localhost:7901/demo/verification/code" onclick="this.src=this.src+'?m='+Math.random();"/>
<input type="text", id = "code"/><br/>
<input type="button" value="提交" onclick="tosubmit();"/>
</body>
</html>
巨丑无比的登录页来了,也能实现验证码校验了