Accentsconagua

Vinkelautentisering med JWT

Kode
Share

Sikkerhet er en viktig del av hver webapp, og devs må sørge for at de utformer programmer med sikker autentisering. I denne veiledningen lærer du hvordan du implementerer JWT-basert godkjenning i Angular apps ved hjelp av en enkel Express-server.

Den fulle koden finnes i vår GitHub repo. Appen vi skal bygge vil se slik ut: 

Konceptet med JSON Web-koder

En JSON Web Token (JWT) er i utgangspunktet en gjenstand representert av tre strenger som brukes til å overføre brukerinformasjon. De tre strengene, som er adskilt av prikker, er:

  • Overskrift
  • nyttelast
  • signatur

Når en bruker logger på en hvilken som helst nettside med brukernavn og passord, oppretter autentiseringsserveren vanligvis og sender tilbake en JWT. Denne JWT sendes deretter sammen med påfølgende API-anrop til serveren. JWT forblir gyldig med mindre det utløper eller brukeren logger ut av søknaden.

Denne prosessen kan illustreres i diagrammet nedenfor.

Cookies vs lokal lagring

Vi bruker lokal lagring for å lagre tokens. Lokal lagring er et middel som lagrer data lokalt og kan bare fjernes via JavaScript eller ved å rydde hurtigbufferen i nettleseren. Data lagret i lokal lagring kan vare lenge. Cookies, derimot, er meldinger som sendes fra serveren til nettleseren, og tilbyr kun begrenset lagring.

Bygg Express Server

Vi starter med å bygge en back-end-server som vil inneholde følgende endepunkter:

  • POST /Logg Inn
  • POST /profil

La oss begynne med å lage en katalog for Express-programmet og deretter kjøre kommandoen npm init å sette opp de nødvendige filene for prosjektet.

mkdir server cd server npm init

Deretter oppretter du en fil server.js og installer modulene: uttrykke, jsonwebtoken, kor, og bodyParser.

touch server.js npm installere uttrykk jsonwebtoken cors bodyParser-save

Nå åpen server.js og begynn å importere modulene.

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

Deretter oppretter du en Express-app og definerer den hemmelige nøkkelen som skal brukes til å kode og dekode brukerens detaljer.

// CREATE EXPRESS APP const app = express (); app.use (kor ()); app.use (bodyParser.json ()); // DEFLAR JWT-hemmelig const JWT_Secret = 'your_secret_key';

Vi vil ikke bruke en database for dette eksempelet. Men konseptene vil være liknende hvis du bygger en riktig database-støttet server.  

For vårt eksempel vil vi bare bruke en variabel for å definere en testbruker som vist nedenfor.

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

Det siste trinnet er å lage ruter for å godkjenne brukeren.

app.post ('/ api / authenticate', (req, res) => hvis (req.body) var bruker = req.body; console.log (bruker) hvis (testUser.email === req.body .email && testUser.password === req.body.password) var token = jwt.sign (bruker, JWT_Secret); res.status (200) .send (sign_user: user, token: token); else res.status (403) .send (errorMessage: 'Godkjenning kreves!'); else res.status (403) .send (errorMessage: 'Vennligst oppgi e-post og passord');) ;

La oss bryte ned koden for ruten over. 

Vi kontrollerer først om det er noen data i forespørselen. Hvis det ikke finnes data, ber vi brukeren å legge inn noen data. I tilfelle at brukeren har gitt de riktige dataene, sammenligner vi det med dataene fra testuser og, hvis det samsvarer, bruker vi bruker-ID til å generere et unikt token og sende svaret tilbake til brukeren.

Til slutt lager vi et sluttpunkt for å kjøre appen.

app.listen (5000, () => console.log ('Server startet på port 5000'));

Vår back-end er nå fullført, og du kan teste den med Postmaneller CURL og se hvilken type data som skal returneres til brukeren.

Bygg en vinkelapplikasjon

Vårt vinkelapplikasjon vil inneholde følgende sider:

  • Hjem-Denne siden vil inneholde linker til påloggings- og profilsider.
  • Logg inn - På denne siden vil en bruker skrive inn e-post og passord, som sendes til serveren for godkjenning. Hvis legitimasjonene er riktige, returneres en JWT-token, og brukeren blir omdirigert til profilsiden.
  • Profil-Dette er en beskyttet side som bare kan nås av en bruker med gyldig token.

Opprett en kantet applikasjon og opprett Logg Inn og Profil komponenter som vist nedenfor:

ng ny vinkel6jwt cd vinkel6jwt ng g komponent Logg inn ng g komponent Profil

Deretter legger du til koden for startsiden i app.component.html.

 
 
     
  • Hjem 
    •  
  • Profil 
    •  
  •  Logg Inn 
    •  
  •  Logg ut
    •  
 
 
 Vinkel 6-godkjenning med JWT-opplæring

Deretter importerer du RouterModule og definer ruter i app.module.ts.

importer RouterModule fra '@ vinkel / router'; @NgModule (declarations: [AppComponent, LoginComponent, ProfileComponent], import: [BrowserModule, RouterModule, FormsModule, RouterModule.forRoot ([path: ", omdirigeringTo: '/', pathMatch: 'full', path: ' Logg inn ', komponent: LoginComponent, bane:' profil ', komponent: ProfileComponent])], leverandører: [], bootstrap: [AppComponent]) eksportklasse AppModule

Lag innloggingsside

Påloggingssiden inneholder to innskrivingsfelter for e-post og passord, og en send-knapp som vist nedenfor:

Logg Inn

Opprett profilside

Profilsiden vil bare være en enkel melding som vist nedenfor:

 Hvis du kan se denne siden, er du logget inn!

 Auth Med JWT i kantet

Vi starter med å skape en Auth Service som vil lette validering av brukerinngang og kommunikasjon med serveren.

// Opprett autentiseringstjeneste med navnet Auth ng g service Auth

Dette skaper to filer, men vi vil hovedsakelig være interessert i auth.service.ts fil der vi skal skrive all koden som samhandler med serveren. Vi starter med å definere REST API og token som vist nedenfor:

eksport klasse AuthService api = 'http: // localhost: 3000 / api'; token;

Deretter skriver vi koden som utfører en POST-forespørsel til serveren med brukerens legitimasjon. Her gjør vi en forespørsel til API-en, hvis det lykkes, lagrer vi tokenet i lokal lagring og omdirigere brukeren til profilsiden.

importer Injectable fra '@ vinkel / kjerne'; importer HttpClientModule, HttpClient fra '@ vinkel / vanlig / http'; importer Router fra '@ vinkel / router'; @Injectable (providedIn: 'root') eksportklasse AuthService uri = 'http: // localhost: 5000 / api'; token; Konstruktør (privat http: HttpClient, privat router: Router)  innlogging (email: streng, passord: streng) this.http.post (this.uri + '/ authenticate', email: email, passord: passord) .subscribe ((resp: any) => this.router.navigate (['profil']); localStorage.setItem ('auth_token', resp.token);));

Vi definerer også innloggings- og logoutfunksjoner som vist nedenfor.

logout () localStorage.removeItem ('token');  offentlig få logIn (): boolean return (localStorage.getItem ('token')! == null);
  • Logg ut-fjerner token fra lokal lagring
  • Logg Inn-returnerer en boolsk eiendom som bestemmer om en bruker er autentisert

Vi oppdaterer deretter Logg Inn eiendom på hjemmesiden som vist.

     
  • Hjem 
    •  
  • Profil 
    •  
  •  Logg Inn 
    •  
  •  Logg ut 
    •

Å svare på brukerhendelser

Nå som vi er ferdige med koden som samhandler med serveren, vil vi fortsette å håndtere brukergenererte hendelser for fronten.

Vi vil skrive funksjonen som vil lytte etter klikkhendelser fra påloggingssiden og deretter sende verdiene til AuthService å autentisere brukeren. Oppdater din login.component.ts filen for å se slik ut:

importer Komponent, OnInit fra '@ vinkel / kjerne'; importer Router, ActivatedRoute fra '@ vinkel / router'; importer AuthService fra '... /auth.service'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']) eksportklasse LoginComponent implementerer OnInit email = "; passord = "; konstruktør (privat authService: AuthService)  Logg inn () console.log ("du logger inn") this.authService.login (this.email, this.password) ngOnInit ()

Nå hvis du kjører ng tjene og navigere til http: // localhost: 4200, kan du teste appen din.

ng tjene

Klikk på påloggingslenken og oppgi brukerens legitimasjonsbeskrivelser. Husk, de gyldige legitimasjonene er definert i Express-appen. Nå, når du klikker på påloggingsknappen, blir du omdirigert til profilsiden. 

Konklusjon

I denne opplæringen lærte du hvordan du kom i gang med JWT-godkjenning i Angular. Nå kan du autentisere og autorisere med JWT i dine Angular applikasjoner. Det er mange aspekter ved JWT som ikke var dekket i denne opplæringen - se om du kan utforske noen av dem selv!

Merk at denne opplæringen ble skrevet for Angular 6, men de samme konseptene skal fungere med Angular 2 eller Angular 4.

Kode
×