Autenticazione via token JWT con Angular e Spring Boot: parte 1, Google login con Angular

Nella puntata precedente abbiamo descritto il flusso che abbiamo in mente di implementare per separare il frontend e il backend dell’applicazione su cui lavoro e renderli indipendenti.

Il primo step è far fare l’autenticazione via Google login all’applicazione frontend anziché averla incastrata nel backend.

Per farlo, ci viene in aiuto angularx-social-login, un modulo per Angular 4+ che permette di gestire proprio il login con i provider social, come Facebook e, appunto, Google.

La logica di login la incapsuliamo in un service, che esporrà all’esterno:

• I metodi logine logout, abbastanza autoesplicativi
• Un metodo getAuthorizationToken, che ritorna il token JWT da usare per l’autenticazione di tutte le chiamate all’API
• Un metodo getLoginState, che ritorna un Observablea cui registrarsi per reagire ai cambiamenti di stato del login dell’utente

Il motivio per cui ci serve getLoginState è che i token JWT non sono eterni, ma a un certo punto scadranno e le richieste all’API ritorneranno 401, per cui sarà necessario gestire questo caso refreshando il token o sloggando l’utente.

angularx-social-login stesso, a sua volta, espone una proprietà authState observable, a cui registrarsi per reagire ai cambiamenti di stato del login social: quello che faremo, quindi, è questo:

    this.authService.authState.subscribe((user) => {
      if (user !== null) {
        this.loginToBackend(user.email, user.idToken).subscribe((loggedIn) => {
          this._loginState.next(loggedIn);
        });
      } else {
        this._loginState.next(false);
      }
    });

Quando cambia lo stato di login social, se l’utente è loggato (user !== null) passiamo token ed email al backend e usiamo la risposta per pubblicare un aggiornamento dello stato del login dell’applicazione, altrimenti pubblichiamo un aggiornamento di stato dicendo all’applicazione che l’utente non è loggato.

Il login al backend altro non è che una POST a /authenticate con email e idToken di Google, che ritorna un token JWT; il service lo salverà da qualche parte e lo ritornerà col metodo getAuthorizationToken.

Nel mio caso, il token viene salvato nel sessionStorage; è possibile anche salvarlo in un cookie, e la scelta ha delle implicazioni di sicurezza e implementative non banali che esulano da questa serie di post.

Nella prossima puntata, in compenso, inizieremo a vedere come configurare Spring Boot per gestire l’autenticazione e in seguito vedremo come è implementato il metodo /authenticate.