如何使用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中文网其他相关文章！