Hogyan zajlik az azonosítási folyamat?

A felhasználói hitelesítési folyamat a frontend alkalmazásban általánosságban a következő lépésekből áll:

1. Adatok kérés: A felhasználó beírja a felhasználónevet és jelszót a weboldalon vagy az alkalmazásban található űrlapba.
2. Adatok küldése a szervernek: A frontend elküldi ezeket az adatokat a szervernek (backend) HTTP-kéréssel (általában POST) egy speciális hitelesítési végponton. Az adatok JSON vagy FormData formátumban küldhetők a kérés törzsében.
3. Adatok ellenőrzése a szerveren: A backend megkapja az adatokat, ellenőrzi azokat saját adatbázisában (például, hogy a felhasználónév létezik-e, és a megadott jelszó hash-e egyezik-e a tárolt hash-sel).
4. Token/Session generálása: Ha az adatok helyesek, a szerver egyedi hitelesítési tokent generál. Ez lehet:
   • Session ID: A szerver létrehoz egy session-t, és összekapcsolja a felhasználóval, majd a kliensnek küldi a session azonosítót (például HttpOnly cookie-ban).
   • Token (pl. JWT): A szerver generál egy tokent, amely tartalmazza a felhasználói információkat és jogosultságokat, aláírva a saját titkos kulcsával. Ezt a tokent a kliens kapja.
5. Token/session küldése a kliensnek: A szerver válaszol a frontendnek, elküldve a generált hitelesítési tokent.
   • Ha session ID-t használnak, általában Set-Cookie HTTP fejlécben kerül kiküldésre.
   • Ha tokent használnak, az kérés törzsében (JSON) vagy az Authorization fejlécben (Bearer <token>) adható át.
6. A token tárolása a kliens oldalon: A frontend megkapja a tokent, és elmenti a későbbi kérésekhez.
   • A session ID automatikusan tárolódik a böngésző cookie-k között.
   • A tokent tárolhatják localStorage, sessionStorage vagy cookie-k között (HttpOnly flag-gel a XSS elleni védelem érdekében). Ajánlott HttpOnly cookie-kat használni a hozzáférési tokenekhez, mivel ez csökkenti a token lopásának kockázatát XSS támadások esetén. A JWT tokenekhez is tárolhatók frissítő tokenek HttpOnly cookie-kban.
7. A token használata védett kérésekhez: A későbbi kérésnél a frontend elküldi a tárolt tokent minden kérésben.
   • A böngésző automatikusan elküldi a session cookie-kat.
   • A tokenek esetén a frontend explicit módon hozzáadja a tokent az Authorization fejléchez (Authorization: Bearer <token>).
8. Token ellenőrzése a szerveren: Minden védett kérésnél a szerver kivonja a tokent a kérésből, és ellenőrzi a hitelességét (pl. a token érvényességi ideje, aláírás, session megléte).
9. Jogosultság ellenőrzése: Ha a token érvényes, a szerver meghatározza a tokent kötött felhasználót, és ellenőrzi jogosultságait a kéréshez.
10. A kérés végrehajtása: Ha a felhasználó hitelesített és jogosult, a szerver végrehajtja a kérést, és választ küld. Ellenkező esetben hibát (pl. 401 Unauthorized vagy 403 Forbidden) küld.

A hitelesítési sémák különbözőek lehetnek (session alapú, JWT tokenek, OAuth2, OpenID Connect stb.), de az alapvető lépések a token megszerzéséhez és felhasználásához hasonlóak.

Példa a szerver felé küldött adatokra (fetch API és token használatával):

// Felhasználói adatok példája
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Adatok küldése a szervernek
fetch('/api/login', { // Hitelesítési végpont a szerveren
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Bejelentkezés sikertelen');
  }
  return response.json(); // Várjuk, hogy a szerver JSON-t adjon vissza a tokennel
})
.then(data => {
  const authToken = data.token; // A token kinyerése a válaszból
  localStorage.setItem('authToken', authToken); // A token elmentése (pl. localStorage-ban)
  console.log('Sikeres bejelentkezés, token elmentve.');
  // Felhasználó átirányítása védett oldalra
})
.catch(error => {
  console.error('Hitelesítési hiba:', error);
  // Hibaüzenet megjelenítése a felhasználónak
});

// Védett kérés példája a mentett tokennel
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // A token hozzáadása az Authorization fejléchez
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('A token lejárt vagy érvénytelen. Átirányítás a bejelentkezéshez.');
        // A token érvénytelen, törlés és átirányítás
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Védett erőforrás lekérése sikertelen');
    }
    return response.json();
  })
  .then(data => {
    console.log('Védett adatok:', data);
  })
  .catch(error => {
    console.error('Hiba a védett erőforrás lekérésekor:', error);
  });
} else {
  console.log('Nincs hitelesítési token. Átirányítás a bejelentkezéshez.');
  // window.location.href = '/login';
}

Biztonsági szempontok:

• Mindig használjon HTTPS-t az adatok és tokenek küldésekor.
• Biztonságosan tárolja a tokeneket (kerülje a érzékeny adatok, például jelszavak vagy hozzáférési tokenek nyilvános kódba vagy nyitott mezőkbe helyezését).
• JWT tokenek esetén: rövid lejárati időt használjon a hozzáférési tokenekhez, és frissítse azokat frissítő tokenekkel, amelyek HttpOnly cookie-kban tárolódnak. A hozzáférési tokeneket tárolhatja a memória vagy localStorage-ban, de figyelembe kell venni az XSS kockázatokat.
• Minden adatot a szerveren validáljon.