Vai al contenuto

Login

Login Page

La pagina di login è la prima pagina che l'utente vede quando accede all'applicazione. Viene utilizzata per autenticare l'utente e accedere all'applicazione.

Login Form

Flusso di Login nell'applicazione People FE v2

L'autenticazione degli utenti in People FE v2 avviene tramite Google OAuth (Single Sign-On). L'intero processo di login è orchestrato da un servizio Angular dedicato, che sfrutta i meccanismi offerti da Google per garantire un accesso sicuro e centralizzato.

1. Avvio del Login

  • Alla prima visita, l'utente viene reindirizzato automaticamente alla pagina di login se non autenticato.
  • Sulla pagina di login è presente un pulsante/link che innesca la procedura di autenticazione tramite Google.

2. Integrazione con Google OAuth

  • L'app si integra con Google OAuth: cliccando il pulsante di login, viene avviato il redirect verso la pagina di consenso di Google.
  • Dopo l'autorizzazione, Google redirige nuovamente verso l'app fornendo il token di autenticazione (JWT).

3. Gestione del token

  • Il token ottenuto da Google OAuth viene salvato (tipicamente in localStorage o sessionStorage) dal servizio di autenticazione Angular.
  • L'access token viene allegato automaticamente (tramite HTTP Interceptor) alle chiamate verso le API protette, includendolo nell'header Authorization: Bearer <token>.

4. Stato dell'utente e Safe navigation

  • Lo stato di autenticazione è gestito tramite signals e osservabili (RxJS) nei service Angular, che forniscono informazioni su login, logout e dati dell'utente corrente.
  • In caso di logout (esplicito o per scadenza del token), l'utente viene reindirizzato di nuovo alla pagina di login.

5. Gestione errori e fallback

  • Se il token non è valido o scade, il sistema effettua un logout automatico e richiede una nuova autenticazione.
  • Tutte le chiamate HTTP che ricevono errore di autenticazione forzano l'utente a riloggarsi.

Riferimenti architetturali

  • Il flusso è gestito principalmente nei file sotto src/services/auth.service.ts e negli interceptors di autenticazione.
  • La UI del login è in src/pages/login/ (pagina di login) e utilizza componenti standalone conformi al Design System interno.
  • La configurazione degli endpoint API protetti è in src/utils/endpoints.ts e src/environments/.

Nota: la soluzione implementata evita la gestione manuale delle password, delegando la sicurezza all'infrastruttura Google e riducendo la superficie di rischio.