How to operate node to implement login image verification code

This time I will show you how to operate node to implement login image Verification code, what are the precautions for operating node to implement login image verification code, the following is a practical case, let’s take a look take a look.

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="/api/getCaptcha" alt="captcha" >

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.

<a href="#" rel="external nofollow" @click="editCaptcha">
  <img src="/api/getCaptcha" alt="" ref="imgYzm">
</a>

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:

How to use vue source code to parse the event mechanism

How to operate JS to obtain the city and geographical location of the user

The above is the detailed content of How to operate node to implement login image verification code. For more information, please follow other related articles on the PHP Chinese website!