nodeclub登陆验证码功能实现
发布于 1 年前 作者 elevensky 916 次浏览 最后一次编辑是 4 个月前 来自 分享

自己为了练手实现了一下。 首先查阅了一些资料,看到验证码这一块的图形包还是很薄弱的。 主要就是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'/>
	&nbsp; <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: '验证码输入不正确' });
  	}

大概就是这样。 参考地址

4 回复

我的博客也是这样实现验证码的, jackblog

@winky 大哥的博客,回头好好学学,对react,node生态圈很喜欢。

@elevensky 一起学习,共同进步.

回到顶部