Auth: 03 - JWT là gì và những điều cần biết 🎉

JWT (JSON Web Token) có thể hiểu nôm na là một chuỗi mã hoá chứa dữ liệu được dùng để truyền tải thông tin giữa các hệ thống một cách an toàn và đáng tin cậy 😍 Vậy tại sao JWT lại an toàn, cùng mình tìm hiểu qua video này nhé hehe
Trong video này mình sẽ chia sẻ với các bạn:
✅ Hiểu nôm na JWT là gì?
✅ Cấu trúc của một JWT bao gồm những gì?
✅ JWT Authentication được thực hiện ra sao?
✅ Làm sao JWT có thể đảm bảo được tính an toàn và đáng tin cậy?
✅ Flow login sử dụng JWT được diễn ra như thế nào?
Hi vọng sau video này, các bạn có cái nhìn tổng quan về JWT. 😉
#jwt
#jwt_authentication
#jwt_la_gi
🌐 Link tham khảo:
- Slide JWT là gì? drive.google.com/file/d/1Zr42...
- jwt.io/
- jwt.io/introduction/
- www.iana.org/assignments/jwt/...
- viblo.asia/p/jwt-tu-co-ban-de...
- viblo.asia/p/tim-hieu-ve-json...
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé!
Kết nối với mình:
- 🎉 Fan page: / learn.easyfrontend
- ❓Group: / easyfrontend
- 💻Github: github.com/paulnguyen-mn
- 💼 LinkedIn: / haunguyenmn

[@EasyFrontend]

Cảm ơn các bạn đã xem video của mình nhé! 😍 Hãy đặt câu hỏi bên dưới nếu bạn có thắc mắc gì nha hehe

E cảm ơn a vì video rất hữu ích ạ ^^

[@BigMouth1001]

nay rảnh ngồi xem lại mấy video chia sẽ của anh thật bổ ích, cảm ơn anh rất nhiều

[@EasyFrontend]

hihi cảm ơn em nhiều nha Trung ơi, rất vui khi videos của anh hữu ích với em nè hehe 😍

[@baolyhong6140]

hóng phần tiếp theo của cái JWT này nè hehe, rất bổ ích

[@EasyFrontend]

hehe cảm ơn em nhé Bảo, hi vọng sẽ sắp xếp thời gian ra sớm cho mn tham khảo nè hehe 😍

[@trungminh549]

Cam ơn Anh!

[@HauNguyen-mb3si]

Cảm ơn anh

[@darkfury5896]

Em cảm ơn anh nhiều ạ

[@shenkn2140]

tuyệt vời. Hóng Chờ video anh code quá. Đi làm về cứ thích lên YT xem có video mới chưa. :))))

[@EasyFrontend]

haha hạnh phúc quá, được mn ủng hộ nhiệt tình, thiệt sự super vui luôn, a cũng luôn cố gắng làm video càng nhanh càng tốt để có cái cho mn tham khảo hihi 😍

[@trungbuunong317]

Anh nói dễ hiểu thật!

[@EasyFrontend]

Yeahhh may quá, a cứ sợ video này nói ko ai hiểu =)))) Cảm ơn em nhiều nha Trung ơi 😍

[@xuanquangnguyen2291]

Dễ thương quá bạn tui ơi, cám ơn bạn

[@EasyFrontend]

hahaa cảm ơn Quang nhiều nhiều nhaaaaaa 😍

[@khangleminh4328]

Hay quá anh !!

[@EasyFrontend]

hehe cảm ơn em nhiều nhé Khang 😍

[@LanNguyen-gt6bc]

Làm nhiều về jwt rồi mà nhiều cái vẫn bỡ ngỡ, cảm ơn anh

[@EasyFrontend]

Yeah cảm ơn em nhé Lân, rất vui khi video hữu ích với em nè 😍

[@leducthinh4429]

cảm ơn anh, kênh anh làm hay lắm ạ

[@EasyFrontend]

Le Duc Thinh thinh Yeahhhh cảm ơn em nhiều nhiều nhé Thịnh ơiiiii 😍

[@dumucga5713]

Anh ơi nhanh ra video cho bọn em xem nào. Em like, share nhiệt tình

[@EasyFrontend]

hahaa a đang soạn tài liệu cho video tiếp theo nè em ơi hihi, hi vọng mai sẽ có video mới, lâu quá rồi chưa có video hihi

[@phamvandat2000]

tks anh

[@foresttruong2909]

Like trước, tối về xem :)) làm nhiều r mà vẫn thích xem mấy video của a @@

[@EasyFrontend]

haha cảm ơn em nhiều nha Forest 😉Tối về xem xong có gì lạ lạ thì cùng trao đổi e hen hehe

[@tuongnguyenhuy4069]

rất dễ hiểu ạ

[@EasyFrontend]

yeah cảm ơn em nhiều nhé Tưởng 😍

[@TranDangDuyTan]

thanks

[@shenkn2140]

Anh Hậu ơi. Dịch bị cách ly buồn quá. Ra video sớm cho em đỡ buồn vs ạ

[@EasyFrontend]

hihi okie em Shen ơi, anh đang tăng tốc để ra videos, sr em, hôm giờ a phải chuyển laptop từ MacOS sang Windows nên phải setup lại hết =))) Giờ xong òi, chuẩn bị làm lại videos đây hehee

[@huuong7758]

Toẹt vời

[@EasyFrontend]

wohoo cảm ơn e nhiều nhé Đông 😍

[@XuanQuynhLexuanquynh]

bạn nên tạo 1 list liên tục cho dễ theo dõi. thank for sharing.

[@EasyFrontend]

yeah cảm ơn bạn đã góp ý cho mình nhé, cái này thời đầu làm nên hơi lộn xộn tí, mình sẽ rút kinh nghiệm cho mấy series sau hehee

[@nhatnamtran2973]

Coi series này em hiểu về cách login bằng jwt rồi ạ, Series này có nói về chức năng đăng ký không anh, cảm ơn anh ạ

[@EasyFrontend]

hi Nam, sẽ có cả đăng ký và đăng nhập luôn nhé Nam. Video sắp tới sẽ nói vụ đăng ký nè hehe

[@huynhhoang8649]

Thanks anh, em rất thích bài giản của anh. Không biết khi nào anh mới ra video xây dựng login form sử dụng axios, jwt vậy anh? Em hóng quá :D

[@EasyFrontend]

hihi sr Hoàng, hôm giờ a bận chuyển laptop nên phải setup lại, giờ ready rồi, chuẩn bị có videos hehee. Video tới sẽ làm cái Firebase sign in với prebuilt UI Sau đó là tới custom login form 😉

[@huynhhoang8649]

@@EasyFrontend Thanks anh nhiều.

[@softwareanddesign6641]

Anh làm video về cách Log out hoặc invalid JWT đi, vì không có nhiều video hoặc tutorial hướng dẫn

[@EasyFrontend]

hi em, về JWT thì để logout chỉ đơn giản là xoá JWT ở phía client là xong nè. 😉 Vì server ko có lưu thông tin của mấy JWT này hehe

[@ngocnguyenhuu6607]

Làm thế nào để biết 1 token hợp lệ ạ

[@thiettruong7381]

anh bày thêm về cái lấy token và cái refresh token đi anh

[@EasyFrontend]

hehe lấy token thì video tiếp theo có á Thiết, còn refresh token thì hiện tại chưa có em ơi hehe

[@ngoctrongnguyen9251]

Cảm ơn anh ạ . Anh có đinh làm têm tutorial về webpack k ạ

[@EasyFrontend]

hi Trọng, anh nghĩ chắc sẽ nói nè, mà hơi lâu hihi, hiện có nhiều series cần được thực hiện trước, xong thì a sẽ move qua mấy topic phụ, trong đó có webpack nè hihi

[@lina-qt8tj]

Anh ơi, nếu có thời gian anh làm video chia sẻ về cách login một trang dùng cho nhiều trang (sso) đi ạ. E đang k hiểu lắm về phần này ah. Em cảm ơn

[@EasyFrontend]

à một topic hay nè, mà hơi phức tạp để setup demo hen, nhưng mà anh ghi nhận nhen, để có time ngâm cứu cách hướng dẫn hehe 😉

[@ChienLe-oi9uu]

Anh cho em hỏi tại sao không nên set thời hạn token quá lâu. Và sử dụng cơ chế hai token (token + refreshToken) sao cho smooth nhất ạ

[@EasyFrontend]

à về token quá lâu, em tìm hiểu thêm về việc delay ở inactive tab em nha, lúc đó thời gian setTimeout nó ko còn chính xác nữa đâu. Đó cũng là điều cần lưu ý khi dùng setTimeout, setInterval mà tab ở trạng thái inactive. còn về refresh token, cái này nguy hiểm vì hacker mà lấy đc thì toi họng, họ có thể tạo ra access token mới thoải mái, lúc đó phải apply thêm các security checks khác nữa. Mấy cái này em nên discuss với backend team để có cái plan chi tiết hơn em nha :)

[@haptn]

Anh ơi, nếu như phía server không lưu JWT thì nó check xem JWT này có hợp lệ không bằng cách nào anh nhỉ? Có phải là mỗi lần có request từ Front-end xuống thì nó lại generate lại secret key để so không ạ? Em chưa rõ chỗ này lắm. Em cảm ơn anh ạ!

[@EasyFrontend]

hi Hà, có một số lưu ý thế này em nhen: Private key được dùng để tạo ra JWT và validate để xác nhận là JWT có bị chỉnh sửa thay đổi không? Nếu mà nó thấy có chỉnh sửa thì coi như ko hợp lệ Các bước dạng thế này: 1. Đầu tiên server sẽ dùng một cái private key để tạo ra JWT và ko lưu JWT này. 2. Phía client có thể đọc JWT và rút trích thông tin từ JWT, tuy nhiên không được phép chỉnh sửa, ví dụ mình cố tình chỉnh sửa đi hen. 3. Khi lên server, mình sẽ dùng private key lúc tạo JWT để validate kiểm tra cái JWT gửi lên có hợp lệ ko? có bị chỉnh sửa gì hk? Nếu hợp lệ thì mình cho họ pass, còn ko thì báo lỗi hehe Còn cách check thì có thư viện hỗ trợ mình òi, mình gọi đúng hàm là okie hehe

[@ucduong2288]

A hậu ơi anh có code authentication với JWT trong reactjs không cho em xin tham khảo với ạ. em cảm ơn anh nhiều lắm em đang bị kẹt phần này ạ

[@EasyFrontend]

hi Dương ơi, trong series này có á em, em tham khảo mấy videos tiếp theo nhen 😉

[@hongdungnguyen634]

Cho mình hỏi mình làm bên backend nếu mình đưa 1 array nhiều permission vào jwt được không ạ, kiểu permission = [ {id: 1, name: 'create new user' }, {id: 2, name: 'edit user' }, {id: 3, name: 'delete user' }, ... nhiều quyền nữa ] Nếu đưa vào nhiều quá thì nó có nặng quá và token nó lỗi không tạo ra được?

[@EasyFrontend]

hi em ơi, nếu ít thì okie nè, nhưng nếu nhiều quá thì ko được nha, vì quá dài thì token dài, và vượt quá giới hạn của header, nó sẽ bị cut-off, và gây ra lỗi. Nên với những cái này thì nên get một api riêng cho nó nhé 😉

[@nguyenthinh7262]

Secret key được lưu trữ như thế nào ở database và trong trường hợp system distribution thì như thế nào v a

[@EasyFrontend]

sr em, cái này anh hk rõ nữa nhen

[@sohot98]

anh ơi chco em hỏi. người ta thường sử dụng jws thôi. JWE để làm gì v anh, ứng dụng như thế nào v ạ. anh có thể cho em xin link tham khảo nếu có được ko ạ. em cám ơn

[@EasyFrontend]

à em đọc link này thử nha hehe medium.facilelogin.com/jwt-jws-and-jwe-for-not-so-dummies-b63310d201a3

[@nguyenmuoi.66]

a ơi em hỏi chút ạ, e đang học môn an toàn và bảo mật thông tin, đang cần làm một bài thuyết trình, thì e thuyết trình về JWT có đúng chủ đề không nhỉ?

[@EasyFrontend]

à được em nhen, cơ mà sẵn em làm cho đủ bộ luôn authentication authorization jwt cookies 2FA em research thêm để trình bày về chủ đề này cho trọn vẹn em nha

[@LinhNguyen-cz1cx]

Ra vlog nextjs đi a

[@EasyFrontend]

hihi cảm ơn em nha, mà hiện a chưa làm nhiều với nextjs nên chưa dám chém gió nè hehee

[@loankim8580]

Anh cho em hỏi là cái phần chữ kí số trong video là 123456 đấy thì là do mình tự quy định hay nó tự sinh ra ạ.

[@EasyFrontend]

hi em, video này lâu quá anh hk nhớ rõ lắm, hk biết em hỏi ở phút giây thứ bao nhiêu vậy em hen?

[@loankim8580]

@@EasyFrontend ở 5p21s ạ

[@thanghoangngoc2564]

anh thu âm bằng gì mà âm thanh trong video chất lượng vậy ạ

[@EasyFrontend]

hi Thắng, anh có dùng mic thu âm này nhé tiki.vn/micro-thu-am-cai-ao-cho-dien-thoai-may-anh-dslr-may-quay-boya-by-m1-azone-p14039112.html?spid=52400589 hehee 😉

[@thanghoangngoc2564]

cảm ơn anh nhé

[@huubinhnguyen6240]

Vậy là phần header & payload users vẫn có thể đọc được ạ?

[@EasyFrontend]

Hữu Bình Nguyễn yeah đúng rồi nhé Bình, chỉ là họ ko chỉnh sửa đc thôi nè 😉

[@huubinhnguyen6240]

@@EasyFrontend anh làm video về animation trong react hooks được không ạ :((

[@chiemdunguyen9513]

Cái JWT sau khi được lưu trữ ở cookies có thể bị lấy cắp và sử dụng cho việc đăng nhập bằng JWT k ạ ?

[@EasyFrontend]

hi Dự, về cơ bản server trả về client cái JWT đó, nó như là một bằng chứng em đã đăng nhập rồi, và có thể dùng để lấy dữ liệu trên server. Nên nếu em để JWT cho người khác biết hoặc lấy được thì coi như xong 🙂 Cũng như việc e giao chìa khoá nhà cho người khác vậy đó, họ muốn vào nhà lấy gì thì lấy 😉

[@chiemdunguyen9513]

Easy Frontend dạ, em hiểu rồi ạ, ^^, dạ thế thì cái JWT này có khả năng bị lấy cắp khi nó lưu trữ trong Local Storage của trình duyệt hay k ạ, ví dụ như trong cookies ạ, chúng ta có thể lấy được JWT trong cookies k ạ? Mong anh giải đáp giúp em ạ, hihi ^^

[@EasyFrontend]

@@chiemdunguyen9513 hi em, cơ bản thì khó lấy nè trừ khi người dùng bị mắc bẫy của hacker thôi em ơi. Mà hacker thì có muôn vàn cách để xâm nhập nên bảo mật 100% thì ko có nè. Nhưng thông thường thì em lưu dưới localStorage là okie rồi nè, với JWT thường có thời gian hiệu lực ngắn nên nếu xui bị lấy thì hacker cũng ko xài được lâu 🙂

[@chiemdunguyen9513]

Easy Frontend hehe, em hiểu rùi ạ, em cảm ơn anh nhiều ạ, hihi

[@vnizero7341]

Em chào anh ạ. Hiện tại em là sinh viên năm nhất trường đại học BK TPHCM. Em không thích ngành mình đang theo học nữa. Em dự tính là năm tới nghỉ học và xin đi học ở trung tâm Nordic Coder. Nếu em hoàn thành khóa học ở Nordic Coder và nhận được một thư chứng nhận thì em có thể xin đi thực tập được chưa ạ. Em cảm ơn anh

[@EasyFrontend]

hi em, theo anh thì có thể nhưng rất khó nhé. Lý do là thế này, để trở thành một Frontend em cần có: 1. Tiếng Anh (nghe nói tốt là ok, viết không yêu cầu quá cao) 2. Kiến thức nền tảng của IT - Nhập môn lập trình - Kĩ thuật lập trình - Cấu trúc dữ liệu và giải thuật - Lập trình hướng đối tượng - Tools - Terminal - Git + Github - ... 3. Kiến thức chuyên môn bên mảng Frontend - HTML + CSS + JS - Một JS framework: ReactJS hoặc Angular hoặc VueJS, ... 4. Làm các dự án thực tế - Xây dựng được một website responsive nào đó - Deploy website lên online sử dụng surge.sh, heroku, github pages, vercel, ... 5. Các trang luyện tập giải thuật - Hackerrank: www.hackerrank.com/ - LeetCode: leetcode.com/ - ... Khoá học ở NC 6 tháng nó cho em được cái nền tảng cơ bản của HTML + CSS + JS + ReactJS để giúp em có thể được mảng kiến thức nền tảng của Frontend, nhưng em phải chủ động học thêm về phần giải thuật, cũng như tư duy về lập trình, thì mới mong sau 6 tháng có thể đi làm được nè 🙂 Dĩ nhiên đi làm, có chỗ yêu cầu cao thấp khác nhau, nhưng nếu em muốn đi làm thuận lợi, dễ phát triển sau này thì em phải đầu tư mảng kiến thức nền tảng của IT. Theo anh, 6 tháng nếu may mắn em có thể thực tập được, 9 tháng -> 1 năm thì có thể làm fresher được, rồi từ đó mà đi lên dần dần, luôn luôn học để cải thiện kiến thức liên tục em nhé! 😉 Tham khảo thêm về roadmap cho FE: roadmap.sh/frontend

[@vnizero7341]

@@EasyFrontend Em cảm ơn anh nhiều lắm ạ. Chúc anh có nhiều sức khỏe và thuận lợi hơn trong công việc.

[@PHU21994]

Dear anh, em dân trái ngành. Nếu khổ luyện học trên freecodecamp.com thì có thể đạt được những điều anh nói bên dưới hay không?

[@truongthien9456]

Nếu Authentication Server ko có database vậy làm sao check username password ạ

[@EasyFrontend]

hi Thiện, a chưa hiểu ý em lắm, sao mà lại ko có database ta? username + pwd e định lưu ở đâu hen?

[@truongthien9456]

@@EasyFrontend Dạ ở phút 9:21 cái hình của anh ấy ạ Thì là ở Bước 2 cái Authentication Server trả về jwt với user á anh, tức là theo em hiểu có 1 database chứa user ở đó Xong sau đó gọi tới Application Server để gọi API á anh, v database ở Application Server đó có table user k anh ( Nếu có thì trùng bên Authentication Server, còn không thì làm sao tạo liên kết các bảng được ạ )

[@nvs4600]

Anh ơi, jwt có bảo mật không anh?

[@EasyFrontend]

hi em, chỗ này anh nghĩ là có 2 thứ 1. bản thân jwt là cái chuỗi mã hoá có chứa dữ liệu và ko thể chỉnh sửa hợp lệ được nếu ko có private key, nên cái này là bảo mật em nha, nhưng em mà để lộ private key thì toi họng nhé. 2. jwt được dùng như một access token, nên ai có access token đều có thể truy cập được thông tin giống nhau, nên nếu em quản lý ko tốt, để mất access token thì cũng toi họng. Nên vấn đề bảo mật ở đây cần có một sự kết hợp giữa việc tạo ra, quản lý và sử dụng jwt em nha 😉 Nếu bị hỏng ở stage nào thì đều có rủi ro security nhé!

[@nvs4600]

@@EasyFrontend em yêu anh.

[@senfun11]

Anh ơi a có mở lớp dạy reactJS không anh ơi @@

[@EasyFrontend]

Thành Tuân haha a có đang dạy một lớp offline về Frontend em ơi, đi từ html css tới js rồi qua reactjs luôn hehee

[@senfun11]

@@EasyFrontend anh cho e thông tin lớp đó với :D e vừa đậu pv công ty chuyên về fron-end mà chẳng biết gì hết haha

[@EasyFrontend]

hi Thành, em xem thông tin ở link này nhé nordiccoder.com/khoa-hoc/khoa-hoc-web-front-end-development/ hehe nếu em muốn tham gia thì gọi cho bên Nordic Coder nói lớp thầy Hậu - Frontend nhen, em có thể dùng code Hau10NC để được giảm giá hen 🙂

[@senfun11]

@@EasyFrontend E muốn join khi bắt đầu ReactJS được k a mấy cái kia e nắm hết rồi học lại mất thời gian quá @@

[@EasyFrontend]

Thành Tuân à được em nhé, e cứ liên hệ NC để đc hỗ trợ nha hehe 🥰

[@phtanh_]

Anh ơi cho em xin zalo của anh để em hỏi cái chuỗi token này với được không ạ

[@EasyFrontend]

hi Anh, em chịu khó post câu hỏi lên nhóm trao đổi facebook của anh nhé 😉