前端接入keycloak的几种方式

方式一：keycloak-js

这种方式就像使用QQ登录一样，登录会跳转到 keycloak 给的登录界面。

安装：

npm i keycloak-js

使用：

import Keycloak from 'keycloak-js'

const keycloak: any = Keycloak({
  url: 'https://xxx.com/', // 远程地址
  realm: 'xxx',
  clientId: 'xxx'
})
keycloak.init({onLoad: 'login-required'}).then((auth: boolean) => {
  if (!auth) {
    window.location.reload();
  } else {
    new Vue({
      el: '#app',
      render: h => h(App, { props: { keycloak } })
    })
  }
})

详细请查看：https://www.keycloak.org/securing-apps/vue

退出登录：

keycloak.logout()

更多方法可以打印 console.log(keycloak) 查看

方式二：vue-keycloak-js

这个是针对 vue 项目封装的 keycloak-js。

安装地址：https://www.npmjs.com/package/@dsb-norge/vue-keycloak-js

安装：

npm i @dsb-norge/vue-keycloak-js 

使用：

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

Vue.use(VueKeycloakJs, {
  init: {
    onLoad: 'login-required'
  },
  config: {
    url: 'https://xxx.com/',
    realm: 'xxx',
    clientId: 'xxx'
  },
  onReady: (keycloak) => {
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app")

    // 获取用户的信息
    // keycloak.loadUserProfile().success((data) => {
    //   console.log(data)
    // })
  }
})

详细请查看：https://blog.csdn.net/weixin_44326389/article/details/121770219

方式三：RESTful API

这种试可以使用自定义的登录界面。

axios.post(`/keycloak/realms/xxx/protocol/openid-connect/token`, {
  client_id: 'xxx',
  username: 'xxx',
  password: 'xxx',
  grant_type: 'password',
}).then(res => {
  console.log(res) // 会返回包含 access_token 的信息，access_token 可在线解析成明文数据：https://jwt.io/
})

或者使用 jwt-decode 进行 access_token解析。

接口代理：

server: {
  proxy: {
    '/keycloak/': {
      target: 'https://xxx.com/',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/keycloak/, ''),
    }
  }
},

其他接口请求需要加 token 验证（keycloak 使用的是 JWT）：

axios({
  url: '/keycloak/user/list',
  headers: {
    'Authorization': `Bearer ${access_token}`
  }
}).then(res => {
  console.log(res)
})

最新内容请看原文链接：https://fenxianglu.cn/article/493