Vue 应用程序中使用 FusionAuth 的 SDK .
目录
概览
此 SDK 提供了与 FusionAuth 集成的有用方法和反应值来帮助自动管理您 Vue app 中的认证状态.
您的用户将被发送到 FusionAuth 的主题主机登录页面和 然后登录。 之后,他们被送回你的Vue申请.
认证成功后, 以下安全, HTTP 唯一的 cookie 将设置 :
访问令牌可以提交API,以授权请求和 刷新符可以用来获取新的访问符.
与这个SDK有两种互动方式:
- 通过托管执行 OAuth 令牌交换并满足 fusionAuth Web SDKs的服务器代码要求。 。 。 .
- 通过使用您 FusionAuth 实例中托管的服务器, 即不写入您的服务器代码 .
如果您正在托管自己的服务器, 请查看 服务器代码要求。 。 。 .
您可以使用此库对抗 FusionAuth 或任何 OIDC 版本 符合要求的身份服务器 .
开始
如果您是新到 Vue 开发, 您可能想要从快速启动指南开始 。 如果您已经熟悉 Vue 开发, 请跳到安装区域 .
快速启动
见 FusionAuth Vue 快速启动 用于使用 FusionAuth 和 Vue 的完整教程.
安装
国家预防机制:
npm install @fusionauth/vue-sdk
亚伦:
yarn add @fusionauth/vue-sdk
使用量
配置 SDK
配置并初始化 FusionAuthVuePlugin 当你创建您的 Vue 应用程序时 :
import { createApp } from 'vue';
import FusionAuthVuePlugin, { type FusionAuthConfig } from '@fusionauth/vue-sdk';
const config: FusionAuthConfig = {
clientId: "", // Your app's FusionAuth client id
serverUrl: "", // The url of the server that performs the token exchange
redirectUri: "", // The URI that the user is directed to after the login/register/logout action
shouldAutoFetchUserInfo: true, // Automatically fetch userInfo when logged in. Defaults to false.
shouldAutoRefresh: true, // Enables automatic token refresh. Defaults to false.
onRedirect: (state?: string) => { }, // Optional callback invoked upon redirect back from login or register.
// useDpop: true, // Opt-in to DPoP mode. See "DPoP Mode" below. Defaults to false.
}
const app = createApp(App);
app.use(FusionAuthVuePlugin, config);
app.mount('#app')
如果您想要使用前置的按钮, 请不要忘记导入 cs 文件 :
import '@fusionauth/vue-sdk/dist/style.css';
配置为 坚果
如果你在Nuxt应用软件中使用SDK,请通过 useCookie 在您的插件定义中可堆入配置对象.
import { useCookie } from "#app";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FusionAuthVuePlugin, {
...config
nuxtUseCookie: useCookie,
});
});
定义您 nuxt 插件的其他方式
使用 createFusionAuth,SDK可以更灵活地配置.
export default defineNuxtPlugin({
setup(nuxtApp) {
const fusionauth = createFusionAuth(config);
nuxtApp.vueApp.use(FusionAuthVuePlugin, { instance: fusionauth })
return {
provide: { fusionauth }
};
},
})
useFusionAuth 可堆叠
您可以使用 SDK 与 SDK 交互 useFusionAuth,该杠杆 Vue 组成 API。 。 。 .
查看 aPI 完整文档
<script setup lang="ts">
import { computed } from 'vue';
import { useFusionAuth } from "@fusionauth/vue-sdk";
const {
isLoggedIn,
userInfo,
isFetchingUserInfo,
login,
register,
logout
} = useFusionAuth();
const welcomeMessage = computed(() => {
const name = userInfo.value?.given_name
return name
? 'Welcome!'
: `Welcome ${userInfo.value.given_name}!`;
});
</script>
<template>
<p>{{ welcomeMessage }}</p>
<div v-if="isLoggedIn">
<p v-if="isFetchingUserInfo">
Loading...
</p>
<button @click="logout()">Logout</button>
</div>
<div v-if="!isLoggedIn">
<button @click="login()">Login</button>
<p>or</p>
<button @click="register()">Register</button>
</div>
</template>
状态参数
这个 login 财务报告和审定财务报表 register 函数接受可选字符串参数: state,将返回到可选 onRedirect 指定您的回调 FusionAuthConfig。虽然您可以传递您想要的状态参数的值,但它通常用于在重新定向到登录或注册之前显示用户在哪个页面,这样用户可以在成功认证后返回该位置.
DPOP 模式
默认情况下,SDK会调用HttpOnly cookie中存储符号的Hosted后端(useDpop: false,默认值). 在DPoP模式下,SDK转而直接调用FusionAuth端点,并绑定到浏览器中生成的私人密钥上. 通过设置启用 useDpop: true 打开 FusionAuthConfig数字 :
const config: FusionAuthConfig = {
clientId: "",
redirectUri: "",
serverUrl: "",
useDpop: true, // Opt-in to DPoP mode.
dpopTokenStorage: 'localStorage', // 'localStorage' (default, persists across reloads) or 'memory'.
}
何时 useDpop: true, (中文(简体) ), useFusionAuth() 额外返回 dpopFetch, (中文(简体) ), generateProof,以及 getAccessToken这些是: undefined 何时 useDpop 实值 false 或未设.
<script setup lang="ts">
import { useFusionAuth } from "@fusionauth/vue-sdk";
const { dpopFetch, generateProof, getAccessToken } = useFusionAuth();
const response = await dpopFetch('https://api.example.com/data', { method: 'GET' });
const accessToken = getAccessToken();
const proof = await generateProof('https://api.example.com/data', 'GET', accessToken);
// axios.get('https://api.example.com/data', {
// headers: { Authorization: `DPoP ${accessToken}`, DPoP: proof }
// });
</script>
在DPoP模式下,登入/注册回转的回回程会同步完成(在应用程序重新装入之前没有Hosted后端设置 cookie). onRedirect 仅在 isLoggedIn 并充分更新了信使,所以它是在后登录导航中勾通的可靠地:
const config: FusionAuthConfig = {
// ...
useDpop: true,
onRedirect: () => router.push('/account'),
}
UI 组件
保护内容
这个 RequireAuth 财务报告和审定财务报表 RequireAnonymous 可用于基于认证和授权限制内容.
<template>
<RequireAuth :with-role="['ADMIN', 'SUPER-ADMIN']">
<!-- only displays for users with specifed role -->
<button>Delete user</button>
</RequireAuth>
</template>
<template>
<RequireAnonymous>
<!-- content for unauthenticated users -->
</RequireAnonymous>
</template>
预建按钮
有三个预设的按钮被配置用于执行 登录/登录/登记。 它们可以放在你的应用程序的任何地方 没错.
<template>
<FusionAuthLoginButton />
<FusionAuthLogoutButton />
<FusionAuthRegisterButton />
</template>
<style>
:root {
--fusionauth-button-background-color: #096324;
--fusionauth-button-text-color: #fff;
}
</style>
使用 CSS 变量,您可以自定义按钮来匹配您的应用程序样式 .
文档
这些文件是用 类型doc 并配置为 类型doc- 插件- 标记下。 。 。 .
在此读取中使用回击代码 。 这个readme包含在FusionAuth网站中,回击者以那里最好的光来显示代码.
已知问题
使用 shouldAutoRefresh 如果插件实例在服务器上被即时显示, Nuxt 可能会导致第一次刷新尝试以 403 失败 。 这可能是因为FusionAuth的授权令牌是httpOnly而未出现在服务器发送的请求中. 随后由 SDK 自动刷新排队的刷新请求应该成功 .
你可能更喜欢引用 initAutoRefresh 从 app:beforeMount 钩子,它只运行客户端.
defineNuxtPlugin({
setup: (nuxtApp) => {
const fusionauth = createFusionAuth({
...config,
shouldAutoRefresh: false, // is false by default
});
nuxtApp.vueApp.use(FusionAuthVuePlugin, { instance: fusionauth })
return {
provide: { fusionauth }
};
},
hooks: {
"app:beforeMount"() {
const { $fusionauth } = useNuxtApp();
$fusionauth.initAutoRefresh();
},
}
})
释放
此软件包通过 GitHub 动作发布 .
升级政策
此库可定期接收带有错误修正、安全补丁、测试、代码样本或文档更改的更新.
这些版本也可能更新依赖性,语言引擎和操作系统,因为我们将遵循图书馆使用的基本技术的贬值和日出政策.
这意味着在依赖性(如语言,框架,或操作系统)被其维护者贬值后,这个库也会被我们贬值,最终可能会被更新以使用更新的版本.