node实现登陆图片验证码

今天捣鼓本身的后台项目的时候有一个登陆验证码的功能须要实现，开个坑记录下。

具体源码: 个人博客

完整功能界面:

实现

实现这里的图形验证码我是用的node里svg-captcha模块,能够所有支持字符和数字，全平台支持，用起来很简单。

1.安装

cnpm i svg-captcha --save
复制代码

2.在使用的地方导入

var svgCaptcha = require('svg-captcha');
复制代码

3.获取验证码

• 3-1 安装cookie-parser ,做用是将获取到的session保存到cookie，方便前端访问验证

  cnpm i cookie-parser --save

• 3-2 使用 cookie-parser

  const cookieParase = require('cookie-parser');
  
  app.use(cookieParase());
  复制代码

  这样就能够在项目里使用cookie了

• 3-3 获取验证码

  // 获取验证码
    getCaptcha(req, res, next){
      var captcha = svgCaptcha.create({  
        // 翻转颜色 
        inverse: false,  
        // 字体大小 
        fontSize: 36,  
        // 噪声线条数 
        noise: 2,  
        // 宽度 
        width: 80,  
        // 高度 
        height: 30,  
      });  
      // 保存到session,忽略大小写 
      req.session = captcha.text.toLowerCase(); 
      console.log(req.session); //0xtg 生成的验证码
      //保存到cookie 方便前端调用验证
      res.cookie('captcha', req.session); 
      res.setHeader('Content-Type', 'image/svg+xml');
      res.write(String(captcha.data));
      res.end();
    },
  复制代码

作到这只是实现了生成验证码的功能，那么要访问呢？

4.编写后台路由

// 获取验证码
router.get('/api/getCaptcha', function(req, res, next) {
  return api.getCaptcha(req, res, next);
})
复制代码

当前端调用/api/getCaptcha这个接口的时候,返回验证码信息,是svg格式

5.前端访问

<img src="/api/getCaptcha" alt="captcha" >
复制代码

可是如今咱们又有需求了,当点击这个验证码的时候，验证码会刷新

6.实现点击验证码刷新

更改一下刚刚验证码的结果，给他加一个外层a标签，并给他绑定一个点击事件,我这里用了vue，因此是 @click,其余框架同理.

<a href="#" @click="editCaptcha">
    <img src="/api/getCaptcha" alt="" ref="imgYzm"> </a>
复制代码

点击事件editCaptcha

editCaptcha () {
    this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},
复制代码

这样就实现了点击验证码刷新的问题

7.前端验证验证码

刚刚咱们在后台获得了验证码，可是前端要怎么验证呢？

记得在3-2的时候咱们安装了cookie-parser，而且在3-3里将生成的session保存在cookie里，这里咱们前端就能够经过访问这个cookie拿到验证码的值了。

为何要保存在cookie里？ 由于后端生成的session咱们前端是访问不到的，若是等访问到的话，那还谈什么安全性可言，因此保存一份在cookie里供前端访问。

let captcha = document.cookie.split('=')[1]
    if(this.yzm != captcha){
      return this.$message.warning('验证码错误')
    }
复制代码

最后的前端输入帐号密码验证码作登陆验证等等我就很少概述了。具体思想就是这样。