Jak probíhá proces ověřování?

A uživatelský autentizační proces v frontendové aplikaci obvykle sestává z následujících kroků:

1. Žádost o přihlašovací údaje: Uživatel zadá své uživatelské jméno a heslo do formuláře na webu nebo v aplikaci.
2. Odeslání dat na server: Frontend odešle tyto údaje na server (backend) pomocí HTTP požadavku (obvykle POST) na speciální autentizační endpoint. Data mohou být odeslána v těle požadavku ve formátu JSON nebo FormData.
3. Kontrola dat na serveru: Backend obdrží data, zkontroluje je v databázi (například, zda uživatelské jméno existuje a zda hash zadaného hesla odpovídá uloženému hash).
4. Generování tokenu/session: Pokud jsou údaje správné, server vygeneruje unikátní autentizační token. Může to být:
   • Session ID: Server vytvoří relaci a spojí ji s uživatelem, a pošle klientovi identifikátor relace (například v HttpOnly cookie).
   • Token (například JWT): Server vygeneruje token obsahující informace o uživateli a jeho právech, podepíše ho svým tajným klíčem. Tento token je odeslán klientovi.
5. Odeslání tokenu/session klientovi: Server odpoví frontend, odesláním vygenerovaného autentizačního tokenu.
   • Pokud se používá session ID, obvykle se předává v hlavičce Set-Cookie.
   • Pokud se používá token, může být předán v těle odpovědi (JSON) nebo v hlavičce Authorization (Bearer <token>).
6. Uložení tokenu na klientovi: Frontend obdrží token a uloží ho pro budoucí požadavky.
   • Session ID je obvykle uloženo v cookies v prohlížeči.
   • Token může být uložen v localStorage, sessionStorage nebo cookies (s flagem HttpOnly pro ochranu před XSS). Doporučuje se používat HttpOnly cookies pro přístupové tokeny, protože to snižuje riziko krádeže tokenu přes XSS.
7. Použití tokenu pro chráněné požadavky: Při provádění dalších požadavků na chráněné zdroje (vyžadující autentizaci) frontend odešle uložený token v každém požadavku.
   • Pro relace prohlížeč automaticky odešle odpovídající cookies s session ID.
   • Pro tokeny musí frontend explicitně přidat token do hlavičky Authorization (například Authorization: Bearer <token>).
8. Kontrola tokenu na serveru: Při přijetí každého požadavku na chráněný zdroj server extrahuje token z požadavku a ověřuje jeho pravost (například platnost tokenu, podpis tokenu, přítomnost relace s takovým ID).
9. Autorizace: Pokud je token platný, server určí uživatele spojeného s tímto tokenem a zkontroluje jeho přístupová práva k požadovanému zdroji (to je již proces autorizace, následující po autentizaci).
10. Vykonání požadavku: Pokud je uživatel autentizován a autorizován, server vykoná požadavek a odešle odpověď. Jinak server odešle chybu (například 401 Unauthorized nebo 403 Forbidden).

Schémata autentizace se liší (na základě relací, JWT tokenů, OAuth2, OpenID Connect atd.), ale základní kroky získání a použití tokenu k identifikaci uživatele jsou podobné.

Příklad odeslání dat na server (s použitím fetch API a tokenu):

// Příklad uživatelských dat
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Odeslání dat na server
fetch('/api/login', { // Endpoint autentizace na serveru
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Přihlášení selhalo');
  }
  return response.json(); // Čekáme, že server vrátí JSON s tokenem
})
.then(data => {
  const authToken = data.token; // Získání tokenu z odpovědi
  localStorage.setItem('authToken', authToken); // Uložení tokenu (například v localStorage)
  console.log('Přihlášení úspěšné, token uložen.');
  // Přesměrování uživatele na chráněnou stránku
})
.catch(error => {
  console.error('Chyba autentizace:', error);
  // Zobrazení chybové zprávy uživateli
});

// Příklad chráněného požadavku 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}` // Přidání tokenu do hlavičky Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token vypršel nebo je neplatný. Přesměrování na login.');
        // Token je neplatný, vymazat token a přesměrovat na login
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Nepodařilo se načíst chráněný zdroj');
    }
    return response.json();
  })
  .then(data => {
    console.log('Chráněná data:', data);
  })
  .catch(error => {
    console.error('Chyba při načítání chráněného zdroje:', error);
  });
} else {
  console.log('Není nalezen žádný auth token. Přesměrování na login.');
  // window.location.href = '/login';
}

Důležité bezpečnostní aspekty:

• Vždy používejte HTTPS pro odesílání přihlašovacích údajů a tokenů, aby nedošlo k zachycení.
• Bezpečně ukládejte tokeny (vyhýbejte se ukládání citlivých informací, jako jsou hesla nebo přístupové tokeny, přímo v kódu nebo veřejných polích).
• U JWT tokenů: používejte krátkou dobu platnosti pro přístupové tokeny a aktualizujte je pomocí refresh tokenů, které jsou uloženy v HttpOnly cookie. Přístupové tokeny lze uložit v paměti nebo localStorage, ale je třeba vzít v úvahu rizika XSS.
• Všechna data na serveru validujte.