Autenticazione angolare con JWT

La sicurezza è una parte importante di ogni app Web e gli sviluppatori devono assicurarsi di progettare app con autenticazione sicura. In questo tutorial, imparerai come implementare l'autenticazione basata su JWT in app Angolari con l'aiuto di un semplice server Express.

Il codice completo può essere trovato nel nostro repository GitHub. L'app che costruiremo sarà simile a questa: 

Il concetto di token Web JSON

Un JSON Web Token (JWT) è fondamentalmente un oggetto rappresentato da tre stringhe che vengono utilizzate per trasmettere le informazioni dell'utente. Le tre stringhe, separate da punti, sono:

• intestazione
• carico utile
• firma

Quando un utente accede a qualsiasi pagina Web con il proprio nome utente e password, il server di autenticazione di solito crea e invia un JWT. Questo JWT viene quindi passato insieme alle successive chiamate API al server. Il JWT rimane valido fino a quando non scade o l'utente si disconnette dall'applicazione.

Questo processo può essere illustrato nello schema seguente.

Cookie contro archiviazione locale

Useremo la memoria locale per archiviare i token. L'archiviazione locale è un mezzo tramite il quale i dati vengono archiviati localmente e possono essere rimossi solo tramite JavaScript o cancellando la cache nel browser. I dati memorizzati nella memoria locale possono persistere per un tempo molto lungo. I cookie, d'altra parte, sono messaggi che vengono inviati dal server al browser e offrono solo spazio di archiviazione limitato.

Costruire il server Express

Inizieremo creando un server back-end che includa i seguenti endpoint:

• INVIARE /accesso
  
• INVIARE /profilo
  

Iniziamo creando una directory per l'applicazione Express e quindi eseguendo il comando npm init per impostare i file richiesti per il progetto.

mkdir server cd server npm init

Quindi, crea un file server.js e installare i moduli: esprimere, jsonwebtoken, cors, e bodyParser.

touch server.js npm installa express jsonwebtoken cors bodyParser -save

Ora aperto server.js e inizia importando i moduli.

// server.js const cors = require ('cors'); const bodyParser = require ('body-parser'); const jwt = require ('jsonwebtoken'); const express = require ('express'); 

Quindi crea un'app Express e definisci la chiave segreta che verrà utilizzata per codificare e decodificare i dettagli dell'utente.

// CREATE EXPRESS APP const app = express (); app.use (CORS ()); app.use (bodyParser.json ()); // DECLARE JWT-secret const JWT_Secret = 'your_secret_key';

Non utilizzeremo un database per questo esempio. Tuttavia, i concetti sarebbero simili se si stesse costruendo un server supportato da database appropriato.  

Per il nostro esempio, utilizzeremo semplicemente una variabile per definire un utente di prova come mostrato di seguito.

var testUser = email: '[email protected]', password: '1234'; 

Il passo finale è creare percorsi per autenticare l'utente.

app.post ('/ api / authenticate', (req, res) => if (req.body) var user = req.body; console.log (utente) if (testUser.email === req.body .email && testUser.password === req.body.password) var token = jwt.sign (utente, JWT_Secret); res.status (200) .send (signed_user: user, token: token); else res.status (403) .send (errorMessage: 'Autorizzazione richiesta!'); else res.status (403) .send (errorMessage: 'Fornire e-mail e password');) ;

Analizziamo il codice per la rotta sopra. 

Per prima cosa controlliamo se ci sono dati nel corpo della richiesta. Se non vengono trovati dati, chiediamo all'utente di inserire alcuni dati. Nell'occasione che l'utente ha fornito i dati corretti, li confrontiamo con i dati del UtenteDiProva e, se corrisponde, usiamo l'id utente per generare un token univoco e rimandare la risposta all'utente.

Infine, creiamo un endpoint per l'esecuzione dell'app.

app.listen (5000, () => console.log ('Server avviato su porta 5000')); 

Il nostro back-end è ora completo e puoi testarlo con Postmano CURL e vedere il tipo di dati che verranno restituiti all'utente.

Costruisci un'applicazione angolare

La nostra applicazione Angular presenterà le seguenti pagine:

• Home: questa pagina conterrà collegamenti alle pagine di accesso e di profilo.
• Login-In questa pagina, un utente inserirà la propria email e password, che verrà inviata al server per l'autenticazione. Se le credenziali sono corrette, verrà restituito un token JWT e l'utente verrà reindirizzato alla pagina del profilo.
• Profilo: questa è una pagina protetta a cui è possibile accedere solo da un utente con un token valido.

Creare un'applicazione angolare e creare il Accesso e Profilo componenti come mostrato di seguito:

nuovo componente angular6jwt cd angular6jwt ng g Login ng g componente Profile

Successivamente, aggiungi il codice per la pagina iniziale in app.component.html.

 
 
 
Casa 
 
Profilo 
 
 Accesso 
 
 Disconnettersi
 
 
 
 Autenticazione angolare 6 con tutorial JWT 
 
  

Quindi, importa il RouterModule e definire i percorsi in app.module.ts.

importare RouterModule da '@ angular / router'; @NgModule (dichiarazioni: [AppComponent, LoginComponent, ProfileComponent], importa: [BrowserModule, RouterModule, FormsModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'full', percorso: ' login ', componente: LoginComponent, percorso:' profilo ', componente: ProfileComponent]),] provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule  

Crea pagina di accesso

La pagina di accesso conterrà due campi di input per email e password e un pulsante di invio come mostrato di seguito:

Accesso
 
 
 E-mail  
 
 Parola d'ordine  
 
 Accesso 
 
 

Crea pagina profilo

La pagina del profilo sarà semplicemente un messaggio come mostrato di seguito:

 Se riesci a vedere questa pagina, sei loggato! 
 

 Auth con JWT in angolare

Inizieremo creando un auth Servizio che faciliterà la convalida dell'input dell'utente e della comunicazione con il server.

// Crea un servizio di autenticazione denominato Auth ng g service Auth

Questo crea due file, ma saremo interessati principalmente al auth.service.ts file in cui scriveremo tutto il codice che interagisce con il server. Inizieremo definendo l'API REST e il token come mostrato di seguito:

export class AuthService api = 'http: // localhost: 3000 / api'; gettone; 

Successivamente, scriveremo il codice che esegue una richiesta POST al server con le credenziali dell'utente. Qui, facciamo una richiesta all'API: se ha successo, memorizziamo il token memoria locale e reindirizzare l'utente alla pagina del profilo.

import Injectable da '@ angular / core'; import HttpClientModule, HttpClient da '@ angular / common / http'; importare Router da '@ angular / router'; @Injectable (providedIn: 'root') export class AuthService uri = 'http: // localhost: 5000 / api'; gettone; costruttore (http: HttpClient, router privato: router)  login (email: string, password: string) this.http.post (this.uri + '/ authenticate', email: email, password: password) .subscribe ((resp: any) => this.router.navigate (['profile']); localStorage.setItem ('auth_token', resp.token);));  

Definiamo anche le funzioni di accesso e disconnessione come mostrato di seguito.

logout () localStorage.removeItem ('token');  public get logIn (): boolean return (localStorage.getItem ('token')! == null);  

• disconnettersi-cancella il token dalla memoria locale
• accesso-restituisce una proprietà booleana che determina se un utente è autenticato

Quindi aggiorniamo il accesso proprietà sulla home page come mostrato.

 
Casa 
 
Profilo 
 
 Accesso 
 
 Disconnettersi 
 
 

Risposta agli eventi utente

Ora che abbiamo finito con il codice che interagisce con il server, passeremo alla gestione degli eventi generati dagli utenti per il front-end.

Scriveremo la funzione che ascolterà gli eventi di clic dalla pagina di accesso e quindi passerà i valori a AuthService per autenticare l'utente. Aggiorna il tuo login.component.ts file per assomigliare a questo:

import Component, OnInit da '@ angular / core'; import Router, ActivatedRoute da '@ angular / router'; import AuthService da '... /auth.service'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']) classe di esportazione LoginComponent implementa OnInit email = "; password = "; costruttore (authService privato: AuthService)  Login () console.log ("si sta effettuando l'accesso") this.authService.login (this.email, this.password) ngOnInit () 

Ora se corri ng servire e vai a http: // localhost: 4200, puoi testare la tua app.

ng servire

Fare clic sul collegamento di accesso e fornire le credenziali dell'utente: ricordare che le credenziali valide sono definite nell'app Express. Ora, quando fai clic sul pulsante di accesso, verrai reindirizzato alla pagina del profilo. 

Conclusione

In questo tutorial, hai imparato come iniziare con l'autenticazione JWT in Angular. Ora puoi autenticare e autorizzare con JWT nelle tue applicazioni Angular. Ci sono molti aspetti di JWT che non sono stati trattati in questo tutorial: vedi se puoi esplorarne alcuni da soli!

Nota che questo tutorial è stato scritto per Angular 6, ma gli stessi concetti dovrebbero funzionare con Angular 2 o Angular 4.