reveal.js

# JWT (JSON Web Token): การสร้าง, ตรวจสอบ, Refresh Token

Lesson 2 - Authentication และ Security

**JWT (JSON Web Token)** คือ token รูปแบบ compact ที่มี 3 ส่วนคือ **Header.Payload.Signature** ใช้ส่ง claims ระหว่างระบบและตรวจสอบความถูกต้องด้วยลายเซ็น

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค API Key / Simple Token"]
 A["API Key ระบุตัว client"]
 end
 subgraph Era2["ยุค JWT / Signed Claims"]
 B["Header.Payload.Signature ข้อมูลพร้อมลายเซ็น"]
 C["Access Token อายุสั้น"]
 end
 subgraph Era3["ยุค Token Rotation / Refresh Flow"]
 D["Refresh Token อายุยาว"]
 E["httpOnly Cookie ลดการถูกอ่านด้วย JS"]
 end
 A --> B --> C --> D --> E
</pre>

---

## โครงสร้าง JWT

- **Header** ระบุ Algorithm เช่น `HS256` และ Type เช่น `JWT`
- **Payload** เก็บ Claims เช่น `sub`, `iat`, `exp`
- **Signature** ใช้ตรวจสอบว่า token ไม่ถูกแก้ไข
- **`jsonwebtoken`** ใช้ `jwt.sign()` และ `jwt.verify()`
- **Access Token** อายุสั้น เช่น 15 นาทีถึง 1 ชั่วโมง
- **Refresh Token** อายุยาว ควรเก็บใน `httpOnly Cookie`

---

## ตาราง Claims สำคัญ

| Claim | ความหมาย | ตัวอย่าง |
|---|---|---|
| `sub` | subject หรือ user id | `42` |
| `iat` | issued at | เวลาที่ออก token |
| `exp` | expiry | เวลาหมดอายุ |
| `iss` | issuer | ระบบที่ออก token |
| `aud` | audience | ระบบผู้รับ token |

---

## Mermaid Diagram: Refresh Token Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
sequenceDiagram
 participant C as Client / ไคลเอนต์
 participant S as Server / เซิร์ฟเวอร์
 C->>S: Login with username/password
 S-->>C: Access Token + Refresh Cookie
 C->>S: API request with Access Token
 S-->>C: Protected data
 C->>S: Refresh request with httpOnly Cookie
 S-->>C: New Access Token
</pre>

---

## Code Example

```js
// jwt-demo.mjs
// สร้างและตรวจสอบ JWT ด้วย jsonwebtoken
import express from 'express';
import jwt from 'jsonwebtoken';

const app = express();
app.use(express.json());

const JWT_SECRET = process.env.JWT_SECRET || 'dev-secret';

function signAccessToken(user) {
  return jwt.sign(
    { sub: user.id, email: user.email },
    JWT_SECRET,
    { expiresIn: '15m' }
  );
}

app.post('/login', (req, res) => {
  const user = { id: 1, email: 'ana@example.com' };
  const accessToken = signAccessToken(user);
  const refreshToken = jwt.sign({ sub: user.id }, JWT_SECRET, { expiresIn: '7d' });

res.cookie('refreshToken', refreshToken, {
    httpOnly: true,
    sameSite: 'lax',
    secure: false
  });

res.json({ accessToken });
});

app.get('/profile', (req, res) => {
  const token = req.headers.authorization?.replace('Bearer ', '');
  if (!token) return res.status(401).json({ message: 'missing token' });

try {
    const payload = jwt.verify(token, JWT_SECRET);
    res.json({ userId: payload.sub });
  } catch {
    res.status(401).json({ message: 'invalid token' });
  }
});

app.listen(3000, () => console.log('JWT demo on http://localhost:3000'));

// ตัวอย่างการใช้งาน:
// npm install express jsonwebtoken
// POST /login แล้วนำ accessToken ไปส่งใน Authorization: Bearer <token>
```

---

## วิดีโอแนะนำ

- [YouTube: JWT Authentication Explained](https://www.youtube.com/results?search_query=jwt+authentication+refresh+token+explained)

---

## กิจกรรมท้ายบท

1. สร้าง endpoint `/login`
2. ออก access token อายุ 15 นาที
3. เก็บ refresh token ใน httpOnly cookie
4. เขียน middleware ตรวจ JWT

---

## End

<a href="/web-programming/12-auth-security/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>