当前位置: 首页 > 工具软件 > no-captcha > 使用案例 >

easy-captcha实现验证码功能

何博涛
2023-12-01

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 "验证成功";
}

 类似资料: