Ako prebieha proces overovania?

Proces overenia používateľa v frontendovej aplikácii zvyčajne pozostáva z nasledujúcich krokov:

1. Žiadosť o prihlasovacie údaje: Používateľ zadá svoje používateľské meno a heslo do formulára na stránke alebo v aplikácii.
2. Odoslanie údajov na server: Frontend odošle tieto údaje na server (backend) pomocou HTTP požiadavky (zvyčajne POST) na špeciálny endpoint na overenie. Dáta môžu byť odoslané v tele požiadavky vo formáte JSON alebo FormData.
3. Kontrola údajov na serveri: Backend prijme údaje, skontroluje ich v svojej databáze (napríklad, či používateľské meno existuje a či hash zadaného hesla zodpovedá uloženému hash-u).
4. Generovanie tokenu/sesie: Ak sú údaje správne, server vygeneruje unikátne overovacie označenie. Môže to byť:
   • ID relácie: Server vytvorí reláciu a spojí ju s používateľom, odosielajúc klientovi identifikátor relácie (napríklad v HttpOnly cookie).
   • Token (napríklad JWT): Server vygeneruje token obsahujúci informácie o používateľovi a jeho právach, podpísaný jeho tajným kľúčom. Tento token je odoslaný klientovi.
5. Odoslanie tokenu/sesie klientovi: Server odpovie frontend-u, odoslaním vygenerovaného overovacieho tokenu.
   • Ak sa používa ID relácie, zvyčajne sa odovzdáva v Set-Cookie hlavičke.
   • Ak sa používa token, môže byť odoslaný v tele odpovede (JSON) alebo v hlavičke Authorization (Bearer <token>).
6. Uloženie tokenu na klientovi: Frontend dostane token a uloží ho pre budúce požiadavky.
   • ID relácie sa zvyčajne automaticky ukladá v cookies prehliadača.
   • Token môže byť uložený v localStorage, sessionStorage alebo cookies (s flagom HttpOnly na ochranu pred XSS). Odporúča sa používať HttpOnly cookies pre tokeny prístupu, pretože to znižuje riziko krádeže tokenu cez XSS.
7. Použitie tokenu pre chránené požiadavky: Pri vykonávaní ďalších požiadaviek na chránené zdroje (vyžadujúce overenie), frontend odosiela uložený token v každej požiadavke.
   • Pre relácie, prehliadač automaticky odosiela príslušné cookies s ID relácie.
   • Pre tokeny, frontend musí explicitne pridať token do hlavičky Authorization (napríklad Authorization: Bearer <token>).
8. Kontrola tokenu na serveri: Pri prijatí každej požiadavky na chránený zdroj, server extrahuje token z požiadavky a overí jeho pravosť (napríklad, platnosť tokenu, podpis tokenu, prítomnosť relácie s takým ID).
9. Autorizácia: Ak je token platný, server určí používateľa spojeného s týmto tokenom a overí jeho práva na prístup k požadovanému zdroju (toto je už proces autorizácie, nasledovný po overení).
10. Vykonanie požiadavky: Ak je používateľ overený a má práva, server vykoná požiadavku a odošle odpoveď. Inak server odošle chybu (napríklad 401 Unauthorized alebo 403 Forbidden).

Schémy overovania sú rôzne (na základe relácií, JWT tokenov, OAuth2, OpenID Connect atď.), ale základné kroky získania a použitia tokenu na identifikáciu používateľa zostávajú podobné.

Príklad odoslania údajov na server (s použitím fetch API a tokenu):

// Príklad údajov používateľa
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Odoslanie údajov na server
fetch('/api/login', { // Endpoint na overenie na serveri
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Prihlásenie zlyhalo');
  }
  return response.json(); // Očakávame, že server vráti JSON s tokenom
})
.then(data => {
  const authToken = data.token; // Získanie tokenu z odpovede
  localStorage.setItem('authToken', authToken); // Uloženie tokenu (napríklad v localStorage)
  console.log('Prihlásenie úspešné, token uložený.');
  // Presmerovanie používateľa na chránenú stránku
})
.catch(error => {
  console.error('Chyba autentifikácie:', error);
  // Zobraziť správu o chybe používateľovi
});

// Príklad chráneného požiadavku s použitím uloženého tokenu
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Pridanie tokenu do hlavičky Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token vypršal alebo je neplatný. Preusmerenie na login.');
        // Token je neplatný, vymazať token a preusmeriť na login
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Nepodarilo sa načítať chránený zdroj');
    }
    return response.json();
  })
  .then(data => {
    console.log('Chránené údaje:', data);
  })
  .catch(error => {
    console.error('Chyba pri načítaní chráneného zdroja:', error);
  });
} else {
  console.log('Nenašiel sa žiadny auth token. Preusmerenie na login.');
  // window.location.href = '/login';
}

Dôležité aspekty bezpečnosti:

• Vždy používajte HTTPS na odosielanie údajov a tokenov, aby ste zabránili zachyteniu.
• Bezpečne ukladajte tokeny (vyhýbajte sa ukladaniu citlivých informácií, ako sú heslá alebo tokeny prístupu, priamo v kóde alebo otvorených poliach).
• Pre JWT tokeny: používajte krátky čas platnosti pre tokeny prístupu a aktualizujte ich pomocou tokenov na obnovenie, ktoré sa ukladajú v HttpOnly cookies. Prístupové tokeny môžete ukladať do pamäte alebo localStorage, ale je potrebné zvážiť riziká XSS.
• Validujte všetky údaje na serveri.