如何使用OKTA將身份驗證添加到VUE應用

>該教程通過Okta的OpenID Connect（OIDC）API確保了vue.js應用程序，包括通過後端REST API進行的CRUD操作。 我們將與vue-cli，vue-router和okta vue sdk一起使用vue.js，以及node.js，express，okta jwt verifier，semelizize，semelize and eciLogie and backend。

密鑰功能：

>使用Okta的OIDC API的安全身份驗證。
• vue.js項目腳手架與vue-cli的PWA模板。
用於身份驗證流量管理和路線保護的Okta Vue SDK
• BAIDEND REST API服務器（節點，express，續集）用於CRUD操作。
> 基於身份驗證狀態的動態導航。
對身份驗證和CRUD功能的綜合測試。
關於vue.js：
• ：

> vue.js是一個用戶友好且功能強大的JavaScript框架，非常適合構建高性能Web應用程序。

>本教程將創建一個前端水療中心（主頁，登錄/註銷，帖子管理器）和後端REST API服務器（Express，SeceLize，EmeciLogue）。 Okta的OIDC通過Okta Vue SDK處理身份驗證。該服務器使用基於JWT的身份驗證，由Okta的JWT Verifier中間件驗證。 裸露的端點（

，，

，

，GET /posts）都需要一個有效的訪問令牌。 GET /posts/:id> POST /posts設置您的vue.js應用：PUT /posts/:id> DELETE /posts/:id>使用

>腳手架項目：

>這將創建一個PWA，其功能諸如Hot Reloading和單元測試之類的功能。在

>。

上訪問它 vue-cli

安裝引導程序：

npm install -g vue-cli
vue init pwa my-vue-app
cd ./my-vue-app
npm install
npm run dev

http://localhost:8080>用bootstrap-vue增強UI：

修改包括bootstrap-vue及其CSS。

OKTA身份驗證集成：

npm i --save bootstrap-vue bootstrap

./src/main.js在您的Okta開發人員帳戶中創建一個OIDC應用程序。

安裝Okta Vue SDK：

> >使用OKTA的

插件配置路由器（

），用Okta域和客戶端ID代替佔位符。 實施
1. 用於路線保護。
2. npm i --save @okta/okta-vue
>自定義應用程序佈局：
3. ./src/router/index.js> Auth>修改authRedirectGuard使用
>使用用戶的身份驗證狀態動態顯示“登錄”或“註銷”。 使用Okta Vue SDK提供的

>對象實現登錄和註銷方法。

創建後端REST API服務器：

>

1. >安裝依賴項：npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios
2. 創建./src/server.js。 此文件設置Express，續集（使用SQLite為簡單起見），用於REST端點生成的結語以及用於身份驗證的Okta JWT驗證器中間件。
>

>完成帖子管理器組件：

> 用於集中式API相互作用的

創建./src/api.js。此助手處理將訪問令牌添加到API請求中。 然後，完成使用./src/components/PostsManager.vue助手函數實施CRUD操作的api

>

測試應用程序：

運行服務器（node ./src/server）和前端（npm run dev）。測試身份驗證和CRUD功能。

更多資源：

• > vue.js
[Okta開發人員博客]（原始博客文章URL-如果有的話，請替換為實際URL）
• >
• > github存儲庫

>（FAQS部分被刪除，因為它是教程中已經涵蓋的信息的重複。

以上是如何使用OKTA將身份驗證添加到VUE應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！