Nest-js 實戰：如何生成 SVG 圖形驗證碼

具體步驟

• 安裝依賴

  pnpm add svg-captcha

• 在控制器中使用

  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 中的信息判斷是否正確：

/**
  * @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);
 }

效果演示

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/L113OlPXdd_5uts6yls5og