Cum are loc procesul de autentificare?

Procesul de autentificare a utilizatorului într-o aplicație frontend constă în general din următorii pași:

1. Solicitarea datelor de autentificare: Utilizatorul introduce loginul și parola într-un formular pe site sau în aplicație.
2. Trimiterea datelor către server: Frontend trimite aceste date către server (backend) folosind o cerere HTTP (de obicei POST) către un endpoint special de autentificare. Datele pot fi trimise în format JSON sau FormData.
3. Verificarea datelor pe server: Backend primește datele, le verifică în baza sa de date (de exemplu, dacă loginul corespunde unui utilizator existent și dacă hash-ul parolei introduse corespunde cu hash-ul din bază).
4. Generarea tokenului/sesiunii: Dacă datele de autentificare sunt corecte, serverul generează un token de autentificare unic. Acesta poate fi:
   • ID de sesiune: Serverul creează o sesiune și o leagă de utilizator, trimițând clientului identificatorul sesiunii (de exemplu, într-un cookie HttpOnly).
   • Token (de exemplu, JWT): Serverul generează un token care conține informații despre utilizator și drepturile sale, semnându-l cu o cheie secretă. Acest token este trimis clientului.
5. Trimiterea tokenului/sesiunii către client: Serverul răspunde frontend-ului cu tokenul de autentificare generat.
   • Dacă se folosește ID de sesiune, acesta este de obicei trimis în antetul Set-Cookie.
   • Dacă se folosește token, acesta poate fi trimis în corpul răspunsului (JSON) sau în antetul Authorization (Bearer <token>).
6. Stocarea tokenului pe client: Frontend primește tokenul și îl stochează pentru solicitările ulterioare.
   • ID-ul de sesiune este stocat automat în cookies de către browser.
   • Tokenul poate fi stocat în localStorage, sessionStorage sau cookies (HttpOnly pentru protecție împotriva XSS). Se recomandă utilizarea cookie-urilor HttpOnly pentru tokenurile de acces.
7. Utilizarea tokenului pentru solicitări protejate: La efectuarea solicitărilor ulterioare către resurse protejate (care necesită autentificare), frontend trimite tokenul salvat în fiecare solicitare.
   • Pentru sesiuni, browserul trimite automat cookies corespunzătoare cu ID-ul sesiunii.
   • Pentru tokenuri, frontend trebuie să adauge explicit tokenul în antetul Authorization (Authorization: Bearer <token>).
8. Verificarea tokenului pe server: La primirea fiecărei solicitări către resursa protejată, serverul extrage tokenul din solicitare și îl verifică pentru autenticitate (de exemplu, valabilitatea tokenului, semnătura, existența unei sesiuni cu acel ID).
9. Autorizarea: Dacă tokenul este valid, serverul identifică utilizatorul asociat cu acel token și verifică drepturile sale de acces la resursa solicitată (aceasta fiind deja procesul de autorizare, după autentificare).
10. Executarea solicitării: Dacă utilizatorul este autentificat și autorizat, serverul execută solicitarea și trimite răspunsul. În caz contrar, serverul trimite o eroare (401 Unauthorized sau 403 Forbidden).

Schemele de autentificare pot varia (bazate pe sesiuni, tokenuri JWT, OAuth2, OpenID Connect etc.), dar pașii de bază pentru obținerea și utilizarea unui token pentru identificarea utilizatorului rămân similari.

Exemplu de trimitere a datelor către server cu fetch API și token:

// Datele utilizatorului
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Trimiterea datelor către server
fetch('/api/login', { // Endpoint de autentificare
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Autentificare eșuată');
  }
  return response.json(); // Așteptăm JSON cu token
})
.then(data => {
  const authToken = data.token; // Obținem tokenul din răspuns
  localStorage.setItem('authToken', authToken); // Salvăm tokenul
  console.log('Autentificare reușită, token salvat.');
  // Redirecționăm utilizatorul către pagina protejată
})
.catch(error => {
  console.error('Eroare de autentificare:', error);
  // Afișăm mesaj de eroare utilizatorului
});

// Solicitare protejată cu tokenul salvat
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Adăugăm tokenul în antet
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token expirat sau invalid. Redirecționare la login.');
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Eșec la preluarea resursei protejate');
    }
    return response.json();
  })
  .then(data => {
    console.log('Date protejate:', data);
  })
  .catch(error => {
    console.error('Eroare la preluarea resursei protejate:', error);
  });
} else {
  console.log('Token de autentificare lipsă. Redirecționare la login.');
  // window.location.href = '/login';
}

Aspecte importante de securitate:

• Folosiți întotdeauna HTTPS.
• Păstrați tokenurile în siguranță.
• Utilizați tokenuri cu durată scurtă și reîmprospătați-le cu tokenuri de reîmprospătare stocate în cookie-uri HttpOnly.
• Validați toate datele pe server.