首先需要安装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
}
})
接下来可以创建资源服务器。
