NestJS에서 직접 CAPTCHA 생성 (이미지/SVG)

→ 자체 보안문자 (로그인, 회원가입에 많이 씀)

전체 흐름

1. NestJS에서 CAPTCHA 이미지(SVG/PNG) 생성
2. 생성한 정답을 세션 또는 Redis에 저장
3. 프론트에 CAPTCHA 이미지 전달
4. 사용자가 입력한 값과 서버 저장값 비교

1️⃣ 패키지 설치

npm install svg-captcha

2️⃣ CAPTCHA 생성 API (NestJS)

// captcha.controller.ts
import { Controller, Get, Session } from '@nestjs/common';
import * as svgCaptcha from 'svg-captcha';

@Controller('captcha')
export class CaptchaController {
  @Get()
  getCaptcha(@Session() session: Record<string, any>) {
    const captcha = svgCaptcha.create({
      size: 5,
      noise: 2,
      ignoreChars: '0oO1il',
    });

    session.captcha = captcha.text; // 정답 저장

    return {
      image: captcha.data, // SVG 문자열
    };
  }
}

⚠️ @Session()을 쓰려면 express-session 설정이 필요함

3️⃣ 프론트엔드에서 표시 (React 예시)

<img
  src={`data:image/svg+xml;utf8,${encodeURIComponent(captchaImage)}`}
  alt="captcha"
/>

4️⃣ 검증 API

@Post('verify')
verifyCaptcha(
  @Body('value') value: string,
  @Session() session: Record<string, any>,
) {
  return value === session.captcha;
}