Ön Uçtan OAuth Akışları
Bir SPA içinde PKCE ile Authorization Code akışını uygulamayı, kodu belirteçlerle değiştirmeyi, erişim belirteçlerini güvenle saklamayı ve örtük akıştan kaçınmayı öğrenin.
Ön Uçtan OAuth Akışları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
OAuth Nedir
OAuth 2.0 bir yetki devri protokolüdür: uygulamanız, kullanıcının parolasını hiçbir zaman görmeden üçüncü taraf bir hizmette (Google, GitHub vb.) kullanıcının adına işlem yapma izni alır. 'Google ile Oturum Aç', GitHub OAuth uygulamaları ve çoğu modern kimlik doğrulama sistemi için kullanılır.
Temel Roller
Kaynak Sahibi: kullanıcı. İstemci: uygulamanız. Yetkilendirme Sunucusu: OAuth sağlayıcısı (Google, Auth0). Kaynak Sunucusu: erişim belirteciyle korunan API.
Yetkilendirme Kodu Akışı
Sunucu tarafı uygulamalar için standart ve güvenli akış: 1) Kullanıcıyı sağlayıcının giriş sayfasına yönlendirin. 2) Kullanıcı giriş yapar ve izin verir. 3) Sağlayıcı, bir kod ile geri yönlendirir. 4) Sunucu, kodu bir erişim belirteciyle değiştirir (yalnızca sunucuda bulunan gizli bilgi).
Tek Sayfalı Uygulamalar için Neden PKCE
Tek sayfalı uygulamalar bir istemci sırrını saklayamaz (bu sır tarayıcı paketinde bulunur). PKCE (Kod Değişimi için Kanıt Anahtarı), sırrın yerine istek başına bir kod doğrulayıcı/challenge kullanır. Artık tüm OAuth herkese açık istemcileri için standarttır.
PKCE Akışı Adım Adım
1) Rastgele bir code_verifier oluşturun. 2) Bunun SHA-256 hash'ini alın = code_challenge. 3) Challenge ile /authorize adresine yönlendirin. 4) İzin verildikten sonra bir kod alın. 5) Kodu + doğrulayıcıyı erişim belirteciyle değiştirin. Sağlayıcı challenge = hash(verifier) eşitliğini doğrular.
Kod Doğrulayıcıyı ve Challenge'ı Oluşturma
Verifier rastgele bir dizedir; challenge ise bunun SHA-256 ile alınmış ve base64-URL biçiminde kodlanmış hâlidir.
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 };
}Sağlayıcıya Yönlendirme
Challenge, state (CSRF koruması) ve kapsamlarla yetkilendirme URL'sini oluşturun.
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();Geri Çağrıyı İşleme
Sağlayıcı, ?code=...&state=... ile geri çağırma URL'nize yönlendirir. CSRF'yi önlemek için state'i doğrulayın, ardından kodu değiştirin.
// /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 }Belirteçleri Güvenle Saklama
En iyi uygulama: erişim belirteçlerini localStorage'da saklamayın (XSS yoluyla çalınabilir). Seçenekler: 1) Yalnızca bellekte (yenileme sırasında temizlenir — yeniden kimlik doğrulama gerekir). 2) HttpOnly çerezi (PKCE akışından sonra arka ucunuz tarafından ayarlanır, JS tarafından çalınamaz).
Örtük Akıştan Kaçının
Eski örtük akış, erişim belirtecini doğrudan URL parçasında döndürür. OAuth 2.0 Security BCP tarafından kullanımdan kaldırılmıştır — belirteçleri tarayıcı geçmişine ve yönlendirenlere sızdırır. Her zaman Yetkilendirme Kodu + PKCE kullanın.
Yenileme Belirteçleri
Erişim belirteçlerinin süresi dolar (genellikle 1 saat). Daha uzun ömürlü bir yenileme belirteci, sessizce yeni erişim belirteçleri alır. Tek sayfalı uygulamalarda yenileme belirteçleri giderek daha fazla HttpOnly çerezleri aracılığıyla iletiliyor — hiçbir zaman localStorage kullanmayın.
ID Belirteçleri ve Erişim Belirteçleri
ID belirteci (OpenID Connect): kullanıcının kim olduğunu kanıtlayan JWT. Erişim belirteci: API'leri çağırmak için kullanılan opak değer veya JWT. Güvenmeden önce ID belirtecinin imzasını ve taleplerini (iss, aud, exp, nonce) doğrulayın.
Kimlik Doğrulama Kitaplıkları
Kendi çözümünüzü geliştirmeyin. Şunları kullanın: ham OIDC için oidc-client-ts, Auth0 için auth0/spa-js, Clerk için @clerk/clerk-react, Next için NextAuth.js/Auth.js, Nuxt için Nuxt-auth. PKCE, yenileme ve depolama işlemlerini onlar yönetir.
Hızlı Kontrol
Tek Sayfalı Uygulamalar, temel Yetkilendirme Kodu akışı yerine neden Yetkilendirme Kodu akışıyla birlikte PKCE (Kod Değişimi için Kanıt Anahtarı) kullanmalıdır?
Özet: Ön Uçta OAuth
Yetkilendirme Kodu + PKCE, tek sayfalı uygulamalar için modern standarttır. Her istek için doğrulayıcı + S256 challenge oluşturun. Challenge + state ile /authorize adresine yönlendirin. Geri çağrıda state'i doğrulayın. Kodu + doğrulayıcıyı belirteçlerle değiştirin. Örtük akışı hiçbir zaman kullanmayın. Belirteçleri saklamak için HttpOnly çerezleri tercih edin. Kitaplıkları kullanın (auth0-spa-js, oidc-client-ts, NextAuth) — kendi çözümünüzü geliştirmeyin.
Sıkça Sorulan Sorular
“Ön Uçtan OAuth Akışları” dersi ücretsiz mi?
Evet — “Ön Uçtan OAuth Akışları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Ön Uçtan OAuth Akışları” dersinde ne öğreneceğim?
Bir SPA içinde PKCE ile Authorization Code akışını uygulamayı, kodu belirteçlerle değiştirmeyi, erişim belirteçlerini güvenle saklamayı ve örtük akıştan kaçınmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Ön Uçtan OAuth Akışları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- XSS Önleme: Çıktı Kodlama ve CSP
- CSRF: SameSite Çerezleri ve Belirteçleri
- Content Security Policy: nonce ve hash
- Ön Uçtan OAuth Akışları