keycloak Vue集成

首先需要安装keycloak，可以使用docker安装。然后创建realm和client。

然后创建vue3项目
npm init vue@latest。
在项目中安装keycloak.js：
npm install keycloak-js

然后，在main.js中声明keycloak:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import Keycloak from "keycloak-js";

const keycloak = new Keycloak({
    url: "http://localhost:8080",
    realm: "quickstart",
    clientId: "spa",
  });
  window['keycloak'] = keycloak;
await keycloak.init({ onLoad: "login-required" });

const app = createApp(App)

app.use(router)

app.mount('#app')

注意，使用window保存keycloak全局变量，这样在其它页面可以通过这个变量访问keycloak。

比如，访问用户的accesstoken:
keycloak.token
如果解析token:
keycloak.tokenParsed
还可以访问idtoken:
keycloak.idTokenParsed

使用accesstoken可以访问资源服务器。首先安装axios，然后通过axios访问资源：

created: async function () {
    var keycloak = window['keycloak']
   
    this.token = keycloak.tokenParsed
    
     const res = await axios({
      url: "http://localhost:3000/secured",
      method: 'get',
      headers: {
        Authorization: " Bearer " + keycloak.token
      }
    }) 

接下来可以创建资源服务器。