Chương I : NestJS Chương II : Chuẩn JWT Chương III : Ant Design Trong ReactJS Chương IV : Cở Sở Dữ Liệu MongoDB Chương V: Thực Thi Chương Trình
NESTJS
Khái niệm frameword Nestjs
NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và API.
Mục tiêu chính của NestJS là cung cấp một cấu trúc ứng dụng rõ ràng và dễ quản lý, giúp tăng tính bảo trì và sự tổ chức trong mã nguồn Để đạt được điều này,NestJS triển khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc của Angular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Các module).
Khởi tạo một project bằng Nestjs
Đầu tiền để có thể khởi tạo ra một project NestJS quý vị cần thực hiện các bước sau:
Đầu tiên chạy lên:$ npm i -g @nestjs/cli
Tiếp đến là lệnh:$ nest new project-name để tạo ra một thự mục
Khi thực hiện xong hai câu lệnh trên quý vị sẽ tạo ra một thư mục dự án mới và
Và ngay tại thời điểm này quý vị có thể khởi chạy ngay project NestJS vừa khởi tạo bằng lệnh:npm run start:devhoặcnpm run start
Giải thích cấu trúc project NestJS
app.controller.ts: Chứa các router để xử lý các request và trả về response cho client.
app.controller.spec.ts: Có nhiệm vụ viết unit-test cho các controller.
app.module.ts: Root module của ứng dụng.
app.service.ts: Service chứa các logic mà controller sẽ dùng đến.
main.ts: Sử dụng NestFactory để khởi tạo ứng dụng.
CHUẨN JWT
Khái niệm
JSON WEB TOKEN (JWT) là một tiêu chuẩn mở (RFC 7519) xác định một cách nhỏ gọn và khép kín để truyền thông tin một cách an toàn giữa các bên dưới dạng đối tượng JSON Thông tin này có thể được xác minh và tin cậy vì nó được ký điện tử JWT có thể được ký bằng bí mật (bằng thuật toán HMAC) hoặc cặp khóa công khai/riêng bằng RSA hoặc ECDSA.
Mặc dù JWT có thể được mã hóa để cung cấp bí mật giữa các bên nhưng chúng tôi sẽ tập trung vào các token đã ký Mã thông báo đã ký có thể xác minh tính toàn vẹn của các xác nhận quyền sở hữu trong đó, trong khi mã thông báo được mã hóa sẽ ẩn các xác nhận quyền sở hữu đó khỏi các bên khác Khi mã thông báo được ký bằng cặp khóa chung/riêng, chữ ký cũng xác nhận rằng chỉ bên giữ khóa riêng mới là người đã ký nó.
Cấu trúc của JWT
Ở dạng nhỏ gọn, mã thông báo Web JSON bao gồm ba phần được phân tách bằng dấu chấm (.), đó là:
Do đó mà JWT có dạng như sau: xxxx.yyyy.zzzz
Header thường bao gồm hai phần: loại mã thông báo là JWT và thuật toán ký đang được sử dụng, chẳng hạn như HMAC SHA256 hoặc RSA.
Sau đó, JSON này được mã hóa Base64Url để tạo thành phần đầu tiên của JWT.
Phần thứ hai của mã thông báo là payload, chứa các xác nhận quyền sở hữu Khiếu nại là các tuyên bố về một thực thể (thường là người dùng) và dữ liệu bổ sung Có ba loại claims: registered,public, andprivateclaims.
Registered claims: Đây là một tập hợp các xác nhận quyền sở hữu được xác định trước, không bắt buộc nhưng được khuyến nghị nhằm cung cấp một tập hợp các xác nhận quyền sở hữu hữu ích, có thể tương tác Một số trong số đó là: iss (nhà phát hành), exp (thời gian hết hạn), sub (chủ đề), aud (khán giả) và những thứ khác.
Public claims: Những người sử dụng JWT có thể xác định những điều này theo ý muốn Nhưng để tránh xung đột, chúng phải được xác định JSON IANA Web Token Registry hoặc được xác định là URI chứa không gian tên chống xung đột.
Private claims: Đây là những xác nhận quyền sở hữu tùy chỉnh được tạo để chia sẻ thông tin giữa các bên đồng ý sử dụng chúng và không phải là xác nhận quyền sở hữu đã được đăng ký hoặc công khai.
Sau đó, tải trọng được mã hóa Base64Url để tạo thành phần thứ hai của Mã thông báo Web JSON.
Signaturelà phần cuối cùng của JWT, có chức nâng xác thực danh tính người gửi. Để tạo ra mộtsignaturechính xác, ta cầnencodephầnheader, phầnpayload, chọn cryptography (mật mã hóa) thích hợp đã được xác định ở header kèm secret key và thực hiệnsign.
Cả bên gửi và bên nhậnJWTđều sẽ xử dụng hàm này để xác định phầnsignature, nếu thông tin này của cả 2 bên khác nhau,JWTnày được coi là không hợp lệ.
Lưu ý: Chỉ có người có secret key mới có thể sign được một signature phù hợp.
Do đó, danh tính của bên gửi được đảm bảo nhờ cósignature.
Lý do nên chọn JWT
Authentication (Xác thực): JWT được sử dụng để xác thực người dùng trước khi họ truy cập đến tài nguyên trên server.
Authorization(Uỷ quyền): Khi người dùng đăng nhập thành công, application có thể truy cập vào các tài nguyên thay mặt người dùng đó Các ứng dụng đăng nhập
Ưu điểm
Gọn nhẹ: JWT nhỏ gọn, chi phí truyền tải thấp giúp tăng hiệu suốt của các ứng dụng.
Bảo mật: JWT sử dụng các mật mã khoá để tiến hành xác thực người danh tính người dùng Ngoài ra, cấu trúc của JWT cho phép chống giả mạo nên thông tin được đảm bảo an toan trong quá trình trao đổi.
Phổ thông: JWT được sử dụng dựa trên JSON, là một dạng dữ liệu phổ biến, có thể sử dụng ở hầu hết các ngôn ngữ lập trình Ngoài ra, triển khai JWTtương đối dễ dàng và tích hợp được với nhiều thiết bị, vìJWT đã tương đối phổ biến.
Khuyết điểm
Kích thước: Mặc dù trong tài liệu không ghi cụ thể giới hạn, nhưng do được truyền trên HTTP Header, vì thế, JWT có giới hạn tương đương với HTTP Header(khoảng 8KB).
Rủi ro bảo mật: Khi sử dụng JWT không đúng cách, ví dụ như không kiểm tra tính hợp lệ của signature, không kiểm tra expire time, kẻ tấn công có thể lợi dụng sơ hở để truy cập vào các thông tin trải phép Ngoài ra, việc thờ gian hết hạn của
JWTquá dài cũng có thể tạo ra kẽ hở tương tự.
Một số ứng dụng JWT
Single Sign-On (SSO): JWT có thể được sử dụng để cung cấpsingle sign-on cho người dùng Điều này cho phép họ đăng nhập vào nhiều ứng dụng chỉ với một tài khoản duy nhất.
API Authorization: JWT thường được sử dụng để phân quyền cho người dùng đến những tài nguyên cụ thể, từ nhữngclaimschứa trong JWT đó.
User Authentication: JWTcung cấp khả năng xác thực người dùng và cấp quyền
Microservices Communication: JWT còn có thể sử dụng cho việc giao tiếp giữa cácservicenhỏ trong hệ thốngmicroservices.
ANT DESIGN TRONG REACTJS
Khái niệm
Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, …Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng.
Có thẻ xem Ant Design cho React là tập hợp của hầu hết các thư viện về React Nó đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thư viện nào nữa Dưới đây là danh sách các component mà nó cung cấp:
Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps
Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber,Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer,TimePicker, Upload
Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table
Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton
Other: Anchor, BackTop, Divider, LocaleProvider
Cài đặt
Để có thể cài đặt được Ant Design trong project React bạn có thể dùng npm hpawcj yarn
Sử dụng
Khi đã hoàn thành việc cài đặt Ant Design trong project React bạn có thể sử dụng bằng cách import nó vào và sử dụng như các component trong React
CƠ SỞ DỮ LIỆU MONGODB
THỰC THI CHƯƠNG TRÌNH
Dùng công cụ POSTMAN
Postman hiện là một trong những công cụ phổ biến nhất được sử dụng trong kiểm thử API Chính vì vậy, trong bài báo cáo này để có thể kiểm tra được các login xử lý phía backend ta sẽ dùng đến công cụ postman.
Một số hình ảnh minh họa
Kiểm thử chức năng đăng nhập: Đầu tiên ta cần phải xác định đúng api và method (get, post,…) tồn tại trong controller sẽ đảm nhận việc tiếp nhận dữ liệu và truyền đến cho service xử lý dữ liệu đó.
Tiếp đến ta nhập dự liệu và nhấn send, khi dữ liệu gửi đi thành công và được xử lý thì sẽ return ra dữ liệu ngược lại cho ta mong muốn Ở đây dữ liệu mà tôi mong muốn khi gọi đến api đó, cùng với method post và dữ liệu đó là một access_token để tôi có thể có quyền truy cập vào các chức năng khác của trang
Lấy ra danh sách sản phẩm trong cơ sở dữ liệu, với chức năng này ta không cần dùng access_token trong phần header của request.
Còn với chức năng muốn xem thông tin của một sản phẩm nào đó, khi này ta cần một access_token để có thể xác định quyền truy cập Khi này ta cần phải truyền cho nó một access_token vào trong phần header của request.
Call API bằng ReactJS
Fetch API, Axios Library, Async-Await syntax, Custom React Hook, React Query Library Tuy nhiên trong báo cáo này tôi sẽ chỉ dùng Axios Library để CALL API từ ReactJS