SpringBoot、Vue使用kaptcha实现验证码登录

目录

1.导入kaptcha依赖坐标

2.创建Kpatcha配置类

3.编写Controller控制类，这里选择将图片转为Base64后传回前端

4.重启程序，用Postman访问/getCod接口看看返回的数据是否正常

5.在前端加入验证码框与获取验证码的方法

效果图：

后端校验

---

1.导入kaptcha依赖坐标

一定要将servlet-api排除！不然会报错！！！

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
    <exclusions>
        <exclusion>
            <artifactId>javax.servlet-api</artifactId>
            <groupId>javax.servlet</groupId>
        </exclusion>
    </exclusions>
</dependency>

2.创建Kpatcha配置类

@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getKaptchaBean() {
        // 实例一个DefaultKaptcha
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        // 创建配置对象
        Properties properties = new Properties();
        // 设置边框
        properties.setProperty("kaptcha.border", "yes");
        // 设置颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 设置字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        // 设置宽度
        properties.setProperty("kaptcha.image.width", "125");
        // 高度
        properties.setProperty("kaptcha.image.height", "45");
        // 设置session.key
        properties.setProperty("kaptcha.session.key", "code");
        // 设置文本长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 设置字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        // 将以上属性设置为实例一个DefaultKaptcha的属性
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        // 将defaultKaptcha返回
        return defaultKaptcha;
    }
}

3.编写Controller控制类，这里选择将图片转为Base64后传回前端

@RestController
@RequestMapping("/getCode")
public class CodeController {
    @Autowired
    private DefaultKaptcha defaultKaptcha;

    @GetMapping
    public BaseRes getCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 设置浏览器缓存机制
        response.setHeader("Cache-Control", "no-store, no-cache");
        // 设置返回响应类型
        response.setContentType("image/jpeg");
        // 生成验证码
        String code = defaultKaptcha.createText();
        // 获取当前请求的会话，将生成的验证码保存到当中
        HttpSession session = request.getSession();
        session.setAttribute("code", code);

        // 生成图片验证码
        BufferedImage image = defaultKaptcha.createImage(code);
        // 转为Base64
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        ImageIO.write(image, "png", stream);
        String imgString = "data:image/gif;base64," + Base64.encode(stream.toByteArray());
        stream.flush();
        stream.close();
        // 将数据存入并将其返回
        return new BaseRes(200, "", imgString);
    }
}

4.重启一下程序，用Postman访问/getCod接口看看返回的数据是否正常

嗯，完全正常，接下来前端调用接口获取即可

5.在前端加入验证码框与获取验证码的方法

<template>
<!-- 此处省略若干布局代码，仅留下放置验证码的img标签 -->
    <img :src="imgData" alt="验证码" @click="getCode">
</template>


<script>
// 以下是用到的数据及方法，使用axios访问getCode访问获取base64的图片字符串
export default {
  data () {
    return {
      imgData: '',
  },
  methods: {
    getCode () {
      this.$http.get('/getCode').then(res => {
        const rs = res.data
        if (rs.status === 200) {
          this.imgData = rs.data
        }
      })
    }
  },
  mounted () {
    this.getCode()
  }
}
</script>

效果图：

接下来是后端校验

在登录Controller中加入验证码验证：

@RestController
@RequestMapping("/login")
public class LoginController {

    @Autowired
    private IUserService userService;

    @PostMapping()
    public LoginRes login(@RequestBody LoginUser user, HttpServletRequest request) {
        String code = (String) request.getSession().getAttribute("code");
        if (code.equals(user.getCode()))// 验证码校验成功，执行以下逻辑  否则直接执行else中语句
        {
            Map<String, Object> condition = new HashMap<>();
            condition.put("username", user.getUsername());
            condition.put("password", user.getPassword());
            List<User> users = userService.listByMap(condition);
            if (users.size() == 1) {
                //登陆成功，将token返回
                return new LoginRes(200, "登录成功！", null, TokenUtil.getTokenWithUser(users.get(0)));
            }
            return new LoginRes(401, "密码或账号错误！");
        }
        else {
            return new LoginRes(401, "验证码错误！");
        }
    }
}