Nút đăng xuất html css

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

Nút đăng xuất html css

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ữ

http://localhost:4040
0 trên nhánh
http://localhost:4040
1 của nó để bắt đầu

git clone -b starter [email protected]:auth0-blog/auth0-vue-sample.git

🛠 Sau khi sao chép repo, hãy đặt

http://localhost:4040
0 vào thư mục hiện tại của bạn

cd 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à

http://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

http://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

http://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

http://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

http://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ập

Bạ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ư

http://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ối

Cả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,

http://localhost:4040
0, và tạo một tệp
http://localhost:4040
7 trong thư mục dự án

http://localhost:4040
5

🛠 Điền vào

http://localhost:4040
7 như sau

http://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ị

http://localhost:4040
9 và
http://localhost:4040
0

Nút đăng xuất html css

  1. 🛠 Nhấp vào tab "Cài đặt", nếu bạn chưa có

  2. 🛠 Sử dụng giá trị "Miền" từ "Cài đặt" làm giá trị của

    http://localhost:4040
    9 trong
    http://localhost:4040
    7

  3. 🛠 Sử dụng giá trị "ID khách hàng" từ "Cài đặt" làm giá trị của

    http://localhost:4040
    0 trong
    http://localhost:4040
    7

Bạn sẽ tìm hiểu thêm về các thuộc tính

http://localhost:4040
5 và
http://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ống

Cá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 [email protected]:auth0-blog/auth0-vue-sample.git
6

🛠 Tạo thư mục

http://localhost:4040
7 trong thư mục
http://localhost:4040
8

cd auth0-vue-sample
0

🛠 Tạo tệp

http://localhost:4040
9 trong thư mục
http://localhost:4040
50

cd auth0-vue-sample
1

🛠 Điền vào

http://localhost:4040
51 đoạn mã sau xác định Vue. mô-đun plugin js

cd auth0-vue-sample
2

🛠 Mở

http://localhost:4040
52 và sử dụng phương pháp
http://localhost:4040
53 để cài đặt plugin

cd auth0-vue-sample
3

Auth0 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

http://localhost:4040
54 của bạn

Thê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

http://localhost:4040
55 trong thư mục
http://localhost:4040
56

cd auth0-vue-sample
4

🛠 Dân cư

http://localhost:4040
57 như vậy

cd auth0-vue-sample
5

Như đã đề 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

http://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
http://localhost:4040
59 để biết thêm chi tiết về các tùy chọn này

Tạ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

http://localhost:4040
70 trong đối tượng cấu hình của
http://localhost:4040
58

cd auth0-vue-sample
6

🛠 Tạo tệp

http://localhost:4040
72 trong thư mục
http://localhost:4040
56

cd auth0-vue-sample
7

🛠 Điền vào

http://localhost:4040
74 như vậy để xác định thành phần
http://localhost:4040
75

cd auth0-vue-sample
8

Sử 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"

Nút đăng xuất html css

🛠 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

http://localhost:4040
76 và
http://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 theo

Tạo nút đăng xuất

🛠 Tạo tệp

http://localhost:4040
78 trong thư mục
http://localhost:4040
56

cd auth0-vue-sample
9

Dân cư

git clone -b starter [email protected]:auth0-blog/auth0-vue-sample.git
60 như vậy

npm install
0

Khi sử dụng phương pháp

git clone -b starter [email protected]: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 [email protected]: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 [email protected]:auth0-blog/auth0-vue-sample.git
63 để xác định tham số cho lệnh gọi
git clone -b starter [email protected]: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 [email protected]:auth0-blog/auth0-vue-sample.git
65 để biết thêm chi tiết

Tại đây, bạn chuyển tùy chọn

git clone -b starter [email protected]: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 [email protected]:auth0-blog/auth0-vue-sample.git
67

Tuy 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 [email protected]:auth0-blog/auth0-vue-sample.git
68. Đặt
git clone -b starter [email protected]: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

http://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
http://localhost:4040
56

npm install
1

🛠 Nhập mã sau vào

cd auth0-vue-sample
06

npm install
2

Có 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ày

Bạ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
http://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ấy

Bạ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

http://localhost:4040
76 với thành phần
http://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
15

Bạ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
http://localhost:4040
56

npm install
3

🛠 Nhập mã sau vào

cd auth0-vue-sample
20

npm install
4

🛠 Cuối cùng, mở

cd auth0-vue-sample
21 trong thư mục
http://localhost:4040
56 và cập nhật nó như vậy, thêm
cd auth0-vue-sample
23 vào đó

npm install
5

Bằ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ý

Nút đăng xuất html css

Thí nghiệm. Sử dụng thành phần

http://localhost:4040
75

Hoán đổi thành phần

http://localhost:4040
76 với thành phần
http://localhost:4040
75 trong thành phần
cd auth0-vue-sample
28 của thành phần
cd auth0-vue-sample
03

npm install
6

Khi 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

Nút đăng xuất html css

Sau khi bạn hoàn thành thử nghiệm này, hãy hoán đổi

http://localhost:4040
75 với
http://localhost:4040
76 để tiếp tục với phần còn lại của hướng dẫn này

npm install
2

Bạ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

http://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
http://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ư sau

npm install
8

Trong 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 động

Truy 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
http://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ập

Là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ư sau

npm 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

    cd auth0-vue-sample
    45 trong giao diện người dùng.
    cd auth0-vue-sample
    46,
    cd auth0-vue-sample
    47 và
    cd auth0-vue-sample
    48

  • 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ùng

Như 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 theo

Bả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
http://localhost:4040
50

npm run serve
0

Bạn sẽ sử dụng phương pháp

cd auth0-vue-sample
55 từ mô-đun plugin xác thực (
http://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 js

npm run serve
1

Mỗi chức năng bảo vệ nhận được ba đối số

  • cd auth0-vue-sample
    58 là mục tiêu mà người dùng đang điều hướng đến

  • cd auth0-vue-sample
    59 là tuyến đường hiện tại mà người dùng đang điều hướng khỏi

  • cd 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 cho
    cd auth0-vue-sample
    60

🛠 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
2

Bạ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
http://localhost:4040
54

npm run serve
3

Trong 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 đường

Mặ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
71

npm run serve
4

Thuộ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
http://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ậy

npm run serve
6

Nếu người dùng truy cập tuyến đường và

http://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
http://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
http://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ậy

npm run serve
7

Bạ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 js

npm 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ạn

npm 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
http://localhost:4040
1
  • Đặt giá trị Mã định danh của nó
http://localhost:4040
2
  • Để lại thuật toán ký là
    cd auth0-vue-sample
    93 vì đây là tùy chọn tốt nhất từ ​​quan điểm bảo mật

Nút đăng xuất html css

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

http://localhost:4040
3

🛠 Điền vào tệp

cd auth0-vue-sample
96 này như sau

http://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

Nút đăng xuất html css

  1. 🛠 Nhấp vào tab "Cài đặt"

  2. 🛠 Xác định vị trí trường "Số nhận dạng" và sao chép giá trị của nó

  3. 🛠 Dán giá trị "Mã định danh" làm giá trị của

    cd auth0-vue-sample
    97 trong
    cd auth0-vue-sample
    94

Bây giờ, hãy làm theo các bước sau để nhận giá trị Tên miền Auth0

Nút đăng xuất html css

  1. 🛠 Nhấp vào tab "Kiểm tra"
  2. 🛠 Tìm phần có tên " Hỏi Auth0 về mã thông báo từ ứng dụng của tôi"
  3. 🛠 Nhấp vào tab cURL để hiển thị yêu cầu
    cd auth0-vue-sample
    99 giả
  4. 🛠 Sao chép miền Auth0 của bạn, đây là một phần của giá trị tham số
    npm install
    00.
    npm install
    01
  5. 🛠 Dán giá trị miền Auth0 làm giá trị của
    npm install
    02 trong
    cd auth0-vue-sample
    94
Mẹo lấy tên miền Auth0
  • Tên miền Auth0 là chuỗi con giữa giao thức,

    npm install
    04 và đường dẫn
    npm install
    05

  • Tên miền Auth0 tuân theo mẫu này.

    npm install
    01

  • Tên miền phụ

    npm install
    07 (
    npm install
    08,
    npm install
    09 hoặc
    npm install
    10) là tùy chọn. Một số tên miền Auth0 không có nó

  • 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

http://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

http://localhost:4040
0 lưu trữ Vue của bạn. ứng dụng js

🛠 Mở file

http://localhost:4040
7 và cập nhật như sau, cung cấp giá trị cho
http://localhost:4040
5 và
http://localhost:4040
6

http://localhost:4040
6

Hãy hiểu rõ hơn về những gì thuộc tính

http://localhost:4040
5 và
http://localhost:4040
6 đại diện

http://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ình

Vue 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

http://localhost:4040
54

Lưu ý cách giá trị của

http://localhost:4040
5 giống với
cd auth0-vue-sample
97 từ
cd auth0-vue-sample
96

Tạ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
http://localhost:4040
54

Hã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
http://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

  • npm install
    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ực

  • npm 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ư
    cd auth0-vue-sample
    46,
    npm install
    32 và
    cd auth0-vue-sample
    47

  • cd auth0-vue-sample
    48. Giá trị phạm vi này yêu cầu quyền truy cập vào thông tin
    cd auth0-vue-sample
    48 và
    npm install
    36

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
24

Cá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ò"

http://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

http://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

    npm install
    43 thực hiện yêu cầu API công khai

  • Bạn thêm phương thức

    npm install
    44 thực hiện yêu cầu API an toàn như sau

    • (a) Nhận mã thông báo truy cập từ Auth0 bằng phương pháp

      npm install
      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ại

    • (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

    npm install
    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ông

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 trong
npm 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ồi

Nhận tin nhắn công khai

http://localhost:4040
8

Nhận tin nhắn được bảo vệ

http://localhost:4040
9

Phầ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