Nest.js 实战 (七):如何生成 SVG 图形验证码

具体步骤

  1. 安装依赖
powershell 复制代码
pnpm add svg-captcha
  1. 在控制器中使用
ts 复制代码
import { Controller, Get, Res, Session } from '@nestjs/common';
import { ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger'; // swagger 接口文档
import { Response } from 'express';
import svgCaptcha from 'svg-captcha';

import { VerifyCodeResponseDto } from './dto/response-auth.dto';

@ApiTags('身份鉴权')
@Controller('auth')
export class AuthController {
  /**
   * @description: 获取图形验证码
   */
  @Get('captcha') //当请求该接口时,返回一张随机图片验证码
  @ApiOkResponse({ type: VerifyCodeResponseDto })
  @ApiOperation({ summary: '获取图形验证码' })
  async getCaptcha(@Session() session: Api.Common.SessionInfo, @Res() res: Response) {
    const captcha = svgCaptcha.createMathExpr({
      //可配置返回的图片信息
      size: 4, // 验证码长度
      ignoreChars: '0oO1ilI', // 验证码字符中排除 0oO1ilI
      noise: 2, // 干扰线条的数量
      width: 132,
      height: 40,
      fontSize: 50,
      color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
      background: '#fff',
    });
    session.captchaCode = captcha.text; //使用session保存验证,用于登陆时验证
    res.type('image/svg+xml'); //指定返回的类型
    return res.send(captcha.data); //给页面返回一张图片
  }
}

更多详细文档:svg-captcha

Session 验证

在客户端登录的时候,我们就能根据传过来的验证码与 Session 中的信息判断是否正确:

ts 复制代码
/**
  * @description: 用户登录
  */
 async login(params: LoginParamsDto, session: Api.Common.SessionInfo) {
    // 获取验证码
   const { captchaCode } = params;
   // 判断验证码
   if (captchaCode.toUpperCase() !== session.captchaCode.toUpperCase()) {
     return responseMessage(null, '验证码错误', -1);
   }

   // 验证成功,返回 token
   return responseMessage(tokens);
 }

效果演示

相关推荐
德育处主任25 天前
前端啊,拿Lottie炫个动画吧
前端·svg·canvas
eggcode1 个月前
C#生成SVG文件(文本、线段、圆、椭圆、多边形的示例)
c#·svg
白雾茫茫丶1 个月前
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
vue3·1panel·nest.js
白雾茫茫丶1 个月前
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
postgresql·vue3·vite·pinia·nest.js·prisma
巽星石2 个月前
在VSCode中使用Excalidraw
vscode·svg·excalidraw
桃子叔叔2 个月前
从0到1深入浅出构建Nest.Js项目
javascript·nest.js·工程化
起来改bug2 个月前
svg画进度条
css·进度条·svg
白雾茫茫丶2 个月前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
nestjs·nest.js·发布订阅·event emitter
白雾茫茫丶3 个月前
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
webpack·nest.js·hmr