Dấu vân tay api php
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 Show
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
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ọ
Tải ứng dụng StarterChú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ữ 0 trên nhánh 1 của nó để bắt đầu
🛠 Sau khi sao chép repo, hãy đặt 0 vào thư mục hiện tại của bạn
🛠 Cài đặt Vue. phụ thuộc dự án js
🛠 Chạy Vue. dự án js
Kết nối Vue. js với Auth0Phầ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 Auth0Nế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
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
🛠 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à 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à Auth0Khi 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
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
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
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. jsTừ 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 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
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ư 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, 0, và tạo một tệp 7 trong thư mục dự án 5🛠 Điền vào 7 như sau 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ị 9 và 0
Bạn sẽ tìm hiểu thêm về các thuộc tính 5 và 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 rỗ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 jsBạ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ý luồng 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 jsBạ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 6🛠 Tạo thư mục 7 trong thư mục 8 0🛠 Tạo tệp 9 trong thư mục 50 1🛠 Điền vào 51 đoạn mã sau xác định Vue. mô-đun plugin js 2🛠 Mở 52 và sử dụng phương pháp 53 để cài đặt plugin 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 54 của bạnThêm xác thực người dùngBạ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 55 trong thư mục 56 4🛠 Dân cư 57 như vậy 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 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 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 70 trong đối tượng cấu hình của 58 6🛠 Tạo tệp 72 trong thư mục 56 7🛠 Điền vào 74 như vậy để xác định thành phần 75 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 76 và 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 78 trong thư mục 56 9Dân cư 60 như vậy 0Khi sử dụng phương pháp 61, Auth0 SPA SDK sẽ xóa phiên ứng dụng và chuyển hướng đến điểm cuối Auth0 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 63 để xác định tham số cho lệnh gọi 62. Quá trình này khá vô hình đối với người dùng. Xem 65 để biết thêm chi tiếtTại đây, bạn chuyển tùy chọn 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 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 68. Đặt 66 thành 00 sẽ làm được điều đó
Tích hợp nút đăng nhập và đăng xuấtHãy bọc 76 và 02 thành một thành phần có tên là 03🛠 Tạo tệp 04 trong thư mục 56 1🛠 Nhập mã sau vào 06 2Có một số lợi thế khi sử dụng trình bao bọc thành phần 03 nàyBạn có thể xây dựng giao diện linh hoạt. 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 76 và 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 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 76 với thành phần 75 trong 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 15Bạn có thể xây dựng giao diện khai báo. Ví dụ: sử dụng 03, bạn có thể thêm chức năng đăng nhập và đăng xuất vào thành phần 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 18 trong thư mục 56 3🛠 Nhập mã sau vào 20 4🛠 Cuối cùng, mở 21 trong thư mục 56 và cập nhật nó như vậy, thêm 23 vào đó 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 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ý Cuộc thí nghiệm. Sử dụng thành phần 75Hoán đổi thành phần 76 với thành phần 75 trong thành phần 28 của thành phần 03 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 75 với 76 để tiếp tục với phần còn lại của hướng dẫn này 2
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 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 33 được hiển thị bởi 54 thông qua thuộc tính toàn cầu 35 để hiển thị thành phần 36 sau khi SDK Auth0 SPA tải xong🛠 Mở 37 và cập nhật nó như sau 8Trong khi SDK đang tải, thành phần 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ùngSau 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 39 được hiển thị bởi 54 thông qua thuộc tính toàn cầu 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 42 trong 43 như sau 9Điều gì đang xảy ra trong thành phần 42?
Thành phần 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 39 là 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, 52. Bạn sẽ học cách làm điều đó trong phần tiếp theoBảo vệ tuyến đườngBạ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 53 trong thư mục 50 0Bạn sẽ sử dụng phương pháp 55 từ mô-đun plugin xác thực ( 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 57 với Vue sau. mẫu bảo vệ điều hướng js 1Mỗi chức năng bảo vệ nhận được ba đối số
🛠 Tiếp theo, bạn sẽ lấy phiên bản từ mô-đun 62 của mình và thiết lập trình theo dõi trên thuộc tính 33 của nó 2Bạn muốn đợi thuộc tính 33 là 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 66 để thực thi trong 67 sau khi tải xong 54 3Trong vòng 66, nếu người dùng được xác thực, bạn gọi 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 71 4Thuộc tính 72 từ đối số đối tượng đại diện cho URL mà người dùng muốn truy cập, 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 74 mà bạn đã sử dụng làm thuộc tính cấu hình cho 75 trong 51 sẽ sử dụng đối tượng 77 đó để chuyển hướng người dùng đến URL đó 5🛠 Cho đến nay, 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 67 của mình như vậy 6Nếu người dùng truy cập tuyến đường và 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 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 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 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 67 trong mô-đun tuyến đường của mình🛠 Mở 85 và cập nhật như vậy 7Bạn sử dụng 67 để bảo vệ hai tuyến đường, 87 và 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 89. Điều này có nghĩa là Vue. js sẽ chạy 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à
Gọi một APIPhầ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ữ 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 8🛠 Sau khi bạn sao chép repo này, hãy đặt thư mục 91 làm thư mục hiện tại của bạn 9🛠 Cài đặt nút. phụ thuộc dự án js
Kết nối API Express với Auth0Tạo cầu nối giao tiếp giữa Express và Auth0Quá 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ị
1
2
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 94 cho Máy chủ API trong thư mục 91 3🛠 Điền vào tệp 96 này như sau 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
Bây giờ, hãy làm theo các bước sau để nhận giá trị Tên miền Auth0
🛠 Với các giá trị cấu hình 94 đã đặt, hãy chạy máy chủ API bằng cách đưa ra lệnh sau 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 0 lưu trữ Vue của bạn. ứng dụng js🛠 Mở file 7 và cập nhật như sau, cung cấp giá trị cho 5 và 6 6Hãy hiểu rõ hơn về những gì thuộc tính 5 và 6 đại diện 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 54Lưu ý cách giá trị của 5 giống với 97 từ 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 24 cho 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 24 cho 54 như trong ví dụ trên, Auth0 sẽ mặc định sử dụng Phạm vi kết nối OpenID. 28
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 24
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. 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 để 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 41 như sau 7Điều gì đang xảy ra trong thành phần 42?
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 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 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 8Nhận tin nhắn được bảo vệ 9Sự kết luậnBạ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ười dùng đăng nhập, thêm quyền vào mã thông báo ID, sử dụng siêu dữ liệu để cải thiện hồ sơ người dùng và hơn thế nữa 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 |