@dsb-norge/vue-keycloak-js

vue- keycloak 插件

导言

此插件使用 Keycloak JS 的官方适配器 https://github.com/keycloak/keycloak/tree/main/js/libs/keycloak-js. 中国植物物种信息数据库

请阅读文件: https://www.keycloak.org/seuring-apps/javascript-adapter (中文(简体) )

Keycloak JS Doc摘录:

默认情况下, 您需要调用登录函数 。 然而,有两种备选办法可供选择 适配器自动认证。 可以将登录要求或检查结果传递到init函数. 如果用户登录到Keycloak, 或显示登录页, 需要登录才能认证客户端 . 如果用户已经登录, 如果用户没有登录在浏览器中, 检查- so 只会认证客户端 将重定向到应用程序,并保持不作认证.

使Load上需要的登录设置能够登录并传递到init方法:

keycloak.init({ onLoad: 'login-required' })

安装

使用 npm 安装

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

使用纱线安装

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

使用量

createApp(App).use(VueKeycloak, [options])

告诉 Vue 安装插件, 并选择在 JavaScript 对象中通过附加配置 .

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

createApp(App).use(VueKeycloak)

// You can also pass in options. Check options reference below.
createApp(App).use(VueKeycloak, options)

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

createApp(App).use(VueKeycloak)

// You can also pass in options. Check options reference below.
createApp(App).use(VueKeycloak, options)

// Allow usage of this.$keycloak in components
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
    $keycloak: VueKeycloakInstance
  }
}

获取 keycloak 属性/功能

<script>
import { useKeycloak } from '@dsb-norge/vue-keycloak-js'

export default {
  setup() {
    const keycloak = useKeycloak()

    // Use the properties/functions

    return {
      keycloak
    }
  }
}
</script>

<template>
  <p>{{ keycloak.authenticated }}</p>
</template>

或与编译时间合成糖

<script setup>
import { useKeycloak } from '@dsb-norge/vue-keycloak-js'

const keycloak = useKeycloak()

// Use the properties/functions
</script>

<template>
  <p>{{ keycloak.authenticated }}</p>
</template>

插件还添加了一个 $keycloak 属性到全局 Vue 实例. 这笼罩了大多数 keycloak 实例的属性和功能. 其他所有变量和函数均可在 $keycloak.keycloak 属性

<template>
  <p>{{ $keycloak.authenticated }}</p>
</template>

这两个方法的这个对象是 反应 ,并将更新新符号和其他信息 自动.

这些属性/功能暴露在外:

{
  ready: Boolean,              // Flag indicating whether Keycloak has initialised and is ready
  authenticated: Boolean,      // Flag indicating whether the user is authenticated
  userName: String,            // Username from Keycloak. Collected from tokenParsed['preferred_username']
  fullName: String,            // Full name from Keycloak. Collected from tokenParsed['name']
  login: Function,             // [Keycloak] login function
  loginFn: Function,           // Alias for login
  logoutFn: Function,          // Keycloak logout function
  createLoginUrl: Function,    // Keycloak createLoginUrl function
  createLogoutUrl: Function,   // Keycloak createLogoutUrl function
  createRegisterUrl: Function, // Keycloak createRegisterUrl function
  register: Function,          // Keycloak register function
  accountManagement: Function, // Keycloak accountManagement function
  createAccountUrl: Function,  // Keycloak createAccountUrl function
  loadUserProfile: Function,   // Keycloak loadUserProfile function
  subject: String,             // The user id
  idToken: String,             // The base64 encoded ID token.
  idTokenParsed: Object,       // The parsed id token as a JavaScript object.
  realmAccess: Object,         // The realm roles associated with the token.
  resourceAccess: Object,      // The resource roles associated with the token.
  refreshToken: String,        // The base64 encoded refresh token that can be used to retrieve a new token.
  refreshTokenParsed: Object,  // The parsed refresh token as a JavaScript object.
  timeSkew: Number,            // The estimated time difference between the browser time and the Keycloak server in seconds. This value is just an estimation, but is accurate enough when determining if a token is expired or not.
  responseMode: String,        // Response mode passed in init (default value is fragment).
  responseType: String,        // Response type sent to Keycloak with login requests. This is determined based on the flow value used during initialization, but can be overridden by setting this value.
  hasRealmRole: Function,      // Keycloak hasRealmRole function
  hasResourceRole: Function,   // Keycloak hasResourceRole function
  token: String,               // The base64 encoded token that can be sent in the Authorization header in requests to services
  tokenParsed: String          // The parsed token as a JavaScript object
  keycloak: Object             // The original keycloak instance 'as is' from keycloak-js adapter
}

选项

您可以通过一个对象作为插件的选项。 以下密钥是有效的选项 。 说明见下文.

配置

配置对象,或从终点(字符串)返回,或 直接设置(对象),必须与 Keycloak JS 适配器 构造参数 .

见下文说明.

字符串

如果此选项是字符串, 插件会将其作为 URL 处理, 并生成 HTTP 请求 .

如果不存在, 插件将寻找全局变量 window.__BASEURL__ 并准备它 '/config' 和使用情况 这里是一个默认地点,可以提出获取请求.

若无 window.__BASEURL__ 已存在, /config 已使用.

从请求中返回的值被用作Keycloak适配器的构造参数. 因此,它应当是具有有效密钥/值的对象.

参见 Keycloak 的 Javascript 适配器引用

举个例子.

{
  realm: String,
  url: String,
  clientId: String
}

这些值将作为Keycloak官方适配器的构造参数.

对象

如果此选项是对象, 它将作为构造参数传递给 Keycloak 适配器。 。 。 . 在此情况下没有完成 HTTP GET 请求 .

输入

此选项是用于 Keycloak.init 方法.

登录

此选项是用于 Keycloak.logout 方法.

准备

此选项是一个调用功能, 一旦 Keycloak 已关闭并准备就绪, 即执行 。 你当然可以 vue 案件有财产 $keycloak 用于此函数。 可能值见上文.

回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演.

这种回调的一种用法可以是即时处理并挂载Vue应用程序. 那么我们确定凯克洛克 认证和 $keycloak 属性正确完成并用数据水化:

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

createApp(App)
  .use(VueKeyCloak, {
    onReady: (keycloak) => {
      console.log(`I wonder what Keycloak returns: ${keycloak}`)
    }
  })
  .mount('#app')

结合上述情况,你可能会发现截取Axios并按每项请求设置令牌是有用的:

function tokenInterceptor () {
  axios.interceptors.request.use(config => {
    const keycloak = useKeycloak()
    if (keycloak.authenticated) {
      // Note that this is a simple example.
      // you should be careful not to leak tokens to third parties.
      // in this example the token is added to all usage of axios.
      config.headers.Authorization = `Bearer ${keycloak.token}`
    }
    return config
  }, error => {
    return Promise.reject(error)
  })
}

createApp(App)
  .use(VueKeyCloak, {
    onReady: (keycloak) => {
      tokenInterceptor()
    }
  })
  .mount('#app')

错误

此选项是一个调用函数, 如果 Keycloak 初始化失败, 则执行 .

回调函数有一个参数,即Keycloak返回的错误对象. 注意这一点可能未定义 即使发生了错误,因为 Keycloak 也不会在每个错误案件中返回错误对象 .

成功时

此选项是一个调用函数, 如果 Keycloak 初始化成功, 则执行 .

回调函数有一个参数,即 authenticated keycloak 返回的值 init 方法.

自动日志

此选项是一个调用函数, 当用户被登录出时执行( 只有在启用会话状态 iframe 时才能调用, 或者在 Cordova 模式下使用) .

回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演.

重新定义错误

此选项是一个调用函数, 如果尝试刷新令牌时出错, 则执行 .

回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演.

重新获得成功

此选项是一个调用函数, 当符号被刷新时执行 .

回调函数有一个参数,即从 Keycloak 适配器上返回的 keycloak 对象 即兴表演.

实例

为 Keycloak 构造器提供配置对象

createApp(App)
  .use(VueKeyCloak, {
    config: {
      realm: 'MyRealm',
      url: 'https://my.keycloak.server',
      clientId: 'MyClientId'
    }
  })
  .mount('#app')

供应输入选项( 无法监测登录状态)

createApp(App)
  .use(VueKeyCloak, {
    init: {
      onLoad: 'login-required',
      checkLoginIframe: false
    },
  })
  .mount('#app')

供应输入选项(使用) check-sso(中文(简体) )

记住; login-required 是 LOAD 属性的默认值 输入对象。 所以没有经过一个 init 对象作为参数,默认为 { init: 'login-required' }

为避免在装入 vue 应用程序前等待配置端点 :

createApp(App)
  .use(VueKeyCloak, {
    init: {
      onLoad: 'check-sso'
    },
  })
  .mount('#app')

等待 keycloak 适配器准备好后再装入 vue app :

const app = createApp(App)
app.use(VueKeyCloak, {
  init: {
    onLoad: 'check-sso'
  },
  onReady: kc => {
    app.mount('#app')
  }
})

示例应用程序

您可以在 实例 文件夹.

简单“ 在组件中” 秘密显示属性/ 函数 : 简单

用 TypeScript 写的简单示例 : 类型标记

显示如何安全请求的轴截取器示例 : 轴相接器

如何释放

$ git checkout main
$ npm version [major | minor | patch ]
$ git push
$ git push --tags

前往 GitHub 并创建基于最新标签的新版本 . GitHub Actions随后会构建并发布到npmjs.com.

经常问的问题

我们试图回答这里最经常提出的问题.

(原始内容存档于2018-10-03) (中文(简体) ). Localhost!. = 127.0.0.1

请注意, 如果您在自己的机器上运行 keycloak, 则必须与其地址的设置一致 。 从127.0.0.1创建的饼干不会被发送到"本地主机",反之亦然.