reveal.js

# OAuth 2.0 และ OpenID Connect เบื้องต้น

Lesson 3 - Authentication และ Security

**OAuth 2.0** คือมาตรฐานการมอบสิทธิ์ หรือ **Authorization** ให้แอปหนึ่งเข้าถึง resource ในนามผู้ใช้ ส่วน **OpenID Connect (OIDC)** เพิ่มชั้น **Authentication** เพื่อยืนยันตัวตนผู้ใช้บน OAuth 2.0

---

## 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["ยุค Password Sharing / Risky Access"]
 A["ให้รหัสผ่านกับแอปอื่น เสี่ยงสูง"]
 end
 subgraph Era2["ยุค OAuth / Delegated Authorization"]
 B["OAuth 2.0 มอบสิทธิ์แบบ token"]
 C["Authorization Code เหมาะกับเว็บ"]
 end
 subgraph Era3["ยุค OIDC / Identity Layer"]
 D["OpenID Connect ยืนยันตัวตน"]
 E["ID Token ข้อมูลผู้ใช้ใน JWT"]
 end
 A --> B --> C --> D --> E
</pre>

---

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

- **OAuth 2.0** คือ Authorization ไม่ใช่ Authentication
- **Authorization Code Flow** เหมาะกับเว็บและนิยมใช้กับ Google/GitHub login
- **Implicit Flow** ไม่แนะนำสำหรับระบบใหม่
- **Client Credentials** เหมาะกับ Server-to-Server
- **OIDC** เพิ่ม Authentication Layer บน OAuth 2.0
- **ID Token** เป็น JWT ที่มีข้อมูลผู้ใช้ เช่น `name`, `email`, `picture`
- **Passport.js** ใช้ OAuth Strategy ใน Node.js ได้

---

## ตาราง Grant Types

| Grant Type | เหมาะกับ | หมายเหตุ |
|---|---|---|
| Authorization Code | Web app, SPA with PKCE | แนะนำสำหรับ login |
| Implicit | SPA เก่า | ไม่แนะนำในระบบใหม่ |
| Client Credentials | Server-to-Server | ไม่มี user โดยตรง |
| Refresh Token | ต่ออายุ access token | ต้องเก็บอย่างปลอดภัย |

---

## Mermaid Diagram: Authorization Code 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 U as User / ผู้ใช้
 participant A as App / แอปเรา
 participant P as Provider / Google GitHub
 U->>A: Click Login
 A->>P: Redirect to authorize
 P->>U: Login and consent
 P-->>A: Authorization Code
 A->>P: Exchange code for tokens
 P-->>A: Access Token + ID Token
 A-->>U: Logged in
</pre>

---

## Code Example

```js
// passport-google-demo.mjs
// โครงสร้างตัวอย่าง Passport OAuth Strategy
import express from 'express';
import passport from 'passport';
import { Strategy as GoogleStrategy } from 'passport-google-oauth20';

const app = express();

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  callbackURL: '/auth/google/callback'
}, (accessToken, refreshToken, profile, done) => {
  // ในระบบจริงควร find-or-create user ในฐานข้อมูล
  return done(null, {
    providerId: profile.id,
    name: profile.displayName,
    email: profile.emails?.[0]?.value
  });
}));

app.use(passport.initialize());

app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

app.get('/auth/google/callback',
  passport.authenticate('google', { session: false }),
  (req, res) => res.json({ user: req.user })
);

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

// ตัวอย่างการใช้งาน:
// npm install express passport passport-google-oauth20
// ตั้งค่า GOOGLE_CLIENT_ID และ GOOGLE_CLIENT_SECRET ก่อนรัน
```

---

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

- [YouTube: OAuth 2.0 and OpenID Connect Explained](https://www.youtube.com/results?search_query=OAuth+2.0+OpenID+Connect+explained)

---

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

- วาด Authorization Code Flow ของ Google Login
- ระบุว่า access token, refresh token และ ID token ใช้ทำอะไร
- อธิบายเหตุผลที่ OAuth 2.0 เพียงอย่างเดียวไม่ใช่ Authentication

---

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