รู้จักรูปแบบ Authentication ระหว่าง Frontend และ Backend

version: "3.7"

services:
  db:
    image: mysql:latest
    container_name: mysql_db
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: tutorial
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - my_network

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin
    environment:
      PMA_HOST: db
      PMA_PORT: 3306
      PMA_USER: root
      PMA_PASSWORD: root
    ports:
      - "8080:80"
    depends_on:
      - db
    networks:
      - my_network

networks:
  my_network:
    driver: bridge

volumes:
  mysql_data:
    driver: local

├── docker-compose.yml
├── index.js -- ไฟล์หลักที่เราจะทำกัน
├── package.json
└── src
    └── index.html

const cors = require("cors");
const express = require("express");
const mysql = require("mysql2/promise");
const jwt = require("jsonwebtoken");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const bcrypt = require("bcrypt");

const app = express();
app.use(express.json());
app.use(
  cors({
    credentials: true,
    origin: ["http://localhost:8888"],
  }),
);
app.use(cookieParser());

app.use(
  session({
    secret: "secret",
    resave: false,
    saveUninitialized: true,
  }),
);

const port = 8000;
const secret = "mysecret";

let conn = null;

// function init connection mysql
const initMySQL = async () => {
  conn = await mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "root",
    database: "tutorial",
  });
};

/* เราจะแก้ไข code ที่อยู่ตรงกลาง */

// Listen
app.listen(port, async () => {
  await initMySQL();
  console.log("Server started at port 8000");
});

app.post("/api/register", async (req, res) => {
  const { email, password } = req.body;

  const [rows] = await conn.query("SELECT * FROM users WHERE email = ?", email);
  if (rows.length) {
    return res.status(400).send({ message: "Email is already registered" });
  }

  // Hash the password
  const hash = await bcrypt.hash(password, 10);
  // 10 = salt (การสุ่มค่าเพื่อเพิ่มความซับซ้อนในการเข้ารหัส)
  // และมันจะถูกนำมาใช้ตอน compare

  // Store the user data
  const userData = { email, password: hash };

  try {
    const result = await conn.query("INSERT INTO users SET ?", userData);
  } catch (error) {
    console.error(error);
    res.status(400).json({
      message: "insert fail",
      error,
    });
  }

  res.status(201).send({ message: "User registered successfully" });
});

app.post("/api/login", async (req, res) => {
  const { email, password } = req.body;

  const [result] = await conn.query("SELECT * from users WHERE email = ?", email);
  const user = result[0];
  const match = await bcrypt.compare(password, user.password);
  if (!match) {
    return res.status(400).send({ message: "Invalid email or password" });
  }

  res.send({ message: "Login successful" });
});

app.post("/api/login", async (req, res) => {
  // code จากหัวข้อ 2 เรื่องเช็ค
  if (!match) {
    return res.status(400).send({ message: "Invalid email or password" });
  }

  const token = jwt.sign({ email, role: "admin" }, secret, { expiresIn: "1h" });

  res.send({ message: "Login successful", token });
});

app.post("/api/login", async (req, res) => {
  // code จากหัวข้อ 2 เรื่องเช็ค
  if (!match) {
    return res.status(400).send({ message: "Invalid email or password" });
  }

  const token = jwt.sign({ email, role: "admin" }, secret, { expiresIn: "1h" });
  res.cookie("token", token, {
    maxAge: 300000,
    secure: true,
    httpOnly: true,
    sameSite: "none",
  });

  res.send({ message: "Login successful" });
});

app.post("/api/login", async (req, res) => {
  // code จากหัวข้อ 2 เรื่องเช็ค
  if (!match) {
    return res.status(400).send({ message: "Invalid email or password" });
  }

  // ใส่ข้อมูล user เก็บคู่กับ session ไว้
  console.log("get session", req.sessionID);
  req.session.user = user;
  req.session.userId = user.id;
  res.send({ message: "Login successful" });
});

const authenticateToken = (req, res, next) => {
  // เดี๋ยวเรามา code ตรงนี้เพื่อเช็คกันต่อ
  next();
};

app.get("/api/users", authenticateToken, async (req, res) => {
  try {
    // Get the users
    const [results] = await conn.query("SELECT email FROM users");
    const users = results.map((row) => row.email);

    res.send(users);
  } catch (err) {
    console.error(err);
    res.status(500).send({ message: "Server error" });
  }
});

const authenticateToken = (req, res, next) => {
  const authHeader = req.headers["authorization"];
  const token = authHeader && authHeader.split(" ")[1];

  if (token == null) return res.sendStatus(401); // if there isn't any token

  try {
    const user = jwt.verify(token, secret);
    req.user = user;
    console.log("user", user);
    next();
  } catch (error) {
    return res.sendStatus(403);
  }
};

const authenticateToken = (req, res, next) => {
  const token = req.cookies.token; // เปลี่ยนมาเช็คผ่าน cookie ที่ใส่ไปแทน

  if (token == null) return res.sendStatus(401); // if there isn't any token

  try {
    const user = jwt.verify(token, secret);
    req.user = user;
    console.log("user", user);
    next();
  } catch (error) {
    return res.sendStatus(403);
  }
};

const authenticateToken = (req, res, next) => {
  try {
    if (!req.session.userId) {
      return res.sendStatus(401);
    }
    req.user = req.session.user;
    next();
  } catch (error) {
    return res.sendStatus(403);
  }
};