node,express,captchapng实现图片验证码

前两天尝试着利用captchapng做了登录页验证码，分享记录一下，许多方面有误解希望大佬们帮我指出来！

安装captchapng

npm install captchapng

生成验证码

var express = require('express');
var captchapng = require('captchapng');

//验证码
exports.verify= function(req, res, next) {
    var code = parseInt(Math.random() * 9000 + 1000);//有且仅有4个数字
    var p = new captchapng(100, 30, code);//宽100 高30 四位数字
    p.color(0, 0, 0, 0);//底色
    p.color(80, 80, 80, 255);//字体颜色
    var img = p.getBase64();//转换成base64
    var imgbase64 = new Buffer(img, 'base64');// 存放在imgbase64
    res.writeHead(200, {
        'Content-Type': 'image/png'
    });
    res.end(imgbase64);
}

 

生成验证码后，我们需要实现验证码的获取

我写了一个接口，将我的验证码保存在session，便于之后的验证码相等判断

var express = require('express');
var router = express.Router();
var captchapng = require('captchapng');

/* GET users listing. */
router.get('/', function(req, res, next) {
    var code = parseInt(Math.random() * 9000 + 1000);
    req.session.captcha = code;//保存在session中，便于之后的验证码判断
    var p = new captchapng(100, 30, code);
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img,'base64');
    res.writeHead(200, {
        'Content-Type': 'image/png'
    });
    res.end(imgbase64);
});

module.exports = router;

在客户端进行验证码获取，并插入到页面中

<img :src="`data:image/png;base64,${codeImage}`" @click="getData"/>


//获取
getCode().then((res) => {
  this.codeImage = res.data
})

最后就是我们的验证码判断，在我们将用户填写的验证码信息用post发送

router.post('/login', function(req, res, next) {
  let code = req.body.code
  // 验证码是否填写判断
  if (!code){
    return res.json({code: 500, data: false, msg: '请填写验证码！'})
  }
  //验证码正确判断
  else if (code !== req.session.captcha.toString()){
    return res.json({code: 500, data: false, msg:'验证码错误！'}
  }else {
    return res.json({code: 200, data: false, msg:'验证码正确！'}
  }
})