easy-captcha实现验证码功能

Tingnichui

已于 2022-01-29 08:56:54 修改

阅读量630

点赞数 1

分类专栏：后端功能实现文章标签：蓝桥杯 eureka gnu

于 2022-01-26 16:24:39 首次发布

本文链接：https://blog.csdn.net/Tingnichui/article/details/122704168

版权

后端功能实现专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

Tingnichui

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easy-captcha实现验证码功能

1.添加easy-captcha依赖 <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency>2.后端实现@Controllerpubli.
复制链接

扫一扫