Vue Academy · Ders

Güvenli Kimlik Doğrulama Kalıpları

Belirteç depolama (bellek, localStorage veya httpOnly çerezi), sessiz yenileme ve sekme kapanınca oturumu kapatma.

Güvenli Kimlik Doğrulama Kalıpları, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Belirteçler ve Saklandıkları Yer

SPA'ler kimlik doğrulamak için belirteçler kullanır, ancak bunları nerede sakladığınız XSS ve CSRF riskinizi belirler. Modern yaklaşım, kısa ömürlü bir erişim belirtecini uzun ömürlü bir yenileme belirtecinden ayırır ve her birini farklı yerde saklar.

localStorage Sorunu

Belirteçleri localStorage içinde saklamak kullanışlıdır, ancak tehlikelidir: XSS yoluyla enjekte edilen herhangi bir betik belirteci okuyup dışarı sızdırabilir. Kimlik bilgilerini burada saklamaktan kaçının.

// AVOID
localStorage.setItem("token", accessToken);

Bellekte Erişim Belirteci

Erişim belirtecini bir JavaScript değişkeninde veya reaktif bir ref'te tutun. Yeniden yükleme sırasında ortadan kalkar; böylece başarılı bir XSS saldırısının fırsat aralığı çok daha daralır ve diskte kalıcı hiçbir veri bulunmaz.

import { ref } from "vue";

export const accessToken = ref(null);

httpOnly Çerezinde Yenileme Belirteci

Yenileme belirteci HttpOnly, Secure, SameSite özelliklerine sahip bir çerezde tutulur. JavaScript bunu okuyamaz; bu nedenle XSS belirteci çalamaz ve tarayıcı bu belirteci yalnızca kimlik doğrulama uç noktanıza gönderir.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

Erişim Belirtecini Ekleme

Bir Axios istek aracısı, bellekteki erişim belirtecini her çağrıda Yetkilendirme üst bilgisine ekler.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

Süre Dolumunu Algılama: 401

Erişim belirtecinin süresi dolduğunda sunucu 401 Unauthorized yanıtını verir. Bir yanıt aracısı bunu yakalayarak yenileme işlemini tetikler.

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

Belirteci Yenileme

401 yanıtında yenileme uç noktasını çağırın. Tarayıcı, httpOnly yenileme çerezini otomatik olarak gönderir (withCredentials) ve sunucu yeni bir erişim belirteci döndürür.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

Original İsteği Yeniden Deneme

Yenileme işleminden sonra, kullanıcının bunu hiç fark etmemesi için başarısız olan original isteği yeni belirteçle yeniden gönderin.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

Yenileme Yığılmalarını Önleme

Birçok istek aynı anda 401 döndürürse, yenileme uç noktasını tekrar tekrar çağırmamak için bu istekleri devam eden tek bir yenileme işleminin arkasında sıraya alın.

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

Oturumu Kapatma

Oturum kapatılırken bellek içindeki belirteci temizleyin ve yenileme çerezini sunucu tarafında temizleyen bir uç noktayı çağırın.

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

CSRF Savunmasıyla Birleştirme

Yenileme çerezi otomatik olarak gönderildiğinden, diğer çerezle kimlik doğrulanan yollar gibi bu uç noktayı da SameSite ve CSRF belirteçleriyle koruyun.

Hızlı Kontrol

Erişim belirteci ve yenileme belirteci ayrı ayrı nerede saklanmalıdır?

Özet

Erişim belirtecini bellek içi bir ref'te (asla localStorage'da değil), yenileme belirtecini ise bir HttpOnly çerezinde saklayın. Bir istek araya giricisi taşıyıcı belirtecini ekler; bir yanıt araya giricisi 401 durumunu yakalar, yenileme uç noktasını çağırır, belirteci günceller ve original isteği yeniden dener; eş zamanlı yenilemeleri tekilleştirir ve CSRF savunmalarıyla birlikte çalışır.

Sıkça Sorulan Sorular

“Güvenli Kimlik Doğrulama Kalıpları” dersi ücretsiz mi?

Evet — “Güvenli Kimlik Doğrulama Kalıpları” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Güvenli Kimlik Doğrulama Kalıpları” dersinde ne öğreneceğim?

Belirteç depolama (bellek, localStorage veya httpOnly çerezi), sessiz yenileme ve sekme kapanınca oturumu kapatma. Vue 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.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“Güvenli Kimlik Doğrulama Kalıpları” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Vue'da XSS Önleme
Vue ile İçerik Güvenlik Politikası (CSP)
Vue SPA'lerinde CSRF Koruması
Güvenli Kimlik Doğrulama Kalıpları

← Vue Academy Sayfasına Dön