Alur OAuth dari Frontend
Terapkan alur Authorization Code dengan PKCE dalam SPA, tukarkan kode dengan token, simpan token akses dengan aman, dan hindari alur implisit.
Alur OAuth dari Frontend adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu OAuth?
OAuth 2.0 adalah protokol pendelegasian: aplikasi Anda memperoleh izin untuk bertindak atas nama pengguna pada layanan pihak ketiga (Google, GitHub, dan lainnya) tanpa pernah melihat kata sandi pengguna. Protokol ini digunakan untuk 'Masuk dengan Google', aplikasi OAuth GitHub, dan sebagian besar autentikasi modern.
Peran Utama
Pemilik Sumber Daya: pengguna. Klien: aplikasi Anda. Server Otorisasi: penyedia OAuth (Google, Auth0). Server Sumber Daya: API yang dilindungi oleh token akses.
Alur Kode Otorisasi
Alur standar yang aman untuk aplikasi sisi server: 1) Arahkan pengguna ke halaman masuk penyedia. 2) Pengguna masuk dan memberikan persetujuan. 3) Penyedia mengarahkan kembali dengan kode. 4) Server menukar kode tersebut dengan token akses (rahasia khusus server).
Mengapa SPA Memerlukan PKCE
SPA tidak dapat menyimpan rahasia klien (rahasia tersebut akan berada dalam bundel peramban). PKCE (Bukti Kunci untuk Pertukaran Kode) mengganti rahasia tersebut dengan verifier/challenge kode untuk setiap permintaan. Kini PKCE menjadi standar untuk semua klien OAuth publik.
Alur PKCE Langkah demi Langkah
1) Hasilkan code_verifier acak. 2) Lakukan hash SHA-256 terhadapnya = code_challenge. 3) Arahkan ke /authorize dengan challenge tersebut. 4) Setelah persetujuan, dapatkan kode. 5) Tukarkan kode + verifier dengan token akses. Penyedia memverifikasi bahwa challenge = hash(verifier).
Menghasilkan Verifier dan Challenge
Verifier adalah string acak; challenge adalah hasil pengodean base64-URL dari SHA-256 verifier tersebut.
function base64url(arr) {
return btoa(String.fromCharCode(...arr))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
async function generatePKCE() {
const arr = new Uint8Array(32);
crypto.getRandomValues(arr);
const verifier = base64url(arr);
const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
const challenge = base64url(new Uint8Array(hash));
return { verifier, challenge };
}Mengarahkan ke Penyedia
Buat URL otorisasi dengan challenge, state (perlindungan CSRF), dan cakupan.
const { verifier, challenge } = await generatePKCE();
const state = crypto.randomUUID();
sessionStorage.setItem('pkce_verifier', verifier);
sessionStorage.setItem('oauth_state', state);
const url = new URL('https://accounts.google.com/o/oauth2/v2/auth');
url.searchParams.set('client_id', CLIENT_ID);
url.searchParams.set('redirect_uri', `${origin}/auth/callback`);
url.searchParams.set('response_type', 'code');
url.searchParams.set('scope', 'openid email profile');
url.searchParams.set('code_challenge', challenge);
url.searchParams.set('code_challenge_method', 'S256');
url.searchParams.set('state', state);
window.location.href = url.toString();Menangani Panggilan Balik
Penyedia mengarahkan ke URL panggilan balik Anda dengan ?code=...&state=.... Verifikasi state untuk mencegah CSRF, lalu tukarkan kodenya.
// /auth/callback page:
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const returnedState = params.get('state');
const expected = sessionStorage.getItem('oauth_state');
if (returnedState !== expected) throw new Error('Bad state');
const verifier = sessionStorage.getItem('pkce_verifier');
const tokens = await fetch('https://oauth2.googleapis.com/token', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
grant_type: 'authorization_code',
code,
client_id: CLIENT_ID,
redirect_uri: `${origin}/auth/callback`,
code_verifier: verifier
})
}).then(r => r.json());
// tokens: { access_token, id_token, refresh_token, expires_in }Menyimpan Token dengan Aman
Praktik terbaik: jangan simpan token akses di localStorage (dapat dicuri melalui XSS). Pilihan: 1) Hanya di memori (dihapus saat memuat ulang—perlu autentikasi ulang). 2) Kuki HttpOnly (ditetapkan oleh backend Anda setelah alur PKCE, sehingga tidak dapat dicuri oleh JS).
Hindari Alur Implisit
Alur implisit lama mengembalikan token akses langsung dalam fragmen URL. Alur ini tidak lagi dianjurkan oleh OAuth 2.0 Security BCP—token dapat bocor ke riwayat peramban dan perujuk. Selalu gunakan Kode Otorisasi + PKCE.
Token Penyegaran
Token akses kedaluwarsa (biasanya setelah 1 jam). Token penyegaran yang memiliki masa berlaku lebih panjang memperoleh token akses baru secara diam-diam. Untuk SPA, token penyegaran semakin sering dikirim melalui kuki HttpOnly—jangan pernah menggunakan localStorage.
Token ID vs Token Akses
ID token (OpenID Connect): JWT yang membuktikan identitas pengguna. token akses: token buram atau JWT, digunakan untuk memanggil API. Verifikasi tanda tangan dan klaim token ID (iss, aud, exp, nonce) sebelum mempercayainya.
Pustaka Autentikasi
Jangan membuatnya sendiri. Gunakan: oidc-client-ts untuk OIDC mentah, auth0/spa-js untuk Auth0, @clerk/clerk-react untuk Clerk, NextAuth.js/Auth.js untuk Next, dan Nuxt-auth untuk Nuxt. Pustaka tersebut menangani PKCE, penyegaran, dan penyimpanan.
Pemeriksaan Singkat
Mengapa Aplikasi Satu Halaman harus menggunakan PKCE (Bukti Kunci untuk Pertukaran Kode) dengan alur Kode Otorisasi, bukan hanya alur Kode Otorisasi dasar?
Rangkuman: OAuth di Frontend
Kode Otorisasi + PKCE adalah standar modern untuk SPA. Hasilkan verifier + challenge S256 untuk setiap permintaan. Arahkan ke /authorize dengan challenge + state. Verifikasi state saat panggilan balik. Tukarkan kode + verifier dengan token. Jangan pernah menggunakan alur Implisit. Utamakan kuki HttpOnly untuk penyimpanan token. Gunakan pustaka (auth0-spa-js, oidc-client-ts, NextAuth)—jangan membuatnya sendiri.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Alur OAuth dari Frontend” gratis?
Ya — teks lengkap “Alur OAuth dari Frontend” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Alur OAuth dari Frontend”?
Terapkan alur Authorization Code dengan PKCE dalam SPA, tukarkan kode dengan token, simpan token akses dengan aman, dan hindari alur implisit. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Alur OAuth dari Frontend” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pencegahan XSS: Pengodean Output CSP
- CSRF: Cookie dan Token SameSite
- Content Security Policy: nonce dan hash
- Alur OAuth dari Frontend