前端接入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

vue3

import Keycloak from "keycloak-js";

const keycloak: any = Keycloak({
  url: "https://www.xxx.com/",
  realm: "xxx",
  clientId: "xxx",
});

keycloak.init({ onLoad: "login-required" }).then((auth: boolean) => {
  if (!auth) {
    window.location.reload();
  } else {
    const app = createApp(App);
    app.use(ElementPlus, { locale });
    app.use(createPinia());
    app.use(router);

    app.config.globalProperties.$keycloak = keycloak;

    app.mount("#app");
  }
})

登录主题

登录主题配置介绍：https://www.keycloak.org/docs/latest/server_development/#_themes
主题目录结构附件：mytheme.zip
主题改完后，上传到 /opt/keycloak/themes/ 目录下（视项目结构而定）
github找的主题：https://github.com/Alfresco/alfresco-keycloak-theme/tree/master/theme

freemarker模板引擎

• 中文：http://freemarker.foofun.cn/
• 官方：https://freemarker.apache.org/docs/index.html

退出登录

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、refresh_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)
})

刷新 token（默认：access_token有效期5分钟，refresh_token有效期30分钟）

axios.post(`/keycloak/realms/PVG/protocol/openid-connect/token`, {
  client_id: 'xxx',
  refresh_token: 'xxx',
  grant_type: 'refresh_token',
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

如果需要共享登录，可以使用同一级域名cookie试试，主要是要共享token。