后台生成4位图像验证码

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
主要依赖
<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>

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6