คู่มือสร้างระบบ Login แบบง่ายๆ โดยไม่เข้ารหัสรหัสผ่าน พร้อมการออกแบบด้วย Bootstrap
เริ่มต้นด้วยการติดตั้ง express-session
สำหรับการจัดการ session ใน Express:
npm install express-session
เปิดไฟล์ app.js
แล้วเพิ่มการตั้งค่า session:
// app.js
const session = require('express-session');
// ตั้งค่า session
app.use(session({
secret: 'your_secret_key', // คีย์ลับสำหรับ session
resave: false,
saveUninitialized: true,
cookie: { secure: false } // ถ้าใช้ HTTPS ให้เปลี่ยนเป็น true
}));
เปิดไฟล์ index.js
แล้วเพิ่มเส้นทางสำหรับจัดการระบบ Login และ Logout:
// index.js
const express = require('express');
const router = express.Router();
const db = require('./db');
// Route สำหรับแสดงหน้า Login
router.get('/login', (req, res) => {
res.render('login');
});
// Route สำหรับจัดการ Login
router.post('/login', (req, res) => {
const { username, password } = req.body;
// ตรวจสอบ username และ password จากฐานข้อมูล
db.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, results) => {
if (err) throw err;
if (results.length > 0) {
// ถ้า login สำเร็จ ให้บันทึก session
req.session.loggedin = true;
req.session.username = username;
res.redirect('/');
} else {
// ถ้า login ไม่สำเร็จ ให้แสดงข้อความแจ้งเตือน
res.send('Incorrect Username or Password!');
}
});
});
// Route สำหรับหน้า Home ที่ต้อง Login ก่อนเข้าใช้งาน
router.get('/', (req, res) => {
if (req.session.loggedin) {
res.render('index', { username: req.session.username });
} else {
res.send('Please login to view this page!');
}
});
// Route สำหรับ Logout
router.get('/logout', (req, res) => {
// ลบ session
req.session.destroy((err) => {
if (err) throw err;
res.redirect('/login');
});
});
module.exports = router;
สร้างไฟล์ login.ejs
ในโฟลเดอร์ views
สำหรับหน้า Login:
Login
Login
แก้ไขไฟล์ index.ejs
เพื่อแสดงข้อมูลผู้ใช้งานที่เข้าสู่ระบบ:
Welcome, <%= username %>!
Logout
เพื่อทดสอบระบบ ให้เรียกใช้เซิร์ฟเวอร์ด้วยคำสั่ง:
npm start
จากนั้นเปิดเบราว์เซอร์แล้วไปที่ http://localhost:3000/login
เพื่อเข้าสู่ระบบด้วย username และ password ที่มีในฐานข้อมูล