Alur Authorization Code dengan PKCE
Langkah detail alur OAuth 2.1 dengan PKCE wajib.
OAuth 2.1 mewajibkan penggunaan PKCE (Proof Key for Code Exchange) untuk semua client, termasuk confidential clients.
Diagram Alur
┌──────────┐ ┌──────────────┐ ┌──────────┐
│ Client │ │ SSO Tabalong │ │ User │
│ App │ │ OAuth │ │ Browser │
└────┬─────┘ └──────┬───────┘ └────┬─────┘
│ │ │
│ 1. Generate code_verifier & code_challenge │ │
│─────────────────────────────────────────────────│ │
│ │ │
│ 2. Redirect to /authorize │ │
│────────────────────────────────────────────────>│ │
│ ?client_id=... │ │
│ &redirect_uri=... │ │
│ &response_type=code │ │
│ &scope=openid profile │ │
│ &state=... │ │
│ &code_challenge=... │ │
│ &code_challenge_method=S256 │ │
│ │ │
│ │ 3. Show login page │
│ │──────────────────────────────────────────>│
│ │ │
│ │ 4. User login & consent │
│ │<──────────────────────────────────────────│
│ │ │
│ 5. Redirect to redirect_uri │ │
│ ?code=AUTHORIZATION_CODE │ │
│ &state=... │ │
│<────────────────────────────────────────────────│ │
│ │ │
│ 6. POST /token │ │
│ grant_type=authorization_code │ │
│ &code=AUTHORIZATION_CODE │ │
│ &redirect_uri=... │ │
│ &client_id=... │ │
│ &client_secret=... (if confidential) │ │
│ &code_verifier=... │ │
│────────────────────────────────────────────────>│ │
│ │ │
│ 7. Return tokens │ │
│ {access_token, id_token, refresh_token} │ │
│<────────────────────────────────────────────────│ │
│ │ │
│ 8. GET /userinfo (optional) │ │
│ Authorization: Bearer {access_token} │ │
│────────────────────────────────────────────────>│ │
│ │ │
│ 9. Return user data │ │
│<────────────────────────────────────────────────│ │
│ │ │Langkah-langkah Detail
Langkah 1: Generate PKCE Code Verifier dan Code Challenge
// Code Verifier: Random string 43-128 karakter (A-Z, a-z, 0-9, -._~)
const codeVerifier = generateRandomString(64);
// Code Challenge: Base64URL(SHA256(code_verifier))
const codeChallenge = base64UrlEncode(sha256(codeVerifier));Langkah 2: Redirect ke Authorization Endpoint
URL:
https://bukutamu.tabalongkab.go.id/api/auth/oauth2/authorizeParameter:
| Parameter | Wajib | Keterangan |
|---|---|---|
client_id | Ya | Client ID Anda |
redirect_uri | Ya | URL callback yang terdaftar |
response_type | Ya | Harus code |
scope | Ya | Scope yang diminta (minimal openid) |
state | Ya | Random string untuk CSRF protection |
code_challenge | Ya | PKCE code challenge |
code_challenge_method | Ya | Harus S256 |
Langkah 3-4: User Login dan Consent
Pengguna akan melihat halaman login SSO Tabalong. Setelah login, mereka akan melihat halaman consent yang menampilkan scope yang diminta.
Langkah 5: Terima Authorization Code
Setelah user menyetujui, browser akan redirect ke redirect_uri dengan parameter:
code: Authorization code (berlaku singkat)state: State yang sama dengan yang dikirim
Penting: Verifikasi bahwa state yang diterima sama dengan yang dikirim!
Langkah 6: Tukar Code dengan Token
Kirim POST request ke token endpoint:
| Parameter | Wajib | Keterangan |
|---|---|---|
grant_type | Ya | Harus authorization_code |
code | Ya | Authorization code dari langkah 5 |
redirect_uri | Ya | Harus sama dengan langkah 2 |
client_id | Ya | Client ID Anda |
client_secret | Kondisional | Wajib untuk confidential client |
code_verifier | Ya | PKCE code verifier dari langkah 1 |
Langkah 7: Terima Token
Response berisi access token, ID token, dan refresh token (jika scope offline_access diminta).
Langkah 8-9: Ambil Data User (Opsional)
Gunakan access token untuk mengakses userinfo endpoint.