生成验证码：

提供一个接口， 这个接口里，我们将生成的验证码存入session，然后将验证码以图片格式或者base64编码串返回给调用端。

校验验证码：

提供一个接口，这个接口里，我们收到调用端传过来的校验码，然后从session取出验证码，两个验证码都全部转小写，进行无大小写区分匹配校验，返回true/flase 。

1、pom文件中导入hutool-captcha依赖

        cn.hutool
        hutool-all
        5.7.12

2、创建后端控制类生成验证码

 创建控制类CommonController类，一方面通过流的方式将随机生成的验证码图片信息发送到前端浏览器；另一方面将验证码中的验证信息写入session中，以方便后续的验证。

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.captcha.ShearCaptcha;
import VerifyCodeVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Base64;
import java.util.UUID;
import java.util.concurrent.TimeUnit;
/**
 * @author author
 */
@RestController
@Api(tags = "验证码工具类")
public class CommonController {
    @Resource
    RedisTemplate redisTemplate;
    /**
     * 方法一 ShearCaptcha
     * 图片格式
     * session存储
     * 接口需添加白名单放行
     *
     * @param request HttpServletRequest
     */
    @GetMapping("https://blog.csdn.net/verify")
    @ApiOperation("生成验证码")
    public void verify(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("image/jpeg");
        response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        ShearCaptcha shearCaptcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 4);
        //图形验证码写出，可以写出到文件，也可以写出到流
        shearCaptcha.write(response.getOutputStream());
        //获取验证码中的文字内容
        request.getSession().setAttribute("verifyCode", shearCaptcha.getCode());
    }
    /**
     * 方法二 LineCaptcha
     * 图片格式
     * session存储
     * 接口需添加白名单放行
     *
     * @param request HttpServletRequest
     */
    @GetMapping("https://blog.csdn.net/verifyTwo")
    @ApiOperation("生成验证码")
    public void verifyTwo(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("image/jpeg");
        response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(150, 40, 5, 4);
        //图形验证码写出，可以写出到文件，也可以写出到流
        ImageIO.write(lineCaptcha.getImage(), "JPEG", response.getOutputStream());
        //获取验证码中的文字内容
        request.getSession().setAttribute("verifyCode", lineCaptcha.getCode());
    }
    /**
     * 方法三 ShearCaptcha
     * 图片的base64编码字符串
     * session存储
     * 接口需添加白名单放行
     *
     * @param request HttpServletRequest
     * @return String
     */
    @GetMapping("/getVerify")
    @ApiOperation("生成验证码")
    public String getVerify(HttpServletRequest request) {
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        ShearCaptcha shearCaptcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 4);
        //获取验证码中的文字内容
        request.getSession().setAttribute("verifyCode", shearCaptcha.getCode());
        String base64String = "";
        try {
            base64String = "data:image/png;base64," + shearCaptcha.getImageBase64();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return base64String;
    }
    /**
     * 方法四 LineCaptcha
     * 图片的base64编码字符串
     * session存储
     * 接口需添加白名单放行
     *
     * @param request HttpServletRequest
     * @return String
     */
    @GetMapping("/getVerifyTwo")
    @ApiOperation("生成验证码")
    public String getVerifyTwo(HttpServletRequest request) {
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(150, 40, 5, 4);
        //获取验证码中的文字内容
        request.getSession().setAttribute("verifyCode", lineCaptcha.getCode());
        String base64String = "";
        try {
            //返回 base64
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            ImageIO.write(lineCaptcha.getImage(), "JPEG", bos);
            byte[] bytes = bos.toByteArray();
            Base64.Encoder encoder = Base64.getEncoder();
            base64String = "data:image/png;base64," + encoder.encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return base64String;
    }
    /**
     * 方法五 ShearCaptcha
     * 图片的base64编码字符串
     * redis存储
     * 接口需添加白名单放行
     *
     * @return String
     */
    @GetMapping("/getVerifyThree")
    @ApiOperation("生成验证码")
    public VerifyCodeVO getVerifyThree() {
        String captchaKey = UUID.randomUUID().toString();
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        ShearCaptcha shearCaptcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 0);
        // 存入redis并设置过期时间为30分钟
        redisTemplate.opsForValue().set("captcha:" + captchaKey, shearCaptcha.getCode(), 30L, TimeUnit.MINUTES);
        //captcha:d6e561a6-7929-4469-8154-008710932f61
        String base64String = "";
        try {
            base64String = "data:image/png;base64," + shearCaptcha.getImageBase64();
        } catch (Exception e) {
            e.printStackTrace();
        }
        VerifyCodeVO verifyCodeVO = new VerifyCodeVO();
        verifyCodeVO.setCaptchaKey(captchaKey);
        verifyCodeVO.setCaptchaImg(base64String);
        return verifyCodeVO;
    }
    /**
     * 方法六 LineCaptcha
     * 图片的base64编码字符串
     * redis存储
     * 接口需添加白名单放行
     *
     * @return String
     */
    @GetMapping("/getVerifyFour")
    @ApiOperation("生成验证码")
    public VerifyCodeVO getVerifyFour() {
        String captchaKey = UUID.randomUUID().toString();
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(150, 40, 5, 4);
        // 存入redis并设置过期时间为30分钟
        redisTemplate.opsForValue().set("captcha:" + captchaKey, lineCaptcha.getCode(), 30L, TimeUnit.MINUTES);
        //captcha:d6e561a6-7929-4469-8154-008710932f61
        String base64String = "";
        try {
            //返回 base64
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            ImageIO.write(lineCaptcha.getImage(), "JPEG", bos);
            byte[] bytes = bos.toByteArray();
            Base64.Encoder encoder = Base64.getEncoder();
            base64String = "data:image/png;base64," + encoder.encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        }
        VerifyCodeVO verifyCodeVO = new VerifyCodeVO();
        verifyCodeVO.setCaptchaKey(captchaKey);
        verifyCodeVO.setCaptchaImg(base64String);
        return verifyCodeVO;
    }
}

3、实现验证码的验证与返回结果

对前端输入的数据并发送到服务器的验证信息进行校验，当输入信息与验证码信息一致则返回true，否则返回false。

     /**
     * session存储
     *
     * @param captchaCode 验证码
     * @param request     HttpServletRequest
     * @return boolean
     */
    @GetMapping("/checkCaptcha")
    @ApiOperation("验证码校验")
    public boolean getCheckCaptcha(@RequestParam("captchaCode") String captchaCode, HttpServletRequest request) {
        try {
            // toLowerCase() 不区分大小写进行验证码校验
            String sessionCode = String.valueOf(request.getSession().getAttribute("verifyCode")).toLowerCase();
            System.out.println("session里的验证码：" + sessionCode);
            String receivedCode = captchaCode.toLowerCase();
            System.out.println("用户的验证码：" + receivedCode);
            return !"".equals(sessionCode) && !"".equals(receivedCode) && sessionCode.equals(receivedCode);
        } catch (Exception e) {
            return false;
        }
    }
    /**
     * redis存储
     *
     * @param captchaCode 验证码
     * @param request     HttpServletRequest
     * @return boolean
     */
    @GetMapping("/checkCaptchaTwo")
    @ApiOperation("验证码校验")
    @ApiImplicitParam(value = "Captcha-Key", name = "Captcha-Key", paramType = "header", dataType = "String", required = true)
    public boolean getCheckCaptchaTwo(@RequestParam("captchaCode") String captchaCode, HttpServletRequest request) {
        try {
            // toLowerCase() 不区分大小写进行验证码校验
            String redisCode = String.valueOf(redisTemplate.opsForValue().get("captcha:" + request.getHeader("Captcha-Key"))).toLowerCase();
            System.out.println("redisCode里的验证码：" + redisCode);
            String receivedCode = captchaCode.toLowerCase();
            System.out.println("用户的验证码：" + receivedCode);
            return !"".equals(redisCode) && !"".equals(receivedCode) && redisCode.equals(receivedCode);
        } catch (Exception e) {
            return false;
        }
    }

 Redis存储，返回工具类：

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import java.io.Serializable;
@Data
public class VerifyCodeVO implements Serializable {
    @ApiModelProperty(value = "header头参数：Captcha-Key")
    private String captchaKey;
    @ApiModelProperty(value = "验证码图片")
    private String captchaImg;
}

启动应用，访问 http://localhost:8080https://blog.csdn.net/verify 即可得到验证码，如图： 

 前端调用展示：在img标签中src属性调用 https://blog.csdn.net/verify 接口，将传过来的图片验证码显示即可。若想换一张显示（刷新验证码）：在img标签中增加一个onclick属性点击事件即可。