EasyCaptcha ：前后端分离项目中的验证码实现

本文将介绍如何使用 EasyCaptcha 库来实现前后端分离项目中的验证码功能

1. 项目环境搭建

首先，需要在项目中引入 EasyCaptcha 和 Redis 依赖：

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>easycaptcha</artifactId>
    <version>1.6.2</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

2. EasyCaptcha 配置

在 application.properties 文件中配置 EasyCaptcha：

# 验证码类型，可选值：spec、gif、arithmetic
easycaptcha.type=spec

# 验证码宽度
easycaptcha.width=130

# 验证码高度
easycaptcha.height=48

# 验证码字符长度
easycaptcha.length=5

# 验证码字体大小
easycaptcha.fontSize=24

# 验证码字体颜色
easycaptcha.fontColor=#000000

# 验证码背景颜色
easycaptcha.backgroundColor=#ffffff

# 验证码干扰线数量
easycaptcha.noiseLineCount=5

# 验证码干扰点数量
easycaptcha.noisePointCount=10

# 验证码干扰颜色
easycaptcha.noiseColor=#cccccc

# 验证码图片格式
easycaptcha.imageFormat=png

# 验证码过期时间，单位：秒
easycaptcha.expireTime=300

# 验证码缓存前缀
easycaptcha.cachePrefix=easycaptcha_

# 验证码缓存类型，可选值：redis、ehcache、memcached
easycaptcha.cacheType=redis

# ... 其他参数 ...

一般配置这三个基础配置

easycaptcha.width=130
easycaptcha.height=48
easycaptcha.length=5

 

3. 后端代码实现

3.1 验证码生成与存储

@Controller
public class CaptchaController {

    @Autowired
    private RedisUtil redisUtil;

    @ResponseBody
    @RequestMapping("/captcha")
    public JsonResult captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String verCode = specCaptcha.text().toLowerCase();
        String key = UUID.randomUUID().toString();

        // 存入redis并设置过期时间为30分钟
        redisUtil.setEx(key, verCode, 30, TimeUnit.MINUTES);

        // 将key和base64返回给前端
        return JsonResult.ok().put("key", key).put("image", specCaptcha.toBase64());
    }

    // ... 其他代码 ...
}

• 使用 SpecCaptcha 类生成一个 130x48 像素的验证码，长度为 5。
• 将验证码文本转换为小写，并使用 UUID 生成一个唯一的 key。
• 使用 RedisUtil 将验证码文本存储到 Redis 中，并设置过期时间为 30 分钟。
• 将 key 和 验证码图片的 base64 编码返回给前端。

 3.2 验证码验证

@ResponseBody
@PostMapping("/login")
public JsonResult login(String username, String password, String verCode, String verKey) {
    // 获取redis中的验证码
    String redisCode = redisUtil.get(verKey);

    // 判断验证码
    if (verCode == null || !redisCode.equals(verCode.trim().toLowerCase())) {
        return JsonResult.error("验证码不正确");
    }

    // ... 登录逻辑 ...
}

• 从请求参数中获取用户输入的验证码和 key。
• 从 Redis 中获取对应 key 的验证码文本。
• 比较用户输入的验证码和 Redis 中的验证码，如果一致则进行登录逻辑。 

 

 4. 前端代码实现

<img id="verImg" width="130px" height="48px"/>

<script>
    var verKey; // 获取验证码

    $.get('/captcha', function(res) {
        verKey = res.key;
        $('#verImg').attr('src', res.image);
    }, 'json');

    // 登录
    $.post('/login', {
        verKey: verKey,
        verCode: '8u6h',
        username: 'admin',
        password: 'admin'
    }, function(res) {
        console.log(res);
    }, 'json');
</script>

• 使用 $.get() 方法获取验证码图片和 key。
• 将 key 存储在 verKey 变量中，并将图片显示在页面上。
• 使用 $.post() 方法提交登录请求，并将 verKey 和用户输入的验证码一起提交。

注意:

• 实际应用中，需要根据项目需求调整验证码的类型、长度、过期时间等参数。
• 为了提高安全性，建议使用 HTTPS 协议传输验证码图片和验证信息。
• 为了防止暴力破解，可以限制用户输入验证码的次数。

 README.md · ele-admin/EasyCaptcha - Gitee.com