How to operate node to implement login image verification code-JS Tutorial-php.cn

This time I will show you how to operate node to implement login imageVerification code, what are theprecautionsfor 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

Copy after login

2. Import

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

Copy after login

3. Get the verification code

3-1 Installcookie-parser, which is used to save the obtainedsessionto cookies to facilitate front-end access verification

cnpm i cookie-parser --save

3-2 Usecookie-parser

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

Copy after login

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(); },

Copy after login

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); })

Copy after login

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

5. Front-end access

Copy after login

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 usedvuehere, so it is@click, the same is true for other frameworks.

Copy after login

Click eventeditCaptcha

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

Copy after login

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 installedcookie-parserin 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('验证码错误') }

Copy after login

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!