Accentsconagua

Hoekverificatie met JWT

Code
Share

Beveiliging is een belangrijk onderdeel van elke web-app en ontwikkelaars moeten ervoor zorgen dat ze apps ontwerpen met veilige authenticatie. In deze tutorial leert u hoe u JWT-gebaseerde authenticatie in Angular-apps kunt implementeren met behulp van een eenvoudige Express-server.

De volledige code is te vinden in onze GitHub-repo. De app die we gaan bouwen ziet er als volgt uit: 

Het concept van JSON Web Tokens

Een JSON Web Token (JWT) is in feite een object dat wordt vertegenwoordigd door drie strings die worden gebruikt om gebruikersinformatie te verzenden. De drie strings, die worden gescheiden door punten, zijn:

  • hoofd
  • payload
  • handtekening

Wanneer een gebruiker met zijn gebruikersnaam en wachtwoord inlogt op een webpagina, maakt de authenticeringsserver gewoonlijk een JWT aan en verzendt deze. Deze JWT wordt vervolgens doorgegeven met daaropvolgende API-aanroepen naar de server. De JWT blijft geldig, tenzij deze vervalt of de gebruiker uitlogt.

Dit proces kan in het onderstaande schema worden geïllustreerd.

Cookies versus lokale opslag

We zullen lokale opslag gebruiken om tokens op te slaan. Lokale opslag is een middel waarmee gegevens lokaal worden opgeslagen en kunnen alleen worden verwijderd via JavaScript of door de cache in de browser te wissen. Gegevens die zijn opgeslagen in lokale opslag kunnen zeer lang blijven bestaan. Cookies zijn echter berichten die van de server naar de browser worden verzonden en die slechts een beperkte opslagruimte bieden.

De Express Server bouwen

We beginnen met het bouwen van een back-end-server met de volgende eindpunten:

  • POST /Log in
  • POST /profiel

Laten we beginnen door een map te maken voor de Express-toepassing en vervolgens de opdracht uitvoeren npm init om de vereiste bestanden voor het project in te stellen.

mkdir server cd server npm init

Maak vervolgens een bestand server.js en installeer de modules: uitdrukken, jsonwebtoken, cors, en bodyParser.

druk op server.js npm installeer express jsonwebtoken cors bodyParser -save

Nu open server.js en begin met het importeren van de modules.

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

Maak vervolgens een Express-app en definieer de geheime sleutel die wordt gebruikt om de gebruikersgegevens te coderen en te decoderen.

// CREëER EXPRESS APP const app = express (); app.use (cors ()); app.use (bodyParser.json ()); // DECLARE JWT-secret const JWT_Secret = 'your_secret_key';

We zullen geen database gebruiken voor dit voorbeeld. De concepten zouden echter vergelijkbaar zijn als u een goede door een database ondersteunde server zou bouwen.  

Voor ons voorbeeld gebruiken we gewoon een variabele om een ​​testgebruiker te definiëren, zoals hieronder wordt getoond.

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

De laatste stap is om routes te maken voor authenticatie van de gebruiker.

app.post ('/ api / authenticate', (req, res) => if (req.body) var user = req.body; console.log (user) if (testUser.email === req.body .email && testUser.password === req.body.password) var token = jwt.sign (user, JWT_Secret); res.status (200) .send (signed_user: user, token: token); else res.status (403) .send (errorMessage: 'Autorisatie vereist!'); else res.status (403) .send (errorMessage: 'Geef e-mailadres en wachtwoord op);) ;

Laten we de code voor de bovenstaande route opsplitsen. 

We controleren eerst of er gegevens in de hoofdtekst van het verzoek zijn. Als er geen gegevens worden gevonden, vragen we de gebruiker om wat gegevens in te voeren. Bij gelegenheid dat de gebruiker de juiste gegevens heeft verstrekt, vergelijken we deze met de gegevens van de testuser en als het overeenkomt, gebruiken we het gebruikers-ID om een ​​uniek token te genereren en het antwoord terug te sturen naar de gebruiker.

Ten slotte maken we een eindpunt voor het uitvoeren van de app.

app.listen (5000, () => console.log ('Server gestart op poort 5000'));

Onze back-end is nu voltooid en u kunt deze testen met Postmanof CURL en zie het soort gegevens dat aan de gebruiker wordt geretourneerd.

Bouw een hoekapplicatie

Onze Angular applicatie zal de volgende pagina's bevatten:

  • Home-Deze pagina bevat links naar de login- en profielpagina's.
  • Inloggen - Op deze pagina voert een gebruiker zijn e-mailadres en wachtwoord in, die ter verificatie naar de server worden verzonden. Als de inloggegevens correct zijn, wordt een JWT-token teruggestuurd en wordt de gebruiker doorgestuurd naar de profielpagina.
  • Profiel: dit is een beveiligde pagina die alleen toegankelijk is voor een gebruiker met een geldig token.

Maak een Angular-applicatie en maak de Log in en Profiel componenten zoals hieronder getoond:

ng nieuwe angular6jwt cd angular6jwt ng g component Aanmelden ng g component Profiel

Voeg vervolgens de code voor de startpagina toe app.component.html.

 
 
     
  • Huis 
    •  
  • Profiel 
    •  
  •  Log in 
    •  
  •  Uitloggen
    •  
 
 
 Hoek 6 verificatie met JWT-zelfstudie

Importeer vervolgens de Routermodule en definieer de routes in app.module.ts.

importeer RouterModule van '@ angular / router'; @ NgModule (aangiften: [AppComponent, LoginComponent, ProfileComponent], import: [BrowserModule, RouterModule, FormsModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'full', path: ' login ', component: LoginComponent, pad:' profile ', component: ProfileComponent]),], providers: [], bootstrap: [AppComponent]) exportklasse AppModule

Aanmeldingspagina maken

De aanmeldingspagina bevat twee invoervelden voor e-mail en wachtwoord en een verzendknop zoals hieronder weergegeven:

Log in

Profielpagina maken

De profielpagina zal slechts een eenvoudig bericht zijn zoals hieronder getoond:

 Als u deze pagina kunt zien, bent u ingelogd!

 Auth met JWT in Angular

We beginnen met het maken van een Auth Dienst die de validatie van gebruikersinvoer en communicatie met de server zal vergemakkelijken.

// Verificatieservice maken met de naam Auth ng g-service Auth

Dit creëert twee bestanden, maar we zullen vooral geïnteresseerd zijn in de auth.service.ts bestand waar we alle code schrijven die met de server communiceert. We beginnen met het definiëren van de REST API en het token zoals hieronder getoond:

exportklasse AuthService api = 'http: // localhost: 3000 / api'; token;

Vervolgens zullen we de code schrijven die een POST-aanvraag uitvoert naar de server met de gebruikersreferenties. Hier doen we een verzoek aan de API. Als het lukt, slaan we het token op lokale opslag en stuur de gebruiker door naar de profielpagina.

Injectable importeren vanuit '@ angular / core'; importeer HttpClientModule, HttpClient van '@ angular / common / http'; importeer Router van '@ angular / router'; @Injectable (providedIn: 'root') exportklasse AuthService uri = 'http: // localhost: 5000 / api'; token; constructor (privé http: HttpClient, privé-router: Router)  login (email: string, wachtwoord: string) this.http.post (this.uri + '/ authenticate', email: email, password: password) .subscribe ((resp: any) => this.router.navigate (['profile']); localStorage.setItem ('auth_token', resp.token);));

We definiëren ook inlog- en uitlogfuncties zoals hieronder getoond.

uitloggen () localStorage.removeItem ('token');  public get logIn (): boolean return (localStorage.getItem ('token')! == null);
  • uitloggen-wist het token uit de lokale opslag
  • Log in-retourneert een boolean-eigenschap die bepaalt of een gebruiker is geverifieerd

Vervolgens werken we het Log in eigenschap op de startpagina zoals weergegeven.

     
  • Huis 
    •  
  • Profiel 
    •  
  •  Log in 
    •  
  •  Uitloggen 
    •

Reageren op gebruikersgebeurtenissen

Nu we klaar zijn met de code die interactie heeft met de server, gaan we verder met het behandelen van door gebruikers gegenereerde evenementen voor de front-end.

We zullen de functie schrijven die naar klikgebeurtenissen luistert vanaf de inlogpagina en vervolgens de waarden doorgeven aan de AuthService om de gebruiker te authenticeren. Update uw login.component.ts bestand om er zo uit te zien:

importeer Component, OnInit uit '@ angular / core'; import Router, ActivatedRoute van '@ angular / router'; import AuthService van '... /auth.service'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']) export class LoginComponent implementeert OnInit email = "; wachtwoord = "; constructor (private authService: AuthService)  Login () console.log ("u logt in") this.authService.login (this.email, this.password) ngOnInit ()

Nu, als je rent ng serveren en navigeer naar http: // localhost: 4200, je kunt je app testen.

ng serveren

Klik op de aanmeldingslink en geef de gebruikersreferenties op. Onthoud dat de geldige legitimatiegegevens zijn gedefinieerd in de Express-app. Nu, wanneer u op de login-knop klikt, wordt u doorgestuurd naar de profielpagina. 

Conclusie

In deze zelfstudie hebt u geleerd hoe u aan de slag kunt gaan met JWT-verificatie in Angular. Nu kunt u authenticeren en autoriseren met JWT in uw Angular-applicaties. Er zijn veel aspecten van JWT die niet werden behandeld in deze zelfstudie - kijk of je sommige zelf kunt verkennen!

Merk op dat deze tutorial geschreven was voor Angular 6, maar dezelfde concepten zouden moeten werken met Angular 2 of Angular 4.

Code
×