Đồ án Đăng ký phát triển website mạng xã hội sử dụng reactjs, nodejs và mongodb

Điều này phù hợp với các ứng dụng web hiện đại yêu cầu sự linh hoạt trong cầu trúc dữ liệu.. Điều này mang lại tính linh hoạt và khả năng đáp ứng cao đối với nhu cầu sử dụng của người dù

BO GIAO DUC VA DAO TAO TRUONG DAI HOC CONG NGHE DONG A

KHOA LUAN TOT NGHIEP TEN DO AN DANG KY: PHAT TRIEN WEBSITE MANG XA HOI SU DUNG REACTJS, NODEJS VA MONGODB

Giảng viên hướng dẫn : Ths Bui Thanh Loan Sinh viên thực hiện :

Bac Ninh, nim 2024

BO GIAO DUC VA DAO TAO

TRUONG DAI HOC CONG NGHE DONG A

TEN DE TAL PHAT TRIEN WEBSITE MẠNG XÃ HỘI SỬ DỤNG

REACTJS, NODEJS VA MONGODB

Giảng viên hướng dẫn: Ths Bui Thanh Loan

Bắc Ninh, năm 2024

LOI CAM DOAN

Tôi xin cam đoan rằng khóa luận tốt nghiệp với đề tài “Phát triển website mạng

xã hội sử dụng reactjs, nodejs và mongodb” là nghiên cứu độc lập của tôi Những số liệu và kết quả được trình bảy trong báo cáo đều là kết quả nghiên cứu hoàn toàn trung thực, không sao chép từ bất kỳ công trình nghiên cứu nào khác

Trong quá trình thực hiện đề tài này, tôi đã tham khảo nhiều nguồn tài liệu khác nhau và nhận được sự tư vấn, góp ý từ nhiều người, bao gồm các giảng viên, và bạn

bè Những ý kiến đóng góp này đã giúp tôi có cái nhìn đa chiều và sâu sắc hơn, góp phần hoàn thiện nghiên cứu một cách toàn diện và khoa học hơn Tuy nhiên, mọi phân tích, quá trinh xây dựng phát triển hệ thống, kết luận và lập luận trong báo cáo đều là của riêng tôi, dựa trên quá trình nghiên cứu và làm việc nghiêm túc (mọi lịch sử phát triển dự án đều được lưu lịch sử trên github cua dy án)

Bắc Ninh, ngày tháng 06 năm 2024

Sinh viên (ky và ghi rõ họ tên)

LOI CAM ON

Trước tiên, tôi xin gửi lời cảm ơn chân thành và sâu sắc nhất đến cô Bùi Thanh Loan, giảng viên hướng dẫn của tôi, người đã tận tình chỉ bảo và hỗ trợ tôi trong suốt quá trinh thực hiện khóa luận "Phát triển website mạng xã hội sử dụng ReacUS, NodeJS và MongoDB" Sự hướng dẫn tận tình, những góp ý quý báu và sự động viên của cô đã giúp tôi hoàn thành tốt đề tài này

Tôi cũng xin bày tỏ lòng biết ơn đến các thầy cô trong Khoa Công nghệ Thông

tin, Trường Đại học Công Nghệ Đông Á , những người đã truyền đạt kiến thức và kinh nghiệm quý báu trong suốt thời gian học tập Những kiến thức đó là nền tảng vững chắc giúp tôi có thể thực hiện đề tài này

Bên cạnh đó, tôi xin cảm ơn các bạn bè đã luôn đồng hành, hỗ trợ và chia sẻ

những khó khăn trong suốt quá trình nghiên cứu và phát triển dự án Sự giúp đỡ và

động viên của các bạn là nguồn động lực lớn giúp tôi vượt qua mọi thử thách

Tôi xin chân thành cảm ơn tât cả!

MUC LUC PS 1

CHƯƠNG I: GIỚI THIỆU ĐÊ TÀII -.2:2222222222+2221222112221122222211221 22 ee 2

1.1 Giới thiệu đề tài - lý do chọn đề tải - 5 c1 11181 E11111212211 112k 2

1.2 Nội dung thực hiện và công nghệ sử dụng - c2 c2 22212222222 3

1.2.1 Công nghệ sử dụng - 2 2 121122112211 12111111111121111 1118111 ray 3

1.2.2 Phân tích yêu cầu - ¿1 11T 1112111121121 711212121112 11111 n gay 4

1.2.3 Thiết kế kiến trúc hệ thống "HH 5 1.2.4 Phát triển frontend - +21 21221121221211211111211111111212 122121 1e 5 1.2.5 Phát triển Backend 2: 2 22122122127122121122121121211211 212 xe 5 1.2.6 Tích hợp cơ sở đữ liệu -. - 0 2222211211 12112 2111211115281 8g 5

1.2.7 Bảo mật và tối ưu hóa -:s:22222+ 2222122222112 6 1.2.8 Triển khai và kiểm thử -.::- 22 2221 211 21.1 6 CHƯƠNG 2: CƠ SỞ LÝ THUYÊTT 22222 2222111222211112212112221122111 22010 2 6 7

2.1 Giới thiệu về phát triển website hiện đại -2 SH E21 1511511 eee 7

2.1.1 Kiến trúc Client SeFVeE - 22221 S211221221221221121212121111211 21 yce 7

2.1.2 Đánh giá ưu nhược điểm của mô hình Client Server - - 7

2.2 Sinple Pasee Application (SPA) c1 1n 12101 11111111111111 1111111 tài 8

2.3 Giới thiệu về React]§ -2:cc 22t 2021121211211 re 8

2.3.1 Giới thiỆU 2 1211111112111 11111111 11151111111 0111111 110111 11 11H Ho 8

2.3.2 Lợi ích mang lại cho lập trình viên 2 22 2221122112 22312 12222 9

2.3.3 Tính năng nỗi bật 5à ST 211211211112111121212121 21210 rag 10

"Pa na 11

Phi nh .ma 12

2.5.1 Định nghĩa -G c1 2122211211121 1211 11 1118110111011 111 111111111611 1n ườ 12

2.5.2 MiddÏeware - cecccecccccecstescececeustsseecesentsauseeeceentassceeseseesees 12 Phê 12 2.6 Cơ sở dữ liệu và cơ sở dữ liệu NoSQ 2201221122111 12x 13

P ai na 18

P Ga ố ố 18 2.9.2 Hoạt động Q.01 HH 1211111111121111011 111111111111 19 2.9.3.Thư viện SocketÏO LH n0 1111000111 1155 1111125111111 111kg 19 PIN v.à 0 - 20

2.10.3 Khi nào nên dùng JWT 0L L n1 S12 1211111111111 12111112 ru 22

2.11 Các van dé bảo mật websife 22 tt n0 11121 22

2.11.1 Vấn đề lỗi bảo mật Back End 55 22c 2222.222 22

2.11.2 Vấn đề lỗi bảo mật Front End (thường gặp) - 5s cse se 23 CHUONG 3: Phân tích và đặc tả yêu cầu - 5 ST 2E 2112121111112 1E xe 26

KN 4i ái 01/7+‹+.ÝÝỶẢ 26

BLL Mu tte 26

KV Ai o0 in ằ 26

3.1.3 Kết quả scS1 2221112111 1121111212121 2111211 nn 1H ng ro 26 3.2 Phân tích yêu cầu bải toán 5s ST 1121111111211112111121111 1111111 re 27

3.2.1 Phát biểu bài toán - s:-222c 2221112211 27

3.2.2 Yêu cầu chức năng - 2 1S 1 19115112112112112121111 21201221 27 3.2.3 Yêu cầu phí chức năng - 5221 1 111 E7121121121111111211 E1 xe 30

CHƯƠNG 4: PHẦN TÍCH, THIẾT KẾ HỆ THÓNG -.-: 522252522252 31

4.1 Bidu d6 do sềễọDọ)DọDọDùDẶÃÁÁÁÝ 31

4.1.1 Use case tổng quát - 5 s2 2112121111211 2012112 21g 31 4.1.2 Use case module Authentication le cece eeeeeenteeteeteeneeneeens 32 4.1.3 Use case module bải viẾT - 2 2s 21221111212111112121211 221212 te 32 4.1.4 Use case module người dùng - - 0 121121121122 1182182 re 33 4.1.5 Use case module nhắn tin 2-2 +2s+2E22E22EE2E12E2122222222122 2.2.2 33

`: co na 34

3.3 Biéu đồ trạng thái (State Diagram) 5 s2 121211211 12111281 1x ru 36

3.3.1 Giải thích các khái niệm eeeeeeeseseeeeceeseseesecescesaueteeeeseaes 36 3.3.2 Biểu đỗ trạng thái chức năng đăng ký đăng nhập - - 37 3.3.3 Biểu đỗ trạng thái chức năng đăng bài 52 5c Esrryn 38 3.3.4 Biểu đỗ trạng thái chức năng xem và chỉnh sửa hồ sơ người dùng .39 3.3.5 Biểu đỗ trạng thái chức năng tương tác bai Viet eee 40 3.3.6 Biểu đồ trạng thái chức năng kết bạn 2 S2n2n n2 1n 41 3.3.7 Biểu đỗ trạng thái chức năng nhắn tín - 2 22221 2122222 43 3.3.8 Biểu đỗ trạng thái chức năng quản lý danh mục và luật trang 44 3.3.9 Biểu đỗ trạng thái chức năng quản lý báo cáo - se: 45 3.4 Biéu đỗ hoạt động ( Activity điaeram) - 5 c2 12 12 211g rrg 46

3.4.1 Giải thích các khái niệm 2 G111 22111111255 5551111111 s51 xy 46

3.4.2 Biểu đỗ hoạt động chức năng đăng ký/đăng nhập - 47 3.4.2 Biểu đỗ hoạt động chức năng đăng bải - 5S E2 srse 48 3.4.3 Biểu đỗ hoạt động chức năng xem và chỉnh sửa hỗ sơ người dùng 49 3.4.5 Biểu đỗ hoạt động chức năng tương tác bài viẾt 5-5 50 3.4.6 Biêu đồ hoạt động chức năng kết bạn 2 TH HE S1 2E ca 51 3.4.7 Biêu đồ hoạt động chức năng nhắn tỉn 22+ S 1212151125515 11 s22 51 3.4.8 Biêu đồ hoạt động hệ thống quả tF| - + 2c 222122 212222122 ces 52

3.5.1 Biểu đỗ tuần tự chức năng đăng kí đăng nhập 2 ssccse: 53 3.5.2 Biểu đỗ tuần tự chức năng đăng bải viẾt 2 525cc re 54 3.5.3 Biéu dé tuan ty chire nang twong tac bai Viet cece eee 54 3.5.4 Biểu đồ tuần tự chức năng kết bạn - n2 H111 11121212111 se 55 3.5.5 Biểu đồ tuần tự chức năng nhắn tỉn 2-1 s ST 2112112155 15155525 5E 55 3.5.6 Biểu đỗ tuần quản lý trang web 2T E122 xe 56

3.6 Biểu đồ triển khai -5s: 2221 222211222211222211221111.221112101.1 re 56

CHƯƠNG 4: Thiết kế và cài đặt cơ sở dữ liệu 1S TS 1111121531 5115115152E5x x52 60

DANH MUC CAC TU VIET TAT

nguyên nhiêu nguôn khác nhau)

3 JWT Json Web Token

4 UI User Interface (Giao diện người dùng)

JavaScript Object Notation (Mét kiéu định

dạng đữ liệu tuân theo một quy luật nhật định)

Hyper Text Transfer Protocol (Giao thức

Truyền tải Siêu Văn Bản)

7 MVC Model — View — Controller

Unified Modeling Language (Ng6n ngữ mô

8 UML hình hóa thống nhất) 8 guag g

DANH MUC BANG BIEU VA HINH ANH

Bang 1.2.1 Céng nghé va ly do sử dụng - 22 222122122211 111211 1551121821121 xe 3

Hình 2.5.2.a Ví dụ về middleware trone eXpress.]s - 2s 1221 1x re 12

Hinh 2.5.2.b Route methods -c c1 1211211211111 21111111111211 1111111 KH 1g kg 13

Hinh 2.5.2.c Route paraimef€rs -.- c1 221121112 112211211191 11111111 21111 11 H11 ray 13

Hình 2.9.2.a Sơ đỗ hoạt động 5 TT 2112121111 2121112201121 221 du 19

Hình 2.10.a Ví dụ về một chuỗi token ::- 22222 2211222122111 re 20

Hinh 2.10.b Mã token sau khi ø1ải Imã - 2c 22 2211222112211 21 15511515511 1s 20

Hình 2.10.2a Cấu trúc của header (JWT) -s- c scnxS1EE 1118121111112 tre 21

s0i000020801i7 000.2000777 ÖỀ Ề.-‹(1illII 21

Hình 2.10.2c Mã hóa chữ ký (JWT) 21211 2112111112111111 111111111111 k ket 22

Bảng 3.1.2a Yêu cầu chức năng của người dùng thông thường 5-5 27

Bảng 3.1.2b Yêu cầu chức năng của quản trị viên s52 22221 221212 1c 2 xe 29

Bảng 3.2.3 Yêu cầu phi chức năng 2-5 5c 221 1111811 11512112121 2111 e6 30

Hình 4.1.1 Use-Case tổng quát hệ thống - 25c S221 9212712712112222111 22 26 31

Hinh 4.1.2 Use-Case module AuthentIcafIon - -á c cc 2112112112 1111151121111 xe 32

Hình 4.1.3 Use-case module bải viẾt -2- 522 212211EEE2121311212121221211 22121 xe 32

Hinh 4.1.4 Use-case module người dùng L0 1221121121112 12 1111111118 re 33

Hình 4.1.5 Use case module nhắn tĩn 2-2221 29EE22E222E22122522522212212222222Xe2 33

Hình 4.2 Biểu đồ lớp của hệ thống - 5 S12 S212E1E1111E111171.101 21 111121 ra 35

Bảng 3.3 Giải thích các kí hiểu sử dụng trong biểu đỗ trạng thái - 36

Hình 3.3.1 Biéu đỗ trạng thái chức năng đăng ký đăng nhập 2552 37

Hình 3.3.2 Biếu đỗ trạng thái chức năng đăng bải 2 52-522 22g 38

Hình 3.3.3 Biểu đỗ trạng thái chức năng xem và chỉnh sửa hồ sơ người dùng 39

Hình 3.3.4 Biếu đồ trạng thái chức năng xem và tương tác bài viết 40

Hinh 3.3.5a Biéu d6 trang thái gửi yêu cầu kết bạn - 5S tr 41

Hình 3.3.5b Biêu đồ trang thái phản hồi yêu cầu kết bạn 2-22 zccrở 42

Hình 3.3.6 Biểu đồ trạng thái chức năng nhắn tin - 2 222s£z+22z2 2S zzzzxzz 43

Hình 3.3.7 Biếu đồ trạng thái chức năng quản lý danh mục và luật trang 44

Hình 3.3.8 Biếu đồ trạng thái chức năng quản lý báo cáo 5s csceczszsea 45

LOI MO DAU

Trong thế ký 21, mạng xã hội đã trở thành một phần không thể thiếu của cuộc sống hàng ngày, ảnh hưởng mạnh mẽ đến cách chúng ta giao tiếp, làm việc và tiêu thụ thông tin Việc tích hợp công nghệ thông tin vào xây dựng mạng xã hội không chỉ tạo

ra nền tảng kết nối cá nhân mà còn mở rộng cơ hội cho sự tương tác xã hội trực tuyến trên quy mô lớn Điều nay dan dén su lan rộng về phạm vị và ảnh hưởng của mạng xã hội, đồng thời đặt ra những thách thức mới trong quản ly thông tin, bảo vệ quyền riêng

tư và đảm bảo an toàn trực tuyến

Nhằm áp dụng và vận dụng những kiến thức đã học tại trường cũng như tự tìm

hiểu thực tế, tôi đã lên ý tưởng xây dựng một mạng xã hội đơn giản Mạng xã hội này

sẽ được thiết kế với giao điện thân thiện và dễ sử dụng, giúp người dùng dễ dàng tương tác va chia sẻ nội dung một cách tự nhiên Với tính năng chia sẻ hình ảnh va video, người dùng có thể chia sẻ những khoảnh khắc đặc biệt trone cuộc sông hàng ngày, từ những bức ảnh gia đình đến những video hài hước

Ngoài ra, tôi cũng đề xuất một tính năng cho phép người dùng chia sẻ câu chuyện cá nhân hoặc bài viết về những trải nghiệm, suy nghĩ và cảm xúc của họ Điều này tạo ra một không gian trực tuyến phong phú, nơi mọi người có thể kê chuyện, học hỏi và tương tác với nhau

Với những ý tưởng và tính năng này, tôi hy vọng sẽ vận dụng tôi đa những kiến thức đã học, đồng thời có cơ hội thực hành và trải nghiệm thực tế trong việc phát triển

và quản lý một dự án công nghệ thông tin

Hà Nội, ngày tháng 06 năm 2024

CHUONG I: GIOI THIEU DE TAI 1.1 Giới thiệu đề tài — lý do chọn đề tài

Trong thế giới số hóa ngày nay, có vô số mạng xã hội với các tính năng phức tạp và mục tiêu thương mại Mặc dù chúng mang lại nhiều tiện ích cho người dùng, nhưng cũng đồng thời tạo ra sự nhiễu loạn thông tin, bão hòa nội dung và thậm chí là

thông tin sai lệch Điều này khiến cho việc tìm kiếm một không gian thực sự đề kết nối

và chia sẻ trở nên khó khăn hơn bao giờ hết

Dự án này không nhằm mục đích tạo ra một "cú nhảy vọt" hay thay đổi cách thức hoạt động của internet Thay vào đó, nó là cơ hội để tôi áp dụng những kiến thức

đã học trong bốn năm tại trường, cùng với những hiểu biết mới mà tôi sẽ nghiên cứu

và tiếp thu trong quá trình thực hiện Tôi mong muốn xây dựng một sản phẩm mang lại trải nghiệm đơn giản và gần gũi hơn cho người dùng, nơi mọi người có thê tập trung vào việc chia sẻ và kết nối một cách chân thật và y nghia

Dự án không đòi hỏi nhiều tính năng hay công nghệ phức tạp Tôi hướng đến sự đơn giản nhưng đủ dùng, với một giao diện thân thiện cùng các tính năng dễ tiếp cận

và sử dụng Sự đơn giản này không chỉ giúp người dùng dễ dàng hơn trong việc làm quen và sử dụng, mà còn tạo ra một môi trường không bị phân tán bởi quá nhiều yếu tố phức tạp Tôi hy vọng rằng, dự án này sẽ mang lại một không gian mới mẻ, nơi mọi nguoi co thé trai nghiệm sự kết nối và chia sẻ một cách thực sự

Hơn nữa, tôi cũng hy vọng rằng dự án này sẽ khuyến khích người dùng tập trung vào những giá trị cốt lõi của mạng xã hội - đó là sự giao tiếp, kết nối và chia sẻ Thay vì bị cuốn vào những yếu tổ phụ như quảng cáo hay các tính năng phức tạp, người dùng sẽ có cơ hội trải nphiệm một không sian mạng xã hội thuần túy, nơi họ có thể cảm nhận và trân trọng hơn những mỗi quan hệ và những câu chuyện được chia sẻ Đây cũng chính là mục tiêu lớn nhất mà tôi hướng tới khi thực hiện dự án này

1.2, Nội dung thực hiện và công nghệ sử dụng

Express.js Hiệu suất cao: Node Js sử dụng mô hình sự kiện không đồng bộ

(asynchronous event-driven), giúp xử lý nhiều yêu cầu đồng thời mà không cân tạo nhiều luồng, tăng hiệu suất đáng kê

Đơn giản và linh hoạt: Express.Jjs cung cấp một API tối giản nhưng mạnh mẽ, cho phép phát triển nhanh chóng các ứng dụng web và API

RESTful

Hệ sinh thái phong phu: Node.js c6é mot hé sinh thai rong Ion voi nhiều gói thư viện hữu ích trên npm, giúp dễ dàng tích hợp các tinh nang bé sung

Cộng đồng lớn: Cộng đồng phát triển lớn mạnh, nhiều tài liệu và hỗ trợ từ cộng đồng giúp giải quyết các vấn đề nhanh chóng

React.js

Hiéu suat cao: Su dung Virtual DOM gitp téi wu héa qua trình cập

nhat va render, tăng hiệu suất ứng dụng

Component-based: Cho phép xây dựng các giao diện phức tạp từ các

thành phan nhỏ, tải sử dụng được

Dễ dàng quản lý trạng thái: Sử dụng các thư viện quản lý trạng thái như Redux hoặc Context API, giúp quản lý trạng thải ứng dụng một

cách hiệu quả

SEO-friendly: Với khả năng render phía server (server-side rendering) hoặc sử dụng các framework như Next.Js, giúp cải thiện khả năng tối ưu hóa công cụ tìm kiếm (SEO)

¢ Document-oriented: MongoDB la mét cơ sở dữ liệu NoSQL dựa trên

document, giúp lưu trữ dữ liệu dưới dạng JSON-like documents (BSON) Điều này phù hợp với các ứng dụng web hiện đại yêu cầu

sự linh hoạt trong cầu trúc dữ liệu

® - Scalability: MongoDB hỗ trợ khả năng mở rộng tốt, cho phép đễ dàng thêm các node mới vào cluster đề xử lý lượng đữ liệu lớn

¢ Dynamic schema: MongoDB cho phép lưu trữ dữ liệu với schema MongoDB động, giúp đễ dàng thay đối cầu trúc dữ liệu mà không cần thay đổi

cầu trúc cơ sở dữ liệu

s - Tích hợp tốt với Node.js: Có nhiều thư viện và công cụ hỗ trợ tích hop MongoDB với Node.js, như Mongoose, giúp dễ dàng quản lý và

tương tác với cơ sở dữ liệu

s _ Tính năng mạnh mẽ: MongoDB cung cấp nhiều tính năng như replication, sharding, va hé trợ cho các truy vấn phức tạp giúp xây

dựng các ứng dụng web mạnh mẽ và tin cậy

® Real-time communication: Socket.IO cung cap giao tiếp thời gian thực giữa client và server, giúp xây dựng các ứng dụng đòi hỏi phản hồi tức thì như chat, thông báo, và các ứng dụng cộng tác

® - Đông bộ hai chiều: Socket.IO hỗ trợ đồng bộ hai chiều, cho phép

server và client trao đối dữ liệu liên tục ma không cần thực hiện các

yêu cầu HTTP truyền thống

Socket.IO * Compatibility: Socket.IO hỗ trợ nhiều nền tảng và trình duyệt, dam

bảo rằng ứng dụng của bạn sẽ hoạt động tốt trên hầu hết các thiết bị

® - Scalability: Socket.IO có khả năng mở rộng tốt, hỗ trợ clustering và

dé dàng tích hợp với các giải pháp scale-out khác

® - Fallbacks: Sockct.IO tự động sử dụng các cơ chế fallback như polling nếu WebSocket không được hỗ trợ, đảm bảo khả năng kết nối luôn

1.2.2 Phân tích yêu cầu

- Xác định mục tiêu: Định nghĩa rõ ràng mục tiêu của mạng xã hội, đối tượng

người dùng và các tính năng côt lõi

Thiết kế kiến trúc hệ thông

Frontend với ReactJS: Thiết kế giao diện người dùng bằng ReactJS, bao gồm các thành phân và luồng dữ liệu

Backend với NodeJS: Xây dựng API va logic xu ly phia server voi NodeJS, su dụng Express.Js

Cơ sở dữ liệu với MongoDB: Thiết kế cấu trúc cơ sở dữ liệu để lưu trữ người

dùns, bài viết, bình luận, và các đữ liệu liên quan

API RESTful: Xây dựng các endpoint API để xử lý các yêu cầu từ frontend

(đăng ký, đăng nhập, tạo bài viết, bình luận, )

Authentication va Authorization: Si dung JWT để xác thực và phân quyền

người dùng

Xử lý dữ liệu: Xử lý logic liên quan đến dữ liệu như đăng bài, thích bải viết, theo dõi người dung

Tích hợp cơ sở dít liệu

Thiết lập MongoDB: Cài đặt và cầu hình MongoDB để lưu trữ đữ liệu

Mongoose: Str dung Mongoose để tạo schema và model cho các thực thể trong ứng dụng

Két néi: Két néi NodeJS voi MonpoDB và thực hiện cac thao tac CRUD (Create, Read, Update, Delete)

1.2.7 Bao mat va toi wu hoa

Triển khai và kiểm thir

Triển khai: Triển khai ứng dụng lên các nền tảng cloud như AWS, Heroku, hoặc

DigitalOcean

Bao tri: Dam bao bao tri và cập nhật ứng dụng định kỳ, khắc phục các lỗi và

nâng cấp tính năng mới

Kiểm thử đơn vị (Unit Testing): Viết các bài kiểm thử đơn vị cho các component React và các chức năng NodeJS

Kiểm thử tích hợp (Intepration Testing): Kiểm thử sự tương tác giữa các module và hệ thống tổng thé

Kiểm thử chấp nhận (Acceptance Testing): Đảm bảo ứng dụng đáp ứng các yêu câu và hoạt động đúng với mong đợi của npười dùng cuôi

CHUONG 2: CO SO LY THUYET

2.1 Giới thiệu về phát triển website hiện đại

2.1.1 Kiến tric Client Server

Client chính là khách hàng sử dụng dịch vụ Nó có thể là một tổ chức hay cá

nhân cụ thể nào đó Và khi khái niệm này được sử dụng trone lĩnh vực kỹ thuật số thì

cũng mang ý nghĩa tương tự như vậy Trong CHent Server thì Client chính là một máy

tính (Host) Chúng có khả năng nhận thông tin từ nhà cung cấp và sử dụng dịch vụ cụ thê (Server)

Server: Server là từ dùng để nói về một máy chủ hoặc một phương tiện được sử dụng để phục vụ các dịch vụ nào đó Khi khái niệm nay duoc su dung trong lĩnh vực công nghệ thì Server là một máy tính từ xa Chúng có chức năng là cung cấp các thông tin (dữ liệu) cho một dịch vụ cụ thể nào đó hoặc quyền truy cập đối với dịch vụ 2.1.2 Đánh giá ưu nhược điểm của mô hình Client Server

a, Ưu điểm

Một trong những ưu điểm hàng đầu của mô hình mạng Client-Server là khả năng kiểm soát tập trung, được tích hợp sẵn Tắt cả thông tin cần thiết được tập trung ở một vị trí duy nhất Điều này mang lại sự thuận tiện cho người quản trị mạng, cho phép

họ có quyền kiểm soát và quản lý toàn bộ hệ thống Trong mô hình này, mọi dữ liệu

được bảo vệ một cách tối đa nhờ vào hệ thống kiến trúc tập trung Điều này giúp kiểm

soát truy cập, chỉ cho phép những người được cấp quyền truy cập thực hiện các thao tác cần thiết Mô hình mạng Client-Server cũng có khả năng mở rộng tốt Người dùng

có thể mở rộng số lượng tài nguyên của họ bắt cứ khi nào cần thiết Điều này mang lại tính linh hoạt và khả năng đáp ứng cao đối với nhu cầu sử dụng của người dùng

b, Nhược điểm

Một trong những nhược điểm lớn nhất của mô hình mạng Client-Server là tắc

nghẽn lưu lượng Khi có quá nhiều Client tạo request từ cùng một Server, kết nối có thể trở nên chậm chạp và thậm chí dẫn đến hiện tượng crash Trong trường hợp xấu nhất, khi một server bị quá tải, co thé gây ra nhiều vấn đề khi truy cập thông tin Mạng Client-Server tập trung vào một điểm duy nhất, vì vậy khi Server chính gặp sự cố, toàn

7

bộ hệ thống mạng có thê bị gián đoạn Chi phí cho việc thiết lập và bảo tri Server trong

mô hình này thường rất cao Các hệ thông mạng mạnh mẽ đồng nghĩa với việc giá cả cũng cao tương ứng Khi triển khai các Server, chúng cần hoạt động không ngừng nghỉ, và điều này đòi hỏi sự quan tâm và bảo trì đầy đủ Khi gặp vấn đề, cần phải giải quyết nøay lập tức Do đó, việc có một nhà quản lý mạng chuyên biệt đề duy trì hoạt động của Server là cực ky quan trong

2.2 Single Page Application (SPA)

SPA là một kiểu lập trình web mà ở đó người dùng có thể truy cập vào nhiều trang web con khác nhau mả không làm ảnh hưởng đến trang web gốc Khi người dùng truy cập vào bất kỳ thành phần nảo trên trang, SPA sẽ chỉ chạy nội dung của thành phần đó mà không tải lại toàn bộ trang như các web truyền thống Các thành phần chung như header, footer, thanh menu sẽ được g1ữ nguyên

SPA sẽ tập trung xử lý ở client, đây mạnh hơn vai trò của frontend Frontend chính là phần mà người dùng có thể nhìn thấy và tiếp nhận request của người dùng từ

đó xác định được những tính năng và dữ liệu cần thiết, sau đó mới gửi yêu cầu đến backend Backend nhận yêu cầu và trả về dữ liệu ra bên ngoài website Từ đó làm tăng trải nghiệm người dùng, ø1úp người dùng có cảm giác như đang sử dụng trên mobile

chứ không phải là một trang web

Ví dụ một số mẫu website bạn vẫn sử dung hang ngay duoc lập trình theo kiéu SPA như Facebook, Youtube, Twitter, Shopee,

2.3 Giới thiệu về ReactJs

2.3.1 Giới thiệu

ReactS là một “thư viện” JavaScript mã nguồn mở phát triển boi Facebook va cộng đồng các nhà phát triển trên toàn thế giới Với đặc tính linh hoạt, đơn giản và dễ

sử dụng, ReactlS đã trở thành một trone những công nghệ phát triển web được ưa

chuộng nhất hiện nay

ReactJS được phát triển bởi Facebook và được giới thiệu lần đầu tiên vào năm

2011 Ban đầu, ReactIS được phát triển để xây dựng giao diện người dùng trên trang web Facebook, nhăm cải thiện tốc độ và hiệu suất của ứng dụng web

Tuy nhiên, ReactJS không được công bố cho cộng đồng phát triển cho đến năm

2013, khi Facebook công b6 mã nguồn mở của nó và giới thiệu cho cộng đồng lập

trình viên Từ đó, ReactJS nhanh chóng trở thành một trong những thư viện phô biến

nhất đề phát triển các ứng đụng web động

Sau đó, vào năm 2015, Facebook giới thiệu phiên bản React Native, một framework phát triển ứng dụng đi động sử dụng ReactJS React Native cho phép các nhà phát triển xây dựng các ứng dụng di động cho cả IOS và Android sử dụng củng một mã nguồn, tương tự như ReactJS trên web

Hiện nay, ReactlS đã trở thành một trong những thư viện phát triển web phố biến nhất, được sử dụng rộng rãi bởi các công ty lớn và nhỏ trên toản thế giới Facebook cũng tiếp tục đầu tư phát triển và nâng cấp ReactJS để đáp ứng nhu cầu của cộng đồng phát triển

2.3.2 Lợi ích mang lại cho lập trình viên

- Hiệu suất cao:

+ Su dung Virtual DOM giúp tối ưu hóa hiệu suất của ứng dụng bằng cách cập nhật các thay đối trên trang web một cách nhanh chóng và hiệu quả hơn so với cách truyền thông

+ Tăng tốc độ và hiệu suất của ứng dụng, đặc biệt là trong các ứng dụng có nhiều thay đổi giao diện

- Quan ly trạng thai dé dang:

+ Giúp quản lý trạng thái của ứng dyng mét cach dé dang théng qua State

va Props

+ Cho phép các nhà phát triển quản lý trạng thái của các thành phần UI một cách chính xác và dễ dàng

- _ Hỗễ trợ tốt cho SEO:

Cho phép xây dựng ứng dụng web với khả năng tương thích tốt với SEO

Sử dụng các thư viện như React Helmet đề tùy chỉnh và quản lý các phần

tử meta và title cho từng trang web, giúp tăng cơ hội được tìm thấy trên

các công cụ tìm kiêm

- Hễ trợ đa nền tảng:

+ Không chỉ được sử dụng để phát triển các ứng dụng web, mà còn được

sử dụng để phát triển các ứng dụng di động với React Native

Cho phép xây dựng ứng dụng di động cho cả IOS và Android sử dụng cùng một mã nguồn, giúp tiết kiệm thời gian và chỉ phí phát triển

2.3.3 Tính năng nổi bật

- Components:

+ +

ReactJS cho phép phát triển ứng dụng theo mô hình component Các component là các phần tử UI độc lập có thê tái sử dung trong nhiéu phần khác nhau của ứng dụng

Sự tái str dung component giúp giảm thiểu thời gian và chỉ phí phát triển, đồng thời tăng tính linh hoạt và khả năng mở rộng của ứng dụng

- Virtual DOM:

+ +

- JSX:

ReactJS str dung Virtual DOM để tôi ưu hóa hiệu suất của ứng dụng Virtual DOM là một bản sao của DOM được lưu trữ trong bộ nhớ và được cập nhật một cách nhanh chóng khi có thay đổi

Giúp tăng tốc độ và hiệu suất của ứng dụng bằng cách chỉ cập nhật các phần tử có thay đối, thay vi cap nhật toàn bộ DOM

JSX là một ngôn ngữ lập trình phân biệt được sử dụng trong React!S để

+ ReactJS cho phép quản lý trạng thái của các thành phần UI thông qua State va Props

+ State là trạng thái của một thành phần được quản lý bởi chính nó, trong khi Props là các giá trị được truyền vào tử bên ngoài để tủy chỉnh hoặc

điều khiến hành vi của một thành phần

- Redux: Redux là một thư viện quản lý trạng thái cho các ứng dụng ReactS Nó giúp quản ly trạng thái của ứng dụng một cách chính xác và dễ đàng, đồng thời giup tang tinh linh hoạt và khả năng mở rộng của ứng dụng

2.4, NodeJs

NodeJS là một nền tảng được xây dựng trên V§ JavaScript Engine - trình thông

dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng

NodeJS được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trên nhiều

hệ điều hành khác nhau: OS X, Microsoft Windows, Linux

Ưu điểm của NodeJs:

+ Node1S được viết bằng JavaScript với cộng đồng người dùng lớn mạnh Nếu bạn cần hỗ trợ gì về NodeJS, sẽ nhanh chóng có người hỗ trợ bạn

+ Tốc độ xử lý nhanh: Nhờ cơ chế xử lý bất đồng độ (non-blocking),

Nodel§ có thê xử lý hàng ngàn kết nối cùng lúc mà không gặp bất cứ khó khăn nào

+ Dễ dảng mở rộng: Nếu bạn có nhu cầu phát triển website thi tinh nang dé

đàng mở rộng của NodeJS là một lợi thế cực ky quan trong

11

2.5 ExpressJs

2.5.1 Dinh nghia

Expressjs là một famework được xây dựng trên nền tảng của Nodejs Nó cung

cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các

method HTTP va midleware tao ra API vô cùng mạnh mẽ và dễ sử dụng

Một số chức năng chính:

+ Thiết lập các lớp trung gian dé trả về các HTTP request

+ Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HT TP và URL

+ Cho phép trả về các trane HTML dựa vào các tham số

2.5.2 Middleware

Trong Express.js, middleware là các hàm xử lý trung gian được thực thi tuần tự trong quá trình xử lý yêu cầu HTTP Middleware có thê thực hiện các tác vụ như kiểm tra xác thực, øhi log, xử lý lỗi, xử lý yêu cầu và phản hồi, và nhiều chức năng bổ sung

khác

Middleware trong ExpressJs có hai loại chính: middleware ứng dụng (application-level middleware) và middleware định tuyến (router-level middleware) Middleware wng dung (Application level middleware): Day là những middleware dugc áp dụng cho toàn bộ ứng dụng Express.Js Bạn có thể sử dụng phương thức app.use() để đăng ký middleware ứng dụng Ví dụ:

const cookieParser = require(”cookle-parser”);

12

Một số ví dụ về route:

const router = require(”express”).Router() ; router.post("/register", authController.registerUser) ; router.post("/login", authController.loginUser) ;

Hinh 2.5.2.6 Route methods

router.post("/refresh/:id/:device", authController.requestRefreshToken) ; router put (

"/password/:id", verifyMiddleware.verifyTokenAndUserAuthorization, authController.changePassword

);

Hình 2.5.2.c Route parameters 2.6 Cơ sở dữ liệu và cơ sở dữ liệu NoSQ

Cơ sở dữ liệu (Database) là một hệ thống tô chức và lưu trữ đữ liệu một cách có

tổ chức, sao cho dữ liệu có thể được dễ dàng truy cập và quản lý Cơ sở đữ liệu thường được sử dụng đề lưu trữ thông tin cho các ứng dụng và hệ thông máy tính

Cơ sở đữ liệu NoSQL (Not Only SQL): Đây là một loại cơ sở di liệu mới phát triển gan day, duoc thiết kế để làm việc với các loại dữ liệu không cầu trúc hoặc dữ liệu có cấu trúc không cần phải tuân thủ một mô hình cố định như cơ sở đữ liệu SQL Các cơ sở dữ liệu NoSQL thường được sử dụng cho các ứng dụng web lớn, đữ liệu phân tán và các dạng đữ liệu phong phú khác nhau

Một số ví dụ về cơ sở dữ liệu NoSQL, phổ biến là MongoDB, Cassandra, Couchbase, va Redis

2.7 Mongoose va MongoDb

MongoDB Ia mét co sở dữ liệu NoSQL mà lưu trữ dữ liệu dưới dạng tài liệu

Nó cho phép lưu trữ đữ liệu một cách linh hoạt, không cần một lược đồ cô định trước

khi lưu trữ đữ liệu Mongoose, mặt khác, là một thư viện Mô hình Hóa Dữ liệu Đối

tượng (ODM) cho MongoDB và được sử dụng trong các ứng dụng Node.js để cung cấp một giải pháp dựa trên lược đồ đê mô hình hóa đữ liệu MongoDB

13

Dưới đây là một số điểm khác biệt chính giữa MongoDB và Monpoose: 2.7.1, MongoDB

- _ Là một hệ thống cơ sở dữ liệu không quan hệ

- _ Lưu trữ đữ liệu dưới dạng BSON (một dạng của JSON)

- Không yêu cầu một lược đỗ cô định, cấu trúc dữ liệu có thể thay đổi linh hoạt

- _ Cung cấp khả năng mở rộng ngang để xử lý hiệu suất cao

2.7.2 Mongoose

- Lamét thu vién ODM duoc xay dyng cho MongoDB va JavaScript

- Cung cap một lược đồ cô định cho đữ liệu và mô hình hóa théng qua Schemas

va Models

- Bao gom các tinh nang nhw validation, middleware, va hooks để làm việc với

MongoDB dễ dàng hơn

Mongoose giúp quản lý quan hệ giữa đữ liệu, cung cấp cấu trúc lược đồ và được

sử dụng để ánh xạ dữ liệu trong ứng dụng với đữ liệu trong cơ sở dữ liệu MongoDB Nếu cần một cấu trúc dữ liệu cố định và các tính nang nhu validation, Mongoose c6 thể là một lựa chọn tốt Ngược lại, nếu cần sự linh hoạt cao và không cần đến cấu trúc

dữ liệu cô định, có thê sử dụng MongoDB trực tiếp mà không cần qua Mongoose 2.8 RESTful API

RESTful API la mét tiêu chuan dung trong viéc thiết kế API cho các ứng dụng web (Web services), nhằm quản lý các tài nguyên một cách hiệu quả RESTful API tập trung vào các tài nguyên hệ thông (như tệp văn bản, hình ảnh, âm thanh, video hoặc đữ liệu động) và định dạng trạng thái của các tài nguyên này để truyền tải qua giao thức HTTP Cac tai nguyên được quản lý thông qua các phương thức HTTTP cơ bản như GET, POST, PUT, DELETE, cho phép thực hiện các thao tác đọc, tạo, cập nhật và xóa tài nguyên một cách rõ ràng và hiệu quả

14

2.8.1 Giải thích các thành phần

a, API (Application Programming Interface)

API (Application Programming Interface) la m6t tap các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về đữ liệu mà bạn cần cho ứng dụng của mình ở những kiêu

dữ liệu phô biến như JSON hay XML (hiện tại chủ yếu la dang JSON)

b, Rest (REpresentational State Transfer)

Là một dạng chuyên đổi cầu trúc dữ liệu, một kiểu kiến trúc đề viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì

sử dụng một URL cho việc xử lý một số thông tin người dùng, RESTT pửi một yêu cầu

HTTP như GET, POST, DELETE, đến một URL để xử lý dữ liệu

2.8.2 Cách thức hoạt động

RESTful API hoạt động dựa trên các nguyên tắc của kiến trúc REST (Representational State Transfer) Dưới đây là các bước chính mô tả cách thức hoạt động của RESTful API:

a, Resource Identification (Dinh danh tài nguyén)

Mỗi tài nguyên trên hệ thống được định danh bằng một URI (Uniform Resource Identifier) Vi dụ, một người đùng có thê được định danh bằng URI: /users/123

b, Interaction via HTTP Methods (Tuong tac qua cac phương thức HTP)

RESTful API su dung các phương thức HTTP dé thuc hién cac thao tac CRUD (Create, Read, Update, Delete) trén tai nguyén

- GET: Lay théng tin tài nguyên

- POST: Tao moi mé6t tai nguyén

- PUT: Cap nhật thông tin của tài nguyên

- DELETE: Xóa tài nguyên

Ví dụ:

- GET /users/123: Lay thong tin của người dùng có ID là 123

- POST/users: Tạo mới một người dùng

15

- PUT Asers/123: Cap nhật thông tin của người dùng có ID là 123

- DELETE /users/123: X6a ngwoi dùng có ID là 123

c, Stateless Interactions (Tuong tac kh6ng trạng thái)

Mỗi yêu cầu tir client tới server phải chứa tất cả thông tin cần thiết để hiểu và

xử lý yêu cầu đó Server không lưu trữ trạng thái của client giữa các yêu cầu Điều này

giúp đơn giản hóa thiết kế và cải thiện khả năng mở rộng của hệ thống

d, Representation of Resources (Đại diện của tài nguyên)

Dữ liệu của tài nguyên được gửi đi và nhận về dưới các định dang tiêu chuẩn như JSON hoặc XML Điều này giúp đảm bảo tính tương thích và đễ dàng xử lý đữ liệu siữa các hệ thống khác nhau

2.8.3 Status code

Status codes trong RESTful API được sử dụng dé biéu thi két quả của một yêu

cầu HTTP Dưới đây là một số nhóm status codes chính và các status code phô biến

trong mỗi nhóm:

a, 1xx: Informational

Cac status code này chỉ ra rằng yêu cầu đã được nhận và quá trình xử lý tiếp

- 100 Continue: Server da nhan được phan đầu của yêu cầu và client nên tiếp tục gui phần còn lại của yêu cầu

- 202 Accepted: Yéu cau da duoc chap nhan dé xtr ly, nhưng chưa hoàn thành

- _ 204 No Content: Yêu cầu đã thành công nhưng không có nội dung nào được trả

về

c, 3xx: Redirection

16

Các status code nay chỉ ra rang client cần thực hiện thêm một số hành động để hoàn tât yêu câu

d, 4xx:

e, 5xx:

301 Moved Permanently: Tai nguyén da duoc chuyén đến một URI mới vĩnh viễn

302 Found: Tài nguyên tạm thời nằm ở một URI khác

304 Not Modifed: Tài nguyên không thay đối kế từ lần cuối cùng client yêu cầu, nên không cần tải lại từ server

Client Errors Các status code này chỉ ra rằng yêu cầu có lỗi do phía client

400 Bad Request: Yêu cầu không hợp lệ hoặc không thế hiểu được

401 Unauthorized: Yêu cầu cần xác thực (authentication) nhưng không được cung cấp hoặc không hợp lệ

403 Forbidden: Yêu cầu bị từ chối do không có quyền truy cập vào tài nguyên

404 Not Found: Tài nguyên yêu cầu không tồn tại trên server

405 Method Not Allowed: Phương thức HTTP được sử dụng không được hỗ trợ cho tài nguyên yêu cầu

409 Conflict: Có xung đột trong yêu cầu, thường xảy ra trone các yêu cầu liên quan đến cập nhật dữ liệu

Server Errors Cac status code nay chi ra rang server gặp lỗi khi xử lý yêu cầu

500 Internal Server Error: Server gap 16i không xác định khi xử lý yêu cầu

501 Not Implemented: Server không hỗ trợ phương thức yêu cầu

502 Bad Gateway: Server nhận được phản hồi không hợp lệ từ một server khác

503 Service Unavailable: Server hiện không thê xử lý yêu cầu (thường do quá tải hoặc bảo trì)

17

2.9 WebSocket

2.9.1 Giao thức websockef

WebSocket là một giao thức giúp truyền dữ liệu hai chiều giữa server và client qua một kết nối TCP duy nhất Được thiết kế như một phần cua HTMLS, WebSocket

sử dụng các công 80 và 443 tiêu chuẩn, giúp nó có thê hoạt động trên các công web mà

không gặp phải vấn đề về mở công, tường lửa hay proxy server

Khác với giao thức HTTP, nơi mà client phải chủ động gửi yêu cầu đến server

và sau đó chờ đợi phản hồi, với WebSocket, server có thê chủ động gửi đữ liệu đến client mà không cần phải nhận yêu cầu trước Điều này có nghĩa là một khi kết nối WebSocket được thiết lập, server có thê đây thông tin đến client ngay lập tức, và client cũng có thê gửi tin nhắn đến server bất cứ lúc nào

Tất cả dữ liệu giao tiếp giữa client và server được sửi trực tiếp qua một kết nối

cố định, øiúp truyền tải thông tin một cách nhanh chóng và liên tục WebSocket giảm

độ trễ vì một khi kết nối đã được thiết lập, server không cần phải chờ đợi một yêu cầu

từ client, giúp cải thiện hiệu suất đáng kê

Để sử dụng WebSocket, không chỉ trình đuyệt phải hỗ trợ mà còn cần một server WebSocket Server WebSocket có thể được tạo ra bằng nhiều ngôn ngữ server- side khác nhau, nhưng Node.js thường được sử dụng rộng rãi nhất vì nó sử dụng JavaScript, mang lại nhiêu lợi ích so với các ngôn ngữ server-side truyền thông khác

18

2.9.3 Thư viện SocketlO

Socket.IO là một bộ thư viện dành cho các ứng dụng web, mobile đê phát triển các ứng dụng realtime Với đặc trưng mạnh mẽ và dễ sử dụng, Socket.IO đang ngày cảng được sử dụng rộng rãi từ những trang mạng xã hội cần sự tương tác cao, đến các blog hay cac trang web thương mại điện tử Với bộ thư viện này, làm việc với

WebSockets trở nên đơn giản hơn rất nhiều Thư viện gồm 2 phân:

- Phía client: gồm bộ thư viện viết cho web(JavaScript), IOS, Android

- _ Phía server: viết bằng JavaScript và dùng cho các máy chủ NodeJs

Nó sẽ tự động chuyên sang Websocket nếu có thê, hầu hết các trình duyệt hiện nay đã hỗ trợ websocket nên việc sử dụng socket.io trên trình duyệt cũng là đang sử dụng websocket nên việc sử dụng socket.io rất đơn giản và giống nhau ở cả client lẫn

server nó bao gồm 3 phân chính:

- _ Khởi tạo kết nối (riêng ở server không có)

- Lang nghe event

19

- Gui event 2.10 Json Web Token

2.10.1, Khai niém

JWT là một phương tiện đại diện cho các yêu cầu chuyên giao giữa hai bên Client — Server , cac thông tin trong chuỗi JWT được định đạng bằng JSON Trong đó chuéi token phai cé 3 phan la header , phan payload va phan signature dugc ngăn bằng

cc 39

dâu “

eyJhbGci0iJIUZI1NiIsInRScCI6IkpXVCJ9 ey JzdWTi01TxMjMðNTY30DkwTiwibmFtZST6Tkpva G4gRG91TiwiaWF6TjoxNTE2MjM5MDTyfQ.cThTT oDvwdueQB468K5xDc5633seEFoqwxjF _xSJyQQ

Hình 2.10.a Ví dụ về một chuối token

Hình 2.10.b Mã token sau khi giải mã

20

}

Hình 2.10.2a Cấu trúc của header (JWT)

Chỉ tiết:

“typ” (type) chỉ ra rằng đối tượng là một JWT

- _ “ala” (alporithm) xác định thuật toán mã hóa cho chuỗi là HS256

Hinh 2.10.2b Payload (JWT)

21

c, Signature (chit ky)

Phan chit ky nay sé duoc tao ra bang cach mã hóa phần header , payload kém theo một chuỗi secret (khóa bí mật)

data = base64urlEncode( header ) + + base64urlEncode( payload ) signature = Hash( data, secret );

Hình 2.10.2c Mã hóa chữ ký (JWT) Trong hình 2.10.2c , base64UrlEncoder là thuật toán mã hóa header và payload 2.10.3 Khinao nén ding JWT

Authentication (xac thue): Day 1a truong hop phé bién nhat ma JWT thuong được sử dụng Khi người dùng đã đăng nhập vào hệ thống, các yêu cầu tiếp theo từ phía người dùng sẽ chứa thêm mã JWT Điều này cho phép người dùng được cấp quyền truy cập vào các URL, dịch vụ và tài nguyên mà mã token đó cho phép Phương pháp này không bị ảnh hưởng bởi CORS do nó không sử dụng cookte

Trao đối thong tin: JSON Web Token là một cách thức hiệu quả để truyền thông tin an toàn giữa các bên, nhờ vào phần chữ ký của nó Người nhận có thể xác định được người gửi thông qua phần chữ ký Chữ ký được tạo ra bằng cách kết hợp cả phần header và payload, giúp xác nhận rằng chữ ký không bị giả mạo

b, Thiếu mã hóa đữ liệu

- Mô tả: Gửi dữ liệu nhạy cảm qua mạng ma không mã hóa, dễ bị tấn công bởi nghe lén (eavesdropping) Khi di liệu nhạy cảm (như thông tin đăng nhập, thông tin cá nhân, thông tin thanh toán ) được gửi qua mạng mà không được

22

mã hóa, các kẻ tân công có thể sử dụng các kỹ thuật nghe lén (eavesdropping)

dé chan va doc dữ liệu này Điều này thường xảy ra khi dữ liệu được truyền qua

giao thức HTP không an toản

Hậu quả:

+ Lộ thông tin cá nhân của người dùng

+ Lộ thông tin xác thực (tên người dùng, mật khâu)

+ Lộ thông tin tài chính (số thẻ tin dụng, chỉ tiết ngân hang)

Khắc phục: Sử dụng HTTPS đề mã hóa dữ liệu truyền tải giữa client và server

c, Không kiêm tra đầu vào

Mô tả: Chấp nhận và xử lý đữ liệu đầu vào mà không kiếm tra, dé bị tân công boi SQL Injection, XSS

Khắc phục: Luôn xác thực và làm sạch dữ liệu đầu vào, sử dụng các cơ chế

phòng chống như prepared statements cho SQL queries

d, Cấu hình sai CORS

Mô tả: Cấu hình Cross-Origin Resource Sharing (CORS) không đúng cách, có thê dẫn đến việc cho phép truy cập từ nguồn không tin cậy

Khắc phục: Cấu hình CORS một cách cân thận, chỉ cho phép các nguồn tin cậy

khác

Mục đích tân công:

-._ Án cắp cookie va session tokens

- Gia mao nguoi dung khac

23

Thực hiện các hành động thay mặt người dùng bị tắn công

Cách thức tân công:

Ké tấn công chèn mã độc vào ứng dụng web: Điều này có thể xảy ra thông qua các đầu vào không được kiểm tra như form nhập liệu, URL parameters, hoặc bất kỳ nơi nào mà người dùng có thể nhập đữ liệu

Mã độc được gửi tới người dùng: Khi người dùng truy cập trang web với

mã độc, mã này sẽ được trình duyệt của người dùng thực thị

Mã độc thực thị trên trình duyệt của người dùng: Mã JavaScript độc hai

có thể đánh cắp cookies, hiển thị nội dung giả mạo, hoặc thực hiện các hành động thay mặt người dùng

Cách phòng chống:

Làm sạch và xác thực đầu vào: Kiểm tra và làm sạch tất cả dữ liệu đầu vào tử người dùng Chỉ cho phép các ký tự hợp lệ và loại bỏ các ký tự đặc biệt có thể gây nguy hiểm

Mã hóa dữ liệu đầu ra:Mã hóa tất cả đữ liệu đầu ra trước khi hiển thị trên trình duyệt Sử dụng các hàm mã hóa đề đảm bảo rằng đữ liệu không thế

bị hiểu như mã HTML hoặc J avaScript

Sử dụng Content Security Policy (CSP): Cau hinh CSP dé chi cho phép

tải và thực thí các tải nguyên từ các nguồn tin cậy CSP có thê giúp ngăn

chặn mã độc không được phép thực thị trên trang

Sử dụng các thư viện va framework bao mat: Str dung các thư viện và framework đã được kiểm chứng và bảo mật Các famework như React, Angular, và Vue thường có các cơ chế bảo vệ XSS tích hợp

Kiểm tra bảo mật thường xuyên: Thực hiện các bài kiểm tra bảo mật thường xuyên đề phát hiện và vá các lễ hồng bảo mật kịp thời

b, Cross-Site Request Forgery (CSRF)

Cross-site request forgery (CSRF) 1a mét loai tan céng mang, trong d6 ké tan công lừa người dùng thực hiện các hành động không mong muốn trên một trang web

mà họ đã đăng nhập bằng cách sử dụng quyên truy cập của người dùng đó Thường thi người dùng sẽ không nhận ra rằng họ đang thực hiện các hành động nảy, vì vậy tấn

24