Spring boot 集成 Kaptcha 实现前后端分离验证码功能

最新推荐文章于 2024-09-12 09:48:17 发布

二一点

最新推荐文章于 2024-09-12 09:48:17 发布

阅读量1.5w

点赞数 8

分类专栏： JAVA Spring boot 文章标签： kaptcha captcha vue 前后端分离 spring boot

本文链接：https://blog.csdn.net/a78270528/article/details/78603199

版权

简述：
在web开发中验证码是一个常见的功能。不论是防止机器人还是爬虫都有一定的作用，我们可以自己编写验证码的工具类，也可以使用比较方便的验证码工具。

本文使用Spring boot 集成 Kaptcha 实现前后端分离验证码功能，这里为什么强调前后端分离，拿登陆功能为例，在登陆我们要请求后台返回一张验证码图片，然后输入用户名密码加上验证码，再次提交给后台，如果不是前后端分离，可轻松的从session中获取用户信息；现在前后端分离了，session失效了，第二次请求认为是一个新的用户，这问题就产生了，我们不能确定当前传过的这个验证码是否是第一次给这个用户的，本文就是要解决这个问题，在前后端分离项目中实现验证码校验功能。

解决思路：
1、前端请求后端，后端返回验证码图片和TOKEN。
2、后端将TOKEN和验证码记录在数据库中。
3、前端请求登陆，传入TOKEN和验证码及相关登陆信息，让后端匹配验证码。
4、后端按TOKEN查出验证码，对刚传入的验证码进行匹配。
5、匹配成功，登陆成功；匹配失败，返回异常信息。

具体实现：
一、首先，搭建一个Spring boot 工程，在我博客中可以找到具体的搭建文章。
二、导入kaptcha的依赖

<dependency>  
    <groupId>com.github.penggle</groupId>  
    <artifactId>kaptcha</artifactId>  
    <version>2.3.2</version>  
</dependency>

三、配置kaptcha

/**
 * 生成验证码配置
 *
 * @author shanming.yang
 * @email a78270528@126.com
 * @date 2017-04-20 19:22
 */
@Configuration
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha producer() {
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "black");
        properties.put("kaptcha.textproducer.char.space", "10");
        properties.put("kaptcha.textproducer.char.length","4");
        properties.put("kaptcha.image.height","34");
        properties.put("kaptcha.textproducer.font.size","25");
        
        pro