Sobes.tech
Junior

Kimlik doğrulama süreci nasıl gerçekleşir?

sobes.tech yapay zeka

AI'dan gelen yanıt

Bir frontend uygulamasında kullanıcının kimlik doğrulama süreci genellikle aşağıdaki adımlardan oluşur:

  1. Kimlik bilgileri talebi: Kullanıcı, site veya uygulamadaki bir form aracılığıyla kullanıcı adı ve şifreyi girer.
  2. Verilerin sunucuya gönderilmesi: Frontend, bu verileri belirli bir kimlik doğrulama endpoint'ine HTTP isteği (genellikle POST) ile sunucuya (backend) gönderir. Veriler, isteğin gövdesinde JSON veya FormData formatında gönderilebilir.
  3. Sunucuda veri kontrolü: Backend, verileri alır, veritabanında olup olmadıklarını kontrol eder (örneğin, kullanıcı adı mevcut bir kullanıcıya karşılık geliyor mu ve girilen şifrenin hash'i veritabanındaki hash ile eşleşiyor mu).
  4. Token/sesyon oluşturma: Kimlik bilgileri doğruysa, sunucu benzersiz bir kimlik doğrulama token'ı oluşturur. Bu, şunlar olabilir:
    • Oturum ID'si: Sunucu bir oturum oluşturur ve bunu kullanıcıyla ilişkilendirir, istemciye oturum kimliği (örneğin, HttpOnly bayrağıyla bir cookie'de) gönderir.
    • Token (örneğin, JWT): Sunucu, kullanıcı ve izinleri hakkında bilgi içeren ve gizli anahtarıyla imzalanmış bir token oluşturur. Bu token, istemciye gönderilir.
  5. Token/sesyonun istemciye gönderilmesi: Sunucu, kimlik doğrulama token'ını veya oturum bilgisini frontend'e yanıt olarak gönderir.
    • Oturum ID'si kullanılıyorsa, genellikle Set-Cookie HTTP başlığıyla iletilir.
    • Token kullanılıyorsa, yanıt gövdesinde (JSON) veya Authorization başlığında (Bearer <token>) gönderilebilir.
  6. Token'in istemci tarafında saklanması: Frontend, token'ı alır ve sonraki isteklerde kullanmak üzere saklar.
    • Oturum ID'si tarayıcıdaki çerezlerde otomatik olarak saklanır.
    • Token, localStorage, sessionStorage veya çerezlerde (HttpOnly bayrağıyla) saklanabilir. Güvenlik açısından, erişim token'ları için HttpOnly çerezleri kullanmak, XSS saldırılarına karşı riski azaltır. JWT için, yenileme token'ı da HttpOnly çerezlerde saklanabilir.
  7. Token kullanımıyla korunan isteklere erişim: Korunan kaynaklara (kimlik doğrulama gerektiren) sonraki isteklerde, frontend saklanan token'ı her istekte gönderir.
    • Oturumlar için, tarayıcı otomatik olarak ilgili çerezleri gönderir.
    • Token'lar için, frontend açıkça token'ı Authorization başlığına eklemelidir (Authorization: Bearer <token>).
  8. Token'in sunucuda doğrulanması: Her korunan kaynağa istek alındığında, sunucu istekten token'ı çıkarır ve geçerliliğini kontrol eder (örneğin, token süresi, imza, oturumun varlığı).
  9. Yetkilendirme: Token geçerliyse, sunucu bu token ile ilişkili kullanıcıyı belirler ve erişim izinlerini kontrol eder (bu, kimlik doğrulamadan sonra gelen yetkilendirme sürecidir).
  10. İsteğin gerçekleştirilmesi: Kullanıcı kimliği doğrulanmış ve yetkilendirilmişse, sunucu isteği gerçekleştirir ve yanıtı gönderir. Aksi takdirde, hata gönderir (401 Unauthorized veya 403 Forbidden).

Kimlik doğrulama şemaları farklılık gösterebilir (oturumlar, JWT token'ları, OAuth2, OpenID Connect vb.), ancak temel adımlar, kullanıcıyı tanımlamak için token alma ve kullanma süreçleri benzerdir.

Sunucuya veri gönderme örneği (fetch API ve token kullanımıyla):

// Kullanıcı verileri
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Sunucuya veri gönderme
fetch('/api/login', { // Sunucudaki kimlik doğrulama endpoint'i
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Giriş başarısız');
  }
  return response.json(); // Sunucunun JSON ile token döndürmesi beklenir
})
.then(data => {
  const authToken = data.token; // Sunucu yanıtından token alınır
  localStorage.setItem('authToken', authToken); // Token saklanır (örneğin, localStorage'da)
  console.log('Giriş başarılı, token kaydedildi.');
  // Kullanıcıyı korunan sayfaya yönlendir
})
.catch(error => {
  console.error('Kimlik doğrulama hatası:', error);
  // Kullanıcıya hata mesajı göster
});

// Saklanan token ile korunan isteğin örneği
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Token'ı Authorization başlığına ekle
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token süresi dolmuş veya geçersiz. Giriş sayfasına yönlendiriliyor.');
        // Token geçersiz, temizle ve giriş sayfasına yönlendir
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Korunan kaynağı alınamadı');
    }
    return response.json();
  })
  .then(data => {
    console.log('Korunan veriler:', data);
  })
  .catch(error => {
    console.error('Korunan kaynağı alırken hata:', error);
  });
} else {
  console.log('Kimlik doğrulama token'ı bulunamadı. Giriş sayfasına yönlendiriliyor.');
  // window.location.href = '/login';
}

Güvenlik açısından önemli noktalar:

  • Her zaman HTTPS kullanın, böylece kimlik bilgileri ve token'lar korunur.
  • Token'ları güvenli bir şekilde saklayın (örneğin, hassas bilgiler veya erişim token'larını kodda veya açık alanlarda tutmaktan kaçının).
  • JWT token'lar için: erişim token'larının süresini kısa tutun ve yenileme token'larıyla güncelleyin, bunlar HttpOnly cookie'lerde saklanabilir. Erişim token'ları bellekte veya localStorage'da saklanabilir, XSS risklerini göz önünde bulundurun.
  • Sunucuda tüm verileri doğrulayın.