基于SpringBoot-Vue生成验证码

在Web应用中，验证码（CAPTCHA）是一种常用的安全机制，用于防止自动化脚本（如机器人）进行恶意活动，如暴力破解密码、批量注册账号等。本文将介绍如何在Spring Boot后端和Vue前端实现验证码的生成和验证。

Spring Boot后端实现

引入依赖

首先，需要在Spring Boot项目中引入相关的依赖，本文采用的是easy-captcha来生成验证码。

<dependency>
   <groupId>com.github.whvcse</groupId>
   <artifactId>easy-captcha</artifactId>
   <version>1.6.2</version>
</dependency>

Controller层实现生成代码

import com.computer.common.CaptureConfig;
import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.base.Captcha;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin
@RestController
public class CaptchaController {

    @RequestMapping("/captcha")
    public void captcha(@RequestParam String key, HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 指定验证码长度及字符个数
        SpecCaptcha captcha = new SpecCaptcha(135,33,5);
        captcha.setCharType(Captcha.TYPE_NUM_AND_UPPER);
        // 首先把验证码在后台保存一份，但不能保存在session中，可以存在redis，也可以存在后台的某个Map里面
        CaptureConfig.CAPTURE_MAP.put(key,captcha.text().toLowerCase());
        setHeader(response);
        request.getSession().setAttribute("captcha", captcha.text().toLowerCase());
        captcha.out(response.getOutputStream());

        // 算数类型
        /*ArithmeticCaptcha captcha = new ArithmeticCaptcha(135,33);
        captcha.setLen(4);  // 指定几位数运算，默认两位
        captcha.getArithmeticString();  // 获取运算公式
        captcha.text();  // 获取运算结果
        CaptureConfig.CAPTURE_MAP.put(key,captcha.text().toLowerCase());
        // 只有tomcat10以下版本才可以使用
        // CaptchaUtil.out(captcha, request, response);*/
    }
    public static void setHeader(HttpServletResponse response) {
        response.setContentType("image/gif");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0L);
    }
}

这里有个注意事项，如果你使用的是tomcat10以下版本可以直接使用CaptchaUtil.out(captcha, request, response);来生成验证码。

判断验证码是否正确

// 判断验证码是否正确
        if (!admin.getVerCode().toLowerCase().equals(CaptureConfig.CAPTURE_MAP.get(key))) {						                
            // 只有tomcat10以下版本才可以使用
            // CaptchaUtil.clear(request);
            request.getSession().removeAttribute("captcha");
            return Result.error("验证码错误");
        }

调用一个工具类来保存生成的验证码，这里使用的是Map集合保存。

import org.springframework.stereotype.Component;

import java.util.HashMap;
import java.util.Map;

@Component
public class CaptureConfig {

    public static Map<String, String> CAPTURE_MAP = new HashMap<>();
}

Vue前端实现

定义文本框与验证码显示图片

<el-form-item>
  <div style="display: flex; justify-content: center">
    <el-input v-model="ruleForm.verCode" prefix-icon="el-icon-user" style="width: 42%;margin-right: 60px;" placeholder="请输入验证码"></el-input>
    <img :src="captchaUrl" @click="clickImg()" width="140px" height="33px" />
   </div>
 </el-form-item>

调用前端接口生成验证码

data() {
      return {
        key: '',
        captchaUrl: ''
      };
    },
mounted() {
      this.key = Math.random(),
      this.captchaUrl = 'http://localhost:8080/api/captcha?key=' + this.key
    },
    methods: {
      clickImg(){
        this.key = Math.random(),
        this.captchaUrl = 'http://localhost:8080/api/captcha?key=' + this.key
      },
    }