Xem hướng dẫn dành cho nhà phát triển "Xác thực Vue theo ví dụ" để biết hướng dẫn mới nhất về cách bảo mật ứng dụng Vue bằng cách sử dụng xác thực dựa trên mã thông báo
Hướng dẫn này đã bị phản đối
Tìm hiểu cách bảo mật Vue. js bằng cách triển khai xác thực người dùng, bao gồm đăng nhập, đăng xuất và đăng ký của người dùng, cùng với việc bảo vệ Vue. tuyến đường js. Bạn sẽ nâng cấp một Vue khởi đầu. js để thực hành các khái niệm bảo mật sau
- Thêm người dùng đăng nhập và đăng xuất
- Truy xuất thông tin người dùng
- Bảo vệ các tuyến ứng dụng
- Gọi các điểm cuối được bảo vệ từ API
Tìm biểu tượng cảm xúc 🛠️️ nếu bạn muốn đọc lướt qua nội dung trong khi tập trung vào các bước xây dựng
Hướng dẫn này sử dụng Auth0 SPA SDK để bảo mật Vue. js, cung cấp Vue. js với một cách dễ dàng hơn để thêm xác thực người dùng vào Vue. js sử dụng Vue. plugin js. Auth0 SPA SDK cung cấp API cấp cao để xử lý nhiều chi tiết triển khai xác thực. Bây giờ bạn có thể bảo mật Vue của mình. js sử dụng các biện pháp bảo mật tốt nhất trong khi viết ít mã hơn
Hướng dẫn này bao gồm Vue. js 2
Auth0 hoạt động như thế nào?
Với sự trợ giúp của Auth0, bạn không cần phải là chuyên gia về các giao thức nhận dạng, chẳng hạn như OAuth 2. 0 hoặc OpenID Connect, để hiểu cách bảo mật ngăn xếp ứng dụng web của bạn. Trước tiên, bạn tích hợp ứng dụng của mình với Auth0. Sau đó, ứng dụng của bạn sẽ chuyển hướng người dùng đến trang đăng nhập có thể tùy chỉnh Auth0 khi họ cần đăng nhập. Sau khi người dùng của bạn đăng nhập thành công, Auth0 sẽ chuyển hướng họ trở lại ứng dụng của bạn, trả lại Mã thông báo web JSON [JWT] cùng với thông tin xác thực và người dùng của họ
⏰⚡️ Nếu bạn không có nhiều thời gian, hãy xem Auth0 Vue. js Quickstart để bắt đầu và chạy với xác thực người dùng cho Vue. js chỉ trong vài phút
Tải ứng dụng Starter
Chúng tôi đã tạo một dự án khởi động bằng Vue. js CLI để giúp bạn học Vue. khái niệm bảo mật js thông qua thực hành. Ứng dụng khởi động sử dụng Bootstrap với chủ đề tùy chỉnh để chăm sóc bố cục và kiểu dáng cho ứng dụng của bạn. Bạn có thể tập trung vào việc xây dựng Vue. js để bảo mật ứng dụng của bạn
🛠 Như vậy, hãy sao chép kho lưu trữ
//localhost:4040
0 trên nhánh //localhost:4040
1 của nó để bắt đầugit clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
🛠 Sau khi sao chép repo, hãy đặt
//localhost:4040
0 vào thư mục hiện tại của bạncd auth0-vue-sample
🛠 Cài đặt Vue. phụ thuộc dự án js
npm install
🛠 Chạy Vue. dự án js
npm run serve
Kết nối Vue. js với Auth0
Phần tốt nhất của nền tảng Auth0 là cách hợp lý hóa để bắt đầu bằng cách làm theo các bước sau
Đăng ký và tạo Ứng dụng Auth0
Nếu bạn chưa có, hãy đăng ký tài khoản Auth0 miễn phí →
Một tài khoản miễn phí cung cấp cho bạn
- 7.000 người dùng hoạt động miễn phí và đăng nhập không giới hạn
- Đăng nhập toàn cục Auth0 cho Web, iOS và Android
- Tối đa 2 nhà cung cấp nhận dạng xã hội như Google, GitHub và Twitter
- Quy tắc Serverless không giới hạn để tùy chỉnh và mở rộng khả năng của Auth0
Trong quá trình đăng ký, bạn tạo một thứ gọi là Đối tượng thuê Auth0, đại diện cho sản phẩm hoặc dịch vụ mà bạn đang thêm xác thực
🛠 Sau khi bạn đăng nhập, Auth0 sẽ đưa bạn đến Trang tổng quan. Trong menu thanh bên trái, nhấp vào "Ứng dụng"
🛠 Sau đó, nhấp vào nút "Tạo ứng dụng". Một phương thức mở ra với một biểu mẫu để cung cấp tên cho ứng dụng và chọn loại ứng dụng
Tên. Auth0 Vue. js mẫu
Loại ứng dụng. Ứng dụng web một trang
🛠 Bấm vào nút "Tạo" để hoàn tất quy trình. Trang ứng dụng Auth0 của bạn tải lên
Trong bước tiếp theo, bạn sẽ học cách trợ giúp Vue. js và Auth0 giao tiếp
Mối quan hệ giữa Người thuê Auth0 và Ứng dụng Auth0 là gì?
Giả sử bạn có Vue chia sẻ ảnh. ứng dụng js có tên là "Vuetigram". Sau đó, bạn sẽ tạo một đối tượng thuê Auth0 có tên là
//localhost:4040
3. Ở góc độ khách hàng, Vuetigram là sản phẩm hoặc dịch vụ của khách hàng đóBây giờ, giả sử rằng Vuetigram có sẵn trên ba nền tảng. web dưới dạng ứng dụng một trang và dưới dạng ứng dụng di động gốc dành cho Android và iOS. Nếu mỗi nền tảng cần xác thực, bạn cần tạo ba ứng dụng Auth0 để cung cấp cho sản phẩm mọi thứ cần thiết để xác thực người dùng thông qua nền tảng đó
Người dùng Vuetigram sẽ thuộc đối tượng thuê Auth0 Vuetigram, chia sẻ chúng trên các ứng dụng Auth0 của nó
Tạo cầu nối giao tiếp giữa Vue. js và Auth0
Khi bạn sử dụng Auth0, bạn không phải tạo biểu mẫu đăng nhập. Auth0 cung cấp trang Đăng nhập toàn cục để giảm chi phí thêm và quản lý xác thực
Đăng nhập toàn cục hoạt động như thế nào?
Vue của bạn. ứng dụng js sẽ chuyển hướng người dùng đến Auth0 bất cứ khi nào họ kích hoạt yêu cầu xác thực. Auth0 sẽ hiển thị cho họ một trang đăng nhập. Khi họ đăng nhập, Auth0 sẽ chuyển hướng họ trở lại Vue của bạn. ứng dụng js. Để việc chuyển hướng đó diễn ra an toàn, bạn phải chỉ định trong Cài đặt ứng dụng Auth0 của mình các URL mà Auth0 có thể chuyển hướng người dùng sau khi xác thực họ
🛠 Như vậy, hãy nhấp vào tab "Cài đặt" trên trang Ứng dụng Auth0 của bạn và điền vào các giá trị sau
🛠 URL gọi lại được phép
//localhost:4040
Giá trị trên là URL mà Auth0 có thể sử dụng để chuyển hướng người dùng của bạn sau khi họ đăng nhập thành công
🛠 URL đăng xuất được phép
//localhost:4040
Giá trị trên là URL mà Auth0 có thể sử dụng để chuyển hướng người dùng của bạn sau khi họ đăng xuất
🛠 Nguồn gốc web được phép
//localhost:4040
Sử dụng Auth0 SPA SDK, Vue của bạn. ứng dụng js sẽ thực hiện các yêu cầu dưới mui xe tới URL Auth0 để xử lý các yêu cầu xác thực. Như vậy, bạn cần thêm Vue của mình. js URL gốc của ứng dụng để tránh các sự cố Chia sẻ tài nguyên nguồn gốc chéo [CORS]
🛠 Cuộn xuống và nhấp vào nút "Lưu thay đổi"
🛠 Đừng đóng trang này. Bạn sẽ cần một số thông tin của nó trong phần tiếp theo
Thêm các biến cấu hình Auth0 vào Vue. js
Từ trang Cài đặt ứng dụng Auth0, bạn cần các giá trị ID ứng dụng khách và tên miền Auth0 để cho phép Vue của bạn. js để sử dụng cầu giao tiếp mà bạn đã tạo
Chính xác thì Miền Auth0 và ID ứng dụng khách Auth0 là gì?Miền
Khi bạn tạo tài khoản Auth0 mới, Auth0 đã yêu cầu chọn tên cho Đối tượng thuê của bạn. Tên này, được thêm vào với
//localhost:4040
4, là Tên miền Auth0 của bạn. Đó là URL cơ sở mà bạn sẽ sử dụng để truy cập API Auth0 và URL nơi bạn sẽ chuyển hướng người dùng đăng nhậpBạn cũng có thể sử dụng miền tùy chỉnh để cho phép Auth0 thực hiện công việc nặng nhọc xác thực cho bạn mà không ảnh hưởng đến trải nghiệm thương hiệu của bạn
ID khách hàng
Mỗi ứng dụng được chỉ định một ID khách hàng khi tạo, là một chuỗi chữ và số và đó là mã định danh duy nhất cho ứng dụng của bạn [chẳng hạn như
//localhost:4040
5]. Bạn không thể sửa đổi Client ID. Bạn sẽ sử dụng ID ứng dụng khách để xác định Ứng dụng Auth0 mà SDK SPA Auth0 cần kết nốiCảnh báo. Một phần thông tin quan trọng khác có trong "Cài đặt" là Bí mật khách hàng. Bí mật này bảo vệ tài nguyên của bạn bằng cách chỉ cấp mã thông báo cho người yêu cầu nếu họ được ủy quyền. Hãy coi đó là mật khẩu của ứng dụng của bạn, mật khẩu này phải luôn được giữ bí mật. Nếu bất kỳ ai có quyền truy cập vào Bí mật khách hàng của bạn, họ có thể mạo danh ứng dụng của bạn và truy cập các tài nguyên được bảo vệ
🛠 Mở Vue. js,
//localhost:4040
0, và tạo một tệp //localhost:4040
7 trong thư mục dự án//localhost:4040
5🛠 Điền vào
//localhost:4040
7 như sau//localhost:4040
7🛠 Quay lại trang ứng dụng Auth0 của bạn. Thực hiện theo các bước sau để nhận các giá trị
//localhost:4040
9 và //localhost:4040
0🛠 Nhấp vào tab "Cài đặt", nếu bạn chưa có
🛠 Sử dụng giá trị "Miền" từ "Cài đặt" làm giá trị của
9 trong//localhost:4040
7//localhost:4040
🛠 Sử dụng giá trị "ID khách hàng" từ "Cài đặt" làm giá trị của
0 trong//localhost:4040
7//localhost:4040
Bạn sẽ tìm hiểu thêm về các thuộc tính
//localhost:4040
5 và //localhost:4040
6 trong phần Gọi API. Hiện tại, bạn có thể để các giá trị đó dưới dạng chuỗi trốngCác biến này cho phép Vue của bạn. js tự nhận mình là một bên được ủy quyền để tương tác với máy chủ xác thực Auth0
Auth0 và Vue. bộ kết nối js
Bạn đã hoàn tất thiết lập dịch vụ xác thực mà Vue của bạn. ứng dụng js có thể tiêu thụ. Tất cả những gì còn lại là để bạn tiếp tục xây dựng dự án khởi động trong suốt hướng dẫn này bằng cách triển khai các thành phần để kích hoạt và quản lý quy trình xác thực
Vui lòng tìm hiểu sâu hơn về Tài liệu Auth0 để tìm hiểu thêm về cách Auth0 giúp bạn tiết kiệm thời gian triển khai và quản lý danh tính
Tạo Vue. plugin xác thực js
Bạn sẽ tạo Vue khác. js để kích hoạt luồng xác thực trong ứng dụng của bạn. Như vậy, bạn cần thêm chức năng xác thực người dùng vào Vue của mình. ứng dụng js ở cấp độ toàn cầu
Một cách tiếp cận để thêm chức năng cấp toàn cầu vào Vue. js đang sử dụng các plugin, tận dụng bản chất phản ứng của Vue. Trong trường hợp xác thực người dùng, Vue. js cho phép bạn tạo trình bao bọc có thể tái sử dụng và phản ứng xung quanh Auth0 SPA SDK, giúp làm việc với các phương thức không đồng bộ của SDK dễ dàng hơn nhiều
Nếu bạn muốn tìm hiểu cách tạo Vue. js từ đầu, hãy đến phần Cách tạo Vue. hướng dẫn plugin js. Nếu bạn đã hoàn thành Vue. js, bạn có thể chuyển sang phần Thêm xác thực người dùng
Nếu không, hãy làm theo hướng dẫn trong phần này để nhanh chóng tạo Vue. plugin xác thực js
🛠 Thực hiện lệnh sau để cài đặt Auth0 SPA SDK
git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
6🛠 Tạo thư mục
//localhost:4040
7 trong thư mục //localhost:4040
8cd auth0-vue-sample
0🛠 Tạo tệp
//localhost:4040
9 trong thư mục //localhost:4040
50cd auth0-vue-sample
1🛠 Điền vào
//localhost:4040
51 đoạn mã sau xác định Vue. mô-đun plugin jscd auth0-vue-sample
2🛠 Mở
//localhost:4040
52 và sử dụng phương pháp //localhost:4040
53 để cài đặt plugincd auth0-vue-sample
3Auth0 SPA SDK đã được thiết lập xong. Bạn đã sẵn sàng triển khai xác thực người dùng bằng Vue. js trong phần tiếp theo bằng cách sử dụng
//localhost:4040
54 của bạnThêm xác thực người dùng
Bạn cần cung cấp các phần tử giao diện người dùng để người dùng kích hoạt các sự kiện xác thực. đăng nhập, đăng xuất và đăng ký
Tạo nút đăng nhập
🛠 Tạo tệp
//localhost:4040
55 trong thư mục //localhost:4040
56cd auth0-vue-sample
4🛠 Dân cư
//localhost:4040
57 như vậycd auth0-vue-sample
5Như đã đề cập trong quá trình tạo plugin xác thực, bạn có thể chuyển một đối tượng cấu hình tới
//localhost:4040
58 để tùy chỉnh trải nghiệm đăng nhập. Ví dụ: bạn có thể chuyển các tùy chọn để chuyển hướng người dùng đến trang Đăng nhập toàn cục Auth0 được tối ưu hóa để đăng ký Vue của bạn. ứng dụng js. Xem //localhost:4040
59 để biết thêm chi tiết về các tùy chọn nàyTạo nút đăng ký
Bạn có thể khiến người dùng truy cập trực tiếp vào trang đăng ký thay vì trang đăng nhập bằng cách chỉ định thuộc tính
//localhost:4040
70 trong đối tượng cấu hình của //localhost:4040
58cd auth0-vue-sample
6🛠 Tạo tệp
//localhost:4040
72 trong thư mục //localhost:4040
56cd auth0-vue-sample
7🛠 Điền vào
//localhost:4040
74 như vậy để xác định thành phần //localhost:4040
75cd auth0-vue-sample
8Sử dụng tính năng Đăng ký yêu cầu bạn bật Trải nghiệm đăng nhập toàn cục mới Auth0 trong đối tượng thuê của mình
🛠 Mở phần Đăng nhập toàn cục của Bảng điều khiển Auth0 và chọn tùy chọn "Mới" trong phần phụ "Trải nghiệm"
🛠 Cuộn xuống và nhấp vào nút "Lưu thay đổi"
Sự khác biệt giữa trải nghiệm người dùng
//localhost:4040
76 và //localhost:4040
75 sẽ rõ ràng hơn khi bạn tích hợp các thành phần đó với Vue của mình. js và xem chúng hoạt động. Bạn sẽ làm điều đó trong các phần tiếp theoTạo nút đăng xuất
🛠 Tạo tệp
//localhost:4040
78 trong thư mục //localhost:4040
56cd auth0-vue-sample
9Dân cư
git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
60 như vậynpm install
0Khi sử dụng phương pháp
git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
61, Auth0 SPA SDK sẽ xóa phiên ứng dụng và chuyển hướng đến điểm cuối Auth0 git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
62 để xóa phiên Auth0 dưới mui xe. Cũng giống như các phương thức đăng nhập, bạn có thể chuyển đối số đối tượng tới git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
63 để xác định tham số cho lệnh gọi git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
62. Quá trình này khá vô hình đối với người dùng. Xem git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
65 để biết thêm chi tiếtTại đây, bạn chuyển tùy chọn
git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
66 để chỉ định URL mà Auth0 sẽ chuyển hướng người dùng của bạn sau khi họ đăng xuất. Ngay bây giờ, bạn đang làm việc cục bộ và "URL đăng xuất được phép" của ứng dụng Auth0 của bạn trỏ tới git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
67Tuy nhiên, nếu bạn đã triển khai Vue của mình. js để sản xuất, bạn cần thêm URL đăng xuất sản xuất vào danh sách "URL đăng xuất được phép" và đảm bảo rằng Auth0 chuyển hướng người dùng của bạn đến URL sản xuất đó chứ không phải
git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
68. Đặt git clone -b starter git@github.com:auth0-blog/auth0-vue-sample.git
66 thành cd auth0-vue-sample
00 sẽ làm được điều đóĐọc thêm về cách Đăng xuất hoạt động tại Auth0
Tích hợp nút đăng nhập và đăng xuất
Hãy bọc
//localhost:4040
76 và cd auth0-vue-sample
02 thành một thành phần có tên là cd auth0-vue-sample
03🛠 Tạo tệp
cd auth0-vue-sample
04 trong thư mục //localhost:4040
56npm install
1🛠 Nhập mã sau vào
cd auth0-vue-sample
06npm install
2Có một số lợi thế khi sử dụng trình bao bọc thành phần
cd auth0-vue-sample
03 nàyBạn có thể xây dựng giao diện linh hoạt.
cd auth0-vue-sample
03 đóng vai trò là công tắc "đăng nhập/đăng xuất" mà bạn có thể đặt ở bất kỳ đâu bạn cần chức năng chuyển đổi đó. Tuy nhiên, bạn vẫn có các thành phần //localhost:4040
76 và cd auth0-vue-sample
02 riêng biệt cho các trường hợp khi bạn cần chức năng của chúng một cách riêng biệt. Ví dụ: bạn có thể có một cd auth0-vue-sample
02 trên một trang mà chỉ những người dùng được xác thực mới có thể nhìn thấyBạn có thể xây dựng các giao diện mở rộng. Bạn có thể dễ dàng hoán đổi thành phần
//localhost:4040
76 với thành phần //localhost:4040
75 trong cd auth0-vue-sample
03 để tạo công tắc "đăng ký/đăng xuất". Bạn cũng có thể gói công tắc "đăng ký/đăng xuất" trong thành phần cd auth0-vue-sample
15Bạn có thể xây dựng giao diện khai báo. Ví dụ: sử dụng
cd auth0-vue-sample
03, bạn có thể thêm chức năng đăng nhập và đăng xuất vào thành phần cd auth0-vue-sample
17 của mình mà không cần suy nghĩ về chi tiết triển khai về cách thức hoạt động của công tắc xác thực🛠 Với ý nghĩ đó, hãy tạo một tệp
cd auth0-vue-sample
18 trong thư mục //localhost:4040
56npm install
3🛠 Nhập mã sau vào
cd auth0-vue-sample
20npm install
4🛠 Cuối cùng, mở
cd auth0-vue-sample
21 trong thư mục //localhost:4040
56 và cập nhật nó như vậy, thêm cd auth0-vue-sample
23 vào đónpm install
5Bằng cách có các thành phần con thanh điều hướng khác nhau, bạn có thể mở rộng từng thành phần khi cần mà không cần mở lại và sửa đổi thành phần chính
cd auth0-vue-sample
17🛠 Hãy tiếp tục và thử đăng nhập. Vue của bạn. js chuyển hướng bạn đến trang Đăng nhập toàn cục Auth0. Bạn có thể sử dụng biểu mẫu để đăng nhập bằng tên người dùng và mật khẩu hoặc nhà cung cấp danh tính xã hội như Google. Lưu ý rằng trang đăng nhập này cũng cung cấp cho bạn tùy chọn để đăng ký
Thí nghiệm. Sử dụng thành phần
//localhost:4040
75Hoán đổi thành phần
//localhost:4040
76 với thành phần //localhost:4040
75 trong thành phần cd auth0-vue-sample
28 của thành phần cd auth0-vue-sample
03npm install
6Khi bạn nhấp vào nút "Đăng ký", bạn sẽ đến một trang có ngôn ngữ được tối ưu hóa để khuyến khích bạn đăng ký Vue của mình. ứng dụng js
Thử thứ này đi
Sau khi bạn hoàn thành thử nghiệm này, hãy hoán đổi
//localhost:4040
75 với //localhost:4040
76 để tiếp tục với phần còn lại của hướng dẫn nàynpm install
2Bạn có thể tùy chỉnh giao diện của các trang Đăng nhập toàn cục mới. Bạn cũng có thể ghi đè bất kỳ văn bản nào trong Trải nghiệm mới bằng API tùy chỉnh văn bản
Lưu ý rằng khi bạn đăng nhập xong và Auth0 sẽ chuyển hướng bạn đến Vue của bạn. js, nút đăng nhập sẽ hiển thị nhanh [màu xanh] và sau đó nút đăng xuất hiển thị [màu đỏ]
Giao diện người dùng nhấp nháy vì Vue của bạn. ứng dụng js không biết Auth0 đã xác thực người dùng chưa. Ứng dụng của bạn sẽ biết trạng thái xác thực người dùng sau khi khởi chạy
//localhost:4040
54🛠 Để khắc phục lỗi giao diện người dùng nhấp nháy đó, hãy sử dụng giá trị boolean
cd auth0-vue-sample
33 được hiển thị bởi //localhost:4040
54 thông qua thuộc tính toàn cầu cd auth0-vue-sample
35 để hiển thị thành phần cd auth0-vue-sample
36 sau khi SDK Auth0 SPA tải xong🛠 Mở
cd auth0-vue-sample
37 và cập nhật nó như saunpm install
8Trong khi SDK đang tải, thành phần
cd auth0-vue-sample
38, có hoạt ảnh thú vị, hiển thị. Đăng xuất và đăng nhập lại để xem điều này hoạt độngTruy xuất thông tin người dùng
Sau khi người dùng đăng nhập thành công, Auth0 sẽ gửi mã thông báo ID đến Vue của bạn. ứng dụng js. Các hệ thống xác thực, chẳng hạn như Auth0, sử dụng Mã thông báo ID trong xác thực dựa trên mã thông báo để lưu trữ thông tin hồ sơ người dùng và cung cấp thông tin đó cho ứng dụng khách. Bộ nhớ đệm của mã thông báo ID có thể góp phần cải thiện hiệu suất và khả năng phản hồi cho Vue của bạn. ứng dụng js
Bạn có thể sử dụng dữ liệu từ mã thông báo ID để cá nhân hóa giao diện người dùng của Vue. ứng dụng js. Auth0 SPA SDK giải mã mã thông báo ID và lưu trữ dữ liệu của nó trong đối tượng
cd auth0-vue-sample
39 được hiển thị bởi //localhost:4040
54 thông qua thuộc tính toàn cầu cd auth0-vue-sample
35. Một số thông tin mã thông báo ID bao gồm tên, biệt hiệu, ảnh và email của người dùng đã đăng nhậpLàm cách nào bạn có thể sử dụng mã thông báo ID để tạo trang hồ sơ cho người dùng của mình?
🛠 Cập nhật thành phần
cd auth0-vue-sample
42 trong cd auth0-vue-sample
43 như saunpm install
9Điều gì đang xảy ra trong thành phần
cd auth0-vue-sample
42?Bạn hiển thị ba thuộc tính từ đối tượng
45 trong giao diện người dùng.cd auth0-vue-sample
46,cd auth0-vue-sample
47 vàcd auth0-vue-sample
48cd auth0-vue-sample
Vì dữ liệu đến từ một đối tượng đơn giản nên bạn không phải tìm nạp nó bằng bất kỳ lệnh gọi không đồng bộ nào
Cuối cùng, bạn hiển thị toàn bộ nội dung của mã thông báo ID đã giải mã trong hộp mã. Bây giờ bạn có thể thấy tất cả các thuộc tính khác có sẵn để bạn sử dụng
Thành phần
cd auth0-vue-sample
42 hiển thị thông tin người dùng mà bạn có thể coi là được bảo vệ. Ngoài ra, thuộc tính cd auth0-vue-sample
39 là cd auth0-vue-sample
51 nếu không có người dùng đăng nhập. Vì vậy, dù bằng cách nào, thành phần này chỉ hiển thị nếu Auth0 đã xác thực người dùngNhư vậy, bạn nên bảo vệ tuyến đường hiển thị thành phần này,
cd auth0-vue-sample
52. Bạn sẽ học cách làm điều đó trong phần tiếp theoBảo vệ tuyến đường
Bạn có thể tạo trình bảo vệ tuyến xác thực để bảo vệ Vue. tuyến đường js. Vue. js sẽ yêu cầu người dùng truy cập tuyến đường đăng nhập nếu họ chưa đăng nhập. Khi họ đăng nhập, Vue. js đưa họ đến tuyến đường mà họ đã cố truy cập
Bạn có thể áp dụng bảo vệ cho bất kỳ tuyến đường nào bạn đã xác định trong Vue. mô-đun bộ định tuyến js
🛠 Để bắt đầu, hãy tạo tệp
cd auth0-vue-sample
53 trong thư mục //localhost:4040
50npm run serve
0Bạn sẽ sử dụng phương pháp
cd auth0-vue-sample
55 từ mô-đun plugin xác thực [//localhost:4040
51] để triển khai chức năng ngăn người dùng không được xác thực truy cập tuyến đường🛠 Điền vào
cd auth0-vue-sample
57 với Vue sau. mẫu bảo vệ điều hướng jsnpm run serve
1Mỗi chức năng bảo vệ nhận được ba đối số
58 là mục tiêu mà người dùng đang điều hướng đếncd auth0-vue-sample
59 là tuyến đường hiện tại mà người dùng đang điều hướng khỏicd auth0-vue-sample
60 là một chức năng mà Vue. js phải gọi để giải quyết hook. Hành động phụ thuộc vào các đối số được cung cấp chocd auth0-vue-sample
60cd auth0-vue-sample
🛠 Tiếp theo, bạn sẽ lấy phiên bản từ mô-đun
cd auth0-vue-sample
62 của mình và thiết lập trình theo dõi trên thuộc tính cd auth0-vue-sample
33 của nónpm run serve
2Bạn muốn đợi thuộc tính
cd auth0-vue-sample
33 là cd auth0-vue-sample
65 trước khi kiểm tra xem người dùng đã đăng nhập chưa🛠 Tiếp theo, xác định hàm
cd auth0-vue-sample
66 để thực thi trong cd auth0-vue-sample
67 sau khi tải xong //localhost:4040
54npm run serve
3Trong vòng
cd auth0-vue-sample
66, nếu người dùng được xác thực, bạn gọi cd auth0-vue-sample
70 để chuyển sang hook tiếp theo trong quy trình. Tuy nhiên, vì không còn móc, điều hướng được xác nhận và người dùng có thể truy cập tuyến đườngMặt khác, nếu người dùng không được xác thực, Vue. js chuyển hướng họ đến trang Auth0 Universal Login để đăng nhập
Lưu ý rằng bạn chuyển một đối tượng tùy chọn cho phương thức
cd auth0-vue-sample
71npm run serve
4Thuộc tính
cd auth0-vue-sample
72 từ đối số đối tượng đại diện cho URL mà người dùng muốn truy cập, cd auth0-vue-sample
73. Auth0 sẽ trả lại URL đó cho Vue của bạn. ứng dụng js sau khi người dùng đăng nhập. Hàm cd auth0-vue-sample
74 mà bạn đã sử dụng làm thuộc tính cấu hình cho cd auth0-vue-sample
75 trong //localhost:4040
51 sẽ sử dụng đối tượng cd auth0-vue-sample
77 đó để chuyển hướng người dùng đến URL đónpm run serve
5🛠 Cho đến nay,
cd auth0-vue-sample
67 của bạn đề cập đến tình huống mà người dùng có thể đang truy cập trực tiếp vào tuyến đường được bảo vệ và Vue của bạn. ứng dụng js đang tải lần đầu tiên. Thế còn trường hợp ứng dụng đã được tải và người dùng đang điều hướng từ trang công khai đến trang được bảo vệ thì sao?🛠 Để làm được điều đó, bạn cần thực hiện một bổ sung nhỏ vào
cd auth0-vue-sample
67 của mình như vậynpm run serve
6Nếu người dùng truy cập tuyến đường và
//localhost:4040
54 đã được tải, bạn kiểm tra trạng thái xác thực bằng cách gọi hàm cd auth0-vue-sample
66. Nó khá giống với logic như trong watcher. Sự khác biệt là trình theo dõi kích hoạt khi //localhost:4040
54 chuyển từ trạng thái "đang tải" sang trạng thái "đã tải". Cổng logic kích hoạt khi //localhost:4040
54 đã ở trạng thái "được tải"🛠 Bạn đã hoàn thành định nghĩa của bộ điều hướng bảo vệ cấp quyền truy cập vào các tuyến đường dựa trên trạng thái xác thực người dùng. Tất cả những gì còn lại là để bạn sử dụng
cd auth0-vue-sample
67 trong mô-đun tuyến đường của mình🛠 Mở
cd auth0-vue-sample
85 và cập nhật như vậynpm run serve
7Bạn sử dụng
cd auth0-vue-sample
67 để bảo vệ hai tuyến đường, cd auth0-vue-sample
87 và cd auth0-vue-sample
88, bằng cách thêm nó làm giá trị của thuộc tính cấu hình tuyến đường cd auth0-vue-sample
89. Điều này có nghĩa là Vue. js sẽ chạy cd auth0-vue-sample
67 của bạn trước khi truy cập vào tuyến đường đó và hiển thị bất kỳ thành phần nào của nó🛠 Bây giờ bạn có thể kiểm tra xem hai đường dẫn này có yêu cầu người dùng đăng nhập trước khi họ có thể truy cập chúng không. Đăng xuất và thử truy cập trang Hồ sơ hoặc API bên ngoài. Nếu nó hoạt động, Vue. js chuyển hướng bạn đăng nhập bằng Auth0
Bộ bảo vệ phía máy khách cải thiện trải nghiệm người dùng Vue của bạn. ứng dụng js, không phải bảo mật của nóTrong Security StackExchange, Conor Mancone giải thích rằng các bộ bảo vệ phía máy chủ là để bảo vệ dữ liệu trong khi các bộ bảo vệ phía máy khách là để cải thiện trải nghiệm người dùng
Những điểm chính từ phản ứng của anh ấy là
- Bạn không thể dựa vào các hạn chế phía máy khách, chẳng hạn như bộ bảo vệ điều hướng và tuyến đường được bảo vệ, để bảo vệ thông tin nhạy cảm
- Những kẻ tấn công có khả năng vượt qua các hạn chế phía máy khách
- Máy chủ của bạn không được trả lại bất kỳ dữ liệu nào mà người dùng không được truy cập
- Trả lại tất cả dữ liệu người dùng từ máy chủ và để khung giao diện người dùng quyết định nội dung hiển thị và nội dung ẩn dựa trên trạng thái xác thực người dùng là cách tiếp cận sai
- Bất kỳ ai cũng có thể mở công cụ dành cho nhà phát triển của trình duyệt và kiểm tra các yêu cầu mạng để xem tất cả dữ liệu
Việc sử dụng bộ bảo vệ điều hướng giúp cải thiện trải nghiệm người dùng chứ không phải bảo mật người dùng
- Nếu không có bảo vệ, người dùng chưa đăng nhập có thể đi lang thang vào một trang có thông tin bị hạn chế và gặp lỗi, chẳng hạn như "Quyền truy cập bị từ chối"
- Với các bộ bảo vệ phù hợp với quyền của máy chủ, bạn có thể ngăn người dùng nhìn thấy lỗi bằng cách ngăn họ truy cập trang bị hạn chế
Gọi một API
Phần này tập trung vào việc chỉ cho bạn cách nhận mã thông báo truy cập trong Vue của bạn. js và cách sử dụng ứng dụng này để thực hiện lệnh gọi API tới các điểm cuối API được bảo vệ
Khi bạn sử dụng Auth0, bạn ủy thác quá trình xác thực cho một dịch vụ tập trung. Auth0 cung cấp cho bạn chức năng đăng nhập và đăng xuất người dùng khỏi Vue của bạn. ứng dụng js. Tuy nhiên, ứng dụng của bạn có thể cần truy cập các tài nguyên được bảo vệ từ API
Bạn cũng có thể bảo vệ API bằng Auth0. Có nhiều khởi động nhanh API để giúp bạn tích hợp Auth0 với nền tảng phụ trợ của mình
Khi bạn sử dụng Auth0 để bảo vệ API của mình, bạn cũng ủy thác quy trình ủy quyền cho một dịch vụ tập trung để đảm bảo chỉ những ứng dụng khách được phê duyệt mới có thể thay mặt người dùng truy cập các tài nguyên được bảo vệ
Làm cách nào bạn có thể thực hiện lệnh gọi API an toàn từ Vue. js?
Vue của bạn. js xác thực người dùng và nhận mã thông báo truy cập từ Auth0. Sau đó, ứng dụng có thể chuyển mã thông báo truy cập đó tới API của bạn dưới dạng thông tin xác thực. Đổi lại, API của bạn có thể sử dụng các thư viện Auth0 để xác minh mã thông báo truy cập mà nó nhận được từ ứng dụng gọi điện và đưa ra phản hồi với dữ liệu mong muốn
Thay vì tạo API từ đầu để kiểm tra luồng xác thực và ủy quyền giữa máy khách và máy chủ, bạn sẽ sử dụng API Express demo mà tôi đã chuẩn bị cho bạn
Nhận bản trình diễn API Express
🛠 Mở một cửa sổ terminal mới và sao chép kho lưu trữ
cd auth0-vue-sample
91 vào một nơi nào đó trong hệ thống của bạn. Đảm bảo rằng bạn sao chép nó bên ngoài Vue của bạn. thư mục dự án jsnpm run serve
8🛠 Sau khi bạn sao chép repo này, hãy đặt thư mục
cd auth0-vue-sample
91 làm thư mục hiện tại của bạnnpm run serve
9🛠 Cài đặt nút. phụ thuộc dự án js
npm install
Kết nối API Express với Auth0
Tạo cầu nối giao tiếp giữa Express và Auth0
Quá trình này tương tự như cách bạn kết nối Vue. js với Auth0
🛠 Chuyển đến phần API trong Bảng điều khiển Auth0 và nhấp vào nút "Tạo API"
🛠 Sau đó, ở dạng mà Auth0 hiển thị
- Thêm tên vào API của bạn
//localhost:4040
1- Đặt giá trị Mã định danh của nó
//localhost:4040
2- Để lại thuật toán ký là
93 vì đây là tùy chọn tốt nhất từ quan điểm bảo mậtcd auth0-vue-sample
Số nhận dạng là các chuỗi duy nhất giúp Auth0 phân biệt giữa các API khác nhau của bạn. Chúng tôi khuyên bạn nên sử dụng URL để tạo điều kiện thuận lợi cho việc tạo số nhận dạng duy nhất có thể dự đoán được;
🛠 Với những giá trị này, hãy nhấn nút "Tạo". Giữ trang này mở vì bạn sẽ cần một số giá trị của nó trong phần tiếp theo
Thêm các biến cấu hình Auth0 vào Express
🛠 Tạo tệp
cd auth0-vue-sample
94 cho Máy chủ API trong thư mục cd auth0-vue-sample
91//localhost:4040
3🛠 Điền vào tệp
cd auth0-vue-sample
96 này như sau//localhost:4040
4🛠 Quay lại trang API Auth0 của bạn và làm theo các bước sau để nhận Đối tượng Auth0
🛠 Nhấp vào tab "Cài đặt"
🛠 Xác định vị trí trường "Số nhận dạng" và sao chép giá trị của nó
🛠 Dán giá trị "Mã định danh" làm giá trị của
97 trongcd auth0-vue-sample
94cd auth0-vue-sample
Bây giờ, hãy làm theo các bước sau để nhận giá trị Tên miền Auth0
- 🛠 Nhấp vào tab "Kiểm tra"
- 🛠 Tìm phần có tên " Hỏi Auth0 về mã thông báo từ ứng dụng của tôi"
- 🛠 Nhấp vào tab cURL để hiển thị yêu cầu
99 giảcd auth0-vue-sample
- 🛠 Sao chép miền Auth0 của bạn, đây là một phần của giá trị tham số
00.npm install
01npm install
- 🛠 Dán giá trị miền Auth0 làm giá trị của
02 trongnpm install
94cd auth0-vue-sample
Tên miền Auth0 là chuỗi con giữa giao thức,
04 và đường dẫnnpm install
05npm install
Tên miền Auth0 tuân theo mẫu này.
01npm install
Tên miền phụ
07 [npm install
08,npm install
09 hoặcnpm install
10] là tùy chọn. Một số tên miền Auth0 không có nónpm install
Vui lòng nhấp vào hình ảnh ở trên, nếu bạn có bất kỳ nghi ngờ nào về cách lấy giá trị Tên miền Auth0
🛠 Với các giá trị cấu hình
cd auth0-vue-sample
94 đã đặt, hãy chạy máy chủ API bằng cách đưa ra lệnh sau//localhost:4040
5Định cấu hình Vue. js để kết nối với API Express
🛠 Quay trở lại thư mục dự án
//localhost:4040
0 lưu trữ Vue của bạn. ứng dụng js🛠 Mở file
//localhost:4040
7 và cập nhật như sau, cung cấp giá trị cho //localhost:4040
5 và //localhost:4040
6//localhost:4040
6Hãy hiểu rõ hơn về những gì thuộc tính
//localhost:4040
5 và //localhost:4040
6 đại diện//localhost:4040
6 chỉ đơn giản là URL mà máy chủ Express của bạn đang lắng nghe các yêu cầu. Trong sản xuất, bạn sẽ thay đổi giá trị này thành URL của máy chủ trực tiếp của mìnhVue của bạn. ứng dụng js cần chuyển mã thông báo truy cập khi nó gọi API mục tiêu để truy cập các tài nguyên được bảo vệ. Bạn có thể yêu cầu mã thông báo truy cập ở định dạng mà API có thể xác minh bằng cách chuyển đối tượng tới
//localhost:4040
54Lưu ý cách giá trị của
//localhost:4040
5 giống với cd auth0-vue-sample
97 từ cd auth0-vue-sample
96Tại sao giá trị Đối tượng Auth0 giống nhau cho cả hai ứng dụng? . ứng dụng js để truy cập. Nó giống như một số điện thoại. Bạn muốn đảm bảo rằng Vue của bạn. ứng dụng js "nhắn đúng API"
Các hành động mà Vue của bạn. js có thể hoạt động trên API tùy thuộc vào phạm vi mà mã thông báo truy cập của bạn chứa, mà bạn có thể xác định là tùy chọn
npm install
24 cho //localhost:4040
54Hãy nhớ rằng màn hình mà bạn đã thấy khi đăng nhập lần đầu bằng Auth0 yêu cầu bạn cho phép truy cập thông tin hồ sơ của mình? . ứng dụng js sẽ yêu cầu ủy quyền từ người dùng để truy cập các phạm vi được yêu cầu và người dùng sẽ phê duyệt hoặc từ chối yêu cầu. Bạn có thể đã thấy điều gì đó tương tự khi chia sẻ danh bạ hoặc ảnh của mình từ nền tảng truyền thông xã hội với ứng dụng của bên thứ ba
Khi bạn không chuyển tùy chọn
npm install
24 cho //localhost:4040
54 như trong ví dụ trên, Auth0 sẽ mặc định sử dụng Phạm vi kết nối OpenID. npm install
28
29. Phạm vi này thông báo cho Máy chủ ủy quyền Auth0 rằng Máy khách đang thực hiện yêu cầu Kết nối OpenID [OIDC] để xác minh danh tính của người dùng. OpenID Connect là một giao thức xác thựcnpm install
30. Giá trị phạm vi này yêu cầu quyền truy cập vào thông tin hồ sơ mặc định của người dùng, chẳng hạn nhưnpm install
46,cd auth0-vue-sample
32 vànpm install
47cd auth0-vue-sample
48. Giá trị phạm vi này yêu cầu quyền truy cập vào thông tincd auth0-vue-sample
48 vàcd auth0-vue-sample
36npm install
Chi tiết về Phạm vi kết nối OpenID đi vào Mã thông báo ID. Tuy nhiên, bạn có thể xác định phạm vi API tùy chỉnh để triển khai kiểm soát truy cập. Bạn sẽ xác định các phạm vi tùy chỉnh đó trong các cuộc gọi mà ứng dụng khách của bạn thực hiện với API đó. Auth0 bao gồm các phạm vi API trong mã thông báo truy cập dưới dạng giá trị xác nhận quyền sở hữu
npm install
24Các khái niệm về phạm vi hoặc quyền API được trình bày tốt hơn trong hướng dẫn API Auth0, chẳng hạn như "Sử dụng TypeScript để tạo API bảo mật bằng nút. js và Express. Kiểm soát truy cập dựa trên vai trò"
//localhost:4040
54 của bạn cung cấp cho bạn một phương pháp để nhận mã thông báo truy cập từ Auth0. npm install
39. Nếu bạn đã có một mã thông báo truy cập được lưu trữ trong bộ nhớ, nhưng mã thông báo này không hợp lệ hoặc đã hết hạn, phương pháp này sẽ giúp bạn có một mã thông báo mới. Thông thường, việc nhận mã thông báo truy cập mới yêu cầu người dùng đăng nhập lại. Tuy nhiên, Auth0 SPA SDK cho phép bạn lấy một cái ở chế độ nền mà không làm gián đoạn người dùng. Như tên của nó, đó là một phương pháp để npm install
39. 🤫😶Đã đến lúc xây dựng trang "API bên ngoài" để cho phép người dùng truy xuất các thư công khai và được bảo vệ
🛠 Cập nhật
npm install
41 như sau//localhost:4040
7Điều gì đang xảy ra trong thành phần
npm install
42?Bạn thêm phương thức
43 thực hiện yêu cầu API công khainpm install
Bạn thêm phương thức
44 thực hiện yêu cầu API an toàn như saunpm install
[a] Nhận mã thông báo truy cập từ Auth0 bằng phương pháp
45, phương pháp này nhận Vue của bạn. js một mã thông báo truy cập mới mà không yêu cầu người dùng đăng nhập lạinpm install
[b] Chuyển mã thông báo truy cập đó dưới dạng thông tin xác thực người mang trong tiêu đề ủy quyền của yêu cầu
Bạn sử dụng thuộc tính
46 để cập nhật giao diện người dùng bất cứ khi nào bất kỳ lệnh gọi API nào được mô tả hoàn tất thành côngnpm install
Yêu cầu đăng nhập trước đó của bạn không bao gồm thông số đối tượng. Do đó, Auth0 SPA SDK không có mã thông báo truy cập được lưu trữ trong bộ nhớ
Bạn không nên lưu trữ mã thông báo trongnpm install
47. Tại sao?Lưu trữ mã thông báo trong bộ nhớ cục bộ của trình duyệt mang lại sự bền bỉ trong các lần làm mới trang và tab trình duyệt, tuy nhiên, nếu kẻ tấn công có thể chạy JavaScript trong Ứng dụng một trang [SPA] bằng cách sử dụng tấn công tập lệnh chéo trang [XSS], thì chúng có thể truy xuất mã thông báo được lưu trữ trong bộ nhớ cục bộ.
Lỗ hổng dẫn đến một cuộc tấn công XSS thành công có thể nằm trong mã nguồn SPA hoặc trong bất kỳ mã JavaScript của bên thứ ba nào có trong SPA, chẳng hạn như Bootstrap, jQuery hoặc Google Analytics
🛠 Đăng xuất và đăng nhập lại để nhận mã thông báo truy cập mới từ Auth0 bao gồm thông tin đối tượng
🛠 Truy cập
npm install
48 và nhấp vào bất kỳ nút nào trên trang API bên ngoài để kiểm tra phản hồiNhận tin nhắn công khai
//localhost:4040
8Nhận tin nhắn được bảo vệ
//localhost:4040
9Phần kết luận
Bạn đã triển khai xác thực người dùng trong Vue. js để xác định người dùng của bạn, nhận thông tin hồ sơ người dùng và kiểm soát nội dung mà người dùng của bạn có thể truy cập bằng cách bảo vệ các tuyến đường và tài nguyên API
Hướng dẫn này đề cập đến trường hợp sử dụng xác thực phổ biến nhất cho Vue. ứng dụng js. đăng nhập và đăng xuất đơn giản. Tuy nhiên, Auth0 là một nền tảng có thể mở rộng và linh hoạt có thể giúp bạn đạt được nhiều hơn nữa. Nếu bạn có trường hợp sử dụng phức tạp hơn, hãy xem Kịch bản kiến trúc Auth0 để tìm hiểu thêm về các kịch bản kiến trúc điển hình mà chúng tôi đã xác định khi làm việc với khách hàng về triển khai Auth0
Trong hướng dẫn tiếp theo, chúng tôi sẽ đề cập đến các mẫu và công cụ xác thực nâng cao, chẳng hạn như sử dụng cửa sổ bật lên thay vì chuyển hướng để đăng nhập người dùng, thêm quyền vào mã thông báo ID, sử dụng siêu dữ liệu để nâng cao hồ sơ người dùng, v.v.
Hãy cho tôi biết trong phần bình luận bên dưới suy nghĩ của bạn về hướng dẫn này. Cảm ơn bạn đã đọc, và hãy theo dõi, xin vui lòng