express svg-captcha 生成验证码

这个就比较简单了，需要注意的地方，验证被机器识无法全面阻止的，感觉业务重要性，找到一个适合的平衡就可以了，这里我就是拿svg-captcha做个演示，注意的地方就是登陆失败或者成功。保证验证码的session在任何时候只能使用一次。

login.vue // 登录的代码

login.js //登录的接口

login.vue

<template>
  <div class="login">
    <div class="loginBox">
      <h2>自留登录</h2>
      <p>O(∩_∩)O哈！</p>
      <input class="name" v-model="userName" type="text" placeholder="请输入您的账号" maxlength="11">
      <p>密码</p>
      <input v-model="password" class="password" type="password" placeholder="请输入您的密码" maxlength="16" @keyup.enter="login">
      <p>验证码 <span v-html="codeimg" @click="code()"></span></p>
      <input class="name" v-model="codedata" type="text" placeholder="请输入验证码" maxlength="5">      
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      password: '',
      codeimg: '',
      codedata: ''
    }
  },
  mounted () {
    this.code()
  }, 
  methods: {
    login () {
      if (this.userName !== '' && this.password !== '' && this.code !== '') {
        this.$ajax.post('/api/user/login', {
          userName: this.userName,
          password: this.password,
          code: this.codedata
        }).then(res => {
          if (res.data.status === 1) {
            alert(res.data.msg)
            setTimeout(() => {
              this.$router.push('admin')
            }, 400)
          } else {
            alert(res.data.msg)
            this.code()
          }
        })
      } else {
        alert('缺一不可!')
      }
    },
    code () {
      this.$ajax.post('/api/user/code').then(res => {
        if (res.data.status === 1) {
          this.codeimg = res.data.result.img
        }
      })
    }
  }
}
</script>

<style lang="stylus" style="stylesheet/stylus">
.login
  width 100%
  height 100%
  background url('./loginBg.jpg') no-repeat left center/100% 100%
  position relative
  >.loginBox
    width 400px
    height 400px
    position absolute
    left 50%
    top 50%
    transform translate(-50%,-70%)
    background rgba(255,255,255, .3)
    box-shadow 0px 0px 30px 1px #fcfcfc
    >h2
      width 100%
      height 40px
      line-height 40px
      color #000
      text-align center
      font-size 26px
      margin-top 30px
    >p
      width 100%
      height 40px
      line-height 40px
      text-align center
      font-size 18px
    >input
      display block
      width 200px
      height 30px
      margin 0 auto
      outline none
      padding-left 10px
    >button
      display block
      width 100px
      height 30px
      border none
      border-radius 4px
      background #34bf49
      margin 40px auto
      font-size 12px
      color #fff
      cursor pointer
      outline none
</style>

login.js

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
const svgCaptcha = require('svg-captcha')
// 连接数据库
var conn = mysql.createConnection(models.mysql);
// 加密
var crypto = require('crypto');
function cryptPwd(password, salt) {
    // 密码“加盐”
    var saltPassword = password + ':' + salt;
    // 加盐密码的md5值
    var md5 = crypto.createHash('md5');
    var result = md5.update(saltPassword).digest('hex');
    return result
}
conn.connect();
// 增加用户接口
router.post('/login', (req, res) => {
    var sql = $sql.login.login;
    var params = req.body;
    console.log(req.session.captcha)
    console.log(params.code)
    if (req.session.captcha === params.code){
        conn.query(sql + mysql.escape(params.userName), function (err, result) {
            if (err) {
                console.log(err)
            } else if (result.length === 0) {
                delete req.session.captcha                
                res.json({
                    status: -1,
                    result: '',
                    msg: '登录失败!'
                })
            } else {
                if (result[0].password === cryptPwd(params.password, result[0].salt)) {
                    delete req.session.captcha
                    req.session.name = params.userName
                    res.json({
                        status: 1,
                        result: '',
                        msg: '登录成功!' + result[0].password
                    })
                    // req.session.user = params.userName
                } else {
                    res.json({
                        status: -1,
                        result: '',
                        msg: '登录失败-1!'
                    })
                }
            }
        })
    } else {
        delete req.session.captcha
        res.json({
            status: -1,
            result: '',
            msg: '验证码不正确啊!'
        })
    }
});
// 验证码
router.post('/code', (req, res, next) => {
    var codeConfig = {
        size: 5,// 验证码长度
        ignoreChars: '0o1i', // 验证码字符中排除 0o1i
        noise: 2, // 干扰线条的数量
        height: 44 
    }
    var captcha = svgCaptcha.create(codeConfig);
    req.session.captcha = captcha.text.toLowerCase(); //存session用于验证接口获取文字码
    var codeData = {
        img:captcha.data
    }
    res.json({
        status: 1,
        result: codeData,
        msg: '验证码'
    });
})
module.exports = router;

代码有点粗糙，还是可以用的。