express+svg-captcha验证码实现及验证

作者: adm 分类: node 发布时间: 2023-03-17

安装:

npm install --save svg-captcha

svg-captcha依赖session存储验证码信息

express-session是express中比较常用的处理session的中间件,使用npm安装

npm install express-session --save

session的认证机制必须依赖cookie,所以还应该同时安装一个cookie-parser:

npm install cookie-parser --save

之后定义cookie解析器,注意,该定义必须写在路由分配之前:

var session = require('express-session');
var cookieParser = require('cookie-parser');

app.use(cookieParser());
app.use(session({
    secret: 'secret', // 对session id 相关的cookie 进行签名
    resave: true,  //是指每次请求都重新设置session cookie,假设你的cookie是6000毫秒过期,每次请求都会再设置6000毫秒。
    saveUninitialized: false, // 是否保存未初始化的会话
    cookie: {
        maxAge: 1000 * 60 * 3, // 设置 session 的有效时间,单位毫秒
    },
}));

使用svg-captcha生成验证码并返回给前台

const express = require('express');
const svgCaptcha = require('svg-captcha');
const router = express.Router();
router.get('/',(req, res)=>{
  const cap = svgCaptcha.create({
          // 翻转颜色
          inverse: false,
          // 字体大小
          fontSize: 36,
          // 噪声线条数
          noise: 3,
          // 宽度
          width: 80,
          // 高度
          height: 30,
      });
  req.session.captcha = cap.text; // session 存储验证码数值
  console.log(req.session)
  res.type('svg'); // 响应的类型
  res.send(cap.data)
})
 
module.exports = router;

后端搭建完毕,测试输出,输出成功,收到svg格式验证码,配置vue前台。

vue前台使用 和 刷新验证码的小技巧
captcha

使用:img标签中的src和Date.now()刷新验证码

axios传给后台
import axios from ‘axios’
Vue.prototype.$http = axios

nodejs后台验证 验证码操作(数据库为mongodb)

/*
用户名,密码,验证码 登陆(登录和注册一体化)
  1.数据库中有此用户,比对密码
  2.数据库中没此用户,直接注册
 */
router.post('/login_pwd', function (req, res) {
  const name = req.body.name   //前台提交的用户名
  const pwd = md5(req.body.pwd) //密码
  const captcha = req.body.captcha.toLowerCase()  //验证码,转小写
  console.log('/login_pwd', name, pwd, captcha, req.session)

  // 可以对用户名/密码格式进行检查, 如果非法, 返回提示信息
  if(captcha!==req.session.captcha) {
    return res.send({code: 1, msg: '验证码不正确'})
  }
  // 验证通过,删除保存的验证码
  delete req.session.captcha

  UserModel.findOne({name}, function (err, user) {
    if (user) {
      console.log('findUser', user)
      if (user.pwd !== pwd) {
        res.send({code: 1, msg: '用户名或密码不正确!'})
      } else {
        req.session.userid = user._id
        res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}})
      }
    } else {
      const userModel = new UserModel({name, pwd})
      userModel.save(function (err, user) {
        // 向浏览器端返回cookie(key=value)
        // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7})
        req.session.userid = user._id
        const data = {_id: user._id, name: user.name}
        // 3.2. 返回数据(新的user)
        res.send({code: 0, data})
      })
    }
  })
})

至此整个过程完成

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!