下面是关于如何用Node.js实现登录图片验证码的详细攻略。包括以下步骤:
安装依赖
我们需要引入一个第三方库,来帮我们实现图片验证码。可以使用captcha实现。可以执行以下命令安装:
npm i svg-captcha -S
实现思路
我们需要在用户请求登录页面时,生成一个图片验证码,将生成的图片存储到session中,并把图片返回给页面。用户在输入账号密码的同时需要填写图片验证码。在用户提交登录请求时,需要验证用户填写的验证码是否正确。
具体实现步骤如下:
- 获取验证码字符串和验证码图片:
为了获取验证码生成的svg格式的图片,我们可以使用svg-captcha库提供的create方法,这个方法创建了一个验证码对象,其中包含它的字符串和svg图片。示例代码如下:
const captcha = require('svg-captcha');
const { text, data } = captcha.create();
// 验证码字符串
console.log(text);
// 验证码图片数据
console.log(data);
- 将验证码信息存于Session中:
将生成的图片验证码和验证码字符串存储到Session中,示例代码如下所示:
req.session.captcha = {
text,
expire: Date.now() + 300000 // 有效期为5分钟
};
- 生成验证码图片
将生成的svg图片发送给客户端,客户端在页面上展示,示例代码如下所示:
res.type('svg');
res.send(data);
- 验证用户输入的验证码是否正确:
在用户提交的登录请求中,需要验证用户输入的验证码是否和存储在Session中的相同。如果不同,应该返回相应的错误信息。示例代码如下所示:
if (req.session.captcha.text.toLowerCase() !== captcha.toLowerCase()) {
return res.status(401).json({
error: '验证码错误'
})
}
示例代码
下面是一个完整的Node.js实现登录验证码的示例代码,在这个例子中我们使用Express框架实现:
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const captcha = require('svg-captcha');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
secret: 'captcha',
cookie: {
maxAge: 5 * 60 * 1000
},
resave: false,
saveUninitialized: true
}));
// 生成验证码
app.get('/captcha', function(req, res) {
const { text, data } = captcha.create();
req.session.captcha = {
text,
expire: Date.now() + 300000 // 有效期为5分钟
};
res.type('svg');
res.send(data);
});
// 验证码校验
app.post('/login', function(req, res) {
const captcha = req.body.captcha;
if (!captcha || !req.session.captcha) {
return res.status(401).json({
error: '验证码错误'
});
}
if (req.session.captcha.text.toLowerCase() !== captcha.toLowerCase()) {
return res.status(401).json({
error: '验证码错误'
});
}
// 校验成功,添加用户登录逻辑
res.send('success');
});
app.listen(3000, function() {
console.log(`App listening on port ${3000}`);
});
示例说明
-
服务器启动之后,用户可以通过GET /captcha请求生成验证码图片。
-
验证码页面可以在
标签中使用生成的验证码图片,并且将用户输入的验证码字符串提交POST /login请求。
-
在向服务器提交POST /login请求时,要求用户输入验证码。此时,应使用提交的验证码字符串和存储在Session中的验证码字符串进行比较。如果它们不相等,则返回“验证码错误”的错误信息。
-
如果用户输入正确的验证码,则服务器将完成其他身份验证过程,并回复一个“success”的响应。
-
验证码的有效期为5分钟。这个周期可以在时间戳的“expire”的属性中计算。
-
在示例代码中,我们使用的是表单提交。如果你要使用其他方式实现(如Ajax请求),则需要改变表单提交和服务器收到请求的方式,以适应你的个人情况。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:node实现登录图片验证码的示例代码 - Python技术站