创建一个Vue项目

npm create vite@latest

下载keycloak.js

cnpm i --save @dsb-norge/vue-keycloak-js

创建client

创建登录用户

创建后在此设置密码

在keycloak配置client

网址为本地vue项目地址

在vue中配置main.js

根据自己项目配置内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 需要在mian.js中引入
import keycloak from '@dsb-norge/vue-keycloak-js';   // 第一种方法

createApp(App).use(keycloak , {
    init: {
        //是否定时校验登录状态，如果chrome版本大于86.x，请改为false。否则将导致浏览器重复刷新
        checkLoginIframe: false,
        onLoad: 'login-required'
    },
    config: {
        url: 'http://localhost:8080',
        realm: 'Demo',
        clientId: 'Vue'
    },
    onReady: (keycloak) => {
                    //获取用户的信息
        keycloak.loadUserProfile().success((data) => {
            console.log(data);
        });
    }
});

createApp(App).mount('#app')

用户登录

如果session有缓存，先清除

点击网址登录：Vite + Vue

会跳转至登录页面： Sign in to Demo ，输入注册的账号和密码

进入成功，并且控制台会打印用户信息