Node.js中验证码实现与应用案例分析.pdfVIP

案例

学习过Session以后的实现就比较简单了,是服务器端生成的一个随机或

定义好的字符串,并在服务器上,客户端会获取到一个SessionId,客户

端输入后提交给服务器,服务器便可以通过这个SessionId获取到之前的验

证码与之比对

需要注意的是在每次验证完都要清空,对于失败的我们需要重新返回一

个新的,对于正确的输入我们需要将服务器端的session给清空,否则

的话客户端可以利用这个成功的sessionid无限请求数据,便失去了意义

在nodejs中实现并不容易,因此我们需要第的包(模块)

安装

1npminstall--savetrek-captcha

使用下面的代码就能很方便的创建

1constcaptcharequire(trek-captcha)

2//这里使用了一个新的语法async以及await

3

4app.get(/image/getImageCode,asyncfunction(req,res){

5//对象的解构赋值

6const{token,buffer}=awaitcaptcha();

7req.session.captcha=token;

8res.type(png);

9res.send(buffer);

10})

使用

下面我们需要将这个应用起来,我们这里找到一个页面的模版套入进去

前台实现

1document.querySelector(.lang-

btn).addEventListener(click,function(){

2letteldocument.querySelector(#tel);

3letpwddocument.querySelector(#passport);

4letcpwddocument.querySelector(#passport2);

5letvcodedocument.querySelector(#veri-code);

6letdata

`tel=${tel.value}pwd=${pwd.value}code=${vcode.value}`;

7jQuery.post(/register,data,function(res){

8if(res.state0){

9document.querySelector(#vcode).click();

10return;

11}else{

12alert(res.msg);

13}

14

15},JSON)

16})

17

18document.querySelector(#vcode).addEventListener(click,function(

){

19this.srcthis.src+?+Math.random()*10;

20});

21

22document.querySelector(#tel).onblurfunction(){

23if(!this.value||this.value.trim()){

24document.querySelector(.tel-errem).inner