vue-keycloak 插件技术文档

vue-keycloak 插件技术文档

vue-keycloak-js A Keycloak plugin for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-keycloak-js

本文档旨在详细指导您如何安装、配置以及使用 vue-keycloak-js，该插件是为 Vue.js 应用程序集成 Keycloak 认证所设计的。

安装指南

使用 npm 安装

通过 npm 管理工具，执行以下命令来添加此插件到您的项目：

npm install @dsb-norge/vue-keycloak-js --save

使用 Yarn 安装

若您偏好 Yarn，可以使用下面的命令：

yarn add @dsb-norge/vue-keycloak-js

项目使用说明

针对 Vue 2 的集成

在 Vue 2 环境下，您需要在应用启动时安装此插件，并可选择性地传入配置选项：

import Vue from 'vue';
import VueKeyCloak from '@dsb-norge/vue-keycloak-js';

Vue.use(VueKeyCloak, [/* 可选的配置对象 */]);

针对 Vue 3 的集成

对于 Vue 3，您应当在创建应用实例时集成该插件：

import { createApp } from 'vue';
import VueKeyCloak from '@dsb-norge/vue-keycloak-js';

const app = createApp(App);
app.use(VueKeyCloak, [/* 可选的配置对象 */]);
app.mount('#app');

如果您希望在 Vue 3 组件中直接访问 $keycloak 实例，还需要进行类型声明扩展：

import VueKeyCloak from '@dsb-norge/vue-keycloak-js';
import { VueKeycloakInstance } from "@dsb-norge/vue-keycloak-js/dist/types";

// ...插件安装代码之后

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $keycloak: VueKeycloakInstance;
  }
}

项目API使用文档

一旦 $keycloak 被安装并准备就绪，您将能够访问一系列方法和属性，例如：

• 认证状态：$keycloak.authenticated 检查是否已认证。
• 登录和注销：$keycloak.login() 和 $keycloak.logout() 分别用于登录和注销用户。
• 令牌操作：访问如 $keycloak.idToken, $keycloak.accessToken 来处理认证信息。
• 其他功能：如 $keycloak.loadUserProfile() 用来获取用户详情。

这些属性和方法使您可以灵活地管理认证过程中的各种需求。

项目配置选项

您可以通过向 Vue.use(VueKeyCloak, options) 传递一个配置对象来自定义行为：

• config: 定义Keycloak的初始化参数，可以是一个指向配置信息的URL字符串，或是直接包含配置的对象。
• init: 控制Keycloak初始化的行为，常用设置 onLoad: 'login-required' 自动尝试登录。
• 回调函数如 onReady, onInitError 允许您在特定事件发生时执行操作，比如在认证成功后初始化应用程序或处理错误情况。

示例配置

Vue.use(VueKeyCloak, {
  config: { // 假设这是直接配置而不是GET请求的结果
    realm: 'MyRealm',
    url: 'http://localhost:8080/auth',
    clientId: 'my-app'
  },
  init: { onLoad: 'login-required' },
  onReady: (keycloak) => {
    console.log('Keycloak 初始化完成:', keycloak);
  },
});

遵循以上步骤和说明，您应能顺利集成 vue-keycloak-js 到您的Vue项目中，实现安全的用户认证与授权管理。

vue-keycloak-js A Keycloak plugin for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-keycloak-js