svg-captcha 主要用于生成验证码，并将其与缓存系统（Redis）结合使用。以下是 svg-captcha 的使用流程和关键点：

安装 svg-captcha npm install svg-captcha

1. 生成验证码

新建 generateCaptcha.ts 文件，使用 svg-captcha 的 create 方法生成验证码：

import { create } from 'svg-captcha';
import { v4 as uuidv4 } from 'uuid';

export default () => {
  const captcha = create({
    size: 4, // 验证码长度
    width: 100, // 宽度
    height: 40, // 高度
    color: true, // 启用颜色
    noise: 2, // 干扰线数量
    ignoreChars: '0o1i', // 排除字符
    background: '#999', // 背景颜色
  });

  return {
    id: uuidv4(), // 生成唯一 ID
    captcha, // 返回验证码对象
  };
};

• captcha** 对象**:

  • data: SVG 格式的验证码图像数据。
  • text: 验证码的文本内容（用于验证用户输入）。
• id: 使用 uuidv4 生成的唯一标识符，用于将验证码与缓存关联。

2. 缓存验证码

在 user.service.ts 文件中，生成的验证码被缓存到 Redis 中：

// 获取验证码
getCaptcha() {
  const { id, captcha } = generateCaptcha(); // 生成验证码
  this.cacheService.setRedis(id, captcha.text, 60 * 5); // 缓存验证码，过期时间为 5 分钟
  return { id, img: captcha.data }; // 返回验证码 ID 和 SVG 图像数据
}

• 缓存逻辑:

  • 使用 cacheService.setRedis 将验证码的文本内容（captcha.text）存储到 Redis 中。
  • 缓存的键是生成的唯一 id，值为验证码文本。
  • 设置过期时间为 5 分钟（60 * 5 秒）。

3. 验证用户输入的验证码

在注册逻辑中，用户输入的验证码会与缓存中的验证码进行比较：

// 注册
async register(user: RegisterDto) {
  const { username, password, captcha, uuid } = user;

  // 从缓存中获取验证码
  const cacheCaptcha = await this.cacheService.getRedis(uuid);
  if (cacheCaptcha !== captcha) {
    throw new HttpException('验证码错误', 200);
  } else {
    this.cacheService.delRedis(uuid); // 验证成功后删除缓存
  }

  // 其他注册逻辑...
}

• 验证逻辑:

  • 从 Redis 中获取缓存的验证码（cacheCaptcha）。
  • 比较用户输入的验证码（captcha）与缓存中的验证码。
  • 如果验证码匹配，删除缓存中的验证码；否则，抛出错误。

4. 前端显示验证码

生成的验证码 SVG 数据可以直接在前端显示：

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiPjwvc3ZnPg==" alt="Captcha">

• img** 字段**: 返回的 captcha.data 是 SVG 格式的 Base64 编码数据，可以直接作为 <img> 标签的 src 属性值。

总结

• 生成验证码: 使用 svg-captcha 生成验证码，返回 SVG 图像和文本内容。
• 缓存验证码: 将验证码文本存储到 Redis 中，并设置过期时间。
• 验证用户输入: 用户输入验证码后，与缓存中的验证码进行比较。
• 前端显示: 将 SVG 图像数据发送到前端显示。

通过这种方式，svg-captcha 提供了一个简单且安全的验证码生成和验证机制。