node实现登录图片验证码的示例代码

下面是关于如何用Node.js实现登录图片验证码的详细攻略。包括以下步骤：

安装依赖

我们需要引入一个第三方库，来帮我们实现图片验证码。可以使用captcha实现。可以执行以下命令安装：

npm i svg-captcha -S 

实现思路

我们需要在用户请求登录页面时，生成一个图片验证码，将生成的图片存储到session中，并把图片返回给页面。用户在输入账号密码的同时需要填写图片验证码。在用户提交登录请求时，需要验证用户填写的验证码是否正确。

具体实现步骤如下：

1. 获取验证码字符串和验证码图片:

为了获取验证码生成的svg格式的图片，我们可以使用svg-captcha库提供的create方法，这个方法创建了一个验证码对象，其中包含它的字符串和svg图片。示例代码如下：

const captcha = require('svg-captcha');
const { text, data } = captcha.create();

// 验证码字符串
console.log(text);
// 验证码图片数据
console.log(data);

1. 将验证码信息存于Session中:

将生成的图片验证码和验证码字符串存储到Session中，示例代码如下所示：

req.session.captcha = {
  text,
  expire: Date.now() + 300000 // 有效期为5分钟
};

1. 生成验证码图片

将生成的svg图片发送给客户端，客户端在页面上展示，示例代码如下所示：

res.type('svg');
res.send(data);

1. 验证用户输入的验证码是否正确:

在用户提交的登录请求中，需要验证用户输入的验证码是否和存储在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}`);
});

示例说明

1. 服务器启动之后，用户可以通过GET /captcha请求生成验证码图片。

2. 验证码页面可以在标签中使用生成的验证码图片，并且将用户输入的验证码字符串提交POST /login请求。

3. 在向服务器提交POST /login请求时，要求用户输入验证码。此时，应使用提交的验证码字符串和存储在Session中的验证码字符串进行比较。如果它们不相等，则返回“验证码错误”的错误信息。

4. 如果用户输入正确的验证码，则服务器将完成其他身份验证过程，并回复一个“success”的响应。

5. 验证码的有效期为5分钟。这个周期可以在时间戳的“expire”的属性中计算。

6. 在示例代码中，我们使用的是表单提交。如果你要使用其他方式实现（如Ajax请求），则需要改变表单提交和服务器收到请求的方式，以适应你的个人情况。