Hướng dẫn xác thực JWT trong Angular

Trong hướng dẫn này, bạn sẽ học cách triển khai xác thực JWT trong các ứng dụng Angular 7 của mình bằng cách tạo một ví dụ Service Angular có thể được sử dụng để xử lý xác thực với JWT.
Trong hướng dẫn xác thực JWT trong Angular:
Bạn sẽ bắt đầu bằng cách cài đặt các yêu cầu của dự án của bạn như Node.js, npm và Angular CLI v7,

Tiếp theo, bạn sẽ tạo ứng dụng Angular 7 của mình,
Bạn sẽ thiết lập HttpClient vào ứng dụng của bạn,
Bạn sẽ tạo một Service Angular 7 hơn là xử lý xác thực JWT,
Cuối cùng, bạn sẽ cài đặt và định cấu hình angular-jwt để đính kèm mã thông báo truy cập JWT vào yêu cầu.

Tìm Hiểu JWT in Angular

Trước khi đi sâu vào thực tiễn, hãy hiểu ngắn gọn về JWT là gì.

JWT là viết tắt của JSON Web Token và nó là một tiêu chuẩn nguồn mở cho biết cách trao đổi thông tin an toàn giữa các hệ thống máy tính.

Mã thông báo JWT chỉ đơn giản là một đối tượng JSON nhỏ gọn và độc lập có chứa thông tin như email và mật khẩu.

Bạn có thể sử dụng JWT để thêm xác thực trong ứng dụng Angular 7 của mình mà không cần sử dụng các cơ chế truyền thống để thực hiện xác thực trong các ứng dụng web như phiên và cookie.
Đây là cách JWT hoạt động trong ứng dụng web của bạn. Đầu tiên người dùng đăng nhập, máy chủ web của bạn tạo mã thông báo JWT cho thông tin đăng nhập của người dùng và gửi lại cho trình duyệt của người dùng. Sau đó, Angular JWT Authorization with Refresh Token and Http Interceptor sẽ được lưu trong bộ nhớ cục bộ của trình duyệt và được gửi với mỗi yêu cầu HTTP đến máy chủ để có thể truy cập bất kỳ điểm cuối API được bảo vệ nào.

Điều kiện JWT

Để có thể hoàn thành hướng dẫn này, bạn cần có một vài yêu cầu:
Đầu tiên, bạn cần cài đặt Node và NPM trên hệ thống của mình. Nếu không, bạn chỉ cần truy cập nodejs.org và tải xuống các tệp nhị phân của hệ thống.
Tiếp theo, bạn cần cài đặt Angular CLI v7. Nếu nó chưa được cài đặt, bạn chỉ cần chạy

npm install -g @angular/cli

lệnh để cài đặt CLI trên toàn cầu trên hệ thống của bạn.
Cuối cùng, bạn cần có một dự án Angular 7 hoặc đơn giản là chạy ng start angular7-jwt-example lệnh và trả lời các câu hỏi CLI để tạo dự án của bạn.
Với các yêu cầu này được cài đặt, bạn sẽ sẵn sàng bắt đầu tạo dịch vụ Angular 7 của mình, gói gọn tất cả mã để thực hiện xác thực JWT trong ứng dụng Angular của bạn.

Cài đặt HttpClient trong Angular

Bạn cần thiết lập HttpClient trước khi có thể gửi yêu cầu HTTP đến máy chủ. Chúng tôi đã làm điều đó trước đây trong một hướng dẫn trước . Bạn có thể làm theo hướng dẫn đó để biết thêm thông tin về cách sử dụng HttpClient hoặc chỉ cần thiết lập HttpClient bằng cách nhập HttpClientModule từ @angular/common/http packace và đưa nó vào imports mảng của mô-đun ứng dụng.

Mở tệp src/app/app.module.ts và thêm mã sau đây:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Tiếp theo, bạn chỉ cần nhập HttpClient vào các dịch vụ và thành phần của mình.

Trong phần tiếp theo, bạn sẽ tạo dịch vụ JWT.
Xây dựng xác thực Service in Angular
Trong phần này, bạn sẽ tạo một dịch vụ Angular 7 để xác thực JWT.

Trong thiết bị đầu cuối của bạn, hãy chạy lệnh sau để tạo dịch vụ với Angular CLI:

$ ng g service jwt

Bạn cũng có thể sử dụng generatethay vì g.

Tiếp theo, mở src/app/jwt.service.ts tệp và nhập HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class JwtService {
constructor(private httpClient: HttpClient) { }
}

Bây giờ, bạn đã sẵn sàng để thêm login(), logout() và loggedIn() phương pháp.

Ứng dụng phía Server

Trong hướng dẫn này, bạn sẽ không học cách tạo ứng dụng máy chủ.

Ứng dụng phía máy chủ của bạn cần triển khai xác thực JWT và hiển thị một vài điểm cuối:

/auth/login để đăng nhập người dùng. Điểm cuối này sẽ chấp nhận yêu cầu POST với thông tin đăng nhập của người dùng và trả về mã thông báo truy cập JWT sẽ được trình duyệt nhận.
/auth/register để đăng ký người dùng. Điểm cuối này sẽ chấp nhận yêu cầu POST chứa thông tin đăng nhập của người dùng và duy trì chúng trong cơ sở dữ liệu.

Thêm phương thức xác thực

Bây giờ, sau khi tạo dịch vụ JWT trong ứng dụng Angular 7 của bạn, bạn cần triển khai các phương thức cần thiết sẽ được sử dụng để xử lý xác thực trong ứng dụng của bạn.

Thêm phương thức .login
Hãy bắt đầu bằng cách xác định .login phương thức. Nó sẽ lấy một tham số email và mật khẩu và trả lại và RxJS Observable.

Mở src/app/jwt.service.ts tệp của bạn và thêm phương thức sau vào dịch vụ của bạn:

login(email:string, password:string) {
return this.httpClient.post<{access_token: string}>('http://www.your-server.com/auth/login', {email, password}).pipe(tap(res => {
localStorage.setItem('access_token', res.access_token);
}))
}

Vậy bạn đã làm gì? Trước tiên, bạn sử dụng HttpClient.post phương thức để gửi yêu cầu đến /auth/login điểm cuối với một đối tượng có chứa email và mật khẩu được truyền dưới dạng tham số.

Tiếp theo, bạn đã sử dụng .pipe phương thức là thành viên của RxJS Observable cho các toán tử chuỗi và tap chức năng thực thi hiệu ứng phụ để duy trì mã thông báo truy cập JWT, được máy chủ trả về, trong bộ nhớ cục bộ của trình duyệt.

Đảm bảo nhập tap toán tử bằng

import { tap } from 'rxjs/operators';

Thêm phương thức .register
Giống như .login phương thức, bạn cũng cần thêm một .register phương thức gửi yêu cầu đến máy chủ để đăng ký người dùng lần đầu tiên:

Trong dịch vụ Angular 7 của bạn, thêm phương thức sau:

register(email:string, password:string) {
return this.httpClient.post<{access_token: string}>('http://www.your-server.com/auth/register', {email, password}).pipe(tap(res => {
this.login(email, password)
}))
}

Một lần nữa, bạn đã sử dụng HttpClient.post phương thức để gửi yêu cầu POST đến máy chủ với thông tin đăng ký (email và mật khẩu) sau đó sử dụng chức năng .pipevà tapđể chạy một hiệu ứng phụ gọi .login phương thức để đăng nhập người dùng sau khi đăng ký xong.

Thêm phương thức.logout
Tiếp theo, bạn cần thực hiện một .logoutphương thức đăng xuất người dùng. Phương pháp này không cần gửi bất kỳ yêu cầu nào đến máy chủ, tất cả những gì cần làm là xóa mã thông báo truy cập JWT khỏi bộ nhớ cục bộ của người dùng. Ví dụ:

logout() {
localStorage.removeItem('access_token');
}

Bạn gọi .removeItem phương thức localStorage để loại bỏ khóa có tên access_token.

Thêm .loggedIn Property
Cuối cùng, bạn cần tạo thuộc .loggedIn tính chỉ cần xác minh nếu người dùng đã đăng nhập. Điều này đạt được bằng cách kiểm tra xem mã thông báo truy cập JWT có tồn tại trong bộ nhớ cục bộ của trình duyệt không:

public get loggedIn(): boolean{
return localStorage.getItem('access_token') !== null;
}

Bạn đã sử dụng .getItem phương pháp localStorage để có được các access_token mục. Nếu nó không tồn tại, phương thức trả về một đối tượng null.

Bạn có thể tạo một thuộc tính trong TypeScript bằng cách đặt trước định nghĩa phương thức bằng một công cụ getsửa đổi. Sau đó, bạn có thể truy cập vào tài sản mà không cần sử dụng dấu ngoặc đơn.

Bây giờ bạn đã thực hiện tất cả các phương thức xác thực sẽ được sử dụng để đăng nhập, đăng xuất, đăng ký và kiểm tra trạng thái của người dùng. Bạn vẫn cần đính kèm mã thông báo truy cập vào từng yêu cầu sẽ được gửi đến máy chủ để truy cập các điểm cuối được bảo vệ. Và bảo vệ các quan điểm Angular bằng cách sử dụng bảo vệ.
Cài đặt và thiết lập angular-jwt
Sau khi thêm các phương thức cần thiết để triển khai xác thực JWT trong dịch vụ Angular 7 của bạn. Bây giờ hãy xem cách bạn có thể đính kèm mã thông báo truy cập nhận được vào mỗi yêu cầu.

Bạn có thể làm điều đó bằng cách sử dụng angular-jwt thư viện từ Auth0. Vì vậy, trước tiên hãy cài đặt nó từ npm bằng lệnh sau:

$ npm install @auth0/angular-jwt --save

Các angular-jwt thư viện thực hiện các mã cần thiết cho việc gửi các thẻ truy cập cùng với mỗi yêu cầu HTTP nhưng nó cần một số thiết lập.

Mở src/app/app.module.ts tệp và nhập tệp JwtModule có sẵn từ @auth0/angular-jwt gói:

import { JwtModule } from '@auth0/angular-jwt';

Tiếp theo, bạn cần đưa nó vào imports mảng mô-đun ứng dụng:

imports: [
# [...]
JwtModule.forRoot({
config: {
tokenGetter: function tokenGetter() {
return localStorage.getItem('access_token');},
whitelistedDomains: ['localhost:3000'],
blacklistedRoutes: ['http://localhost:3000/auth/login']
}
})
],

Bạn sử dụng .forRoot phương thức JwtModule để cung cấp một đối tượng cấu hình với các thuộc tính sau:

tokenGetter: Chức năng này được sử dụng để tùy chỉnh cách JwtModule nhận mã thông báo truy cập JWT từ bộ nhớ cục bộ.
whiteListedDomains: Trong mảng này, bạn có thể thêm bất kỳ tên miền nào được phép nhận JWT như API công khai.
blackListedRoutes: Trong mảng này, bạn có thể thêm các tuyến đường không được phép nhận mã thông báo JWT.
Trong ví dụ này, bạn thêm localhost:3000 URL vào các tên miền được liệt kê để chỉ ứng dụng Angular của bạn chạy từ địa chỉ này mới nhận được mã thông báo truy cập.

Bạn cũng liệt kê đen localhost:3000/auth/login URL vì nó không cần nhận bất kỳ mã thông báo truy cập nào.

Phần kết luận
Trong hướng dẫn này, bạn đã học cách triển khai xác thực JWT trong ứng dụng Angular 7 của mình.