node.js实现登录注册页面

下面是详细讲解“node.js实现登录注册页面”的完整攻略。

1. 环境搭建

首先需要安装Node.js运行环境和npm包管理器，可以到Node.js官网下载并安装。

安装完成后，进入命令行工具，使用npm安装Express框架和相关的模块：

npm install express express-session express-validator body-parser cookie-parser bcryptjs --save

2. 创建项目文件夹

在命令行中输入以下指令，创建一个名为node-authentication的项目文件夹：

mkdir node-authentication
cd node-authentication

3. 创建并配置主要文件

在项目文件夹下，创建一个名为app.js的文件。这个文件将是我们的node.js项目的入口文件。

在app.js中，我们需要引入相关模块，配置和初始化Express应用程序，创建并配置路由，以及设置服务器监听端口等。

以下是示例代码：

// 引入express框架和模块
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const validator = require('express-validator');
const bcrypt = require('bcryptjs');

// 初始化Express应用程序
const app = express();

// 启用bodyParser中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 启用cookieParser中间件
app.use(cookieParser());

// 启用session中间件
app.use(session({
  secret: 'secret',
  resave: false,
  saveUninitialized: true
}));

// 启用Express验证器中间件
app.use(validator());

// 设置路由
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// 设置服务器监听端口
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

4. 创建并配置登录和注册路由

现在我们需要在我们的应用程序中添加一些路由来处理用户注册和身份验证请求。

我们将创建两个路由：/register和/login。他们将处理用户注册和用户登录请求，并以不同的方式显示响应。当表单被提交时，路由将使用Express验证器中间件验证输入数据的正确性，通过bcrypt模块将密码加密，然后将其保存在数据库中。

以下是示例代码：

// 处理用户注册请求
app.post('/register', (req, res) => {
  // 表单验证
  req.checkBody('username', 'Username is required').notEmpty();
  req.checkBody('email', 'Email is required').notEmpty();
  req.checkBody('email', 'Email is not valid').isEmail();
  req.checkBody('password', 'Password is required').notEmpty();
  req.checkBody('password2', 'Passwords do not match').equals(req.body.password);

  // 检查验证错误
  const errors = req.validationErrors();
  if (errors) {
    res.render('register', { errors: errors });
  }
  else {
    // 生成密码哈希值
    bcrypt.genSalt(10, (err, salt) => {
      bcrypt.hash(req.body.password, salt, (err, hash) => {
        // 保存用户到数据库中
        const user = new User({
          username: req.body.username,
          email: req.body.email,
          password: hash
        });
        user.save(err => {
          if (err) {
            console.log(err);
          }
          else {
            req.flash('success', 'You are now registered and can login');
            res.redirect('/login');
          }
        });
      });
    });
  }
});

// 处理用户登录请求
app.post('/login', (req, res) => {
  // 表单验证
  req.checkBody('email', 'Email is required').notEmpty();
  req.checkBody('email', 'Email is not valid').isEmail();
  req.checkBody('password', 'Password is required').notEmpty();

  // 检查验证错误
  const errors = req.validationErrors();
  if (errors) {
    res.render('login', { errors: errors });
  }
  else {
    User.findOne({ email: req.body.email }, (err, user) => {
      if (err) {
        console.log(err);
      }
      else {
        // 比较密码
        bcrypt.compare(req.body.password, user.password, (err, isMatch) => {
          if (err) {
            console.log(err);
          }
          else if (isMatch) {
            // 记录用户session
            req.session.user = user;
            req.flash('success', 'You are now logged in');
            res.redirect('/');
          }
          else {
            req.flash('error', 'Invalid email or password');
            res.redirect('/login');
          }
        });
      }
    });
  }
});

5. 创建视图模板

最后，我们需要为我们的应用程序创建视图模板。我们将使用ejs模板引擎和Bootstrap框架。

我们将创建三个视图模板：index.ejs，login.ejs和register.ejs。

以下是示例代码：

<!-- index.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Authentication App</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container pt-3">
      <% if (success != '') { %>
        <div class="alert alert-success">
          <%= success %>
        </div>
      <% } %>
      <% if (error != '') { %>
        <div class="alert alert-danger">
          <%= error %>
        </div>
      <% } %>
      <h1>Hello <%= user.username %>!</h1>
      <a href="/logout" class="btn btn-primary">Logout</a>
    </div>
  </body>
</html>

<!-- login.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Authentication App</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container pt-3">
      <% if (errors && errors.length > 0) { %>
        <div class="alert alert-danger">
          <% for (let error of errors) { %>
            <p><%= error.msg %></p>
          <% } %>
        </div>
      <% } %>
      <form action="/login" method="post">
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" placeholder="Enter Email" class="form-control">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" name="password" placeholder="Enter Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
      </form>
      <p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
    </div>
  </body>
</html>

<!-- register.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Authentication App</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container pt-3">
      <% if (errors && errors.length > 0) { %>
        <div class="alert alert-danger">
          <% for (let error of errors) { %>
            <p><%= error.msg %></p>
          <% } %>
        </div>
      <% } %>
      <form action="/register" method="post">
        <div class="form-group">
          <label>Username</label>
          <input type="text" name="username" placeholder="Enter Username" class="form-control">
        </div>
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" placeholder="Enter Email" class="form-control">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" name="password" placeholder="Enter Password" class="form-control">
        </div>
        <div class="form-group">
          <label>Confirm Password</label>
          <input type="password" name="password2" placeholder="Confirm Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Register</button>
      </form>
      <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
    </div>
  </body>
</html>

示例说明

示例1：输入不正确时的处理

在注册或登录表单中，如果有任何输入错误，我们需要通知用户并提供适当的反馈。示例代码中的Express验证器中间件在处理这个问题时非常有用。当表单被提交时，中间件将验证输入数据的正确性。如果存在错误，则在给用户提供反馈前，中间件会捕获和保存错误。示例代码中，我们使用ejs模板引擎将错误消息显示给用户。

示例2：密码安全

在示例代码中，我们使用bcrypt模块将密码哈希化。哈希化的密码是不可逆的，这意味着即使数据库被盗，黑客也不能轻易地得到用户的密码。哈希化密码还可以防止皮包或网络拦截攻击。这使用户的密码更加安全。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js实现登录注册页面 - Python技术站

node.js实现登录注册页面

1. 环境搭建

2. 创建项目文件夹

3. 创建并配置主要文件

4. 创建并配置登录和注册路由

5. 创建视图模板

示例说明

示例1：输入不正确时的处理

示例2：密码安全

相关文章