Come avviene il processo di autenticazione?

Il processo di autenticazione dell'utente in un'app frontend generalmente consiste nei seguenti passaggi:

Richiesta di credenziali: L'utente inserisce nome utente e password in un modulo sul sito o nell'app.
Invio dei dati al server: Il frontend invia questi dati al server (backend) tramite una richiesta HTTP (di solito POST) a un endpoint di autenticazione specifico. I dati possono essere inviati nel corpo della richiesta in formato JSON o FormData.
Verifica sul server: Il backend riceve i dati, verifica se sono presenti nel suo database (ad esempio, se il nome utente corrisponde a un utente esistente e se l'hash della password inserita corrisponde all'hash memorizzato).
Generazione di token/sessione: Se le credenziali sono corrette, il server genera un token di autenticazione unico. Questo può essere:
- ID di sessione: Il server crea una sessione e la associa all'utente, inviando al client un identificatore di sessione (ad esempio, in un cookie con il flag HttpOnly).
- Token (ad esempio, JWT): Il server genera un token contenente informazioni sull'utente e i suoi permessi, firmandolo con la sua chiave segreta. Questo token viene inviato al client.
Invio del token/sessione al client: Il server risponde al frontend inviando il token di autenticazione generato.
- Se si utilizza un ID di sessione, di solito viene trasmesso nell'intestazione HTTP Set-Cookie.
- Se si utilizza un token, può essere inviato nel corpo della risposta (JSON) o nell'intestazione Authorization (ad esempio, Bearer <token>).
Salvataggio del token sul client: Il frontend riceve il token e lo memorizza per le richieste successive.
- L'ID di sessione viene memorizzato automaticamente nei cookie del browser.
- Il token può essere memorizzato in localStorage, sessionStorage o cookie (con il flag HttpOnly per protezione da XSS). È consigliabile usare cookie HttpOnly per i token di accesso, poiché riduce il rischio di furto del token tramite attacchi XSS. Per JWT, può essere memorizzato anche un token di aggiornamento in cookie HttpOnly.
Utilizzo del token per richieste protette: In richieste successive a risorse protette (che richiedono autenticazione), il frontend invia il token salvato in ogni richiesta.
- Per le sessioni, il browser invia automaticamente i cookie corrispondenti con l'ID di sessione.
- Per i token, il frontend deve aggiungere esplicitamente il token nell'intestazione Authorization (ad esempio, Authorization: Bearer <token>).
Verifica del token sul server: Alla ricezione di ogni richiesta a una risorsa protetta, il server estrae il token dalla richiesta e verifica la sua validità (ad esempio, la scadenza del token, la firma del token, la presenza di una sessione con quell'ID).
Autorizzazione: Se il token è valido, il server determina quale utente è associato a quel token e verifica i suoi permessi di accesso alla risorsa richiesta (questo è un processo di autorizzazione, successivo all'autenticazione).
Esecuzione della richiesta: Se l'utente è autenticato e autorizzato, il server esegue la richiesta e invia la risposta. In caso contrario, invia un errore (ad esempio, 401 Unauthorized o 403 Forbidden).

Gli schemi di autenticazione variano (basati su sessioni, token JWT, OAuth2, OpenID Connect, ecc.), ma i passaggi di base per ottenere e usare un token per identificare l'utente sono simili.

Esempio di invio dati al server (usando fetch API e token):

// Dati utente
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Invio dati al server
fetch('/api/login', { // Endpoint di autenticazione sul server
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Login fallito');
  }
  return response.json(); // Si aspetta che il server ritorni JSON con il token
})
.then(data => {
  const authToken = data.token; // Ottieni il token dalla risposta del server
  localStorage.setItem('authToken', authToken); // Salva il token (ad esempio, in localStorage)
  console.log('Login riuscito, token salvato.');
  // Reindirizza l'utente alla pagina protetta
})
.catch(error => {
  console.error('Errore di autenticazione:', error);
  // Mostra messaggio di errore all'utente
});

// Esempio di richiesta protetta con il token salvato
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Aggiungi il token nell'intestazione Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token scaduto o non valido. Reindirizzando al login.');
        // Il token non è valido, rimuovilo e reindirizza al login
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Impossibile recuperare la risorsa protetta');
    }
    return response.json();
  })
  .then(data => {
    console.log('Dati protetti:', data);
  })
  .catch(error => {
    console.error('Errore nel recupero della risorsa protetta:', error);
  });
} else {
  console.log('Nessun token di autenticazione trovato. Reindirizzando al login.');
  // window.location.href = '/login';
}

Aspetti importanti per la sicurezza:

Usa sempre HTTPS per inviare credenziali e token, per prevenire intercettazioni.
Conserva i token in modo sicuro (evita di memorizzare informazioni sensibili come password o token di accesso nel codice o in campi pubblici).
Per i token JWT: usa una durata breve per i token di accesso e aggiorna con token di refresh, che possono essere memorizzati in cookie HttpOnly. I token di accesso possono essere memorizzati in memoria o in localStorage, considerando i rischi di XSS.
Valida tutti i dati sul server.