springboot实现验证码生成及验证功能

springboot实现验证码生成及验证功能 2023-07-27 1006

1.springboot整合hutool-captcha生成验证码，首先是添加依赖：

<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-captcha</artifactId>
            <version>${hutool-captcha.version}</version>
        </dependency>

2.生成并显示验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import ltd.newbee.mall.common.Constants;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 */
@Controller
public class CommonController {

    @GetMapping("/common/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/png");

        ShearCaptcha shearCaptcha= CaptchaUtil.createShearCaptcha(150, 30, 4, 2);

        // 验证码存入session
        httpServletRequest.getSession().setAttribute("verifyCode", shearCaptcha);

        // 输出图片流
        shearCaptcha.write(httpServletResponse.getOutputStream());
    }

    @GetMapping("/common/mall/kaptcha")
    public void mallKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/png");

        ShearCaptcha shearCaptcha= CaptchaUtil.createShearCaptcha(110, 40, 4, 2);

        // 验证码存入session
        httpServletRequest.getSession().setAttribute(Constants.MALL_VERIFY_CODE_KEY, shearCaptcha);

        // 输出图片流
        shearCaptcha.write(httpServletResponse.getOutputStream());
    }
}

3.前端逻辑实现

<!Do.. html>
<html>
<head>
<emta charset=""/>
<title>..
</head>
<bode>
<img src = "/kaptcha" onclick="this.src=/kaptcha?d = +new Date()*1" />
</body>
</html>

4.验证码的输入验证

一般做法是在后端生成验证码后，首先对当前生成的验证码内容进行保存，可以选择保存在session中，redis缓存中，或者保存在数据库中。然后返回验证码图片并显示到前端页面。用户在输入验证码后，并向后端发出验证请求后，后端接到请求后会对用户输入的验证码进行验证。

@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“验证成功”;
}

5.前端逻辑实现

省略....

免费搭建微信查券返利机器人来轻松赚佣金