express 验证码功能

功能

1实现验证码验证

2实现点击验证码进行切换

详解： 浏览器发起验证码请求 服务端 生成图片 响应到客户端 并存储在session中 

  用户 登录 时匹配录入和session 是否一致

 

首先在登录 路由  增加生成 验证码功能

先下载支持

1）npm install captchapng

2）在登录路由 增加代码 生成验证码 并存入session

不会用session可以看这篇文章

express 实现session

router.get("/captchapng",function(req,res){
  var captchapng = require("captchapng")
  var mynum = parseInt(Math.random()*9000+1000);
  req.session.captcha = mynum;
  var p = new captchapng(80,30,mynum); // width,height,numeric captcha
  p.color(0, 0, 0, 0);  // First color: background (red, green, blue, alpha)
  p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)
  var img = p.getBase64();
  var imgbase64 = new Buffer.from(img,'base64');
  res.writeHead(200, {
      'Content-Type': 'image/png'
  });
  res.end(imgbase64);
})

 3）在登陆界面 写JS 让img 发起请求 增加了点击事件 因为缓存问题 需要带上timer后缀

  
    验证码：
     
      
    
   

4）注意一点 如果用session 来判断登录有效时间 需要在判断里 对请求验证码 也要做处理

在appjs 里判断 session 需要把验证码请求也加入判断 不然请求过不来

app.use(function(req,res,next)
{
  if(req.session.is_login)
  {
    //往下执行
    next();
  }else if(req.url=='/'||req.url=='/login'||req.url.indexOf('/captchapng')>=0)
  {
    next();
  }else
  {
    res.write("")
  }
})

5） 在登陆界面判断录入的验证码是否正确 

直接贴的全码

var express = require('express');
var router = express.Router();
var db = require('../sql_db.js');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('sys_login', { title: 'Express' });
});
router.post('/login',function(req,res,next)
{
  var capt = req.body.textfield
  var username = req.body.username;
  var password = req.body.password;
 
  if(req.body.textfield==req.session.captcha  ){
  db.query('select * from loginuser where username=? and password=?',[username,password],function(err,results)
  {
      if(err)
      {
        console.log(err);
      }else if(results.length>0)
      {
        //自己定义is_login属性
        req.session.is_login=true;
       //界面转到index界面
       res.render('sys_index.ejs',{username:results[0]['userName']});
      }
  })
}else
{   var back = '/';
F5showMessage('验证码错误',res,back);
}

})
router.get("/captchapng",function(req,res){
  var captchapng = require("captchapng")
  var mynum = parseInt(Math.random()*9000+1000);
  req.session.captcha = mynum;
  var p = new captchapng(80,30,mynum); // width,height,numeric captcha
  p.color(0, 0, 0, 0);  // First color: background (red, green, blue, alpha)
  p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)
  var img = p.getBase64();
  var imgbase64 = new Buffer.from(img,'base64');
  res.writeHead(200, {
      'Content-Type': 'image/png'
  });
  res.end(imgbase64);
})

function F5showMessage(message,res,url){
  var result=``;
  res.send(result)
}
module.exports = router;

上传了一个资源

https://download.csdn.net/download/q465162770/11828311

干技术 啥时候能学到头~

这个功能做完 这个后台项目就结束了 感谢自己