Angular 6 SPA ile JWT Kimlik Doğrulaması Nasıl Yapılır?

Bugün, JSON web belirteci (JWT) kimlik doğrulamasını Angular 6 (veya üstü) tek sayfalık uygulamanıza (SPA) entegre etmenin ne kadar kolay olduğuna bir göz atacağız. Biraz arka planla başlayalım.

JSON Web Belirteçleri Nedir ve Neden Kullanılır?

Buradaki en kolay ve en özlü cevap, kullanışlı, kompakt ve güvenli olmalarıdır. Bu iddialara ayrıntılı olarak bakalım:

1. Kullanışlı : Giriş yapıldıktan sonra arka uçta kimlik doğrulaması için bir JWT kullanmak, daha sonra göreceğimiz gibi, bir işlev veya alt sınıflama yoluyla kolayca otomatikleştirilebilen bir görev olan bir HTTP başlığının ayarlanmasını gerektirir.
2. Kompakt : Bir belirteç, birkaç başlık alanı ve gerekirse bir yük içeren basit bir base64 kodlu dizedir. Toplam JWT, imzalanmış olsa bile genellikle 200 bayttan azdır.
3. Güvenli : Gerekli olmasa da, JWT'nin harika bir güvenlik özelliği, belirteçlerin RSA genel/özel anahtar çifti şifrelemesi veya paylaşılan bir sır kullanılarak HMAC şifrelemesi kullanılarak imzalanabilmesidir. Bu, bir belirtecin kökenini ve geçerliliğini sağlar.

Tüm bunların özeti, kullanıcıların kimliğini doğrulamak için güvenli ve verimli bir yola sahip olmanız ve ardından herhangi bir veri yapısını ayrıştırmanıza veya kendi şifrelemenizi uygulamanıza gerek kalmadan API uç noktalarınıza yapılan çağrıları doğrulamanızdır.

Uygulama Teorisi

Bu nedenle, biraz arka planla, şimdi bunun gerçek bir uygulamada nasıl çalışacağına dalabiliriz. Bu örnek için, API'mizi barındıran bir Node.js sunucumuz olduğunu ve Angular 6'yı kullanarak bir SPA yapılacaklar listesi geliştirdiğimizi varsayacağım. Bu API yapısıyla da çalışalım:

• /auth → POST (bir JWT'yi doğrulamak ve geri almak için kullanıcı adı ve şifre gönderin)
• /todos → GET (kullanıcı için yapılacaklar listesi öğelerinin bir listesini döndürür)
• /todos/{id} → GET (belirli bir yapılacaklar listesi öğesini döndürür)
• /users → GET (kullanıcıların listesini döndürür)

Bu basit uygulamanın oluşturulmasına kısaca değineceğiz, ancak şimdilik teoride etkileşime odaklanalım. Kullanıcının kullanıcı adını ve şifresini girebileceği basit bir giriş sayfamız var. Form gönderildiğinde, bu bilgileri /auth bitiş noktasına gönderir. Düğüm sunucusu daha sonra kullanıcının kimliğini uygun olan herhangi bir şekilde doğrulayabilir (veritabanı araması, başka bir web hizmetini sorgulama vb.), ancak sonuçta uç noktanın bir JWT döndürmesi gerekir.

Bu örnek için JWT, birkaç ayrılmış talep ve bazı özel talepler içerecektir. Ayrılmış talepler, kimlik doğrulama için yaygın olarak kullanılan JWT tarafından önerilen anahtar/değer çiftleridir, oysa özel talepler yalnızca uygulamamız için geçerli olan anahtar/değer çiftleridir:

Ayrılmış Talepler

• iss : Bu belirteci veren kuruluş. Tipik olarak sunucunun FQDN'si, ancak istemci uygulamasının beklediğini bildiği sürece herhangi bir şey olabilir.
• exp : Bu jetonun sona erme tarihi ve saati. Bu, 01 Ocak 1970 GMT (Unix saati) gece yarısından bu yana saniye cinsindendir.
• nbf : Zaman damgasından önce geçerli değildir. Sık kullanılmaz, ancak geçerlilik penceresi için bir alt sınır verir. exp ile aynı format.

Özel Talepler

• uid : Oturum açmış kullanıcının kullanıcı kimliği.
• role : Oturum açmış kullanıcıya atanan rol.

Bilgilerimiz base64 olarak kodlanacak ve paylaşılan anahtar todo-app-super-shared-secret ile HMAC kullanılarak imzalanacaktır. Aşağıda JWT'nin nasıl göründüğüne bir örnek verilmiştir:

 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ0b2RvYXBpIiwibmJmIjoxNDk4MTE3NjQyLCJleHAiOjE0OTgxMjEyNDIsInVpZCI6MSwicm9sZSI6ImFkbWluIn0.ZDz_1vcIlnZz64nSM28yA1s-4c_iw3Z2ZtP-SgcYRPQ

Geçerli bir oturum açtığımızdan emin olmak, hangi kullanıcının bağlı olduğunu ve hatta kullanıcının hangi role/rollere sahip olduğunu bilmek için ihtiyacımız olan tek şey bu dizedir.

Çoğu kitaplık ve uygulama, bu JWT'yi kolay erişim için localStorage veya sessionStorage depolamaya devam eder, ancak bu yalnızca yaygın bir uygulamadır. Gelecekteki API çağrıları için sağlayabildiğiniz sürece, belirteçle ne yapacağınız size kalmış.

Şimdi, SPA ne zaman korunan API uç noktalarından herhangi birine çağrı yapmak isterse, Authorization HTTP başlığındaki belirteci göndermesi yeterlidir.

 Authorization: Bearer {JWT Token}

Not : Bir kez daha, bu sadece yaygın bir uygulamadır. JWT, kendisini sunucuya göndermek için belirli bir yöntem önermez. Ayrıca URL'ye ekleyebilir veya bir tanımlama bilgisi içinde gönderebilirsiniz.

Sunucu JWT'yi aldığında, kodunu çözebilir, HMAC paylaşılan sırrını kullanarak tutarlılığı sağlayabilir ve exp ve nbf alanlarını kullanarak sona erme tarihini kontrol edebilir. Bu JWT'yi orijinal yayınlayan taraf olduğundan emin olmak için iss alanını da kullanabilir.

Sunucu, belirtecin geçerliliğinden memnun olduğunda, JWT'de depolanan bilgiler kullanılabilir. Örneğin, uid kullanıcı kimliği bize istekte bulunan kullanıcının kimliğini verir. Bu özel örnek için, kullanıcının belirli bir uç noktaya erişip erişemeyeceği konusunda karar vermemizi sağlayan role alanını da ekledik. (Bu bilgilere güvenip güvenmediğiniz veya daha doğrusu bir veritabanı araması yapmak isteyip istemediğiniz, gereken güvenlik düzeyine bağlıdır.)

 function getTodos(jwtString) { var token = JWTDecode(jwtstring); if( Date.now() < token.nbf*1000) { throw new Error('Token not yet valid'); } if( Date.now() > token.exp*1000) { throw new Error('Token has expired'); } if( token.iss != 'todoapi') { throw new Error('Token not issued here'); } var userID = token.uid; var todos = loadUserTodosFromDB(userID); return JSON.stringify(todos); }

Basit Bir Yapılacaklar Uygulaması Oluşturalım

Devam etmek için, Node.js'nin (6.x veya üzeri), npm (3.x veya üzeri) ve angular-cli'nin güncel bir sürümünün kurulu olması gerekir. npm içeren Node.js'yi yüklemeniz gerekiyorsa, lütfen buradaki talimatları izleyin. Daha sonra angular-cli , npm (veya yarn thread) kullanılarak kurulabilir:

 # installation using npm npm install -g @angular/cli # installation using yarn yarn global add @angular/cli

Burada kullanacağımız Angular 6 ortak bilgisinin ayrıntılarına girmeyeceğim, ancak bir sonraki adım için, uygulamanıza JWT kimlik doğrulaması eklemenin basitliğini göstermek için küçük bir yapılacaklar uygulamasını tutmak için bir Github deposu oluşturdum. Basitçe aşağıdakileri kullanarak klonlayın:

 git clone https://github.com/sschocke/angular-jwt-todo.git cd angular-jwt-todo git checkout pre-jwt

git checkout pre-jwt komutu, JWT'nin uygulanmadığı adlandırılmış bir yayına geçer.

İçerisinde server ve client adında iki klasör olmalıdır. Sunucu, temel API'mizi barındıracak bir Düğüm API sunucusudur. İstemci, Angular 6 uygulamamızdır.

Düğüm API Sunucusu

Başlamak için bağımlılıkları yükleyin ve API sunucusunu başlatın.

 cd server # installation using npm npm install # or installation using yarn yarn node app.js

Bu bağlantıları izleyebilmeli ve verilerin bir JSON temsilini alabilmelisiniz. Şimdilik, kimlik doğrulamamız olana kadar, userID=1 için görevleri döndürmek için /todos uç noktasını sabit kodladık:

• http://localhost:4000: Düğüm sunucusunun çalışıp çalışmadığını görmek için test sayfası
• http://localhost:4000/api/users: Sistemdeki kullanıcıların listesini döndürür
• http://localhost:4000/api/todos: userID=1 için görevlerin listesini döndür

Açısal Uygulama

İstemci uygulamasına başlamak için, bağımlılıkları da yüklememiz ve dev sunucusunu başlatmamız gerekiyor.

 cd client # using npm npm install npm start # using yarn yarn yarn start

Not : Hat hızınıza bağlı olarak tüm bağımlılıkların indirilmesi biraz zaman alabilir.

Her şey yolunda gidiyorsa, http://localhost:4200'e giderken şuna benzer bir şey görmelisiniz:

JWT ile Kimlik Doğrulama Ekleme

JWT kimlik doğrulaması için destek eklemek için, bunu kolaylaştıran bazı standart kitaplıklardan yararlanacağız. Elbette, bu kolaylıklardan vazgeçebilir ve her şeyi kendiniz uygulayabilirsiniz, ancak bu, burada konumuzun dışındadır.

Öncelikle client tarafında bir library kuralım. Bir web sitesine bulut tabanlı kimlik doğrulama eklemenize izin veren bir kitaplık olan Auth0 tarafından geliştirilir ve korunur. Kütüphanenin kendisini kullanmak, hizmetlerini kullanmanızı gerektirmez.

 cd client # installation using npm npm install @auth0/angular-jwt # installation using yarn yarn add @auth0/angular-jwt

Birazdan koda geçeceğiz, ama hazır buradayken sunucu tarafını da ayarlayalım. Node'un JSON POST gövdelerini ve JWT'leri anlamasını sağlamak için body-parser , jsonwebtoken ve express-jwt kitaplıklarını kullanacağız.

 cd server # installation using npm npm install body-parser jsonwebtoken express-jwt # installation using yarn yarn add body-parser jsonwebtoken express-jwt

Kimlik Doğrulama için API Uç Noktası

İlk olarak, kullanıcılara bir belirteç vermeden önce kimliklerini doğrulamak için bir yola ihtiyacımız var. Basit demomuz için, sabit kodlanmış bir kullanıcı adı ve şifre ile sabit bir kimlik doğrulama bitiş noktası kuracağız. Bu, uygulamanızın gerektirdiği kadar basit veya karmaşık olabilir. Önemli olan bir JWT'yi geri göndermektir.

server/app.js diğer require satırların altına aşağıdaki gibi bir giriş ekleyin:

 const bodyParser = require('body-parser'); const jwt = require('jsonwebtoken'); const expressJwt = require('express-jwt');

Aşağıdakilerin yanı sıra:

 app.use(bodyParser.json()); app.post('/api/auth', function(req, res) { const body = req.body; const user = USERS.find(user => user.username == body.username); if(!user || body.password != 'todo') return res.sendStatus(401); var token = jwt.sign({userID: user.id}, 'todo-app-super-shared-secret', {expiresIn: '2h'}); res.send({token}); });

Bu çoğunlukla temel JavaScript kodudur. /auth uç noktasına iletilen JSON gövdesini alırız, bu kullanıcı adıyla eşleşen bir kullanıcı buluruz, bir kullanıcımız olup olmadığını ve parolanın eşleştiğini kontrol eder ve değilse bir 401 Unauthorized HTTP hatası döndürürüz.

Önemli kısım jeton üretimidir ve bunu üç parametresine göre ayıracağız. sign sözdizimi şu şekildedir: jwt.sign(payload, secretOrPrivateKey, [options, callback]) , burada:

• payload , simgeniz içinde kodlamak istediğiniz anahtar/değer çiftlerinin nesne değişmezidir. Bu bilgi daha sonra şifre çözme anahtarına sahip herhangi biri tarafından belirteçten çözülebilir. Örneğimizde, user.id kodladık, böylece kimlik doğrulama için arka uçta jetonu tekrar aldığımızda, hangi kullanıcıyla uğraştığımızı biliyoruz.
• secretOrPrivateKey , ya bir HMAC şifreleme paylaşılan gizli anahtarıdır - basitlik için uygulamamızda kullandığımız şey budur - ya da bir RSA/ECDSA şifreleme özel anahtarıdır.
• options , kodlayıcıya anahtar/değer çiftleri biçiminde iletilebilecek çeşitli seçenekleri temsil eder. Tipik olarak, bir belirtecin sonsuza kadar geçerli olmaması ve sunucunun aslında belirteci orijinal olarak yayınlamış olup olmadığını kontrol edebilmesi için en azından expiresIn ( exp ayrılmış talep olur) ve issuer ( iss ayrılmış talep) belirtiriz.
• callback , kodlama yapıldıktan sonra çağrılacak bir işlevdir, simge kodlamayı eşzamansız olarak işlemek isterse.

(Ayrıca options ve paylaşılan bir gizli anahtar yerine genel anahtar şifrelemesinin nasıl kullanılacağı hakkında daha fazla ayrıntı okuyabilirsiniz.)

Açısal 6 JWT Entegrasyonu

Angular 6'nın JWT ile çalışmasını sağlamak, angular-jwt kullanarak oldukça basittir. Aşağıdakileri client/src/app/app.modules.ts :

 import { JwtModule } from '@auth0/angular-jwt'; // ... export function tokenGetter() { return localStorage.getItem('access_token'); } @NgModule({ // ... imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, // Add this import here JwtModule.forRoot({ config: { tokenGetter: tokenGetter, whitelistedDomains: ['localhost:4000'], blacklistedRoutes: ['localhost:4000/api/auth'] } }) ], // ... }

Temelde gerekli olan tek şey budur. Tabii ki, ilk kimlik doğrulamasını yapmak için eklenecek biraz daha kodumuz var, ancak angular-jwt kitaplığı belirteci her HTTP isteğiyle birlikte göndermeyi hallediyor.

• tokenGetter() işlevi tam olarak söylediklerini yapar, ancak nasıl uygulanacağı tamamen size bağlıdır. localStorage içinde kaydettiğimiz belirteci iade etmeyi seçtik. JSON web belirteci kodlu dizeyi döndürdüğü sürece, istediğiniz başka bir yöntemi sağlamakta özgürsünüz.
• whiteListedDomains seçeneği mevcuttur, böylece JWT'nin hangi etki alanlarına gönderileceğini kısıtlayabilirsiniz, böylece genel API'ler JWT'nizi de almaz.
• blackListedRoutes seçeneği, beyaz listeye alınmış bir etki alanında olsalar bile JWT'yi almaması gereken belirli yolları belirtmenize olanak tanır. Örneğin, bir anlamı olmadığı için kimlik doğrulama uç noktasının onu alması gerekmez: Belirteç yine de çağrıldığında genellikle boştur.

Hepsini Birlikte Çalıştırmak

Bu noktada, API'mizdeki /auth bitiş noktasını kullanarak belirli bir kullanıcı için bir JWT oluşturmanın bir yolu var ve her HTTP isteğiyle bir JWT göndermek için Angular'da sıhhi tesisat yaptık. Harika, ancak kullanıcı için kesinlikle hiçbir şeyin değişmediğini belirtebilirsiniz. Ve haklı olurdun. Yine de uygulamamızdaki her sayfaya gidebiliriz ve bir JWT bile göndermeden herhangi bir API uç noktasını çağırabiliriz. İyi değil!

Kimin giriş yaptığı konusunda endişelenmek için istemci uygulamamızı güncellememiz ve ayrıca bir JWT gerektirecek şekilde API'mizi güncellememiz gerekiyor. Başlayalım.

Oturum açmak için yeni bir Angular bileşenine ihtiyacımız olacak. Kısa olması adına, bunu olabildiğince basit tutacağım. Ayrıca, tüm Kimlik Doğrulama gereksinimlerimizi karşılayacak bir hizmete ve oturum açmadan önce erişilmemesi gereken yolları korumak için bir Angular Guard'a ihtiyacımız olacak. İstemci uygulaması bağlamında aşağıdakileri yapacağız.

 cd client ng g component login --spec=false --inline-style ng g service auth --flat --spec=false ng g guard auth --flat --spec=false

Bu, client klasöründe dört yeni dosya oluşturmuş olmalıdır:

 src/app/login/login.component.html src/app/login/login.component.ts src/app/auth.service.ts src/app/auth.guard.ts

Ardından, uygulamamız için kimlik doğrulama hizmeti ve koruma sağlamamız gerekiyor. client/src/app/app.modules.ts :

 import { AuthService } from './auth.service'; import { AuthGuard } from './auth.guard'; // ... providers: [ TodoService, UserService, AuthService, AuthGuard ],

Ardından, kimlik doğrulama korumasını kullanmak ve oturum açma bileşeni için bir yol sağlamak üzere client/src/app/app-routing.modules.ts içindeki yönlendirmeyi güncelleyin.

 // ... import { LoginComponent } from './login/login.component'; import { AuthGuard } from './auth.guard'; const routes: Routes = [ { path: 'todos', component: TodoListComponent, canActivate: [AuthGuard] }, { path: 'users', component: UserListComponent, canActivate: [AuthGuard] }, { path: 'login', component: LoginComponent}, // ...

Son olarak, client/src/app/auth.guard.ts aşağıdaki içeriklerle güncelleyin:

 import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router) { } canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (localStorage.getItem('access_token')) { return true; } this.router.navigate(['login']); return false; } }

Demo uygulamamız için, yerel depolamada bir JWT'nin varlığını kontrol ediyoruz. Gerçek dünya uygulamalarında, belirtecin kodunu çözer ve geçerliliğini, sona erme tarihini vb. kontrol ederdiniz. Örneğin, bunun için JwtHelperService'i kullanabilirsiniz.

Bu noktada, Angular uygulamamız artık oturum açmamızın bir yolu olmadığı için sizi her zaman oturum açma sayfasına yönlendirecektir. Bunu, client/src/app/auth.service.ts içindeki kimlik doğrulama hizmetinden başlayarak düzeltelim:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable() export class AuthService { constructor(private http: HttpClient) { } login(username: string, password: string): Observable<boolean> { return this.http.post<{token: string}>('/api/auth', {username: username, password: password}) .pipe( map(result => { localStorage.setItem('access_token', result.token); return true; }) ); } logout() { localStorage.removeItem('access_token'); } public get loggedIn(): boolean { return (localStorage.getItem('access_token') !== null); } }

Kimlik doğrulama hizmetimizin yalnızca iki işlevi vardır, login ve logout :

• login POST , arka ucumuz için sağlanan username ve password ve bir geri alırsa localStorage access_token ayarlar. Basitlik adına, burada hata işleme yoktur.
• logout , access_token localStorage öğesinden temizler ve başka bir şeye yeniden erişilebilmesi için yeni bir belirtecin alınmasını gerektirir.
• loggedIn , kullanıcının oturum açıp açmadığını hızlı bir şekilde belirlemek için kullanabileceğimiz bir boole özelliğidir.

Ve son olarak, oturum açma bileşeni. Bunların JWT ile gerçekten çalışmakla hiçbir ilgisi yoktur, bu nedenle client/src/app/login/login.components.html içine kopyalayıp yapıştırmaktan çekinmeyin:

 <h4 *ngIf="error">{{error}}</h4> <form (ngSubmit)="submit()"> <div class="form-group col-3"> <label for="username">Username</label> <input type="text" name="username" class="form-control" [(ngModel)]="username" /> </div> <div class="form-group col-3"> <label for="password">Password</label> <input type="password" name="password" class="form-control" [(ngModel)]="password" /> </div> <div class="form-group col-3"> <button class="btn btn-primary" type="submit">Login</button> </div> </form>

Ve client/src/app/login/login.components.ts şunlara ihtiyacı olacaktır:

 import { Component, OnInit } from '@angular/core'; import { AuthService } from '../auth.service'; import { Router } from '@angular/router'; import { first } from 'rxjs/operators'; @Component({ selector: 'app-login', templateUrl: './login.component.html' }) export class LoginComponent { public username: string; public password: string; public error: string; constructor(private auth: AuthService, private router: Router) { } public submit() { this.auth.login(this.username, this.password) .pipe(first()) .subscribe( result => this.router.navigate(['todos']), err => this.error = 'Could not authenticate' ); } }

Voila, Angular 6 giriş örneğimiz:

Bu aşamada todo şifresi ile jemma , paul veya sebastian kullanarak giriş yapabilmeli ve tüm ekranları tekrar görebilmeliyiz. Ancak uygulamamız aynı gezinme başlıklarını gösteriyor ve mevcut durumdan bağımsız olarak oturumu kapatmanın bir yolu yok. API'mizi düzeltmeye geçmeden önce bunu düzeltelim.

client/src/app/app.component.ts içinde, tüm dosyayı aşağıdakiyle değiştirin:

 import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { AuthService } from './auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private auth: AuthService, private router: Router) { } logout() { this.auth.logout(); this.router.navigate(['login']); } }

Ve client/src/app/app.component.html için <nav> bölümünü aşağıdakiyle değiştirin:

 <nav class="nav nav-pills"> <a class="nav-link" routerLink="todos" routerLinkActive="active" *ngIf="auth.loggedIn">Todo List</a> <a class="nav-link" routerLink="users" routerLinkActive="active" *ngIf="auth.loggedIn">Users</a> <a class="nav-link" routerLink="login" routerLinkActive="active" *ngIf="!auth.loggedIn">Login</a> <a class="nav-link" (click)="logout()" href="#" *ngIf="auth.loggedIn">Logout</a> </nav>

Gezinme bağlamımızı, kullanıcının oturum açıp açmamasına bağlı olarak yalnızca belirli öğeleri görüntülemesi gerektiğinin farkında yaptık. auth.loggedIn , elbette, kimlik doğrulama hizmetini içe aktarabileceğiniz her yerde kullanılabilir.

API'nin güvenliğini sağlama

Düşünüyor olabilirsiniz, bu harika… her şey harika çalışıyor gibi görünüyor . Ancak farklı kullanıcı adlarının üçüyle de giriş yapmayı deneyin ve bir şey fark edeceksiniz: Hepsi aynı yapılacaklar listesini döndürür. API sunucumuza bakarsak, her kullanıcının aslında kendi öğe listesine sahip olduğunu görebiliriz, peki ne oldu?

Unutmayın, başladığımızda /todos API uç noktamızı her zaman userID=1 için yapılacaklar listesini döndürecek şekilde kodladık. Bunun nedeni, şu anda oturum açmış olan kullanıcının kim olduğunu bilmemizin hiçbir yolu olmamasıydı.

Şimdi yapıyoruz, hadi uç noktalarımızı güvenli hale getirmenin ve gerekli kullanıcı kimliğini sağlamak için JWT'de kodlanmış bilgileri kullanmanın ne kadar kolay olduğunu görelim. Başlangıçta, bu satırı server/app.js dosyanıza son app.use() çağrısının hemen altına ekleyin:

 app.use(expressJwt({secret: 'todo-app-super-shared-secret'}).unless({path: ['/api/auth']}));

express-jwt ara yazılımını kullanırız, ona paylaşılan sırrın ne olduğunu söyleriz ve bir JWT gerektirmemesi gereken bir dizi yol belirtiriz. Ve bu kadar. Her uç noktaya dokunmaya, her yerde if ifadeleri oluşturmaya veya herhangi bir şeye gerek yok.

Dahili olarak, ara katman yazılımı birkaç varsayımda bulunur. Örneğin, Authorization HTTP başlığının Bearer {token} ortak JWT modelini takip ettiğini varsayar. (Kütüphane, durum böyle değilse, nasıl çalıştığını özelleştirmek için birçok seçeneğe sahiptir. Daha fazla ayrıntı için express-jwt Kullanımına bakın.)

İkinci hedefimiz, aramayı kimin yaptığını bulmak için JWT kodlu bilgileri kullanmaktır. Bir kez daha express-jwt kurtarmaya gelir. Belirteci okumanın ve doğrulamanın bir parçası olarak, imzalama sürecinde gönderdiğimiz kodlanmış yükü Express'te req.user değişkenine ayarlar. Daha sonra sakladığımız değişkenlerden herhangi birine anında erişmek için kullanabiliriz. Bizim durumumuzda, kullanıcı kimliğini kimliği doğrulanmış kullanıcının kimliğine req.user.userID userID kullanabiliriz.

server/app.js tekrar güncelleyin ve /todos bitiş noktasını aşağıdaki gibi okuyacak şekilde değiştirin:

 res.send(getTodos(req.user.userID)); 

Ve bu kadar. API'miz artık yetkisiz erişime karşı güvence altına alınmıştır ve kimliği doğrulanmış kullanıcımızın herhangi bir uç noktada kim olduğunu güvenle belirleyebiliriz. İstemci uygulamamızın ayrıca basit bir kimlik doğrulama süreci vardır ve API uç noktamızı çağıran yazdığımız tüm HTTP hizmetlerinde otomatik olarak bir kimlik doğrulama belirteci eklenir.

Github deposunu klonladıysanız ve yalnızca nihai sonucu eylemde görmek istiyorsanız, aşağıdakileri kullanarak kodu son biçiminde kontrol edebilirsiniz:

 git checkout with-jwt

Umarım bu izlenecek yolu kendi Angular uygulamalarınıza JWT kimlik doğrulaması eklemek için değerli bulmuşsunuzdur. Okuduğunuz için teşekkürler!