%20(2).svg)
项目简介
本项目基于Vue框架开发，集成了Authok SDK，采用Authorization Code Grant Flow with PKCE进行身份验证。适用于Vue 3应用，借助Authok实现多种身份验证方式，可与多种社交或企业身份提供商集成，支持用户注册、登录、登出等操作，为应用提供安全可靠的身份验证服务。
项目的主要特性和功能
- 多身份提供商集成：可与Google、Facebook、Microsoft等社交平台，以及Windows Azure AD、Google Apps等企业身份系统集成。
- 全面的用户操作：提供用户登录、显示用户信息、登出功能，支持调用API并进行访问控制。
- ID Token声明访问：方便获取用户的ID Token声明信息。
- 错误处理机制：通过SDK的响应式
error属性处理认证错误。 - 路由保护：结合Vue - Router，保护应用路由，确保仅认证用户可访问特定路由。
安装使用步骤
安装依赖
使用npm安装：
sh
npm install @authok/authok-vue
使用yarn安装：
sh
yarn add @authok/authok-vue
配置Authok
在Authok管理后台创建一个单页面应用(SPA)，并配置相关URL：
- Allowed Callback URLs：http://localhost:3000
- Allowed Logout URLs：http://localhost:3000
- Allowed Web Origins：http://localhost:3000
记录下“Basic Information”部分的Client ID和Domain值。
配置插件
在代码中创建AuthOKPlugin实例并传递给Vue的app.use()：
js
import { createAuthOK } from '@authok/authok-vue';
const app = createApp(App);
app.use(
createAuthOK({
domain: '<AUTHOK_DOMAIN>',
client_id: '<AUTHOK_CLIENT_ID>',
redirect_uri: '<MY_CALLBACK_URL>'
})
);
app.mount('#app');
添加登录功能
在组件的setup函数中使用useAuthok的loginWithRedirect函数：
```html
```
显示用户信息
在组件的setup函数中使用useAuthok的user属性：
```html
User Profile
{{ user }}
```
添加退登功能
在组件的setup函数中使用useAuthok的logout函数：
```html
```
调用API
配置插件时设置audience，并在组件中使用useAuthok的getAccessTokenSilently函数获取访问令牌：
js
import { createAuthOK } from '@authok/authok-vue';
const app = createApp(App);
app.use(
createAuthOK({
domain: '<AUTHOK_DOMAIN>',
client_id: '<AUTHOK_CLIENT_ID>',
redirect_uri: '<MY_CALLBACK_URL>',
audience: '<AUTHOK_AUDIENCE>'
})
);
app.mount('#app');
```html
```
保护路由
结合Vue - Router，使用SDK提供的导航守卫保护路由：
ts
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import { createAuthOK, authGuard } from '@authok/authok-vue';
const app = createApp(App);
app.use(createRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/profile',
name: 'profile',
component: Profile,
beforeEnter: authGuard
}
],
history: createWebHashHistory()
}));
app.use(createAuthOK({ ... }));
app.mount('#app');
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】