บทนำ
ระบบ OAuth2 ของ Hnawny Auth เป็นระบบที่ช่วยให้แอปพลิเคชันของคุณสามารถเข้าถึงข้อมูลผู้ใช้ได้อย่างปลอดภัย โดยไม่จำเป็นต้องจัดเก็บข้อมูลการเข้าสู่ระบบของผู้ใช้เอง
ระบบนี้ประกอบด้วยส่วนสำคัญดังนี้:
- การจัดการ OAuth2 Clients สำหรับนักพัฒนา
- การทำงานตามมาตรฐาน OAuth2 Authorization Code Flow
- API Endpoints สำหรับการเข้าถึงข้อมูลผู้ใช้
- หน้าทดสอบการทำงานของระบบ OAuth2
ข้อมูลเวอร์ชัน
เวอร์ชันปัจจุบัน: 1.0.0
OAuth2 Flow
Hnawny Auth ใช้ OAuth2 Authorization Code Flow ซึ่งเป็นวิธีที่ปลอดภัยที่สุดสำหรับแอปพลิเคชันที่มี backend server
ขั้นตอนการทำงาน
- แอปพลิเคชันของคุณเปิด browser ให้ผู้ใช้ไปยังหน้า authorization
- ผู้ใช้ล็อกอินและอนุญาตให้แอปพลิเคชันเข้าถึงข้อมูล
- ระบบ redirect กลับมาที่แอปพลิเคชันพร้อม authorization code
- แอปพลิเคชันส่ง authorization code เพื่อขอ access token
- แอปพลิเคชันใช้ access token ในการเรียก API
API Endpoints
Authorization Endpoint
ใช้สำหรับเริ่มต้น OAuth flow โดยการ redirect ผู้ใช้ไปยังหน้า login
GET https://acchunny.hnawny.in.th/oauth/authorizeRequired parameters:
- client_id
- redirect_uri
- response_type=code
- scope (optional)
Token Endpoint
ใช้แลกเปลี่ยน authorization code เพื่อรับ access token แกะ refresh token
POST https://acchunny.hnawny.in.th/oauth/tokenRequired parameters:
- client_id
- client_secret
- code
- grant_type=authorization_code
- redirect_uri
Refresh Token Endpoint
ใช้ refresh token เพื่อขอ access token ใหม่เมื่อ token เดิมหมดอายุ
POST https://acchunny.hnawny.in.th/oauth/tokenRequired parameters:
- client_id
- client_secret
- grant_type=refresh_token
- refresh_token
User Info Endpoint
ใช้รับข้อมูลของผู้ใช้ที่ได้รับอนุญาต
GET https://acchunny.hnawny.in.th/api/userRequired headers:
- Authorization: Bearer {access_token}
การจัดการ OAuth Clients
ก่อนที่จะใช้งาน OAuth2 API คุณจำเป็นต้องลงทะเบียนแอปพลิเคชันของคุณเพื่อรับ client credentials
ขั้นตอนการลงทะเบียน
- ล็อกอินเข้าสู่ระบบ Hnawny Auth
- ไปที่หน้า Developer Settings
- คลิกที่ปุ่ม "Create New Application"
- กรอกข้อมูลแอปพลิเคชัน เช่น ชื่อและ redirect URI
- บันทึกค่า client_id และ client_secret ที่ได้รับ
ตัวอย่างการใช้งาน
1. Authorization Code Request
เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอนุญาต:
// ขอ authorization code
window.location.href = 'https://acchunny.hnawny.in.th/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=https://your-app.com/callback&scope=read';หมายเหตุ: หลังจากผู้ใช้อนุญาตแอปพลิเคชันของคุณ ระบบจะ redirect กลับไปยัง redirect_uri พร้อมกับ code ในรูปแบบ URL parameter เช่น:
https://your-app.com/callback?code=d293d3ad-f57f-4ddc-a3fa-5155465eadba
code นี้จะมีอายุการใช้งาน 10 นาที และสามารถใช้ได้เพียงครั้งเดียวเท่านั้น
2. Token Exchange
หลังจากได้รับ code จาก URL parameter แล้ว นำมาแลกเป็น token:
// แลกเปลี่ยน code เป็น token
const res = await fetch('https://acchunny.hnawny.in.th/api/oauth/token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
grant_type: 'authorization_code',
code: 'AUTHORIZATION_CODE', // code จาก URL parameter
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET',
redirect_uri: 'https://your-app.com/callback'
})
})
const { access_token, refresh_token } = await res.json();3. Refresh Token Usage
เมื่อ access token หมดอายุ ให้ใช้ refresh token เพื่อขอ token ใหม่:
// ขอ access token ใหม่ด้วย refresh token
const res = await fetch('https://acchunny.hnawny.in.th/api/oauth/token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
grant_type: 'refresh_token',
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET',
refresh_token: 'YOUR_REFRESH_TOKEN'
})
})
const { access_token, refresh_token } = await res.json();
// เก็บ token ใหม่ไว้ใช้งานหมายเหตุ: refresh token มีอายุการใช้งานนานกว่า access token และสามารถใช้ขอ access token ใหม่ได้หลายครั้ง จนกว่าจะถูกเพิกถอนหรือหมดอายุ
4. User Info Request
ใช้ token เพื่อเรียกข้อมูลผู้ใช้:
// เรียกข้อมูลผู้ใช้
const res = await fetch('https://acchunny.hnawny.in.th/api/user', {
headers: {
'Authorization': `Bearer ${access_token}`
}
})
const user = await res.json()
// user = {
// id: 1,
// email: "[email protected]",
// first_name: "John",
// last_name: "Doe",
// ...
// }