Bagaimana Melakukan Otentikasi JWT dengan Angular 6 SPA

Hari ini kita akan melihat betapa mudahnya mengintegrasikan otentikasi token web JSON (JWT) ke dalam aplikasi satu halaman (SPA) Angular 6 (atau lebih baru) Anda. Mari kita mulai dengan sedikit latar belakang.

Apa Itu Token Web JSON, dan Mengapa Menggunakannya?

Jawaban termudah dan paling ringkas di sini adalah bahwa mereka nyaman, kompak, dan aman. Mari kita lihat klaim tersebut secara detail:

1. Nyaman : Menggunakan JWT untuk otentikasi ke bagian belakang setelah login memerlukan pengaturan satu header HTTP, tugas yang dapat dengan mudah diotomatisasi melalui fungsi atau subkelas, seperti yang akan kita lihat nanti.
2. Ringkas : Token hanyalah string yang disandikan base64, berisi beberapa bidang header, dan muatan jika diperlukan. Total JWT biasanya kurang dari 200 byte, bahkan jika ditandatangani.
3. Aman : Meskipun tidak diperlukan, fitur keamanan yang hebat dari JWT adalah bahwa token dapat ditandatangani menggunakan enkripsi pasangan kunci publik/pribadi RSA atau enkripsi HMAC menggunakan rahasia bersama. Ini memastikan asal dan validitas token.

Inti dari semua ini adalah Anda memiliki cara yang aman dan efisien untuk mengautentikasi pengguna, dan kemudian memverifikasi panggilan ke titik akhir API Anda tanpa harus mengurai struktur data apa pun atau mengimplementasikan enkripsi Anda sendiri.

Teori Aplikasi

Jadi, dengan sedikit latar belakang, sekarang kita dapat menyelami bagaimana ini akan bekerja dalam aplikasi yang sebenarnya. Untuk contoh ini, saya akan menganggap kita memiliki server Node.js yang menghosting API kita, dan kita sedang mengembangkan daftar tugas SPA menggunakan Angular 6. Mari juga bekerja dengan struktur API ini:

• /auth → POST (posting nama pengguna dan kata sandi untuk mengotentikasi dan menerima kembali JWT)
• /todos → GET (mengembalikan daftar item daftar tugas untuk pengguna)
• /todos/{id} → GET (mengembalikan item daftar tugas tertentu)
• /users → GET (mengembalikan daftar pengguna)

Kita akan membahas pembuatan aplikasi sederhana ini segera, tetapi untuk saat ini, mari kita berkonsentrasi pada interaksi dalam teori. Kami memiliki halaman login sederhana, di mana pengguna dapat memasukkan nama pengguna dan kata sandi mereka. Ketika formulir dikirimkan, ia mengirimkan informasi itu ke titik akhir /auth . Server Node kemudian dapat mengautentikasi pengguna dengan cara apa pun yang sesuai (pencarian basis data, menanyakan layanan web lain, dll.) tetapi pada akhirnya titik akhir perlu mengembalikan JWT.

JWT untuk contoh ini akan berisi beberapa klaim yang dicadangkan , dan beberapa klaim pribadi . Klaim yang dicadangkan hanyalah pasangan nilai kunci yang direkomendasikan JWT yang biasa digunakan untuk autentikasi, sedangkan klaim pribadi adalah pasangan nilai kunci yang hanya berlaku untuk aplikasi kami:

Klaim Cadangan

• iss : Penerbit token ini. Biasanya FQDN server, tetapi dapat berupa apa saja selama aplikasi klien mengetahuinya.
• exp : Tanggal dan waktu kedaluwarsa token ini. Ini dalam hitungan detik sejak tengah malam 01 Januari 1970 GMT (waktu Unix).
• nbf : Tidak berlaku sebelum timestamp. Tidak sering digunakan, tetapi memberikan batas bawah untuk jendela validitas. Format yang sama seperti exp .

Klaim Pribadi

• uid : ID Pengguna dari pengguna yang masuk.
• role : Peran yang diberikan kepada pengguna yang masuk.

Informasi kami akan dikodekan base64 dan ditandatangani menggunakan HMAC dengan kunci bersama todo-app-super-shared-secret . Di bawah ini adalah contoh tampilan JWT:

 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ0b2RvYXBpIiwibmJmIjoxNDk4MTE3NjQyLCJleHAiOjE0OTgxMjEyNDIsInVpZCI6MSwicm9sZSI6ImFkbWluIn0.ZDz_1vcIlnZz64nSM28yA1s-4c_iw3Z2ZtP-SgcYRPQ

Hanya string ini yang kita perlukan untuk memastikan bahwa kita memiliki login yang valid, untuk mengetahui pengguna mana yang terhubung, dan bahkan untuk mengetahui peran apa yang dimiliki pengguna.

Sebagian besar perpustakaan dan aplikasi melanjutkan untuk menyimpan JWT ini di localStorage atau sessionStorage untuk pengambilan yang mudah, tetapi ini hanya praktik umum. Apa yang Anda lakukan dengan token terserah Anda, selama Anda dapat menyediakannya untuk panggilan API di masa mendatang.

Sekarang, setiap kali SPA ingin melakukan panggilan ke salah satu titik akhir API yang dilindungi, SPA hanya perlu mengirim token di header HTTP Authorization .

 Authorization: Bearer {JWT Token}

Catatan : Sekali lagi, ini hanyalah praktik umum. JWT tidak meresepkan metode tertentu untuk mengirim dirinya sendiri ke server. Anda juga dapat menambahkannya ke URL, atau mengirimkannya dalam cookie.

Setelah server menerima JWT, server dapat memecahkan kodenya, memastikan konsistensi menggunakan rahasia bersama HMAC, dan memeriksa kedaluwarsa menggunakan bidang exp dan nbf . Bisa juga menggunakan iss field untuk memastikan itu adalah pihak penerbit asli dari JWT ini.

Setelah server puas dengan validitas token, informasi yang disimpan di dalam JWT dapat digunakan. Misalnya, uid yang kami sertakan memberi kami ID pengguna yang membuat permintaan. Untuk contoh khusus ini, kami juga menyertakan bidang role , yang memungkinkan kami membuat keputusan tentang apakah pengguna harus dapat mengakses titik akhir tertentu atau tidak. (Apakah Anda memercayai informasi ini, atau lebih tepatnya ingin melakukan pencarian database tergantung pada tingkat keamanan yang diperlukan.)

 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); }

Mari Membangun Aplikasi Todo Sederhana

Untuk mengikuti, Anda harus memiliki versi terbaru Node.js (6.x atau lebih baru), npm (3.x atau lebih baru), dan angular-cli terinstal. Jika Anda perlu menginstal Node.js, yang menyertakan npm, silakan ikuti petunjuk di sini. Setelah itu angular-cli dapat diinstal dengan menggunakan npm (atau yarn , jika Anda telah menginstalnya):

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

Saya tidak akan membahas detail boilerplate Angular 6 yang akan kita gunakan di sini, tetapi untuk langkah selanjutnya, saya telah membuat repositori Github untuk menampung aplikasi todo kecil untuk menggambarkan kesederhanaan menambahkan otentikasi JWT ke aplikasi Anda. Cukup mengkloningnya menggunakan yang berikut ini:

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

Perintah git checkout pre-jwt beralih ke rilis bernama di mana JWT belum diimplementasikan.

Seharusnya ada dua folder di dalamnya yang disebut server dan client . Server adalah server Node API yang akan menghosting API dasar kami. Klien adalah aplikasi Angular 6 kami.

Server Node API

Untuk memulai, instal dependensi dan mulai server API.

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

Anda harus dapat mengikuti tautan ini dan mendapatkan representasi data JSON. Untuk saat ini, sampai kami memiliki otentikasi, kami telah membuat hardcode titik akhir /todos untuk mengembalikan tugas untuk userID=1 :

• http://localhost:4000: Halaman uji untuk melihat apakah server Node sedang berjalan
• http://localhost:4000/api/users: Kembalikan daftar pengguna di sistem
• http://localhost:4000/api/todos: Kembalikan daftar tugas untuk userID=1

Aplikasi Sudut

Untuk memulai dengan aplikasi klien, kita juga perlu menginstal dependensi dan memulai server dev.

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

Catatan : Tergantung pada kecepatan saluran Anda, mungkin perlu beberapa saat untuk mengunduh semua dependensi.

Jika semuanya berjalan dengan baik, Anda sekarang akan melihat sesuatu seperti ini saat menavigasi ke http://localhost:4200:

Menambahkan Otentikasi melalui JWT

Untuk menambahkan dukungan untuk otentikasi JWT, kami akan menggunakan beberapa pustaka standar yang tersedia yang membuatnya lebih sederhana. Anda dapat, tentu saja, mengabaikan kenyamanan ini dan menerapkan semuanya sendiri, tetapi itu di luar cakupan kami di sini.

Pertama, mari kita instal perpustakaan di sisi klien. Ini dikembangkan dan dikelola oleh Auth0, yang merupakan perpustakaan yang memungkinkan Anda untuk menambahkan otentikasi berbasis cloud ke situs web. Memanfaatkan perpustakaan itu sendiri tidak mengharuskan Anda menggunakan layanan mereka.

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

Kita akan mendapatkan kodenya sebentar lagi, tetapi sementara kita melakukannya, mari kita juga menyiapkan sisi server. Kami akan menggunakan pustaka body-parser , jsonwebtoken , dan express-jwt untuk membuat Node memahami badan POST JSON dan JWT.

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

Titik Akhir API untuk Otentikasi

Pertama, kami membutuhkan cara untuk mengautentikasi pengguna sebelum memberi mereka token. Untuk demo sederhana kami, kami hanya akan menyiapkan titik akhir otentikasi tetap dengan nama pengguna dan kata sandi yang dikodekan. Ini bisa sesederhana atau serumit yang dibutuhkan aplikasi Anda. Yang penting kirim balik JWT.

Di server/app.js tambahkan entri di bawah baris require lainnya sebagai berikut:

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

Serta berikut ini:

 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}); });

Ini sebagian besar adalah kode JavaScript dasar. Kami mendapatkan badan JSON yang diteruskan ke titik akhir /auth , menemukan pengguna yang cocok dengan nama pengguna itu, memeriksa apakah kami memiliki pengguna dan kata sandi yang cocok, dan mengembalikan kesalahan HTTP 401 Unauthorized jika tidak.

Bagian yang penting adalah pembuatan token, dan kami akan membaginya berdasarkan tiga parameternya. Sintaks untuk sign adalah sebagai berikut: jwt.sign(payload, secretOrPrivateKey, [options, callback]) , di mana:

• payload adalah literal objek dari pasangan nilai kunci yang ingin Anda enkode dalam token Anda. Informasi ini kemudian dapat didekodekan dari token oleh siapa saja yang memiliki kunci dekripsi. Dalam contoh kami, kami mengkodekan user.id sehingga ketika kami menerima token lagi di bagian belakang untuk otentikasi, kami tahu pengguna mana yang kami hadapi.
• secretOrPrivateKey adalah kunci rahasia bersama enkripsi HMAC—inilah yang kami gunakan di aplikasi kami, untuk kesederhanaan—atau kunci pribadi enkripsi RSA/ECDSA.
• options mewakili berbagai opsi yang dapat diteruskan ke encoder dalam bentuk pasangan nilai kunci. Biasanya kami paling tidak menentukan expiresIn (menjadi exp reserved claim) dan issuer ( iss reserved claim) sehingga token tidak berlaku selamanya, dan server dapat memeriksa bahwa itu sebenarnya mengeluarkan token aslinya.
• callback adalah fungsi untuk memanggil setelah pengkodean selesai, jika seseorang ingin menangani penyandian token secara tidak sinkron.

(Anda juga dapat membaca tentang detail selengkapnya tentang options dan cara menggunakan kriptografi kunci publik alih-alih kunci rahasia bersama.)

Integrasi JWT 6 Sudut

Untuk membuat Angular 6 berfungsi dengan JWT kami cukup sederhana menggunakan angular-jwt . Cukup tambahkan berikut ini ke 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'] } }) ], // ... }

Itu pada dasarnya semua yang diperlukan. Tentu saja, kami memiliki beberapa kode lagi untuk ditambahkan untuk melakukan otentikasi awal, tetapi perpustakaan angular-jwt menangani pengiriman token bersama dengan setiap permintaan HTTP.

• Fungsi tokenGetter() melakukan persis seperti yang dikatakannya, tetapi bagaimana penerapannya sepenuhnya terserah Anda. Kami telah memilih untuk mengembalikan token yang kami simpan di localStorage . Anda tentu saja bebas untuk memberikan metode lain apa pun yang Anda inginkan, selama metode tersebut mengembalikan string yang disandikan token web JSON .
• Opsi whiteListedDomains ada sehingga Anda dapat membatasi ke domain mana JWT dikirim, sehingga API publik tidak menerima JWT Anda juga.
• Opsi blackListedRoutes memungkinkan Anda untuk menentukan rute tertentu yang seharusnya tidak menerima JWT meskipun mereka berada di domain yang masuk daftar putih. Misalnya, titik akhir otentikasi tidak perlu menerimanya karena tidak ada gunanya: Token biasanya nol saat dipanggil.

Membuat Semuanya Bekerja Bersama

Pada titik ini, kami memiliki cara untuk menghasilkan JWT untuk pengguna tertentu menggunakan titik akhir /auth pada API kami, dan kami telah melakukan pemipaan di Angular untuk mengirim JWT dengan setiap permintaan HTTP. Bagus, tetapi Anda mungkin menunjukkan bahwa sama sekali tidak ada yang berubah untuk pengguna. Dan Anda akan benar. Kami masih dapat menavigasi ke setiap halaman di aplikasi kami, dan kami dapat memanggil titik akhir API apa pun tanpa mengirim JWT. Tidak baik!

Kami perlu memperbarui aplikasi klien kami untuk memperhatikan siapa yang masuk, dan juga memperbarui API kami untuk memerlukan JWT. Mari kita mulai.

Kita membutuhkan komponen Angular baru untuk login. Demi singkatnya, saya akan membuat ini sesederhana mungkin. Kami juga memerlukan layanan yang akan menangani semua persyaratan Otentikasi kami, dan Angular Guard untuk melindungi rute yang seharusnya tidak dapat diakses sebelum masuk. Kami akan melakukan hal berikut dalam konteks aplikasi klien.

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

Ini seharusnya menghasilkan empat file baru di folder client :

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

Selanjutnya, kita perlu menyediakan layanan otentikasi dan penjaga untuk aplikasi kita. Perbarui client/src/app/app.modules.ts :

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

Dan kemudian perbarui perutean di client/src/app/app-routing.modules.ts untuk menggunakan pelindung otentikasi dan menyediakan rute untuk komponen login.

 // ... 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}, // ...

Terakhir, perbarui client/src/app/auth.guard.ts dengan konten berikut:

 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; } }

Untuk aplikasi demo kami, kami hanya memeriksa keberadaan JWT di penyimpanan lokal. Dalam aplikasi dunia nyata, Anda akan memecahkan kode token dan memeriksa validitasnya, masa berlakunya, dll. Misalnya, Anda dapat menggunakan JwtHelperService untuk ini.

Pada titik ini, aplikasi Angular kami sekarang akan selalu mengarahkan Anda ke halaman login karena kami tidak memiliki cara untuk login. Mari kita perbaiki itu, dimulai dengan layanan otentikasi di client/src/app/auth.service.ts :

 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); } }

Layanan otentikasi kami hanya memiliki dua fungsi, login dan logout :

• login POST username dan password yang diberikan ke back end kami dan setel access_token di localStorage jika menerimanya kembali. Demi kesederhanaan, tidak ada penanganan kesalahan di sini.
• logout hanya menghapus access_token dari localStorage , yang membutuhkan token baru untuk diperoleh sebelum apa pun dapat diakses lagi.
• loggedIn adalah properti boolean yang dapat kita gunakan dengan cepat untuk menentukan apakah pengguna login atau tidak.

Dan terakhir, komponen login. Ini tidak ada hubungannya dengan benar-benar bekerja dengan JWT, jadi silakan salin dan tempel ke client/src/app/login/login.components.html :

 <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>

Dan client/src/app/login/login.components.ts akan membutuhkan:

 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, contoh login Angular 6 kami:

Pada tahap ini, kita harus bisa masuk (menggunakan jemma , paul , atau sebastian dengan kata sandi todo ) dan melihat semua layar lagi. Tetapi aplikasi kami menunjukkan header navigasi yang sama dan tidak ada cara untuk keluar terlepas dari status saat ini. Mari kita perbaiki sebelum kita melanjutkan untuk memperbaiki API kita.

Di client/src/app/app.component.ts , ganti seluruh file dengan yang berikut:

 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']); } }

Dan untuk client/src/app/app.component.html ganti bagian <nav> dengan yang berikut:

 <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>

Kami telah membuat navigasi kami sadar konteks bahwa itu hanya akan menampilkan item tertentu tergantung pada apakah pengguna masuk atau tidak. auth.loggedIn tentu saja dapat digunakan di mana saja Anda dapat mengimpor layanan otentikasi.

Mengamankan API

Anda mungkin berpikir, ini luar biasa… semuanya terlihat bekerja dengan sangat baik . Tapi coba masuk dengan ketiga nama pengguna yang berbeda, dan Anda akan melihat sesuatu: Mereka semua mengembalikan daftar tugas yang sama. Jika kita melihat server API kita, kita dapat melihat bahwa setiap pengguna sebenarnya memiliki daftar item mereka sendiri, jadi ada apa?

Nah, ingat ketika kami memulai, kami mengkodekan /todos API endpoint kami untuk selalu mengembalikan daftar tugas untuk userID=1 . Ini karena kami tidak memiliki cara untuk mengetahui siapa pengguna yang saat ini masuk.

Sekarang kita melakukannya, jadi mari kita lihat betapa mudahnya mengamankan titik akhir kita dan menggunakan informasi yang dikodekan dalam JWT untuk memberikan identitas pengguna yang diperlukan. Awalnya, tambahkan satu baris ini ke file server/app.js Anda tepat di bawah panggilan app.use() terakhir:

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

Kami menggunakan middleware express-jwt , memberi tahu apa rahasia bersama, dan menentukan larik jalur yang seharusnya tidak memerlukan JWT. Dan itu saja. Tidak perlu menyentuh setiap titik akhir, membuat pernyataan if di mana-mana, atau apa pun.

Secara internal, middleware membuat beberapa asumsi. Misalnya, ini mengasumsikan header HTTP Authorization mengikuti pola JWT umum dari Bearer {token} . (Perpustakaan memiliki banyak opsi untuk menyesuaikan cara kerjanya jika bukan itu masalahnya. Lihat Penggunaan express-jwt untuk detail lebih lanjut.)

Tujuan kedua kami adalah menggunakan informasi yang dikodekan JWT untuk mengetahui siapa yang menelepon. Sekali lagi express-jwt datang untuk menyelamatkan. Sebagai bagian dari membaca token dan memverifikasinya, ini menetapkan muatan terenkode yang kami kirim dalam proses penandatanganan ke variabel req.user di Express. Kami kemudian dapat menggunakannya untuk segera mengakses salah satu variabel yang kami simpan. Dalam kasus kami, kami menetapkan userID sama dengan ID pengguna yang diautentikasi, dan karena itu kami dapat menggunakannya secara langsung sebagai req.user.userID .

Perbarui server/app.js lagi, dan ubah titik akhir /todos menjadi seperti berikut:

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

Dan itu saja. API kami sekarang diamankan dari akses tidak sah, dan kami dapat dengan aman menentukan siapa pengguna terautentikasi kami di titik akhir mana pun. Aplikasi klien kami juga memiliki proses otentikasi sederhana, dan setiap layanan HTTP yang kami tulis yang memanggil titik akhir API kami akan secara otomatis memiliki token otentikasi yang terpasang.

Jika Anda mengkloning repositori Github, dan hanya ingin melihat hasil akhirnya, Anda dapat memeriksa kode dalam bentuk akhirnya menggunakan:

 git checkout with-jwt

Saya harap Anda menemukan panduan ini berharga untuk menambahkan otentikasi JWT ke aplikasi Angular Anda sendiri. Terima kasih sudah membaca!