express+svg-captcha验证码实现及验证
安装:
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前台使用 和 刷新验证码的小技巧
使用: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}) }) } }) })
至此整个过程完成