web 图形验证码方案

引入相关库

<!--   maven - pom.xml    -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.7.12</version>
</dependency>

后端代码

/**
 * 获取图形验证码
 * @return
*/
public String getGraphVerifyCode() {

    String base64String = "";
    //定义图形验证码的长、宽、验证码字符数、干扰线宽度
    ShearCaptcha shearCaptcha = CaptchaUtil.createShearCaptcha(102, 40, 5, 4);
    String code = shearCaptcha.getCode();
    //获取验证码中的文字内容
    base64String = "data:image/png;base64," + shearCaptcha.getImageBase64();
    return base64String;
}

前端代码

<img id="img"></img>

// request 你的请求对象
const promise = request;
promise.then(v => {
    const { data } = v;
    const img = document.getElementById("form-captcha-msg-text");
    // 你的img标签，接收图片
    img.style.backgroundImage = `url("${data}")`;
});

图形验证码通常与session、jwt搭配食用。
这里使用jwt，可自定义超时时间。可参考 springboot-jwt鉴权方案

代码如下

/**
 * 获取加密图形验证码
 * @return
 */
public Map<String, Object> getGraphVerifyCode() {

    String base64String = "";
    Map<String, Object> map = new HashMap<>();
    //定义图形验证码的长、宽、验证码字符数、干扰线宽度
    ShearCaptcha shearCaptcha = CaptchaUtil.createShearCaptcha(102, 40, 5, 4);
    String code = shearCaptcha.getCode();
    //获取验证码中的文字内容
    base64String = "data:image/png;base64," + shearCaptcha.getImageBase64();
    log.info("验证码: {}", code);
    map.put("img", base64String);
    // 加密图形验证码
    map.put("token", JwtUtil.createToken(code));
    return map;
}

// 解密
public Obejct decode(String code) {
    // 解密
    String sub = JwtUtil.validateToken(token);
}

参考文章：

• SpringBoot验证码之使用hutool-captcha方式实现验证码生成与验证