1. 添加easy-captcha依赖
<!-- 验证码 -->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
2.后端实现
@Controller
public class KaptchaController {
@GetMapping("/kaptcha")
public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
// 设置所有浏览器不要缓存,共三个响应头
httpServletResponse.setHeader("Cache-Control", "no-store");
httpServletResponse.setHeader("Pragma", "no-cache");
httpServletResponse.setDateHeader("Expires", 0);
// 设置浏览器打开方式为图片,不是默认的读取文本
httpServletResponse.setContentType("image/gif");
// 生成验证码对象,三个参数分别为宽、高、位数
SpecCaptcha captcha = new SpecCaptcha(75, 30,4);
// 设置类型为数字和字母混合
captcha.setCharType(Captcha.TYPE_DEFAULT);
// 设置字体
captcha.setCharType(Captcha.FONT_9);
// 验证码存入session
httpServletRequest.getSession().setAttribute("verifyCode", captcha.text().toLowerCase());
// 输出图片流
captcha.out(httpServletResponse.getOutputStream());
}
}
点击时访问的路径为'/kaptcha?d='+new Date()*1,即原来的验证码路径后面带上一个时间戳参数 d。时间戳是会变化的,所以每次点击都会是一个与之前不同的请求。如果不这样处理的话,由于浏览器的缓存机制,在点击刷新验证码后可能不会重新发送请求,将导致在一段时间内一直显示同一张验证码图片。
3.前端实现,标签为img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>验证码显示</title>
</head>
<body>
<img src="/kaptcha" onclick="this.src='/kaptcha?d='+new Date()*1" />
</body>
</html>
4.验证
@GetMapping("/verify")
@ResponseBody
public String verify(@RequestParam("code") String code, HttpSession session) {
if (!StringUtils.hasLength(code)) {
return "验证码不能为空";
}
String kaptchaCode = session.getAttribute("verifyCode") + "";
if (!StringUtils.hasLength(kaptchaCode) || !code.toLowerCase().equals(kaptchaCode)) {
return "验证码错误";
}
return "验证成功";
}