近来在阿里云上看到很多针对后台的密码破解请求，基本上被阿里云盾拦截了，目前这种暴力破解量并不大，如果是大量，或者没有防护措施，会对服务器造成一定影响，于是考虑加上登录验证码功能，在一定程度上缓解这种情况。 DoraCMS 是基于Node的应用,如何添加图片验证码呢，下面简要描述步骤：

1、登录页面添加验证码输入框：

<div class="form-group">
       <div class="col-md-6" style="margin-left: 0;padding-left: 0;">
                    <input type="text" class="form-control" name="vnum" ng-model="logFormData.vnum" placeholder="请输入验证码" required>
       </div>
       <span> <img src="/admin/vnum?<%=Date.now()%>" /></span>
</div>

这里在验证码图片后加入时间参数，保证每次页面刷新后，验证码跟着改变。

2、方法实现：

这里用到了一个中间件（randomWord），获取随机字符，randomWord.js

module.exports = RandomWord;

function RandomWord(chars){
    if(!(this instanceof RandomWord)){
        return new RandomWord(chars);
    }
    this._chars = "";
    if(chars){
        this.add(chars);
    }
}

RandomWord.prototype = {
    add:function(chars){
        this._chars += chars;
        return this;
    },
    random:function(size){
        var len = this._chars.length;
        if(len === 0){
            throw new Error('no chars,please use add(chars)');
        }
        var word = "";
        for(var i=0;i<size;i++){
            var cpo = parseInt(Math.random()*len);
            word += this._chars.charAt(cpo);
        }
        return word;
    }
}

除此之外，我们需要将获取的随机字符转换为png，这里用到了一个插件 png-word ，地址：https://github.com/liangzeng/png-word

安装方法：

npm install png-word

实现：

var PW = require('png-word');
var RW = require('../util/randomWord');
var rw = RW('abcdefghijklmnopqrstuvwxyz1234567890');
var pngword = new PW(PW.GRAY);

//管理员登录验证码
router.get('/vnum',function(req, res){

    var word = rw.random(4);
    req.session.vnum = word;
    pngword.createReadStream(word).pipe(res);
});

当然，在做登录校验时，也需要校验验证码：

var vnum = req.body.vnum;
if(vnum != req.session.vnum){
    res.end('验证码有误！');
}

查看效果：

相关链接： DoraCMS内容管理系统