Accentsconagua

Angular Autentificare Cu JWT

Cod
Share

Securitatea este o parte importantă a fiecărei aplicații web, iar distribuitorii trebuie să se asigure că proiectează aplicații cu autentificare sigură. În acest tutorial, veți învăța cum să implementați autentificarea bazată pe JWT în aplicațiile Angular cu ajutorul unui server Express Express.

Codul complet poate fi găsit în repo GitHub. Aplicația pe care o vom construi va arăta astfel: 

Conceptul de JSON Web Tokens

Un JSON Web Token (JWT) este în esență un obiect reprezentat de trei șiruri care sunt folosite pentru transmiterea informațiilor despre utilizator. Cele trei șiruri, care sunt separate prin puncte, sunt:

  • antet
  • încărcătură utilă
  • semnătură

Când un utilizator se conectează la orice pagină web cu numele de utilizator și parola, serverul de autentificare creează și trimite înapoi un JWT. Acest JWT este apoi trecut împreună cu apelurile API ulterioare către server. JWT rămâne valabilă numai dacă expiră sau utilizatorul nu se află în afara aplicației.

Acest proces poate fi ilustrat în diagrama de mai jos.

Cookie-urile vs. stocarea locală

Vom utiliza spațiul de stocare local pentru a stoca jetoanele. Depozitarea locală este un mijloc prin care datele sunt stocate local și pot fi eliminate numai prin JavaScript sau prin ștergerea memoriei cache din browser. Datele stocate în memoria locală pot persista foarte mult timp. Cookie-urile, pe de altă parte, sunt mesaje care sunt trimise de la server către browser și oferă doar spațiu de stocare limitat.

Construirea serverului Express

Vom începe prin construirea unui server back-end care va cuprinde următoarele obiective:

  • POST /Logare
  • POST /profil

Să începem prin crearea unui director pentru aplicația Express și apoi executați comanda npm init pentru a configura fișierele necesare pentru proiect.

Server server mkdir server cpm npm init

Apoi, creați un fișier server.js și instalați modulele: expres, jsonwebtoken, CORS, și bodyParser.

atingeți server.js npm instalare expres jsonwebtoken cors bodyParser -save

Acum deschis server.js și începeți prin importul modulelor.

// server.js const cors = cere ('cors'); const bodyParser = necesită ('body-parser'); const jwt = necesită ('jsonwebtoken'); const expres = necesită ("expres");

Apoi creați o aplicație Express și definiți cheia secretă care va fi utilizată pentru a codifica și decoda detaliile utilizatorului.

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

Nu vom folosi o bază de date pentru acest exemplu. Cu toate acestea, conceptele ar fi similare dacă ați construit un server adecvat bazate pe baze de date.  

Pentru exemplul nostru, vom folosi o variabilă pentru a defini un utilizator de test așa cum se arată mai jos.

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

Ultimul pas este de a crea rute pentru autentificarea utilizatorului.

app.post ('/ api / autentify', (req, res) => if (req.body) var user = req.body; console.log (user) if (testUser.email === req.body (user_logo: user, token: token); altceva (de exemplu, token res.status (403) .send (errorMessage: 'Solicitarea autorizației!'); altceva res.status (403) .send (errorMessage: ;

Să defalcăm codul rutei de mai sus. 

Mai întâi verificăm dacă există date în corpul solicitării. Dacă nu se găsesc date, solicităm utilizatorului să introducă date. Cu ocazia faptului că utilizatorul a furnizat datele corecte, îl comparăm cu datele din testuser și, dacă se potrivește, folosim ID-ul utilizatorului pentru a genera un token unic și a trimite răspunsul înapoi utilizatorului.

În cele din urmă, vom crea un punct final pentru rularea aplicației.

app.listen (5000, () => console.log ("Serverul pornit pe portul 5000"));

Back-end-ul nostru este acum complet și îl puteți testa cu Postmansau CURL și să vedeți tipul de date care vor fi returnate utilizatorului.

Construiți o aplicație unghiulară

Aplicația noastră Angulară va cuprinde următoarele pagini:

  • Acasă-Această pagină va conține linkuri către paginile de conectare și de profil.
  • Login-În această pagină, un utilizator va introduce e-mailul și parola, care vor fi trimise la server pentru autentificare. Dacă acreditările sunt corecte, atunci se va returna un jeton JWT și utilizatorul va fi redirecționat către pagina de profil.
  • Profil-Aceasta este o pagină protejată care poate fi accesată numai de un utilizator cu un jeton valid.

Creați o aplicație Angular și creați Logare și Profil componentele prezentate mai jos:

ng nou angular6jwt cd angular6jwt ng g component Conectare ng g component component

Apoi, adăugați codul pentru pagina de pornire din app.component.html.

 
 
     
  • Acasă 
    •  
  • Profil 
    •  
  •  Logare 
    •  
  •  Deconectare
    •  
 
 
 Angular 6 Autentificare cu JWT Tutorial

Apoi, importați RouterModule și definiți rutele în app.module.ts.

import RouterModule de la '@ unghiular / router'; @NgModule (declarații: [AppComponent, LoginComponent, ProfileComponent], import: [BrowserModule, RouterModule, FormsModule, RouterModule.forRoot ( login ", component: LoginComponent, path: 'profile', component: ProfileComponent]), furnizori: [], bootstrap: [AppComponent]) clasa de export AppModule

Creați pagina de conectare

Pagina de conectare va conține două câmpuri de introducere pentru e-mail și parolă și un buton de trimitere după cum se arată mai jos:

Logare

Creați o pagină de profil

Pagina de profil va fi doar un mesaj simplu, după cum se arată mai jos:

 Dacă puteți vedea această pagină, sunteți conectat (ă)!

 Auth Cu JWT în unghiular

Vom începe prin crearea unui Auth Serviciu care va facilita validarea intrării de utilizator și comunicarea cu serverul.

// Creați un serviciu de autentificare numit Auth ng g service Auth

Acest lucru creează două fișiere, dar vom fi în principal interesați de auth.service.ts fișier în care vom scrie tot codul care interacționează cu serverul. Vom începe prin definirea API-ului REST și a jetonului după cum se arată mai jos:

clasa de export AuthService api = 'http: // localhost: 3000 / api'; jeton;

Apoi, vom scrie codul care execută o cerere POST pe server cu acreditările utilizatorului. Aici, facem o cerere către API - dacă reușim să stocăm jetonul localStorage și redirecționați utilizatorul la pagina de profil.

import Injectable de la '@ angular / core'; import HttpClientModule, HttpClient de la '@ angular / common / http'; import Router de la '@ unghiular / router'; @Injectable (providedIn: 'root') clasa de export AuthService uri = 'http: // localhost: 5000 / api'; jeton; constructor (privat http: HttpClient, router privat: Router)  login (email: șir, parolă: șir) this.http.post (this.uri + '/ authenticate', email: email; .subscribe ((resp: any) => this.router.navigate (['profil']); localStorage.setItem ('auth_token', resp.token);));

De asemenea, definim funcțiile de conectare și deconectare după cum se arată mai jos.

logout () localStorage.removeItem ("token");  public get logIn (): boolean retur (localStorage.getItem ('token')! == null);
  • logout-șterge jetonul din spațiul de stocare local
  • Logare-returnează o proprietate booleană care determină dacă un utilizator este autentificat

Apoi, actualizăm Logare proprietate pe pagina de pornire, după cum se arată.

     
  • Acasă 
    •  
  • Profil 
    •  
  •  Logare 
    •  
  •  Deconectare 
    •

Răspunsul la evenimentele utilizatorilor

Acum, când am terminat cu codul care interacționează cu serverul, vom trece la manipularea evenimentelor generate de utilizatori pentru front-end.

Vom scrie funcția care va asculta pentru evenimentele de clic din pagina de conectare și apoi va transmite valorile la AuthService pentru a autentifica utilizatorul. Actualizați-vă login.component.ts fișierul să arate astfel:

import Component, OnInit de la '@ angular / core'; import Router, ActivatedRoute de la '@ unghiular / router'; import AuthService de la "... / auth.service"; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']) clasa de export LoginComponent implementează OnInit email = "; = "; constructor (privat authService: AuthService)  Conectare () console.log ("vă logați") this.authService.login (this.email, this.password) ngOnInit ()

Acum, dacă alergi ng servi și navigați la http: // localhost: 4200, puteți testa aplicația.

ng servi

Faceți clic pe linkul de autentificare și furnizați acreditările utilizatorului - rețineți că acreditările valide sunt definite în aplicația Express. Acum, când faceți clic pe butonul de conectare, veți fi redirecționat către pagina de profil. 

Concluzie

În acest tutorial, ați învățat cum să începeți autentificarea JWT în Angular. Acum puteți autentifica și autoriza cu JWT în aplicațiile dvs. Angulare. Există multe aspecte ale JWT care nu au fost acoperite în acest tutorial - vedeți dacă puteți explora unele dintre ele pe cont propriu!

Rețineți că acest tutorial a fost scris pentru Angular 6, dar aceleași concepte ar trebui să funcționeze cu Angular 2 sau Angular 4.

Cod
×