Xây dựng hệ thống mô phỏng giải pháp kỹ thuật xác thực nhanh trực tuyến

NHIỆM VỤ VÀ NỘI DUNG: Xây dựng hệ thống mô phỏng sử dụng hình ảnh minh họa 2D hoặc 3D để mô tả giải pháp kỹ thuật “xác thực nhanh trực tuyến - FIDO” một cách trực quan, có thể tương tác

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC BÁCH KHOA

-

PHẠM NGỌC KHOA

XÂY DỰNG HỆ THỐNG MÔ PHỎNG GIẢI PHÁP

KỸ THUẬT XÁC THỰC NHANH TRỰC TUYẾN

Chuyên ngành: HỆ THỐNG THÔNG TIN QUẢN LÝ

Mã số: 60.34.04.05

LUẬN VĂN THẠC SĨ

TP HỒ CHÍ MINH, tháng 12 năm 2017

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC BÁCH KHOA

-

PHẠM NGỌC KHOA

XÂY DỰNG HỆ THỐNG MÔ PHỎNG GIẢI PHÁP

KỸ THUẬT XÁC THỰC NHANH TRỰC TUYẾN

Chuyên ngành: HỆ THỐNG THÔNG TIN QUẢN LÝ

Mã số: 60.34.04.05

LUẬN VĂN THẠC SĨ

TP HỒ CHÍ MINH, tháng 12 năm 2017

CÔNG TRÌNH ĐƯỢC HOÀN THÀNH TẠI TRƯỜNG ĐẠI HỌC BÁCH KHOA –ĐHQG -HCM Cán bộ hướng dẫn khoa học: PGS.TS Đặng Trần Khánh

Cán bộ chấm nhận xét 1: TS Nguyễn Tuấn Đăng

Cán bộ chấm nhận xét 2: TS Trần Minh Quang

Luận văn thạc sĩ được bảo vệ tại Trường Đại học Bách Khoa, ĐHQG Tp HCM ngày 29 tháng 12 năm 2017

Thành phần Hội đồng đánh giá luận văn thạc sĩ gồm:

(Ghi rõ họ, tên, học hàm, học vị của Hội đồng chấm bảo vệ luận văn thạc sĩ)

1 TS Nguyễn Thanh Bình, Chủ tịch

2 TS Phan Trọng Nhân, Thư ký

3 TS Nguyễn Tuấn Đăng, Phản biện 1

4 TS Trần Minh Quang, Phản biện 2

5 TS Lê Lam Sơn, Ủy viên

Xác nhận của Chủ tịch Hội đồng đánh giá LV và Trưởng Khoa quản lý chuyên ngành sau khi luận văn đã được sửa chữa (nếu có)

TS Nguyễn Thanh Bình

ĐẠI HỌC QUỐC GIA TP.HCM

TRƯỜNG ĐẠI HỌC BÁCH KHOA

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ LUẬN VĂN THẠC SĨ

Họ tên học viên: PHẠM NGỌC KHOA MSHV:7141138

Ngày, tháng, năm sinh: 18/03/1985 Nơi sinh: Vĩnh Long

Chuyên ngành: Hệ thống thông tin quản lý Mã số : 60 34 04 05

I TÊN ĐỀ TÀI: XÂY DỰNG HỆ THỐNG MÔ PHỎNG GIẢI PHÁP KỸ

THUẬT XÁC THỰC NHANH TRỰC TUYẾN

II NHIỆM VỤ VÀ NỘI DUNG:

Xây dựng hệ thống mô phỏng sử dụng hình ảnh minh họa 2D hoặc 3D để mô tả

giải pháp kỹ thuật “xác thực nhanh trực tuyến - FIDO” một cách trực quan, có thể

tương tác được với người dùng để mọi người có thể dễ dàng tiếp cận và hình

dung được về giải pháp kỹ thuật FIDO

Bằng hình thức khảo sát giúp đánh giá được mức độ hỗ trợ của hệ thống mô

phỏng vào hoạt động kinh doanh của doanh nghiệp

III NGÀY GIAO NHIỆM VỤ: 16/01/2017

IV NGÀY HOÀN THÀNH NHIỆM VỤ: 18/06/2017

LỜI CẢM ƠN

Trước hết, tôi xin bày tỏ lòng biết ơn sâu sắc và gửi lời cám ơn chân thành đến thầy P.GS TS Đặng Trần Khánh, người đã tận tình hướng dẫn, chỉ bảo tôi trong suốt thời gian thực hiện đề tài Qua thời gian làm việc với thầy, tôi đã học hỏi được nhiều kiến thức bổ ích cùng với đó là tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc của thầy

Tôi xin chân thành cám ơn quý thầy cô khoa Khoa học và Kỹ thuật máy tính, trường Đại học Bách Khoa thành phố Hồ Chí Minh đã truyền đạt cho tôi những kiến thức quý báu trong suốt quá trình học tập và tạo điều kiện cho tôi thực hiện luận văn này

Tôi xin gửi lời cám ơn chân thành đến bạn bè, đồng nghiệp đã luôn hỗ trợ, giúp đỡ

để tôi có thể vượt qua những khó khăn trong suốt quá trình làm đề tài Những người

đã tham gia thử nghiệm và khảo sát rất nhiệt tình cho đề tài nghiên cứu này

Cuối cùng, tôi xin gửi lời cám ơn đến gia đình, những người đã luôn bên cạnh động viên, hỗ trợ và giúp đỡ tôi trong suốt quá trình thực hiện đề tài nghiên cứu của mình

Mặc dù đã cố gắng hoàn thành luận văn trong phạm vi và khả năng cho phép nhưng chắc chắn không tránh khỏi những thiếu sót Kính mong nhận được sự thông cảm và chỉ bảo của quý Thầy Cô và các bạn

Thành phố Hồ Chí Minh, ngày 04 tháng 12 năm 2017

Phạm Ngọc Khoa

TÓM TẮT LUẬN VĂN

Kỹ thuật mô phỏng 2D, 3D hiện nay không còn xa lạ với nhiều người, nhất là trong thời buổi bùng nổ và phát triển mạnh mẽ của nền công nghiệp 4.0 Việc ứng dụng công nghệ thông tin vào quản lý và sản xuất được xem như là một nhu cầu tất yếu của hầu hết các doanh nghiệp hiện nay Và trong quá trình hội nhập đó, thương mại điện tử được xem như là một trong những yếu tố cốt lõi để đẩy mạnh phát triển của doanh nghiệp Bên cạnh đó, vấn đề bảo mật cho thương mại điện tử ngày nay vẫn đang là đề tài được rất nhiều doanh nghiệp quan tâm

Bài luận văn này tiến hành xây dựng và phát triển một hệ thống mô phỏng giải pháp

kỹ thuật xác thực nhanh trực tuyến – FIDO, sử dụng các hình ảnh minh họa theo không gian 2D hoặc 3D để mô phỏng lại giải pháp kỹ thuật FIDO nhằm giúp cho các đối tượng người dùng dễ dàng tiếp cận với giải pháp kỹ thuật này

Hệ thống đã được phát triển và đưa ra khảo sát với người dùng cuối đang làm việc cho các doanh nghiệp chuyên về giải pháp, những doanh nghiệp quan tâm đến các giải pháp kỹ thuật nhằm đánh giá được mức độ ảnh hưởng của hệ thống mô phỏng này đến hoạt động kinh doanh của các doanh nghiệp

ABSTRACT

2D and 3D simulation techniques are no longer new to many people, especially in the boom times of the industry revolution The application of information technology in management and production is considered as an inevitable need of most enterprises today And in the process of integration, e-commerce is considered

as one of the core elements to promote the development of business In addition, security issues for e-commerce today are still a topic of interest to many businesses This essay builds and develops an online simulation for a solution called FIDO, using 2D or 3D spatial imagery to simulate the FIDO technical solution This makes

it easy for users to access this technical solution

The system has been developed and explored with end users working for business solution, who are interested in technical solutions to assess the impact of the simultating system to the business process

LỜI CAM ĐOAN

Tôi cam đoan rằng đề cương luận văn thạc sĩ của tôi dưới sự hướng dẫn của P.GS

TS Đặng Trần Khánh là do tôi thực hiện, ngoại trừ các kết quả, tham khảo được tham khảo từ các công trình khác Các tham khảo này đều được ghi rõ trong phần Tài liệu tham khảo

Tác giả luận văn

Phạm Ngọc Khoa

MỤC LỤC

TỔNG QUAN ĐỀ TÀI 1

1.1 Lý do chọn đề tài 1

1.2 Ý nghĩa khoa học và thực tiễn 2

1.3 Mục tiêu nghiên cứu 3

1.4 Đối tượng và phạm vi nghiên cứu 3

1.5 Phương pháp nghiên cứu 4

1.6 Cấu trúc đề tài 4

CƠ SỞ LÝ THUYẾT 6

2.1 Tổng quan giải pháp kỹ thuật FIDO 6

2.1.1 Giới thiệu 6

2.1.2 Lịch sử hình thành 6

2.1.3 FIDO hoạt động như thế nào? 7

2.1.4 Giới thiệu FIDO UAF 9

2.1.5 Giới thiệu FIDO U2F 13

2.1.6 Tại sao chúng ta nên sử dụng giải pháp FIDO? 14

2.2 Giới thiệu WebGL 16

2.2.1 WebGL là gì? 16

2.2.2 Cơ bản về đồ họa 17

2.2.3 Cơ bản về HTML-5 canvas 19

2.2.4 Cơ bản về WebGL 20

2.2.5 Graphics Pipeline 24

2.2.6 Tại sao chọn WebGL? 27

PHÂN TÍCH HIỆN TRẠNG VẤN ĐỀ NGHIÊN CỨU 28

3.1 Các công trình nghiên cứu có liên quan 28

3.2 Phân tích hiện trạng của vấn đề nghiên cứu 29

3.3 Mô hình đề xuất áp dụng vào quy trình kinh doanh của doanh nghiệp 30

3.4 Nội dung và quy trình chi tiết sẽ thực hiện cho hệ thống mô phỏng 31

PHÁT TRIỂN HỆ THỐNG 42

4.1 Kiến trúc và công nghệ thực hiện 42

4.2 Các chức năng và giao diện từng chức năng 44

KHẢO SÁT ĐÁNH GIÁ HỆ THỐNG 53

5.1 Phương pháp xây dựng bảng khảo sát 53

5.1.1 Dữ liệu cần thu thập 53

5.1.2 Đối tượng khảo sát 53

5.1.3 Phương pháp khảo sát 53

5.1.4 Hình thức câu trả lời 54

5.2 Kết quả khảo sát 54

5.2.1 Kết quả khảo sát thực trạng tiếp cận các giải pháp kỹ thuật hiện nay 55

5.2.2 Kết quả khảo sát về giải pháp kỹ thuật FIDO sau khi xem xong hệ thống mô phỏng 56

5.2.3 Kết quả khảo sát về đóng góp của hệ thống mô phỏng giải pháp kỹ thuật FIDO vào hoạt động kinh doanh của doanh nghiệp 58

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 62

6.1 Kết luận 62

6.2 Hướng phát triển 62

TÀI LIỆU THAM KHẢO 64

PHỤ LỤC 65

DANH MỤC HÌNH ẢNH

Hình 1-1 Sơ đồ phương pháp nghiên cứu 4

Hình 2-1 Quá trình đăng ký tài khoản 8

Hình 2-2 Quá trình xác thực tài khoản 9

Hình 2-3 Chuẩn mô hình sử dụng FIDO UAF 10

Hình 2-4 Mô hình kiến trúc FIDO UAF 10

Hình 2-5 Mô hình kiến trúc của bộ xác thực 12

Hình 2-6 Chuẩn mô hình FIDO U2F 13

Hình 2-7 Mô hình hệ sinh thái FIDO U2F 14

Hình 2-8 So sánh giải pháp xác thực FIDO với giải pháp xác thực truyền thống 15

Hình 2-9 Lõi của CPU và GPU 18

Hình 2-10 Tăng tốc xử lý trên GPU 19

Hình 2-11 Hệ tọa độ trong WebGL 21

Hình 2-12 Chỉ số trong WebGL 22

Hình 2-13 Shader Programs 24

Hình 2-14 Graphics pipeline của WebGL 25

Hình 2-15 Các bước xử lý của WebGL 27

Hình 3-1 Phân loại người dùng hệ thống mô phỏng FIDO 31

Hình 3-2 FIDO là gì 32

Hình 3-3 Cách sử dụng FIDO 33

Hình 3-4 Đăng ký FIDO UAF 34

Hình 3-5 Xác thực FIDO UAF 36

Hình 3-6 Đăng ký FIDO U2F 38

Hình 3-7 Xác thực FIDO U2F 40

Hình 3-8 Mô hình User case tương tác giữa người dùng với hệ thống mô phỏng 41

Hình 4-1 Mô hình kiến trúc của hệ thống 43

Hình 4-2 Mô hình kiến trúc lớp với lớp giao diện 44

Hình 4-3 Giao diện trang chủ 45

Hình 4-4 Chức năng FIDO là gì 45

Hình 4-5 Giao diện sau khi kết thúc quá trình mô phỏng FIDO là gì 46

Hình 4-6 Chi tiết chức năng FIDO là gì 47

Hình 4-7 Giao diện trang cách sử dụng FIDO 47

Hình 4-8 Cách sử dụng FIDO UAF 48

Hình 4-9 Cách sử dụng FIDO U2F 49

Hình 4-10 Giao diện chọn xem cách hoạt động của FIDO theo từng loại 49

Hình 4-11 Giao diện chọn xem cách hoạt động FIDO UAF 50

Hình 4-12 Mô phỏng chi tiết quá trình hoạt động của FIDO UAF 50

Hình 4-13 Giao diện chọn xem cách hoạt động FIDO U2F 51

Hình 4-14 Mô phỏng chi tiết quá trình đăng ký tài khoản FIDO U2F 52

Hình 5-1 Nghề nghiệp của người tham gia khảo sát 54

Hình 5-2 Vị trí công việc hiện tại của người tham khảo sát 55

Hình 5-3 Đánh giá mức độ khó khăn khi sử dụng giải pháp bảo mật truyền thống 56 Hình 5-4 Đánh giá mức độ tin tưởng vào các giải pháp bảo mật truyền thống 57

Hình 5-5 Số lượng người dùng đã tìm hiểu về giải phải FIDO 57

Hình 5-6 Đánh giá lợi ích của FIDO mang lại cho người dùng 58

Hình 5-7 Đánh giá về xu hướng phát triển của giải pháp kỹ thuật FIDO 58

Hình 5-8 Đánh giá của người dùng về chức năng cách sử dụng FIDO 59

Hình 5-9 Đánh giá về lợi ích của hệ thống mô phỏng FIDO 59

Hình 5-10 Đánh giá về lợi ích hỗ trợ kinh doanh của hệ thống 60

Hình 5-11 Ý kiến về việc áp dụng hệ thống mô phỏng vào hoạt động kinh doanh 60 Hình 5-12 Ý kiến về tác động của hệ thống đến quyết định mua hàng 61

DANH MỤC BẢNG BIỂU

Bảng 2-1 So sánh giải pháp FIDO với giải pháp chữ ký số PKI 16 Bảng 2-2 Trình duyệt hỗ trợ WebGL 17

Có rất nhiều chuyên gia bảo mật kết hợp với các công ty công nghệ đã cùng nhau tìm hiểu các giải pháp cho các vấn đề bảo mật này và đã đưa ra được nhiều giải pháp bảo mật như One Time Password – OTP, Public Key Infrastructure – PKI, … Tuy nhiên những giải pháp bảo mật này cũng tồn tại nhiều vấn đề về nhiều mặt khác nhau như khả năng bảo mật, chi phí đầu tư thiết bị cơ sở hạ tầng, sự tiện lợi cho người dùng, …

Để khắc phục các nhược điểm đang tồn tại đối với các giải pháp bảo mật hiện tại, một nhóm các công ty công nghệ hàng đầu như Google, NXP, PayPal, Lenovo, …

đã kết hợp lại với nhau để nghiên cứu và đưa ra một tiêu chuẩn bảo mật mới là “xác thực nhanh trực tuyến - FIDO” Nhằm cung cấp thêm một sự lựa chọn về giải pháp bảo mật cho các nhà cung cấp dịch vụ, ứng dụng mang đến nhiều trải nghiệm thuận tiện cho người dùng cuối

Với nhiều năm kinh nghiệm làm việc trong lĩnh vực nghiên cứu và phát triển dự án, tôi nhận thấy một vấn đề gây khó khăn lớn nhất đối với các chuyên viên phát triển

dự án khi bắt đầu phát triển một dự án mới là khâu phân tích tiếp cận dự án: vấn đề

kỹ thuật, mô hình tổng quan của dự án, … để hiểu rõ được các vấn đề này đòi hỏi các nhà phân tích dự án phải tìm hiểu qua rất nhiều tài liệu kỹ thuật có liên quan  tốn rất nhiều thời gian để tìm hiểu một vấn đề mới

Sau khi các nhà phân tích đã hiểu được vấn đề thì lại gặp phải một vấn đề khác đó

là làm sao để truyền đạt lại các vấn đề kỹ thuật này cho tất cả thành viên trong nhóm dự án hiểu để xây dựng và phát triển hệ thống? Làm sao để các nhân viên bán hàng, tiếp thị của doanh nghiệp hiểu được giải pháp kỹ thuật một cách tổng quan nhất để tiếp thị, trao đổi và thuyết phục khách hàng sử dụng giải pháp này? Làm sao

để trình bày cho khách hàng hiểu được tổng quan về mô hình, kỹ thuật của dự án để quyết định đầu tư vào dự án? Làm sao để thuyết phục được đối tác thấu hiểu được các vấn đề kỹ thuật của dự án để cùng nhau hợp tác và phát triển dự án? Từ các câu hỏi trên, tôi đã đi đến một quyết định là phải “XÂY DỰNG HỆ THỐNG MÔ PHỎNG GIẢI PHÁP KỸ THUẬT XÁC THỰC NHANH TRỰC TUYẾN” sử dụng hình ảnh minh họa 2D (2-Dimension) hoặc 3D (3-Dimension) để mô tả giải pháp kỹ thuật này một cách trực quan và có thể tương tác được với người dùng để mọi người

có thể dễ dàng tiếp cận được với giải pháp kỹ thuật cũng như mô hình tổng quan của dự án

1.2 Ý nghĩa khoa học và thực tiễn

a Ý nghĩa khoa học

Hiểu về giải pháp xác thực nhanh trực tuyến – FIDO

Biết cách xây dựng một hệ thống mô phỏng giải pháp kỹ thuật trên nền web sử dụng thư viện WebGL có khả năng mở rộng và tương tác với người dùng

Đánh giá mức độ hỗ trợ của hệ thống mô phỏng vào hoạt động kinh doanh của doanh nghiệp, làm tăng hiệu quả kinh doanh và sự tin tưởng của khách hàng đối với doanh nghiệp

b Ý nghĩa thực tiễn

Đề tài giới thiệu một giải pháp xác thực mới tuân theo chuẩn, đơn giản hơn và mạnh

mẽ hơn hiện chưa được áp dụng phổ biến tại Việt Nam

Giúp các đối tượng quan tâm đến giải pháp FIDO dễ dàng tiếp cận hơn và rút ngắn thời gian tìm hiểu hơn so với cách tiếp cận thông qua các tài liệu kỹ thuật mô tả dài dòng và khó hiểu

Đánh giá khả năng hỗ trợ của hệ thống vào hoạt động kinh doanh của doanh nghiệp thông qua khảo sát đánh giá hệ thống

1.3 Mục tiêu nghiên cứu

Mục tiêu hướng đến của đề tài là giới thiệu giải pháp kỹ thuật xác thực nhanh trực tuyến - FIDO và nhu cầu triển khai của giải pháp trong thực tế

Xây dựng một hệ thống mô phỏng sử dụng hình ảnh minh họa 2D hoặc 3D để mô tả giải pháp kỹ thuật xác thực nhanh trực tuyến - FIDO một cách trực quan và có thể tương tác được với người dùng để mọi người có thể dễ dàng tiếp cận và hình dung được về giải pháp kỹ thuật của giải pháp dựa trên các tài liệu mô tả về giải pháp Đồng thời hệ thống phải có khả năng mở rộng để dễ dàng tích hợp mô phỏng các giải pháp kỹ thuật khác

Bên cạnh đó, hệ thống mô phỏng còn giúp đánh giá được mức độ hỗ trợ của hệ thống mô phỏng vào hoạt động kinh doanh của doanh nghiệp thông qua khảo sát đánh giá người dùng

Để thực hiện được mục tiêu này, đề tài cần phải thực hiện các vấn đề như sau:

• Tìm hiểu về giải pháp kỹ thuật FIDO: mô hình tổng quát, đặc điểm kỹ thuật, thành phần, phân loại, hệ sinh thái có liên quan, các quá trình hoạt động, …

• Tìm hiểu về ngôn ngữ xây dựng hệ thống: Java EE, JavaScript, WebGL

• Phân tích và thiết kế hệ thống mô phỏng

• Xây dựng và khảo sát đánh giá hệ thống

1.4 Đối tượng và phạm vi nghiên cứu

- Giải pháp kỹ thuật FIDO

- Ngôn ngữ lập trình hệ thống Java EE, Java Script

- WebGL: thư viện đồ họa trên nền web

1.5 Phương pháp nghiên cứu

Mục tiêu nghiên cứu

Cơ sở lý thuyết(FIDO, WebGL)

Phân tích hệ thống

Thiết kế hệ thống

Xây dựng hệ thống

Khảo sát đánh giá

Hình 1-1 Sơ đồ phương pháp nghiên cứu

Sau khi xác định mục tiêu nghiên cứu, tiến hành tìm hiểu các cơ sở lý thuyết có liên quan như: giải pháp kỹ thuật FIDO và thư viện mô phỏng WebGL Sau đó tiến hành phân tích, thiết kế hệ thống mô phỏng và phát triển hệ thống dựa trên các thiết kế này

Khi đã xây dựng xong hệ thống mô phỏng, tiến hành xây dựng bảng câu hỏi khảo sát, đưa ra khảo sát và thu thập ý kiến đánh giá của người dùng về hệ thống mô phỏng để phân tích kết quả

1.6 Cấu trúc đề tài

Nội dung chính của đề tài gồm 6 chương:

Chương 1: Giới thiệu tổng quan đề tài - Giới thiệu khái quát về lý do lựa chọn đề tài, mục tiêu, ý nghĩa khoa học và ý nghĩa thực tiễn của đề tài nghiên cứu, đối tượng

và phạm vi nghiên cứu, cũng như các phương pháp sẽ áp dụng để hiện thực hóa đề tài

Chương 2: Cơ sở lý thuyết – Cung cấp kiến thức tổng quan về giải pháp kỹ thuật FIDO và thư viện đồ họa WebGL

Chương 3: Phân tích hiện trạng vấn đề nghiên cứu – Khảo sát các đề tài nghiên cứu

có liên quan, phân tích hiện trạng vấn đề nghiên cứu và trình bày nội dung và quy trình chi tiết sẽ thực hiện cho hệ thống mô phỏng

Chương 4: Phát triển hệ thống mô phỏng – Trình bày kiến trúc và công nghệ thực hiện, các chức năng và giao diện từng chức năng

Chương 5: Khảo sát đánh giá hệ thống – Nêu phương pháp xây dựng bảng khảo sát

và kết quả khảo sát hệ thống

Chương 6: Kết luận và hướng phát triển – Nêu kết luận về kết quả khảo sát hệ thống, những điểm còn hạn chế của hệ thống và hướng phát triển của đề tài trong tương lai

CƠ SỞ LÝ THUYẾT

2.1 Tổng quan giải pháp kỹ thuật FIDO

2.1.1 Giới thiệu

FIDO là từ viết tắt của Fast IDentity Online, có thể hiểu là xác thực nhanh trực

tuyến Giải pháp FIDO được tạo ra bởi Liên minh FIDO (FIDO Alliance) với phiên bản đầu tiên vào ngày 09 tháng 12 năm 2014 nhằm mục đích mang đến một chuẩn xác thực mới đơn giản hơn và mạnh mẽ hơn

FIDO cung cấp hai loại trải nghiệm cho người sử dụng để giải quyết hàng loạt các trường hợp sử dụng và các kịch bản triển khai khác nhau đó là FIDO UAF và FIDO U2F Giao thức của FIDO dựa trên mã hóa khóa công khai và nó có khả năng chống lại hoàn toàn kiểu tấn công bằng cách tạo ra các trang web giả mạo (phishing attack) Một kiểu tấn công đang rất phổ biến hiện nay để lấy cắp thông tin tài khoản giao dịch trực tuyến của người dùng cuối nhằm thực hiện các ý đồ xấu

2.1.2 Lịch sử hình thành

Liên minh FIDO được tuyên bố thành lập vào tháng 02/2013 bởi 6 thành viên ban đầu là PayPal, Lenovo, Nok Nok Labs, Validity Sensors, Infineon và Agnitio với mục đích là đưa ra một tiêu chuẩn chung cho việc ứng dụng sinh trắc học vào xác thực trực tuyến thay cho việc dùng mật khẩu truyền thống Đến tháng 04/2013, Liên minh chào đón thêm 3 thành viên mới là Google, Yubico và NXP, nhóm đã mang đến một tiêu chuẩn xác thực mới là công nghệ xác thực hai bước dựa trên thiết bị cứng (xác thực hai yếu tố) nhằm chống lại các dạng tấn công lấy cắp thông tin tài khoản đăng nhập vào hệ thống của người dùng cuối bằng các website giả mạo Đến tháng 12/2013 Liên minh đã được mở rộng lên 59 thành viên và các ứng dụng cho giải pháp FIDO đã sẵn sàng Liên minh đã có tổng cộng 84 thành viên vào tháng 02/2014 và bản nháp về đặc tả kỹ thuật của FIDO cũng được đưa ra xem xét vào thời điểm này Đến ngày 09/12/2014, bộ tài liệu kỹ thuật phiên bản đầu tiên về FIDO 1.0 đã được công bố với 152 thành viên trong Liên minh FIDO Tháng 05/2015, Liên minh đưa ra chương trình chứng nhận các sản phẩm đạt chuẩn của FIDO và được công bố công khai trong cộng đồng Tháng 06/2015, FIDO chính thức hỗ trợ hai giao thức giao tiếp mới là Bluetooth và Near Field Communication

(NFC) Đến tháng 02/2016, W3C đã tạo ra một nhóm xác thực Web để định nghĩa

ra một API (Application Program Interface) cung cấp các chức năng xác thực mạnh trên các ứng dụng Web dựa trên chuẩn FIDO 2.0 Hiện nay, Liên minh FIDO đã có hơn 260 thành viên tham gia với nhiều lĩnh vực ứng dụng khác nhau từ các ứng dụng cho người dùng cuối (Client) và các ứng dụng trên hệ thống máy chủ (Server) theo chuẩn UAF, U2F cho đến cung cấp thiết bị FIDO U2F [1]

2.1.3 FIDO hoạt động như thế nào?

Các giao thức của FIDO sử dụng tiêu chuẩn kỹ thuật mã hóa khóa công khai để cung cấp giải pháp xác thực mạnh mẽ hơn Trong suốt quá trình đăng ký với một dịch vụ trực tuyến, thiết bị của người dùng cuối sẽ tạo ra một cặp khóa mới Giữ lại khóa bí mật trong các thiết bị này và đăng ký khóa công khai với các dịch vụ trực tuyến Việc xác thực được thực hiện bằng cách người dùng cuối sử dụng thiết bị lưu giữ khóa riêng để ký vào các chuỗi yêu cầu được gửi đến từ hệ thống máy chủ của các dịch vụ trực tuyến Các khóa riêng này chỉ được sử dụng khi các thiết bị lưu giữ khóa đã được mở khóa bởi chính chủ nhân sở hữu nó Việc mở khóa này được thực hiện một cách dễ dàng và an toàn bằng cách quét dấu vân tay, nhập một mã PIN, nói vào micro, chèn một thiết bị xác thực hai yếu tố hoặc nhấn một nút trên thiết bị Các giao thức FIDO được thiết kế từ mức độ nền tảng cho đến giao tiếp ở mức độ cao để đảm bảo tính riêng tư của người dùng Giao thức không cung cấp các thông tin mà nó có thể được sử dụng bởi các dịch vụ trực tuyến và theo dõi người dùng thông qua các dịch vụ Thông tin sinh trắc học sẽ không bao giờ rời khỏi thiết bị của người dùng nếu chúng được sử dụng trong các dịch vụ trực tuyến

Quá trình đăng ký tài khoản:

Hình 2-1 Quá trình đăng ký tài khoản

(Nguồn: FIDO Alliance)

• Người sử dụng sẽ chọn cách xác thực được cung cấp tùy theo từng dịch vụ

• Người dùng mở khóa bộ xác thực FIDO sử dụng đầu đọc dấu vân tay, nhấn vào nút trên thiết bị xác thực hai yếu tố, nhập mã PIN an toàn hoặc các phương pháp khác

• Thiết bị của người sử dụng sẽ tạo ra một cặp khóa (khóa bí mật và khóa công khai) mới và duy nhất tương ứng với từng thiết bị, dịch vụ trực tuyến và tài khoản người dùng

• Khóa công khai sẽ được gửi đến máy chủ của dịch vụ trực tuyến và được gắn liên kết với tài khoản của người dùng Khóa bí mật và bất kỳ thông tin về phương pháp xác thực (như các phép đo sinh trắc học và các mẫu) sẽ không bao giờ được tiết lộ ra bên ngoài thiết bị của người dùng

Quá trình xác thực tài khoản:

Hình 2-2 Quá trình xác thực tài khoản

(Nguồn: FIDO Alliance)

• Dịch vụ kiểm tra trực tuyến người dùng đăng nhập với một thiết bị đã được đăng ký trước đó với dịch vụ

• Người dùng mở khóa bộ xác thực FIDO sử dụng phương pháp tương tự như lúc đăng ký

• Thiết bị sử dụng tài khoản nhận dạng của người sử dụng được cung cấp bởi dịch vụ để lựa chọn đúng khóa và ký vào chuỗi yêu cầu của dịch vụ

• Thiết bị sẽ gửi chuỗi yêu cầu đã được ký đến hệ thống máy chủ dịch vụ, sau

đó hệ thống dịch vụ sẽ kiểm tra chuỗi yêu cầu đã ký với khóa công khai đã được lưu trữ trong quá trình đăng ký với dịch vụ

2.1.4 Giới thiệu FIDO UAF

UAF là từ viết tắt của Universal Authentication Framework,các giao thức FIDO UAF cho phép các dịch vụ trực tuyến sử dụng cơ chế bảo mật không sử dụng mật khẩu (password-less) và bảo mật đa yếu tố Người dùng có thể đăng ký tài khoản của mình một cách trực tuyến với những thông tin đi kèm thông qua việc quét vân

tay, quét võng mạc bằng camera, nói vào micro hoặc thậm chí đơn giản là cung cấp một mã PIN Giao thức UAF cho phép người dùng được lựa chọn phương pháp xác thực nào tiện lợi và tối ưu nhất dựa vào tính năng xác thực mà thiết bị của người dùng đang sở hữu Chỉ bằng một lần đăng ký, người dùng đơn giản là thực hiện lại hành động kiểm tra sinh trắc học hoặc nhập PIN để có thể xác thực cho các dịch vụ trực tuyến này mà không cần nhớ đến những chuỗi mật khẩu dài dòng nữa Bên cạnh đó, UAF còn cho phép cơ chế xác thực nhiều lớp kết hợp chẳng hạn như kết

hợp vân tay + PIN

Hình 2-3 Chuẩn mô hình sử dụng FIDO UAF

2.1.4.1 Mô hình kiến trúc UAF

Hình 2-4 Mô hình kiến trúc FIDO UAF

(Nguồn: FIDO UAF Architectural Overview)

• FIDO Client: thực hiện các giao thức FIDO UAF ở phía người dùng cuối (client) và có nhiệm vụ:

o Tương tác với bộ xác thực FIDO Authenticator thông qua lớp thư viện

giao tiếp ASM – Authenticator Specific Module một bộ thư viện

chuẩn giao tiếp với bộ thiết bị xác thực (Authenticator) tương ứng

o Thông qua tương tác với một User agent trên thiết bị như các ứng dụng di động, trình duyệt để giao tiếp với hệ thống máy chủ FIDO Server

• FIDO Server: thực hiện các giao thức FIDO UAF ở phía máy chủ (server) và

có nhiệm vụ:

o Tương tác với máy chủ web để giao tiếp giữa giao thức của FIDO UAF với client FIDO UAF

o Xác nhận các bộ chứng thực FIDO UAF đã được đăng ký sử dụng

o Quản lý sự liên kết giữa tài khoản người dùng với bộ xác thực

o Kiểm tra xác thực người dùng và gửi đáp ứng xác nhận giao dịch để xác minh tính hợp lệ của chúng

• FIDO UAF Protocols: mang thông điệp giao tiếp giữa thiết bị của người sử dụng với Relaying party Gói tin giao thức có các loại như sau:

dữ liệu rất quan trọng để gửi đến Relying party

• FIDO UAF Authenticator Metadata Validation: siêu dữ liệu xác minh bộ phận xác thực, khóa bí mật trong bộ phận xác thực tạo ra chữ ký và FIDO Server sẽ xác minh chữ ký này sử dụng khóa công khai đã được lưu trữ trong

hệ thống máy chủ Siêu dữ liệu chứa các giấy chứng nhận này chia sẽ dữ liệu với hệ thống máy chủ [2]

2.1.4.2 Cấu trúc tập lệnh của FIDO UAF

Tập lệnh của FIDO UAF định nghĩa giao thức giao tiếp giữa ASM và bộ thiết bị xác thực thông qua giao tiếp APDU (Application Programming Data Units) và tuân theo chuẩn ISOIEC-7816-4-2013

Trước khi đi vào tìm hiểu tập lệnh APDU, ta xét qua mô hình kiến trúc của bộ xác thực bao gồm các thành phần sau: lớp ứng dụng (Application layer), lớp giao tiếp (Communication layer), Access OS API và Secure Element

Hình 2-5 Mô hình kiến trúc của bộ xác thực

Lớp ứng dụng: có nhiệm vụ thu thập các mẫu xác minh người dùng và chuyển từ

mã lệnh UAF thành mã lệnh APDU

Lớp giao tiếp: đây là giao thức APDU theo chuẩn ISO/IEC-7816-2-2013, cung cấp cách thức để liệt kê danh sách và lựa chọn thiết bị đọc (reader), thực hiện kết nối và tương tác với Secure Element

Access OS API: là các thành phầnOMA, PC/SC, NFC API, CCID…

Secure Element: UICC (SIM card), micro SD…

Bộ tập lệnh APDU của FIDO UAF được định nghĩa bởi các trường dữ liệu như sau:

Với giá trị của từng trường dữ liệu được quy định rất chi tiết cho từng trường hợp

cụ thể (tham khảo mô tả chi tiết trong tài liệu FIDO UAF APDU) [3]

2.1.5 Giới thiệu FIDO U2F

U2F là chữ viết tắt của Universal 2nd Factor, có thể hiểu đây là công nghệ xác minh hai bước có thể sử dụng ở mọi nơi Công nghệ U2F do Google Security Team cùng với Yubico và NXP sáng chế và sau đó bàn giao lại cho FIDO Alliance

Giao thức FIDO này giúp cho các dịch vụ trực tuyến tăng cường độ bảo mật cho các

mô hình kiến trúc mật khẩu đang có của các dịch vụ bằng cách thêm một yếu tố xác thực thứ hai rất mạnh mẽ khi người dùng đăng nhập vào dịch vụ Trước tiên người dùng sẽ nhập vào thông tin đăng nhập bao gồm tên tài khoản và mật khẩu Tiếp theo dịch vụ sẽ xuất thông báo yêu cầu người dùng sử dụng sử dụng thiết bị đăng nhập như là một yếu tố xác thực thứ hai Yếu tố xác thực thứ hai mạnh mẽ này cho phép các dịch vụ đơn giản hóa việc sử dụng mật khẩu của chúng nhưng vẫn đảm bảo được mức độ an toàn của hệ thống

Hình 2-6 Chuẩn mô hình FIDO U2F

Trong quá trình đăng ký và xác thực tài khoản, người dùng sẽ sử dụng yếu tố xác thực thứ hai bằng cách rất đơn giản là nhấn vào một nút tích hợp sẵn trên thiết bị hoặc quét thẻ hỗ trợ chuẩn giao tiếp NFC Người dùng có thể sử dụng thiết bị U2F của họ cho tất các các dịch vụ trực tuyến khác nhau nhờ sự hỗ trợ giao thức được xây dựng và tích hợp sẵn trong các trình duyệt web

Mục tiêu chính của FIDO U2F là: mang đến một giải pháp xác thực đơn giản nhưng mạnh mẽ và bảo mật cho các giao dịch trực tuyến thông qua trình duyệt Web

Một giải pháp U2F bao gồm ba thành phần:

• Thiết bị FIDO U2F cho người dùng cuối Thiết bị sẽ thực hiện hai nhiệm vụ chính là tạo ra cặp khóa (khóa công khai và khóa bí mật) và sử dụng khóa bí mật vừa tạo để ký vào dữ liệu yêu cầu từ máy chủ gửi đến thông qua trình duyệt web của người dùng Thiết bị FIDO U2F phổ biến nhất trên thị trường là Yubikey của hãng Yubico Thiết bị rẻ nhất có giá khoảng 10 USD, hỗ trợ giao tiếp qua cổng USB, cần phải có máy tính cá nhân mới sử dụng được Thiết bị hỗ trợ giao tiếp thông qua Bluetooth hoặc NFC, có thể sử dụng với các thiết bị di động có

hỗ trợ các chuẩn giao tiếp này, được bán với giá 40 USD Chuẩn FIDO 2.0 hứa hẹn sẽ cho phép người sử dụng dùng chính điện thoại của họ như là một thiết bị U2F

• Phần mềm FIDO U2F trên máy chủ Lưu giữ thông tin đăng ký: khóa công khai,

dữ liệu đã ký, và thực hiện xác minh chữ ký khi có yêu cầu sử dụng khóa công khai đã lưu

• Trình duyệt web của người dùng cuối Hiện tại trong số các trình duyệt phổ biến chỉ có Google Chrome hỗ trợ U2F Mozilla Firefox sẽ hỗ trợ công nghệ U2F trong thời gian sắp tới [4]

Hình 2-7 Mô hình hệ sinh thái FIDO U2F

2.1.6 Tại sao chúng ta nên sử dụng giải pháp FIDO?

Các vấn đề đang tồn tại trên các giải pháp xác thực truyền thống hiện nay:

• Giải pháp nhập mật khẩu truyền thống:

o Độ bảo mật kém, dễ dàng bị lấy cắp thông tin

o Rất bất tiện khi phải nhập mật khẩu trên các thiết bị di động: điện thoại, máy tính bảng,…

o Phải ghi nhớ rất nhiều mật khẩu cho các dịch vụ khác nhau

• Giải pháp OTP:

o OTP có nguy cơ bị tấn công với phương thức MITM Middle) và MITB (Man-In-the-Browser)

(Man-In-the-o Nguy cơ bị tấn công từ tin nhắn SMS

o Chi phí trang bị thiết bị OTP cũng khá cao

o Rất bất tiện khi phải nhập mã OTP trên các thiết bị di động

Ý tưởng chính của việc đưa ra giải pháp FIDO là:

• Dễ sử dụng

• Tính riêng tư và bảo mật

• Tiêu chuẩn hóa

Hình 2-8 So sánh giải pháp xác thực FIDO với giải pháp xác thực truyền thống

(Nguồn: Response to NIST RFI on the Framework for Improving Critical Infrastructure

Cybersecurity, 2015)

Để cung cấp một giải pháp xác thực vượt trội so với giải pháp mật khẩu truyền thống và cả giải pháp OTP Mặt khác, các công ty sử dụng các giải pháp truyền thống có thể phải đối mặt với rất nhiều vấn đề về giao thức và bản quyền sáng chế FIDO đã thay đổi đều này bằng cách tiêu chuẩn hóa ở lớp giao thức và cách thức sử dụng Chính điều này sẽ kích thích phát triển mạnh mẽ một hệ sinh thái của các giải pháp xác thực người dùng như sinh trắc học, mã PIN, xác thực hai yếu tố để sử dụng với một loạt các dịch vụ trực tuyến

FIDO PKI

Ưu điểm - Dễ sử dụng

- Tính bảo mật

- Tính riêng tư

- Tiêu chuẩn hóa

- Hệ thống đơn giản, dễ triển khai

- Chi phí triển khai thấp

- Chống chối bỏ

- Tính bảo mật

- Toàn vẹn dữ liệu

- Tiêu chuẩn hóa

- Đã và đang được ưu tiên triển khai rộng rãi

Nhược điểm - Yêu cầu thiết bị hỗ trợ FIDO

UAF nhận dạng sinh trắc học

- Hệ thống triển khai phức tạp

- Chi phí triển khai và thiết bị cao

Bảng 2-1 So sánh giải pháp FIDO với giải pháp chữ ký số PKI

2.2 Giới thiệu WebGL

2.2.1 WebGL là gì?

WebGL là viết tắt của Web Graphics Library, là một thư viện đồ họa 3D dành cho Web Được đề cập đến vào năm 2009 và chính thức công bố vào năm 2011, do Khronos phát triển

WebGL là một thư viện phần mềm mở rộng khả năng của ngôn ngữ JavaScript để cho phép nó tạo ra các đồ họa 3D trong bất kỳ trình duyệt nào tương thích với nó

Mã nguồn của WebGL thực hiện xử lý trên card xử lý đồ họa có hỗ trợ shader

Về cơ bản thì đây là sự kết hợp giữa đồ hoạ 3D (thông qua thư viện OpenGL ES) với ngôn ngữ lập trình web HTML5 và JavaScript (JS), mã nguồn của WebGL được viết trong thẻ <canvas> của HTML5 Do vậy WebGL không cần đến plug-in chạy ngoài như Adobe Flash hay MS SilverLight Để chạy được WebGL chỉ cần trình duyệt có hỗ trợ HTML5, JS và Driver đồ hoạ hỗ trợ OpenGL

Một số ứng dụng tiêu biểu của WebGL như: thiết kế các trò chơi trực tuyến, ảo hóa

dữ liệu lớn, giới thiệu sản phẩm, mô phỏng, …

Trình duyệt hỗ trợ WebGL hiện nay:

Internet Explorer 11 hoặc hơn Hoàn toàn

Google Chrome 39 hoặc hơn Hoàn toàn

Chrome for Android 42 hoặc hơn Một phần

iOS Safari 8.3 hoặc hơn Hoàn toàn

Blackberry Browser 10 hoặc hơn Hoàn toàn

số (digital image)

Có hai loại rendering là:

- Software rendering: là quá trình render được thực hiện toàn bộ bởi CPU

- Hardware rendering: là quá trình render được thực hiện toàn bộ bởi GPU (Graphical processing unit)

Rendering có thể được xử lý từ xa (remotely) hoặc cục bộ (locally) Đối với những hình ảnh đòi hỏi mức độ xử lý phức tạp thì quá trình xử lý Rendering sẽ được thực hiện từ xa trên một máy chủ chuyên dụng có cấu hình phần cứng đủ mạnh để thực

hiện các xử lý phức tạp này, được gọi là Server-base Rendering Quá trình xử lý

Rendering cũng có thể được thực hiện cục bộ tại thiết bị người dùng cuối (client),

được gọi là Client-base Redering

WebGL sử dụng cách tiếp cận rendering ở client để thực hiện biểu diễn các cảnh 3D Tất cả các yêu cầu xử lý để tạo ra hình ảnh sẽ được thực hiện tại locally bằng cách sử dụng card đồ họa của thiết bị người dùng cuối [5]

2.2.2.2 GPU

Theo NVIDIA, GPU là “một chip xử lý được tích hợp về: biến đổi chuyển động, tạo ánh sáng, thiết lập/chia cắt tam giác Rendering có khả năng xử lý ít nhất 10 triệu đa giác trong một giây”

Nó gồm hàng nghìn lõi nhỏ (cores) để xử lý song song các công việc một cách hiệu quả Vì vậy GPU tăng tốc quá trình xử lý tạo ra ảnh để xuất ra màn hình

Hình 2-9 Lõi của CPU và GPU

2.2.2.3 Tăng tốc độ xử lý trên GPU

Để tăng tốc độ xử lý trên GPU, các ứng dụng sẽ được đưa vào CPU và xử lý bởi nó cho đến khi nào gặp các tính toán phức tạp cần sự trợ giúp của GPU thì phần code

đó sẽ được chuyển cho GPU xử lý Nó cho phép hệ thống có khả năng xử lý đồ họa một cách hiệu quả nhất

Hình 2-10 Tăng tốc xử lý trên GPU

GPU sẽ có một vùng nhớ riêng biệt và nó sẽ thực hiện sao chép từng phần nhỏ của

mã nguồn cần xử lý vào vùng nhớ này cho đến khi đảm bảo đã sao chép toàn bộ mã nguồn trên GPU sẽ thực hiện xử lý tất cả các dữ liệu nằm trong bộ nhớ cục bộ, thay

vì phải sử dụng bộ nhớ trung tâm Do đó, dữ liệu cần được sao chép vào vùng nhớ của GPU để xử lý

Trong các hệ thống có kiến trúc, việc giao tiếp giữa CPU và GPU nên được hạn chế

để quá trình xử lý tạo ảnh 3D được nhanh chóng hơn Vì vậy, chúng ta phải sao chép tất cả các dữ liệu và giữ nó trên GPU một lần, thay vì phải thực hiện sao chép liên tục nhiều lần

2.2.3 Cơ bản về HTML-5 canvas

HTML-5 cung cấp rất nhiều chức năng để tạo ra các ứng dụng đồ họa trên nền web như: Canvas 2D, WebGL, SVG (Scalable Vector Graphics), 3D CSS transforms và SMIL (Synchronized Multimedia Integration Language) Để viết một ứng dụng WebGL, chúng ta sẽ sử dụng thành phần canvas có sẵn của HTML5 HTML5 canvas cung cấp cách để vẽ đồ họa dễ dàng và mạnh mẽ, tạo các ảnh, làm các chuyển động đơn giản sử dụng Javascript Cú pháp để tạo canvas trong HTML5 là <canvas id = "mycanvas" width = "100" height = "100"></canvas>

Trong đó:

- id: được sử dụng để định danh cho canvas

- width: độ rộng của canvas

- height: chiều cao của canvas

Canvas mặc định ban đầu là trống Để vẽ lên canvas chúng ta phải sử dụng ngôn ngữ kịch bản (scripting language) để truy cập vào rendering context và vẽ lên canvas này HTML5 canvas có một hàm getContext() được dùng cho nhiệm vụ trên Hàm trên có thể nhận tham số "2d" giúp chúng ta thu được 2d context dùng để vẽ các đồ họa 2d Hoặc ta cần truyền vào tham số "experimental-webgl" để thu được WebGL context giúp chúng ta tạo ra các ứng dụng WebGL

2.2.4 Cơ bản về WebGL

Để vẽ một ảnh sử dụng WebGL, chúng ta phải truyền vào một vector thể hiện hình ảnh đó Tiếp theo, vector ảnh này sẽ được chuyển đổi thành dạng pixel sử dụng OpenGL SL và hiển thị nó lên màn hình Xây dựng một ứng dụng WebGL sẽ bao gồm các bước sau:

2.2.4.1 Hệ tọa độ trong WebGL

Giống như các hệ thống 3D khác, WebGL có 3 trục tọa độ xyz, trong đó trục z biểu diễn chiều sâu Các tọa độ trong WebGL bị giới hạn ở (1,1,1) và (-1, -1, -1) Có nghĩa là nếu chúng ta xem xét màn hình chiếu đồ hoạ WebGL như một khối lập phương, thì một góc của khối sẽ là (1,1,1) và góc đối diện sẽ là (-1, -1, -1) WebGL

sẽ không hiển thị bất cứ thứ gì vượt quá giới hạn này

Hình 2-11 Hệ tọa độ trong WebGL

Hình trên miêu tả hệ tọa độ WebGL Trục z biểu thị chiều sâu Giá trị dương của z

có nghĩa là đối tượng nằm gần màn hình/người xem, ngược lại giá trị âm của z chỉ

ra rằng đối tượng nằm cách xa màn hình Như vậy, x có giá trị dương chỉ ra rằng đối tượng nằm ở phía bên phải màn hình và giá trị âm cho biết đối tượng ở bên trái Tương tự, các giá trị dương và âm của y cho biết đối tượng ở phần trên hay ở phần dưới của màn hình

2.2.4.2 Một số thuật ngữ cơ bản của WebGL

- Vertices (các đỉnh): thường để vẽ một đa giác chúng ta đánh dấu các điểm trên mặt phẳng và nối chúng với nhau để tạo thành một đa giác mong muốn Một đỉnh là một điểm được giao bởi các cạnh của một đối tượng 3D Nó được biểu diễn bởi 3 giá trị số thực tương ứng với mỗi trục x, y, z Trong WebGL các đỉnh được lưu trữ bằng mảng javascript

- Indices (các chỉ số): là các giá trị số dùng để xác định các đỉnh Các chỉ số được sử dụng để vẽ các lưới (meshes) trong WebGL Trong WebGL các chỉ

số được lưu trữ bằng mảng javascript

+ Vertex buffer: được sử dụng để lưu trữ dữ liệu tương ứng với đỉnh

+ Index buffer: được sử dụng để lưu trữ dữ liệu tương ứng với chỉ số

+ Frame buffer: là một phần của bộ nhớ đồ họa được sử dụng để lưu trữ dữ liệu về các khung cảnh Bộ đệm này chứa các chi tiết như chiều rộng và chiều cao của bề mặt (tính bằng pixel), màu sắc của mỗi pixel, độ sâu và vùng đệm của bộ lọc

2.2.4.3 Mesh (lưới)

Để vẽ một đối tượng 3D ta cần tạo một hoặc nhiều các đa giác cơ bản sử dụng các điểm, đường thẳng, hoặc tam giác Sau đó sử dụng các đa giác này để hình thành lưới đồ họa (mesh) Một đối tượng 3D được hình thành bằng việc sử dụng các đa giác cơ bản gọi là mesh

2.2.4.4 Shader Programs

WebGL cung cấp giải pháp để giảm thiểu chi phí giao tiếp giữa CPU và GPU Vì

nó sử dụng ES SL (Embedded System Shader Language) chạy trên GPU nên chúng

ta viết tất cả các chương trình cần thiết để tạo nên hình ảnh mong muốn trên hệ thống máy khách (client) bằng các shader programs

Các shaders này là các chương trình cho GPU, được viết bằng ngôn ngữ GLSL (OpenGL Embedded System Shader Language) Các shaders programs này được dùng để định nghĩa cách các đỉnh, biến đổi (transforms), ánh sáng, và camera tương tác với nhau để tạo ra một ảnh cụ thể Có hai loại shaders: Vertex Shader và Fragment Shader

- Vertex shader là mã chương trình được gọi trên mỗi đỉnh Nó được sử dụng

để biến đổi hình học từ nơi này sang nơi khác Nó xử lý dữ liệu của mỗi đỉnh như: tọa độ đỉnh, màu sắc, texture (cấu trúc bề mặt) Vertex shader thực hiện các nhiệm vụ sau:

o Kiểm soát các giá trị được thêm vào tự động

o Truy cập texture

o Áp dụng texture

o Tạo mờ

o Tính toán màu sắc

Hình 2-13 Shader Programs

2.2.4.5 Các biến số thông dụng của OpenGL ES SL

OpenGL ES SL là viết tắt của OpenGL Embedded System Shading Language, có nhiệm vụ kiểm soát dữ liệu trong shader programs Nó cung cấp các loại biến số sau:

- Attributes: là các biến lưu giữ giá trị đầu vào (input) của các vertex shader

- Uniforms: là các biến lưu giữ dữ liệu đầu vào chung cho cả vertex và fragment shader như: vị trí ánh sáng, tọa độ texture, màu sắc

- Varyings: là các biến được sử dụng để truyền dữ liệu từ vertex shader đến fragment shader

2.2.5 Graphics Pipeline

Để vẽ đồ hoạ 3D, chúng ta phải làm theo một chuỗi các bước Chúng được biết đến như là graphics pipeline hoặc rendering pipeline Hình bên dưới mô tả graphics pipeline của WebGL

Hình 2-14 Graphics pipeline của WebGL

2.2.5.1 Javascript

Trong WebGL, Javascript có thể thực hiện được các chức năng sau:

• Khởi tạo WebGL: ở bước này Javascript được dùng để khởi tạo WebGL context (cái dùng để thao tác và vẽ lên canvas)

• Tạo mảng dữ liệu: sử dụng Javascript để tạo mảng lưu giữ dữ liệu của hình ảnh ta cần vẽ

• Buffer object: chúng ta tạo buffer object và truyền vào dữ liệu vừa tạo ở trên

• Shader: tạo, biên dịch và liên kết các shader sử dụng javascript

• Attribute: tạo các attribute và liên kết chúng với các buffer object sử dụng Javascript

• Uniforms: tạo và liên kết các Uniform sử dụng javascript

• Ma trận biến đổi: sử dụng javascript tạo ma trận biến đổi chuyển động

Khi dữ liệu của các hình cần vẽ được tạo xong bởi Javascript, ta sẽ truyền chúng cho các shader dưới dạng các đối tượng buffer để xử lý

2.2.5.2 Vertex Shader

Các dữ liệu được truyền cho vertex shader dạng buffer object được xử lý để render khi các phương thức sau được gọi drawElements() và drawArray() Nhiệm vụ của vertex shader là tính toán vị trí của các vertex sau đó lưu vào biến gl_position, ngoài

ra nó cũng tính toán màu sắc, texture, và các đỉnh liên quan với nhau

2.2.5.3 PrimitiveAssembly

Sau khi tính toán vị trí và các chi tiết khác của mỗi đỉnh, giai đoạn tiếp theo là giai đoạn lắp ráp đầu tiên Ở đây các hình tam giác được lắp ráp và chuyển đến rasterizer

- Clipping: Nếu một tam giác không thuộc vùng xem xét, nó sẽ bị loại bỏ Quá trình này được gọi là Clipping

2.2.5.5 Fragment Shader

Fragment Shader sẽ nhận dữ liệu trong các biến thay đổi từ vertex shader, màu gốc

từ rasterization, sau đó tính toán giá trị các màu cho mỗi điểm ảnh giữa các đỉnh Lưu trữ các giá trị cho mỗi điểm ảnh trong mỗi Fragment, các giá trị này sẽ được truy cập trong quá trình phân mảnh (fragment operations)

2.2.5.6 Hoạt động phân mảnh (Fragment Operations)

Hoạt động này được thực hiện sau khi đã xác định được giá trị màu trong mỗi điểm ảnh từ bảng màu gốc Bao gồm các hoạt động sau:

• Độ sâu (Depth)

• Trộn màu

• Dithering

Một khi tất cả các Fragment được xử lý, một hình ảnh 2D được hình thành và hiển thị trên màn hình

2.2.5.7 Frame Buffer

Đây là bước cuối cùng của Graphics Pipeline, Frame Buffer là một phần của bộ nhớ

xử lý đồ họa, chứa dữ liệu chi tiết về bối cảnh như: độ rộng và chiều cao của bề mặt (dạng pixel), màu sắc của mỗi pixel, độ sâu và bộ đệm khung tô màu (stencil buffers) [5], [6]

Hình 2-15 Các bước xử lý của WebGL

2.2.6 Tại sao chọn WebGL?

Đề tài chọn WebGL để xây dựng các mô phỏng vì những lý do sau:

• Sử dụng JavaScript: có thể tương tác trực tiếp với các thành phần của HTML

và các thư viện JavaScript khác

• Đa nền tảng (Cross-platform)

• Sự hỗ trợ các trình duyệt trên di động ngày càng tăng

• Mã nguồn mở, sử dụng hoàn toàn miễn phí

• Không cần phải biên dịch chương trình

• Quản lý vùng nhớ một cách tự động

• Dễ dàng cài đặt môi trường phát triển