Aliran OAuth dari Frontend
Laksanakan aliran Authorization Code dengan PKCE dalam SPA, tukarkan kod kepada token, simpan token akses dengan selamat, dan elakkan aliran tersirat.
Aliran OAuth dari Frontend ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah OAuth?
OAuth 2.0 ialah protokol pendelegasian: aplikasi anda mendapat kebenaran untuk bertindak bagi pihak pengguna pada perkhidmatan pihak ketiga (Google, GitHub dan sebagainya) tanpa pernah melihat kata laluan pengguna. OAuth digunakan untuk 'Log masuk dengan Google', aplikasi OAuth GitHub dan kebanyakan pengesahan moden.
Peranan Utama
Pemilik Sumber: pengguna. Klien: aplikasi anda. Pelayan Kebenaran: penyedia OAuth (Google, Auth0). Pelayan Sumber: API yang dilindungi oleh token akses.
Aliran Kod Kebenaran
Aliran standard dan selamat untuk aplikasi sebelah pelayan: 1) Halakan pengguna ke log masuk penyedia. 2) Pengguna log masuk dan memberikan persetujuan. 3) Penyedia menghalakan pengguna kembali dengan kod. 4) Pelayan menukar kod untuk token akses (rahsia untuk pelayan sahaja).
Mengapa PKCE untuk Aplikasi Halaman Tunggal
Aplikasi halaman tunggal tidak boleh menyimpan rahsia klien (rahsia itu akan berada dalam himpunan pelayar). PKCE (Proof Key for Code Exchange) menggantikan rahsia tersebut dengan verifier/challenge kod bagi setiap permintaan. Kini PKCE menjadi piawai untuk semua klien OAuth awam.
Aliran PKCE Langkah demi Langkah
1) Jana code_verifier rawak. 2) Cincangkannya dengan SHA-256 = code_challenge. 3) Halakan pengguna ke /authorize bersama challenge. 4) Selepas persetujuan, dapatkan kod kembali. 5) Tukarkan kod + verifier untuk token akses. Penyedia mengesahkan bahawa challenge = hash(verifier).
Menjana Verifier dan Challenge Kod
Verifier ialah rentetan rawak; challenge ialah nilai verifier yang dikodkan dalam base64-URL menggunakan SHA-256.
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 };
}Menghalakan Pengguna ke Penyedia
Bina URL kebenaran dengan challenge, state (perlindungan CSRF) dan skop.
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();Mengendalikan Panggilan Balik
Penyedia menghalakan pengguna ke URL panggilan balik anda dengan ?code=...&state=.... Sahkan state untuk mencegah CSRF, kemudian tukarkan kod tersebut.
// /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 Selamat
Amalan terbaik: jangan simpan token akses dalam localStorage (boleh dicuri melalui XSS). Pilihan: 1) Dalam memori sahaja (dikosongkan apabila dimuat semula — pengesahan semula diperlukan). 2) Kuki HttpOnly (ditetapkan oleh bahagian belakang anda selepas aliran PKCE, dan tidak boleh dicuri oleh JS).
Elakkan Aliran Tersirat
Aliran tersirat lama mengembalikan token akses secara terus dalam serpihan URL. Aliran ini telah ditamatkan oleh BCP Keselamatan OAuth 2.0 — token boleh bocor melalui sejarah pelayar dan perujuk. Sentiasa gunakan Kod Kebenaran + PKCE.
Token Penyegaran
Token akses akan tamat tempoh (biasanya selepas 1 jam). Token penyegaran (dengan tempoh hidup lebih panjang) mendapatkan token akses baharu secara senyap. Untuk aplikasi halaman tunggal, token penyegaran semakin banyak disampaikan melalui kuki HttpOnly — jangan sekali-kali gunakan localStorage.
Token ID berbanding Token Akses
Token ID (OpenID Connect): JWT yang membuktikan identiti pengguna. Token akses: legap atau JWT, digunakan untuk memanggil API. Sahkan tandatangan dan tuntutan token ID (iss, aud, exp, nonce) sebelum mempercayainya.
Pustaka Pengesahan
Jangan bina 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 ini mengendalikan PKCE, penyegaran dan penyimpanan.
Semakan Pantas
Mengapakah Aplikasi Halaman Tunggal mesti menggunakan PKCE (Proof Key for Code Exchange) bersama aliran Kod Kebenaran dan bukannya hanya aliran Kod Kebenaran asas?
Ringkasan: OAuth dalam Bahagian Hadapan
Kod Kebenaran + PKCE ialah piawai moden untuk aplikasi halaman tunggal. Jana verifier + challenge S256 bagi setiap permintaan. Halakan pengguna ke /authorize dengan challenge + state. Sahkan state semasa panggilan balik. Tukarkan kod + verifier untuk mendapatkan token. Jangan gunakan aliran Tersirat. Utamakan kuki HttpOnly untuk penyimpanan token. Gunakan pustaka (auth0-spa-js, oidc-client-ts, NextAuth) — jangan bina sendiri.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Aliran OAuth dari Frontend” percuma?
Ya — teks penuh “Aliran OAuth dari Frontend” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Aliran OAuth dari Frontend”?
Laksanakan aliran Authorization Code dengan PKCE dalam SPA, tukarkan kod kepada token, simpan token akses dengan selamat, dan elakkan aliran tersirat. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Aliran OAuth dari Frontend” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pencegahan XSS: Pengekodan Output dan CSP
- CSRF: Kuki dan Token SameSite
- Content Security Policy: nonce dan hash
- Aliran OAuth dari Frontend