后台生成4位图像验证码
主要依赖: <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
spring相关依赖参照用到的另行添加。
package com.math.controller; import com.google.code.kaptcha.Producer; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.awt.image.BufferedImage; import java.io.IOException; /** * @ClassName: VerifyCodeController * @Description: 图像验证码 * @author: math * @date: 2023/1/16 16:33 * @version: 1.0 */ @Controller @RequestMapping("/verifyCode") public class VerifyCodeController { public static final String KAPTCHA_SESSION_KEY = "kaptcha_key"; @Autowired private Producer producer = null; /** * @Author Math * @Description 生成验证码 * @Date 2023/1/16 * @Version 1.0 * @Param * @return **/ @RequestMapping("/getImg") public void getImg(HttpServletRequest request, HttpServletResponse response) throws Exception { ServletOutputStream out = null; try { // 设置页面不缓存 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"); // 生成验证码编码 String capText = producer.createText(); // 将验证码编码生成图片 BufferedImage kaptchaImage = producer.createImage(capText); // 输出验证码PNG格式图片 response.setHeader("content-type", "image/png"); out = response.getOutputStream(); ImageIO.write(kaptchaImage, "png", out); out.flush(); // 获取session,并将验证码编码存放到session中 HttpSession session = request.getSession(); session.setAttribute(KAPTCHA_SESSION_KEY, capText); } catch (IOException e) { e.printStackTrace(); } finally { try { if (out != null) { out.close(); } } catch (IOException e) { e.printStackTrace(); } } } /** * @Author Math * @Description 检验验证码 * @Date 2023/1/16 * @Version 1.0 * @Param * @return **/ public boolean captchaVerify(HttpServletRequest request, String kaptchaCode) throws Exception { HttpSession session = request.getSession(); String code = (String) session.getAttribute(KAPTCHA_SESSION_KEY); System.out.println("kaptchaCode:" + kaptchaCode + " ;code:" + code); if (!StringUtils.isEmpty(kaptchaCode) && kaptchaCode.equalsIgnoreCase(code)) { // 检验通过 return true; } return false; } }
前端调用返回:
前端页面:
代码:
<div id="verifyBox">
<div class="cerify-code-panel">
<div class="verify-code" style="width: 100px; height: 40px; line-height: 40px; font-size: 20px; background-color: rgb(255, 255, 240); color: rgb(255, 153, 0);">
<img class="changeCodeAgain" id="verifyCodeImg" src="${pageContext.servletContext.contextPath }/verifyCode/getImg">
</div>
<div class="verify-code-area" style="width: 100px;">
<div class="verify-input-area"><input type="text" id="verifyCode" name="verifyCode" class="varify-input-code"></div>
<div class="verify-change-area changeCodeAgain"><a class="verify-change-code" >换一张</a></div>
</div>
</div>
</div>