Xác thực trang web trong Node.js: Đăng ký người dùng

Vietnamese (Tiếng Việt) translation by Vy Cam Nguyen (you can also view the original English article)

Giới thiệu

Xác thực cũng quan trọng trong API, đây cũng là một tính năng quan trọng trong các ứng dụng web nhất định — những ứng dụng có trang và thông tin bí mật chỉ cho phép người dùng đã đăng ký và được xác thực truy cập.

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng web đơn giản trong khi học cách tạo ra đăng ký người dùng.

Thiết lập ứng dụng

Tạo một thư mục mới mà bạn sẽ làm việc. Với mục đích của hướng dẫn này, tôi gọi ứng dụng của tôi là site-auth. Khởi tạo npm trong thư mục mới bạn vừa tạo. Đây là cách khởi tạo npm.

1	npm init -y

Flag -y cho phép npm sử dụng các tùy chọn mặc định.

Chỉnh sửa dependency (package phụ thuộc) của file package.json của bạn để trông giống với file của tôi.

#package.json

{
  "name": "site-auth",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "izuchukwu1",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.1",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.3",
    "express": "^4.15.2",
    "express-handlebars": "^3.0.0",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.2",
    "joi": "^13.0.1",
    "mongoose": "^4.11.12",
    "morgan": "^1.8.1",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0"
  }
}

Khi hoàn thành, chạy câu lệnh để cài đặt dependency.

1	npm install

Tạo file mới trong thư mục làm việc của bạn có tên app.js.

Bắt đầu bằng cách yêu cầu dependency bạn đã cài đặt và các file cần thiết.

#app.js

const express = require('express');
const morgan = require('morgan')
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const expressHandlebars = require('express-handlebars');
const flash = require('connect-flash');
const session = require('express-session');
const mongoose = require('mongoose')
const passport = require('passport')

require('./config/passport')

Những dependency này đã được cài đặt khi chạy lệnh npm install. Để sử dụng chúng trong ứng dụng của bạn, bạn phải request (yêu cầu) và save (lưu) chúng lại trong các biến tương ứng .

Trong hướng dẫn này, bạn sẽ sử dụng MongoDB làm database của bạn. Bạn sẽ lưu trữ thông tin người dùng trong database. Để làm việc cùng MongoDB, bạn sẽ sử dụng Mongoose - một công cụ mô hình hóa MongoDB cho Node.js. Việc thiết lập Mongoose thật dễ dàng, giống như sau:

1	#app.js
2
3	mongoose.Promise = global.Promise
4	mongoose.connect('mongodb://localhost:27017/site-auth')

Ngay lúc này, chúng ta hãy thiết lập middle.

// 1
const app = express()
app.use(morgan('dev'))

// 2
app.set('views', path.join(__dirname, 'views'))
app.engine('handlebars', expressHandlebars({ defaultLayout: 'layout' }))
app.set('view engine', 'handlebars')

// 3
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))
app.use(session({
  cookie: { maxAge: 60000 },
  secret: 'codeworkrsecret',
  saveUninitialized: false,
  resave: false
}));

app.use(passport.initialize())
app.use(passport.session())

// 4
app.use(flash())
app.use((req, res, next) => {
  res.locals.success_mesages = req.flash('success')
  res.locals.error_messages = req.flash('error')
  next()
})

// 5
app.use('/', require('./routes/index'))
app.use('/users', require('./routes/users'))

// 6
// catch 404 and forward to error handler
app.use((req, res, next) => {
  res.render('notFound')
});

// 7
app.listen(5000, () => console.log('Server started listening on port 5000!'))

Express được khởi tạo và gán vào app.
Middleware dùng xử lý các view được thiết lập. Đối với các view, bạn sẽ sử dụng handlebars.
Bạn thiết lập middleware cho bodyparser, cookie, session và passport. Passport sẽ được sử dụng khi người dùng muốn đăng nhập.
Tại một số điểm, bạn sẽ hiển thị các thông điệp nhanh (flash). Vì vậy, bạn cần phải thiết lập middleware cho việc này, và cũng tạo ra các kiểu thông điệp flash mà bạn muốn.
Routes middleware sẽ xử lý mọi yêu cầu đến đường dẫn URL. Đường dẫn URL được chỉ định ở đây dùng cho index và đường dẫn người dùng.
Middleware dùng xử lý lỗi 404. Middleware này khởi động khi có một yêu cầu không tham chiếu đến bất kỳ middleware nào được tạo ra ở bên trên.
Máy chủ được thiết lập ở cổng 5000.

Thiết lập các View

Tạo một thư mục mới có tên là views. Bên trong thư mục views, tạo hai thư mục khác là layouts và partials. Bạn muốn đạt được một cấu trúc cây như thế này trong view của bạn, vậy hãy tạo các file cần thiết trong các thư mục tương ứng của chúng.

├── dashboard.handlebars
├── index.handlebars
├── layouts
│   └── layout.handlebars
├── login.handlebars
├── notFound.handlebars
├── partials
│   └── navbar.handlebars
└── register.handlebars

Khi hoàn thành, giờ là lúc viết code.

#dashboard.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>User DashBoard</h1>
</div>

Đây là trang dashboard (tổng quan) chỉ hiển thị với người dùng đã đăng ký. Trong với hướng dẫn này, nó sẽ là trang bí mật của bạn.

Bây giờ trang index cho ứng dụng sẽ trông thế này.

#index.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>Site Authentication!</h1>
  <p class="lead">Welcome aboard.</p>
</div>

Ứng dụng cần một bố cục sẽ để sử dụng và đây là bố cục bạn sẽ sử dụng.

#layout/layout.handlebars

<!DOCTYPE html>
<html>
  <head>
    <title>Site Authentication</title>
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
          crossorigin="anonymous">
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
          crossorigin="anonymous">
    <link rel="stylesheet" 
          href="/css/style.css">
  </head>
  <body>
    {{#if success_messages }}
      <div class="alert alert-success">{{success_messages}}</div>
    {{/if}}
    {{#if error_messages }}
      <div class="alert alert-danger">{{error_messages}}</div>
    {{/if}}
    <div class="container">
      {{> navbar}}
      {{{body}}}
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
            crossorigin="anonymous"></script>
  </body>
</html>

Bạn sẽ cần một trang login (đăng nhập) cho người dùng đã đăng ký.

#views/login.handlebars

<form class="form-signin" action="/users/login" method="POST">
  <h2 class="form-signin-heading">Please sign in</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <br/>
  
  <button class="btn btn-lg btn-default btn-block" type="submit">Sign in</button>
</form>

File notFound.handlebars sẽ được sử dụng làm trang lỗi của bạn.

#views/notFound.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>Error</h1>
</div>

Trang đăng ký của bạn được sẽ như thế này.

<form class="form-signin" action="/users/register" method="POST">
  <h2 class="form-signin-heading">Please sign up</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputUsername" class="sr-only">Username</label>
  <input type="text" id="inputUsername" name="username" class="form-control" placeholder="Username" required>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <label for="inputConfirmPassword" class="sr-only">Confirm Password</label>
  <input type="password" id="inputConfirmPassword" name="confirmationPassword" class="form-control" placeholder="Confirm Password" required>

  <br/>

  <button class="btn btn-lg btn-default btn-block" type="submit">Sign up</button>
</form>

Cuối cùng cho các view của bạn, đây là thanh điều hướng của bạn.

#partials/navbar.handlebars

<div class="masthead">
  <h3 class="text-muted">Site Authentication</h3>
  <nav>
    <ul class="nav nav-justified">
      <li class="active"><a href="/">Home</a></li>
      {{#if isAuthenticated}}
        <li><a href="/users/dashboard">Dashboard</a></li>
        <li><a href="/users/logout">Logout</a></li>
      {{else}}
        <li><a href="/users/register">Sign Up</a></li>
        <li><a href="/users/login">Sign In</a></li>
      {{/if}}
    </ul>
  </nav>
</div>

Đã xong phần đó, bạn có thể tiếp tục các phần khó hơn.

Xác nhận dữ liệu

Bạn sẽ cần một model User. Từ code của view ở trên, bạn có thể suy ra rằng các thuộc tính cần thiết cho model User là email, username và password. Tạo một thư mục models và một file trong đó với tên gọi là user.js.

#models/user.js

// 1
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const bcrypt = require('bcryptjs')

// 2
const userSchema = new Schema({
  email: String,
  username: String,
  password: String
}, {

  // 3
  timestamps: {
    createdAt: 'createdAt',
    updatedAt: 'updatedAt'
  }
})

// 4
const User = mongoose.model('user', userSchema)
module.exports = User

Import các dependency và lưu chúng trong các biến.
Schema mới được tạo ra. Đối với mỗi người dùng, bạn muốn lưu email, username và password vào database. Schema cho thấy cách model được xây dựng cho mỗi tài liệu. Ở đây bạn muốn email, username và password thuộc kiểu dự liệu String.
Đối với người dùng được lưu vào database, bạn cũng muốn tạo timestamp. Bạn sử dụng Mongoose để lấy createdAt và updatedAt, và sau đó được lưu vào database.
Mô hình được định nghĩa và gán cho một biến được gọi là User, sau đó được export một mô-đun để có thể được tiếp tục sử dụng trong các phần khác của ứng dụng.

Salting và Hashing mật khẩu

Bạn không muốn lưu trữ mật khẩu của người dùng dưới dạng văn bản thuần túy. Dưới đây là điều bạn muốn làm khi người dùng nhập mật khẩu thuần văn bản khi đăng ký. Mật khẩu văn bản thuần túy sẽ được hash bằng cách sử dụng một salt được tạo ra từ ứng dụng của bạn (sử dụng bcryptjs). Mật khẩu hash này sau đó được lưu trữ trong database.

Nghe thật hay, phải không? Hãy thực hiện điều đó trong file user.js.

#models/user.js

module.exports.hashPassword = async (password) => {
  try {
    const salt = await bcrypt.genSalt(10)
    return await bcrypt.hash(password, salt)
  } catch(error) {
    throw new Error('Hashing failed', error)
  }
}

Bạn vừa tạo một phương thức sẽ được gọi trong các sự kiện đăng ký người dùng. Phương thức này sẽ nhận mật khẩu văn bản thuần túy mà người dùng đã nhập. Như tôi đã đề cập trước đó, mật khẩu thuần văn bản sẽ được băm bằng cách sử dụng một muối được tạo ra. Mật khẩu băm sẽ được trả về như mật khẩu cho người dùng.

Index và Route cho người dùng

Tạo một thư mục mới được gọi là routes. Trong thư mục mới này, tạo hai file mới: index.js và users.js.

File index.js rất đơn giản. Nó sẽ tham chiếu tới index của ứng dụng của bạn. Hãy nhớ rằng bạn thiết lập middleware cho các route trong file app.js của mình khi bạn làm điều này.

1	app.use('/', require('./routes/index'))
2	app.use('/users', require('./routes/users'))

Vì vậy, các route cho index của bạn đơn giản là hiển thị trang index, sẽ trông như sau.

#routes/index.js

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
    res.render('index')
})

module.exports = router

Bây giờ đến route cho user (người dùng). Hiện tại, file route này sẽ làm 4 nhiệm vụ.

Yêu cầu các dependency. Bạn sẽ cần phải yêu cầu dependency bạn đã cài đặt bằng cách sử dụng NPM.
Xác thực input (dữ liệu nhập) của người dùng. Bạn muốn đảm bảo rằng người dùng không gửi biểu mẫu trống. Tất cả input là bắt buộc và tất cả phải là kiểu String. Email có xác nhận đặc biệt có tên gọi là .email(), đảm bảo rằng nội dung được nhập phù hợp với định dạng email, trong khi password được xác thực bằng cách sử dụng regular expression. Đối với pasword đã xác nhận, bạn muốn nó giống như mật khẩu đã được nhập. Joi sẽ xử lý các xác nhận này.
Thiết lập router của bạn. Yêu cầu GET hiển thị trang đăng ký, trong khi yêu cầu POST khởi động khi người dùng nhấn nút để submit của form.
Router được export dưới dạng mô-đun.

Code trông giống thế này.

#routes/users.js

const express = require('express');
const router = express.Router()
const Joi = require('joi')
const passport = require('passport')

const User = require('../models/user')


//validation schema

const userSchema = Joi.object().keys({
  email: Joi.string().email().required(),
  username: Joi.string().required(),
  password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required(),
  confirmationPassword: Joi.any().valid(Joi.ref('password')).required()
})

router.route('/register')
  .get((req, res) => {
    res.render('register')
  })
  .post(async (req, res, next) => {
    try {
      const result = Joi.validate(req.body, userSchema)
      if (result.error) {
        req.flash('error', 'Data entered is not valid. Please try again.')
        res.redirect('/users/register')
        return
      }

      const user = await User.findOne({ 'email': result.value.email })
      if (user) {
        req.flash('error', 'Email is already in use.')
        res.redirect('/users/register')
        return
      }

      const hash = await User.hashPassword(result.value.password)

      delete result.value.confirmationPassword
      result.value.password = hash

      const newUser = await new User(result.value)
      await newUser.save()

      req.flash('success', 'Registration successfully, go ahead and login.')
      res.redirect('/users/login')

    } catch(error) {
      next(error)
    }
  })

  module.exports = router

Hãy nhìn kỹ hơn điều gì đang xảy ra trong yêu cầu POST.

Các giá trị được nhập trong form đăng ký có thể truy cập qua req.body và các giá trị trông giống thế này.

value: 
   { email: 'chineduizuchkwu1@gmail.com',
     username: 'izu',
     password: 'chinedu',
     confirmationPassword: 'chinedu' },

Điều này được xác thực bằng cách sử dụng userSchema mà bạn đã tạo ở trên và các giá trị được người dùng nhập vào được gán cho một biến được gọi là result.

Nếu gặp lỗi do xác thực, một thông báo lỗi được hiển thị tới người dùng và xuất hiện sự chuyển hướng đến trang đăng ký.

Mặt khác, chúng tôi cố gắng tìm xem liệu người dùng với cùng email có đang tồn tại hay không, vì bạn không muốn có hai hoặc nhiều người dùng có cùng địa chỉ email. Nếu người dùng được tìm thấy, họ được thông báo rằng địa chỉ email đã được sử dụng.

Trong trường hợp chưa có người dùng đã đăng ký có địa chỉ email đó, tiếp theo là hash mật khẩu. Đây là lúc bạn gọi phương thức hashPassword được tạo trong file user.js của bạn. Mật khẩu vừa hash được gán cho một biến được gọi là hash.

Không cần phải lưu trữ các confirmationPassword trong database. Vì vậy, nó sẽ bị xóa. Mật khẩu có sẵn từ kết quả vẫn là mật khẩu thuần tuý. Vì bạn không muốn lưu trữ mật khẩu thuần tuý trong database của mình, nên điều quan trọng là gán lại giá trị mật khẩu cho hash được tạo ra. Điều này được thực hiện bằng một dòng code.

1	result.value.password = hash

Đối tượng người dùng mới được lưu vào database. Hiển thị thông báo nhanh cho biết đã đăng ký thành công và người dùng được chuyển hướng đến trang login.

Khởi động server bằng terminal bằng cách chạy:

1	node app.js

Mở trình duyệt của bạn với địa chỉ http://localhost:5000 và bạn sẽ thấy ứng dụng mới của mình.

Tổng kết

Bây giờ bạn đã biết làm sao để triển khai tính năng đăng ký trong ứng dụng web Node. Bạn đã biết được tầm quan trọng của việc xác thực dữ liệu đầu vào của người dùng và cách thực hiện điều đó bằng Joi. Bạn cũng đã sử dụng bcryptjs để salt và hash mật khẩu của bạn.

Tiếp theo, bạn sẽ thấy làm thế nào để triển khai tính năng đăng nhập cho người dùng đã đăng ký. Tôi tin rằng bạn rất thích!