nodeclub登陆验证码功能实现
自己为了练手实现了一下。 首先查阅了一些资料,看到验证码这一块的图形包还是很薄弱的。 主要就是node-canvas和node-ccap这两个模块,前者看着坑比较多,安装就要费很大的功夫,果断放弃了,自豪的采用了社区中的ccap模块。 关于ccap模块的使用详见社区中这两个帖子: node-ccap模块生成captcha验证码1 node-ccap模块生成captcha验证码2
整体感觉使用起来很方便。 ###1.首先添加一个验证码的输出路由 router.get(’/captcha/:id’, tools.captcha); 具体处理代码如下tools.js:
exports.captcha = function(req, res) {
var arr = ccap({
quality: 50 //图片质量
generate:function(){//感觉默认的6个字符太多了,生成四个,但是没起作用不知道为什么。
var items = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPRSTUVWXYZ23456789'.split('');
var vcode='';
for (var i = 0; i < 4; i++) {
var rnd = Math.random();
var item = Math.round(rnd * (items.length - 1));
vcode+=item;
}
return vcode;
}
}).get();
var text = arr[0].toLowerCase();//文字
var buf = arr[1];
req.session.verifycode = text;
res.set('Content-Type', 'image/jpeg');
res.send(buf);
};
主要作用是返回验证码图片的src数据。
2.登陆页面中添加验证码的html代码sigin.html:
<div class='control-group'>
<label class='control-label' for='name'>验证码</label>
<div class='controls'>
<input class='input-small' id='verifycode' name='verifycode' size='8' type='text'/>
<img src="captcha/:1" onclick="javascript:this.src='/captcha/'+Math.random()" alt="验证码" width="120" height="40">
</div>
</div>
###3.在登陆的请求路由回调中加入验证码的验证判断sign.js:
if (verifycode !== req.session.verifycode) {
res.status(422);
return res.render('sign/signin', { error: '验证码输入不正确' });
}
大概就是这样。 参考地址