要在 NestJS 中实现图形验证码的校验过程,你可以按照以下步骤进行操作:
- 安装依赖:首先,使用 npm 或 yarn 安装
svg-captcha
和cookie-parser
,其中svg-captcha
是用于生成 SVG 格式的验证码图片的库,cookie-parser
是用于处理和解析 Cookie 的库。
生成和发送验证码:在验证码控制器中,编写生成和发送验证码图片的接口。同时将验证码文本存储在会话或数据库中,以便后续验证。
import { Controller, Get, Res, Req } from '@nestjs/common'; import * as svgCaptcha from 'svg-captcha'; @Controller('captcha') export class CaptchaController { @Get() generateCaptcha(@Res() res, @Req() req) { const captcha = svgCaptcha.create(); // 将验证码文本存储在会话或数据库中,以便后续验证 req.session.captcha = captcha.text; res.set('Content-Type', 'image/svg+xml'); res.send(captcha.data); } }
校验验证码:在验证码控制器中,编写用于校验验证码的接口。
import { Controller, Post, Body, Req } from '@nestjs/common'; @Controller('captcha') export class CaptchaController { // ... @Post('verify') verifyCaptcha(@Body() body, @Req() req) { const { captchaText } = body; const storedCaptcha = req.session.captcha; if (captchaText && storedCaptcha && captchaText.toLowerCase() === storedCaptcha.toLowerCase()) { // 验证码校验成功 return { success: true }; } else { // 验证码校验失败 return { success: false }; } } }
配置模块和路由:在 app.module.ts
文件中导入 CookieParserMiddleware
和 SessionMiddleware
,配置 CaptchaModule
,并添加中间件到应用程序的路由配置中。
import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common'; import { CaptchaController } from './captcha/captcha.controller'; import * as cookieParser from 'cookie-parser'; import * as session from 'express-session'; @Module({ controllers: [CaptchaController], }) export class CaptchaModule implements NestModule { configure(consumer: MiddlewareConsumer) { consumer.apply(cookieParser(), session({ secret: 'your_secret_key' })).forRoutes(CaptchaController); } }
添加防护措施:为了防止恶意攻击者进行暴力破解或滥用验证码接口,你可以添加限制请求次数的措施,例如使用 rate-limiter-flexible 或其他限流库进行限制。
这样,你就在 NestJS 中实现了基于会话的图形验证码校验过程。前端可以通过访问 /captcha 路由获取生成的验证码图片,并将验证码文本存储在会话中。然后,在验证用户提交的验证码时,发送 POST 请求到 /captcha/verify 路由,并将用户输入的验证码作为请求体中的数据。
请注意,上述代码仅提供了一个基本的实现示例,你可以根据自己的需求进行修改和扩展。