nest中实现图片随机验证码

文章问题导向

nest如何实现图片随机验证码?

如果你都有了答案,可以忽略本文章,或去nest学习导图寻找更多答案


例如这样,静态,点击随机生成
nest中实现图片随机验证码_第1张图片
这里使用的是svg-captcha这个库,你也可以使用其他的库
第一步:安装svg-captcha

yarn add svg-captcha


第二步:封装,以便多次调用

src -> utils -> tools.service.ts

import {
      Injectable } from '@nestjs/common';
import * as svgCaptcha from 'svg-captcha';

@Injectable()
export class ToolsService {
     
  async captche(size = 4) {
     
    const captcha = svgCaptcha.create({
       //可配置返回的图片信息
      size, //生成几个验证码
      fontSize: 50, //文字大小
      width: 100,  //宽度
      height: 34,  //高度
      background: '#cc9966',  //背景颜色
    });
    return captcha;
  }
}

第三步:在使用的module中引入

import {
      Module } from '@nestjs/common';
import {
      UserController } from './user.controller';
import {
      UserService } from './user.service';
import {
      ToolsService } from '../../utils/tools.service';

@Module({
     
  controllers: [UserController],
  providers: [UserService, ToolsService],
})
export class UserModule {
      }

第四步:使用
需要使用到session,如果不会请学习相关内容

import {
      Controller, Get, Post,Body } from '@nestjs/common';
import {
      EmailService } from './email.service';

@Controller('user')
export class UserController{
     
  constructor(private readonly toolsService: ToolsService,) {
     }  //注入服务

  @Get('authcode')  //当请求该接口时,返回一张随机图片验证码
  async getCode(@Req() req, @Res() res) {
     
    const svgCaptcha = await this.toolsService.captche(); //创建验证码
    req.session.code = svgCaptcha.text; //使用session保存验证,用于登陆时验证
    console.log(req.session.code);
    res.type('image/svg+xml'); //指定返回的类型
    res.send(svgCaptcha.data); //给页面返回一张图片
  }

  @Post('/login')
  login(@Body() body, @Session() session) {
     
  	//验证验证码,由前端传递过来
  	const {
      code } = body;
  	if(code?.toUpperCase() === session.code?.toUpperCase()){
     
		console.log(‘验证码通过’)
	}
    return 'hello authcode';
  }
}

前端简单代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
     
            display: flex;
        }

        .input {
     
            width: 80px;
            height: 32px;
        }

        .verify_img {
     
            margin: 0px 5px;
        }
    </style>
</head>

<body>
    <h2>随机验证码</h2>
    <form action="/user/login" method="post" enctype="application/x-www-form-urlencoded">
        <input type="text" name='code' class="input" />
        <img class="verify_img" src="/user/code" title="看不清?点击刷新"
            onclick="javascript:this.src='/user/code?t='+Math.random()"> //点击再次生成新的验证码
        <button type="submit">提交</button>
    </form>
</body>

</html>

学习更多

nest学习导图

你可能感兴趣的:(nest,node.js)