Làm cách nào để sử dụng JWT với Node js?
Bạn đã bao giờ tự hỏi làm thế nào xác thực hoạt động? . Thật ra không có gì đặc biệt. Đó là một cách mã hóa một giá trị, từ đó tạo ra một mã thông báo duy nhất mà người dùng sử dụng làm mã định danh. Mã thông báo này xác minh danh tính của bạn. Nó có thể xác thực bạn là ai và cho phép các tài nguyên khác nhau mà bạn có quyền truy cập. Nếu bạn tình cờ không biết bất kỳ từ khóa nào trong số này, hãy kiên nhẫn, tôi sẽ giải thích mọi thứ bên dưới Show Đây sẽ là hướng dẫn từng bước về cách thêm xác thực dựa trên mã thông báo vào API REST hiện có. Chiến lược xác thực được đề cập là JWT (JSON Web Token). Nếu điều đó không cho bạn biết nhiều, thì tốt thôi. Nó cũng lạ đối với tôi khi lần đầu tiên tôi nghe thuật ngữ JWT thực sự có ý nghĩa gì theo quan điểm thực tế? Mã thông báo web JSON (JWT) là một phương tiện nhỏ gọn, an toàn với URL để biểu thị các yêu cầu được chuyển giao giữa hai bên. Các xác nhận quyền sở hữu trong JWT được mã hóa dưới dạng một đối tượng JSON được sử dụng làm tải trọng của cấu trúc Chữ ký Web JSON (JWS) hoặc dưới dạng văn bản rõ ràng của cấu trúc Mã hóa Web JSON (JWE), cho phép các xác nhận quyền sở hữu được ký điện tử hoặc bảo vệ tính toàn vẹn . Đó là một ngụm. Hãy dịch nó sang tiếng Anh. JWT là một chuỗi ký tự được mã hóa an toàn để gửi giữa hai máy tính nếu cả hai đều có HTTPS. Mã thông báo đại diện cho một giá trị chỉ có thể truy cập được bởi máy tính có quyền truy cập vào khóa bí mật mà nó đã được mã hóa. Đủ đơn giản, phải không? Điều này trông như thế nào trong cuộc sống thực? . Họ gửi yêu cầu với thông tin đăng nhập bắt buộc như email và mật khẩu đến máy chủ. Máy chủ kiểm tra xem thông tin đăng nhập có hợp lệ không. Nếu đúng như vậy, máy chủ sẽ tạo mã thông báo bằng tải trọng mong muốn và khóa bí mật. Chuỗi ký tự này là kết quả của quá trình mã hóa được gọi là mã thông báo. Sau đó máy chủ gửi lại cho máy khách. Đến lượt khách hàng, lưu mã thông báo để sử dụng nó trong mọi yêu cầu khác mà người dùng sẽ gửi. Việc thêm mã thông báo vào tiêu đề yêu cầu là cách cho phép người dùng truy cập tài nguyên. Đây là một ví dụ thực tế về cách thức hoạt động của JWT Được rồi, nói đủ rồi. Phần còn lại của hướng dẫn này sẽ là viết mã và tôi rất vui nếu bạn theo dõi và viết mã cùng với tôi khi chúng ta tiến bộ. Mỗi đoạn mã sẽ được theo sau bởi một lời giải thích. Tôi tin rằng cách tốt nhất để hiểu nó một cách chính xác là tự viết mã cho nó Trước khi tôi bắt đầu, có một số điều bạn cần biết về Node. js và một số tiêu chuẩn EcmaScript mà tôi sẽ sử dụng. Tôi sẽ không sử dụng ES6, vì nó không thân thiện với người mới bắt đầu như JavaScript truyền thống. Tuy nhiên, tôi mong rằng bạn đã biết cách xây dựng một RESTful API với Node. js. Nếu không, bạn có thể đi đường vòng và kiểm tra điều này trước khi tiếp tục Ngoài ra, toàn bộ bản demo có trên GitHub nếu bạn muốn xem toàn bộ Chúng ta hãy bắt đầu viết một số mã, phải không?Chà, vẫn chưa thực sự. Chúng ta cần thiết lập môi trường trước. Mã sẽ phải đợi ít nhất vài phút nữa. Phần này nhàm chán nên để bắt đầu và chạy nhanh, chúng tôi sẽ sao chép kho lưu trữ từ hướng dẫn ở trên. Mở một cửa sổ đầu cuối hoặc dấu nhắc dòng lệnh và chạy lệnh này
Bạn sẽ thấy một thư mục xuất hiện, hãy mở nó lên. Hãy xem cấu trúc thư mục
Chúng tôi có một thư mục người dùng với một mô hình và bộ điều khiển và CRUD cơ bản đã được triển khai. ứng dụng của chúng tôi. js chứa cấu hình cơ bản. db. js đảm bảo ứng dụng kết nối với cơ sở dữ liệu. máy chủ. js đảm bảo máy chủ của chúng tôi hoạt động tốt Hãy tiếp tục và cài đặt tất cả các mô-đun Node cần thiết. Chuyển về cửa sổ đầu cuối của bạn. Đảm bảo rằng bạn đang ở trong thư mục có tên ‘nodejs-restful-api’ và chạy 8. Đợi một hoặc hai giây để các mô-đun cài đặt. Bây giờ bạn cần thêm một chuỗi kết nối cơ sở dữ liệu trong db. jsChuyển đến mLab, tạo một tài khoản nếu bạn chưa có và mở bảng điều khiển cơ sở dữ liệu của bạn. Tạo một cơ sở dữ liệu mới, đặt tên theo ý muốn và tiếp tục đến trang cấu hình của nó. Thêm người dùng cơ sở dữ liệu vào cơ sở dữ liệu của bạn và sao chép chuỗi kết nối từ bảng điều khiển vào mã của bạn Tất cả những gì bạn cần làm bây giờ là thay đổi các giá trị giữ chỗ cho 9 và 0. Thay thế chúng bằng tên người dùng và mật khẩu của người dùng bạn đã tạo cho cơ sở dữ liệu. Bạn có thể tìm thấy giải thích chi tiết từng bước về quy trình này trong hướng dẫn được liên kết ở trênGiả sử người dùng mà tôi đã tạo cho cơ sở dữ liệu có tên là 1 với mật khẩu là 2. Có ý nghĩ đó, db. js bây giờ sẽ trông giống như thế này
Hãy tiếp tục và khởi động máy chủ, quay lại cửa sổ đầu cuối của bạn, gõ 3. Bạn sẽ thấy 4 được đăng nhập vào thiết bị đầu cuốiCuối cùng, một số mãHãy bắt đầu bằng cách động não về những gì chúng ta muốn xây dựng. Trước hết chúng tôi muốn thêm xác thực người dùng. Có nghĩa là, triển khai một hệ thống đăng ký và đăng nhập người dùng Thứ hai, chúng tôi muốn thêm ủy quyền. Hành động cấp cho người dùng quyền truy cập vào một số tài nguyên nhất định trên API REST của chúng tôi Bắt đầu bằng cách thêm một tệp mới vào thư mục gốc của dự án. Đặt tên cho nó là cấu hình. js. Tại đây bạn sẽ đặt cấu hình cài đặt cho ứng dụng. Mọi thứ chúng tôi cần vào lúc này chỉ là xác định khóa bí mật cho Mã thông báo web JSON của chúng tôi từ chối trách nhiệm. Hãy nhớ rằng, trong mọi trường hợp, bạn không nên bao giờ, (BAO GIỜ. ) để khóa bí mật của bạn hiển thị công khai như thế này. Luôn đặt tất cả các khóa của bạn vào các biến môi trường. Tôi chỉ viết nó như thế này cho mục đích demo 0Với điều này được thêm vào, bạn đã sẵn sàng để bắt đầu thêm logic xác thực. Tạo một thư mục có tên auth và bắt đầu bằng cách thêm một tệp có tên AuthController. js. Bộ điều khiển này sẽ là nơi chứa logic xác thực của chúng tôi Thêm đoạn mã này vào đầu AuthController. js 1Bây giờ bạn đã sẵn sàng để thêm các mô-đun để sử dụng JSON Web Tokens và mã hóa mật khẩu. Dán mã này vào AuthController. js 2Mở một cửa sổ đầu cuối trong thư mục dự án của bạn và cài đặt các mô-đun sau 3Đó là tất cả các mô-đun chúng tôi cần để triển khai xác thực mong muốn của mình. Bây giờ bạn đã sẵn sàng để tạo một điểm cuối 5. Thêm đoạn mã này vào AuthController của bạn. js 5Ở đây, chúng tôi mong người dùng gửi cho chúng tôi ba giá trị, tên, email và mật khẩu. Chúng tôi sẽ ngay lập tức lấy mật khẩu và mã hóa nó bằng phương pháp băm của Bcrypt. Sau đó lấy mật khẩu đã băm, bao gồm tên và email và tạo người dùng mới. Sau khi người dùng đã được tạo thành công, chúng tôi dễ dàng tạo mã thông báo cho người dùng đó Phương thức 6 nhận tải trọng và khóa bí mật được xác định trong cấu hình. js làm tham số. Nó tạo ra một chuỗi ký tự duy nhất đại diện cho tải trọng. Trong trường hợp của chúng tôi, tải trọng là một đối tượng chỉ chứa id của người dùng. Hãy viết một đoạn mã để lấy id người dùng dựa trên mã thông báo mà chúng tôi đã nhận được từ điểm cuối đăng ký 7Ở đây, chúng tôi mong đợi mã thông báo được gửi cùng với yêu cầu trong tiêu đề. Tên mặc định cho mã thông báo trong tiêu đề của yêu cầu HTTP là 7. Nếu không có mã thông báo được cung cấp cùng với yêu cầu, máy chủ sẽ gửi lại lỗi. Nói chính xác hơn, trạng thái 8 với thông báo phản hồi là 'Không cung cấp mã thông báo'. Nếu mã thông báo tồn tại, phương thức 9 sẽ được gọi. Phương pháp này giải mã mã thông báo để có thể xem tải trọng ban đầu. Chúng tôi sẽ xử lý lỗi nếu có và nếu không có, hãy gửi lại giá trị đã giải mã dưới dạng phản hồiCuối cùng, chúng ta cần thêm route vào AuthController. js trong ứng dụng chính của chúng tôi. tập tin js. Đầu tiên xuất bộ định tuyến từ AuthController. js 1Sau đó, thêm tham chiếu đến bộ điều khiển trong ứng dụng chính, ngay phía trên nơi bạn đã xuất ứng dụng 0Hãy kiểm tra điều này. Tại sao không?Mở công cụ kiểm tra API REST mà bạn chọn, tôi sử dụng Postman hoặc Insomnia, nhưng cái nào cũng được Quay trở lại thiết bị đầu cuối của bạn và chạy 3. Nếu nó đang chạy, hãy dừng nó, lưu tất cả các thay đổi vào tệp của bạn và chạy lại 3Mở Postman và nhấn điểm cuối đăng ký ( 02). Đảm bảo chọn phương thức POST và 03. Bây giờ, thêm một số giá trị. Tên người dùng của tôi là Mike và mật khẩu của anh ấy là 'thisisasecretpassword'. Thành thật mà nói, đó không phải là mật khẩu tốt nhất mà tôi từng thấy, nhưng nó sẽ làm được. Nhấn gửi/Đăng kýXem phản hồi? . Để dùng thử điểm cuối 04, trước tiên hãy sao chép mã thông báo. Thay đổi URL thành 05 thay vì 5 và phương thức NHẬN. Bây giờ bạn có thể thêm mã thông báo vào tiêu đề yêu cầu/tôithì đấy. Mã thông báo đã được giải mã thành một đối tượng có trường id. Bạn muốn chắc chắn rằng id thực sự thuộc về Mike, người dùng mà chúng tôi vừa tạo? . Quay trở lại trình chỉnh sửa mã của bạn 1Bây giờ, khi bạn gửi yêu cầu đến điểm cuối 05, bạn sẽ thấyPhản hồi hiện chứa toàn bộ đối tượng người dùng. Mát mẻ. Nhưng không tốt. Không bao giờ được trả lại mật khẩu cùng với dữ liệu khác về người dùng. Hãy khắc phục điều này. Chúng tôi có thể thêm một phép chiếu vào truy vấn và bỏ qua mật khẩu. Như thế này 2Tốt hơn rồi, bây giờ chúng ta có thể thấy tất cả các giá trị ngoại trừ mật khẩu. Mike trông thật tuyệt. Có ai đó nói đăng nhập?Sau khi thực hiện đăng ký, chúng ta nên tạo một cách để người dùng hiện tại đăng nhập. Hãy suy nghĩ về nó trong một giây. Điểm cuối đăng ký yêu cầu chúng tôi tạo người dùng, băm mật khẩu và cấp mã thông báo. Điểm cuối đăng nhập sẽ cần chúng tôi thực hiện điều gì? . Nhưng cũng kiểm tra xem mật khẩu được cung cấp có khớp với mật khẩu được băm trong cơ sở dữ liệu không. Chỉ khi đó chúng tôi mới muốn phát hành mã thông báo. Thêm phần này vào AuthController của bạn. js 3Trước hết chúng tôi kiểm tra xem người dùng có tồn tại không. Sau đó, sử dụng phương pháp 08 của Bcrypt, chúng tôi so sánh mật khẩu được gửi với yêu cầu với mật khẩu trong cơ sở dữ liệu. Nếu chúng phù hợp, chúng tôi 09 một mã thông báo. Nó khá là nhiều. Hãy thử nó raLàm mát nó hoạt động. Nếu chúng ta lấy sai mật khẩu thì sao? Tuyệt vời, khi mật khẩu sai, máy chủ sẽ gửi trạng thái phản hồi là 8. Chỉ là những gì chúng tôi muốnĐể kết thúc phần này của hướng dẫn, hãy thêm một điểm cuối đăng xuất đơn giản để vô hiệu hóa mã thông báo 4từ chối trách nhiệm. Điểm cuối đăng xuất là không cần thiết. Hành động đăng xuất chỉ có thể được thực hiện thông qua phía khách hàng. Mã thông báo thường được giữ trong cookie hoặc bộ lưu trữ cục bộ của trình duyệt. Đăng xuất cũng đơn giản như hủy mã thông báo trên máy khách. Điểm cuối 11 này được tạo để mô tả một cách logic những gì xảy ra khi bạn đăng xuất. Mã thông báo được đặt thành 12Với điều này, chúng tôi đã hoàn thành phần xác thực của hướng dẫn. Bạn muốn chuyển sang ủy quyền? Bạn có được phép ở đây không?Để hiểu logic đằng sau chiến lược ủy quyền, chúng ta cần tìm hiểu kỹ về một thứ gọi là phần mềm trung gian. Tên của nó là tự giải thích, ở một mức độ nào đó, phải không? . js, đóng vai trò là cầu nối giữa một số phần trong mã của bạn Khi một yêu cầu đến một điểm cuối, bộ định tuyến có một tùy chọn để chuyển yêu cầu đến chức năng phần mềm trung gian tiếp theo trong dòng. Nhấn mạnh vào từ tiếp theo. Bởi vì đó chính xác là tên của chức năng. Hãy xem một ví dụ. Nhận xét dòng mà bạn gửi lại cho người dùng dưới dạng phản hồi. Thêm một 13 ngay bên dưới 5Các chức năng của phần mềm trung gian là các chức năng có quyền truy cập vào đối tượng yêu cầu (14), đối tượng phản hồi ( Quay lại phần người đưa thư và xem điều gì sẽ xảy ra khi bạn chạm vào điểm cuối 04. Bạn có ngạc nhiên khi kết quả hoàn toàn giống nhau không? từ chối trách nhiệm. Hãy tiếp tục và xóa mẫu này trước khi chúng tôi tiếp tục vì nó chỉ được sử dụng để chứng minh logic của việc sử dụng 19Hãy lấy logic tương tự này và áp dụng nó để tạo chức năng phần mềm trung gian để kiểm tra tính hợp lệ của mã thông báo. Tạo một tệp mới trong thư mục xác thực và đặt tên là VerifyToken. js. Dán đoạn mã này vào đó 6Hãy phá vỡ nó. Chúng tôi sẽ sử dụng chức năng này làm phần mềm trung gian tùy chỉnh để kiểm tra xem mã thông báo có tồn tại hay không và liệu nó có hợp lệ không. Sau khi xác thực nó, chúng tôi thêm giá trị 20 vào biến yêu cầu ( 14). Bây giờ chúng tôi có quyền truy cập vào chức năng tiếp theo trong chu kỳ phản hồi yêu cầu. Gọi 19 sẽ đảm bảo luồng sẽ tiếp tục đến chức năng tiếp theo đang xếp hàng. Cuối cùng, chúng tôi xuất hàmBây giờ, hãy mở AuthController. js một lần nữa. Thêm tham chiếu đến VerifyToken. js ở đầu tệp và chỉnh sửa điểm cuối 05. Bây giờ nó sẽ trông như thế này 7Xem cách chúng tôi thêm 24 vào chuỗi chức năng? . Điều này giải phóng tất cả không gian trong cuộc gọi lại để chỉ xử lý logic mà chúng ta cần. Đây là một ví dụ tuyệt vời về cách viết mã DRY. Bây giờ, mỗi khi bạn cần ủy quyền cho người dùng, bạn có thể thêm chức năng phần mềm trung gian này vào chuỗi. Kiểm tra lại trong Postman để đảm bảo rằng nó vẫn hoạt động bình thườngVui lòng xử lý mã thông báo và thử lại điểm cuối. Với mã thông báo không hợp lệ, bạn sẽ thấy thông báo lỗi mong muốn và đảm bảo rằng mã bạn đã viết hoạt động theo cách bạn muốn Tại sao điều này rất mạnh mẽ? . Chỉ người dùng có mã thông báo đã xác minh mới có thể truy cập tài nguyên Quấn đầu quanh mọi thứĐừng cảm thấy tồi tệ nếu bạn không nắm bắt mọi thứ cùng một lúc. Một số trong những khái niệm này là khó hiểu. Bạn có thể lùi lại một bước và cho não nghỉ ngơi trước khi thử lại. Đó là lý do tại sao tôi khuyên bạn nên tự mình xem mã và cố gắng hết sức để mã hoạt động Một lần nữa, đây là kho lưu trữ GitHub. Bạn có thể cập nhật bất kỳ điều gì mà bạn có thể đã bỏ lỡ hoặc chỉ cần xem kỹ mã hơn nếu bạn gặp khó khăn Hãy nhớ rằng, xác thực là hành động đăng nhập người dùng vào. Ủy quyền là hành động xác minh quyền truy cập của người dùng để tương tác với tài nguyên Các chức năng phần mềm trung gian được sử dụng làm cầu nối giữa một số đoạn mã. Khi được sử dụng trong chuỗi chức năng của điểm cuối, chúng có thể cực kỳ hữu ích trong việc ủy quyền và xử lý lỗi Hy vọng các bạn và các cô gái thích đọc nó nhiều như tôi thích viết nó. Cho đến lần sau, hãy tò mò và vui vẻ Bạn có nghĩ rằng hướng dẫn này sẽ giúp ích cho ai đó? . Nếu bạn thích nó, hãy vỗ tay cho tôi QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Người ủng hộ nhà phát triển cấp cao @ Cube Dev. Sách/Khóa học Tác giả. Nhà sáng lập khởi nghiệp thất bại và cựu lãnh đạo địa phương tại freeCodeCamp Sarajevo Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Cách xác minh JWT hoạt động trong nút JS?Để xác minh JWT, máy chủ tạo chữ ký một lần nữa bằng cách sử dụng tiêu đề và tải trọng từ JWT đến và khóa bí mật của nó . Nếu chữ ký mới được tạo khớp với chữ ký trên JWT thì JWT được coi là hợp lệ.
Tôi có thể chuyển mã thông báo JWT trong URL không?Có. Nhóm khung đề xuất rằng ứng dụng có thể thu thập mã thông báo từ một vị trí khác với tiêu đề ủy quyền. Tất cả những gì chúng ta cần làm là đặt thuộc tính Mã thông báo trong MessageReceivedContext đang được chuyển đến sự kiện MessageReceived . |