reveal.js

# Password Hashing ด้วย bcrypt

Lesson 5 - Authentication และ Security

**Password Hashing** คือการแปลง password เป็นค่าทิศทางเดียวที่ไม่ควรถอดกลับได้ โดย **bcrypt** เพิ่ม Salt และ Cost Factor เพื่อทำให้การเดารหัสผ่านจำนวนมากทำได้ยากขึ้น

---

## 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["ยุค Plain Text / Unsafe Storage"]
 A["Plain Password รั่วแล้วใช้ได้ทันที"]
 end
 subgraph Era2["ยุค Fast Hash / Weak Hash"]
 B["MD5/SHA1 เร็วเกินไปสำหรับ password"]
 C["Rainbow Table เดาจากตารางสำเร็จรูป"]
 end
 subgraph Era3["ยุค Password Hash / Adaptive Hash"]
 D["Salt ค่าสุ่มต่อ password"]
 E["bcrypt Cost ปรับความยากได้"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **ไม่ควรเก็บ Password เป็น Plain Text** เพราะฐานข้อมูลรั่วแล้วผู้โจมตีใช้ได้ทันที
- **MD5/SHA1** ไม่เหมาะกับ password เพราะเร็วและถูกโจมตีด้วย rainbow table ได้ง่าย
- **Hashing** เป็นทิศทางเดียว ต่างจาก Encryption ที่ถอดกลับได้เมื่อมีกุญแจ
- **Salt** คือค่าสุ่มที่เพิ่มก่อน hash เพื่อกันการใช้ตารางสำเร็จรูป
- **bcryptjs** ใช้ `bcrypt.hash(password, saltRounds)`
- **bcrypt.compare()** ใช้ตรวจ password ที่ผู้ใช้กรอกกับ hash ในฐานข้อมูล
- **saltRounds** แนะนำเริ่มที่ 10-12 เพื่อสมดุลความปลอดภัยและประสิทธิภาพ

---

## ตารางเปรียบเทียบ

| วิธี | ถอดกลับได้ | เหมาะกับ Password | หมายเหตุ |
|---|---|---|---|
| Plain Text | ไม่ต้องถอด | ไม่เหมาะอย่างยิ่ง | เสี่ยงสูง |
| Encryption | ได้เมื่อมีกุญแจ | ไม่ควรใช้เป็นหลัก | เหมาะกับข้อมูลที่ต้องอ่านคืน |
| MD5/SHA1 | ไม่ได้ | ไม่เหมาะ | เร็วเกินไป |
| bcrypt | ไม่ได้ | เหมาะ | มี salt และ cost |

---

## Mermaid Diagram: Hash and Compare

<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 TD
 A["Register สมัครสมาชิก"] --> B["Plain Password รหัสผ่านที่กรอก"]
 B --> C["bcrypt.hash hash + salt"]
 C --> D["Store Hash เก็บ hash"]
 E["Login เข้าสู่ระบบ"] --> F["bcrypt.compare เทียบ input กับ hash"]
 D --> F
 F --> G{"Valid? ถูกต้องไหม"}
 G -->|Yes| H["Login Success เข้าสู่ระบบสำเร็จ"]
 G -->|No| I["Reject ปฏิเสธ"]
</pre>

---

## Code Example

```js
// bcrypt-demo.mjs
// ตัวอย่างสมัครสมาชิกและ login ด้วย bcryptjs
import express from 'express';
import bcrypt from 'bcryptjs';

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

const users = [];
const saltRounds = 12;

app.post('/register', async (req, res) => {
  const { email, password } = req.body;
  const passwordHash = await bcrypt.hash(password, saltRounds);

users.push({ id: Date.now(), email, passwordHash });
  res.status(201).json({ message: 'registered' });
});

app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = users.find(item => item.email === email);
  if (!user) return res.status(401).json({ message: 'invalid credentials' });

const ok = await bcrypt.compare(password, user.passwordHash);
  if (!ok) return res.status(401).json({ message: 'invalid credentials' });

res.json({ message: 'login success' });
});

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

// ตัวอย่างการใช้งาน:
// npm install express bcryptjs
// POST /register { "email": "ana@example.com", "password": "secret123" }
// POST /login    { "email": "ana@example.com", "password": "secret123" }
```

---

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

- [YouTube: Password Hashing bcrypt Explained](https://www.youtube.com/results?search_query=password+hashing+bcrypt+explained)

---

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

- สร้าง endpoint register/login
- เปลี่ยนจาก plain password เป็น bcrypt hash
- ทดลองปรับ `saltRounds` เป็น 10, 12 และสังเกตเวลาประมวลผล

---

## 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>