node implements the image verification code function when logging in

This time I will bring you the function of node to realize the picture when logging in Verification code. What are the precautions for node to realize the function of picture verification code when logging in. The following is a practical case. Get up and take a look.

To implement the graphical verification code here, I use the svg-captcha module in node, which can support all characters and numbers. It is supported by all platforms and is very simple to use.

1. Install

cnpm i svg-captcha --save

2. Import

var svgCaptcha = require('svg-captcha');

3. Get the verification code

3-1 Install cookie-parser, which is used to save the obtained session to cookies to facilitate front-end access verification

cnpm i cookie-parser --save

3-2 Use cookie-parser

const cookieParase = require('cookie-parser');
app.use(cookieParase());

This way you can use cookies in the project

3-3 Get the verification code

// 获取验证码
 getCaptcha(req, res, next){
  var captcha = svgCaptcha.create({ 
   // 翻转颜色 
   inverse: false, 
   // 字体大小 
   fontSize: 36, 
   // 噪声线条数 
   noise: 2, 
   // 宽度 
   width: 80, 
   // 高度 
   height: 30, 
  }); 
  // 保存到session,忽略大小写 
  req.session = captcha.text.toLowerCase(); 
  console.log(req.session); //0xtg 生成的验证码
  //保存到cookie 方便前端调用验证
  res.cookie('captcha', req.session); 
  res.setHeader('Content-Type', 'image/svg+xml');
  res.write(String(captcha.data));
  res.end();
 },

This only implements the function of generating the verification code, so what about access?

4. Write background routing

// 获取验证码
router.get('/api/getCaptcha', function(req, res, next) {
 return api.getCaptcha(req, res, next);
})

When the front end calls this interface /api/getCaptcha, the verification code information is returned, which is in svg format

5. Front-end access

<img  src="/static/imghwm/default1.png" data-src="/api/getCaptcha" class="lazy" alt="node implements the image verification code function when logging in" >

But now we have needs again. When this verification code is clicked, the verification code It will be refreshed

6. Click the verification code to refresh

Change the result of the verification code just now, add an outer a label to it, and bind it to Click event, I used vue here, so it is @click, the same is true for other frameworks.

  <img  src="/static/imghwm/default1.png" data-src="/api/getCaptcha" class="lazy" alt="node implements the image verification code function when logging in" >

Click eventeditCaptcha

editCaptcha () {
  this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},

This realizes the problem of clicking the verification code to refresh

7. Front-end verification verification code

We just got the verification code in the background, but the front-end needs How to verify?

Remember that we installed cookie-parser in 3-2, and saved the generated session in a cookie in 3-3. Here our front-end can access this cookie Got the value of the verification code.

Why should it be stored in cookies? Because the session generated by the backend cannot be accessed by the frontend, if we wait to access it, there is no security at all, so we save a copy in a cookie for frontend access.

let captcha = document.cookie.split('=')[1]
  if(this.yzm != captcha){
   return this.$message.warning('验证码错误')
  }

I won’t go into details about the final front-end input of account and password verification code for login verification, etc. The specific idea is this.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue implements two-way data binding function (with code)

ES6 imitates Vue to implement two-way binding Defined function

The above is the detailed content of node implements the image verification code function when logging in. For more information, please follow other related articles on the PHP Chinese website!