DoraCMS后台登录添加验证码功能——基于Node的验证码
发布于 19天前 作者 doramart 307 次浏览 来自 分享

近来在阿里云上看到很多针对后台的密码破解请求,基本上被阿里云盾拦截了,目前这种暴力破解量并不大,如果是大量,或者没有防护措施,会对服务器造成一定影响,于是考虑加上登录验证码功能,在一定程度上缓解这种情况。 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登陆框.jpg

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

6 回复

支持doracms

@stray 谢谢支持 ^_^~~

下下代码,学习一下,支持开源

还有,为什么代码不放到github上

@simdm 支持国产撒,后面会放,谢谢支持~~

回到顶部