接入keycloak实现单点登录

问题

1.如果跨域在keycloak管理中心Clients-Client details-Settings-Web origins添加浏览器访问地址就行

一、html引入cdn实现

页面引入

<!-- keycloak -->
<script src="https://unpkg.com/keycloak-js@22.0.5/dist/keycloak.js"></script>
<!-- keycloakFunc模块 -->
<script src="./keycloakFunc.js"></script>
<script type="text/javascript">
// 初始化keycloak，如果是vue单页面就在main.js中引入调用该函数
initKeycloak()
// 其他逻辑
</script>

keycloakFunc.js

// 需要设置为自己keycloak配置信息
let initOptions = {
  url: 'http://keycloak-dev',
  realm: 'master',
  clientId: 'vue',
  onLoad: 'login-required',
  enableLogging: true
}
// 登录接口
const loginUrl = 'http://baidu.com:8080'

const keycloak = new Keycloak(initOptions);
let authenticated = false;
// 进入页面调用
function initKeycloak() {
  keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
    if (!auth) {
      window.location.reload();
    } else {
      fetch(loginUrl + '/login', {
        method: 'POST', // 请求方法，可以是 'GET'、'POST'、'PUT' 等
        headers: {
          Authorization: 'Bearer ' + keycloak.token
        },
        // body: JSON.stringify(requestData), // 将请求体数据转换为 JSON 字符串
      })
        .then(response => response.json())
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            authenticated = true;
          } else {
            console.log('登录失败：', res)
          }
        })
        .catch(error => console.error('Error:', error));
    }

    //Token Refresh
    setInterval(() => {
      keycloak.updateToken(70).then((refreshed) => {
        if (refreshed) {
          //更新token
          // setToken(keycloak.token);
          console.log('Token refreshed' + refreshed);
        } else {
          console.log('Token not refreshed, valid for ' + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
        }
      }).catch(() => {
        console.log('Failed to refresh token');
      });
    }, 6000)

  }).catch(() => {
    console.log("Authenticated Failed");
  });
}
// 退出时调用
function keycloakLogout() {
  keycloak.logout("/login");
}

function isAuthenticated() {
  return authenticated;
}

二、vue单页面实现

npm安装

npm i keycloak-js --save 或者 yarn add keycloak-js

main.js

import { initKeycloak } from "./assets/js/keycloakFunc";
initKeycloak();

keycloakFunc.js

import Keycloak from 'keycloak-js';
// 需要设置为自己keycloak配置信息
let initOptions = {
  url: 'http://keycloak-dev',
  realm: 'master',
  clientId: 'vue',
  onLoad: 'login-required',
  enableLogging: true
}
// 登录接口
const loginUrl = 'http://baidu.com:8080'

const keycloak = new Keycloak(initOptions);
let authenticated = false;
// 进入页面调用
export function initKeycloak() {
  keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
    if (!auth) {
      window.location.reload();
    } else {
      fetch(loginUrl + '/login', {
        method: 'POST', // 请求方法，可以是 'GET'、'POST'、'PUT' 等
        headers: {
          Authorization: 'Bearer ' + keycloak.token
        },
        // body: JSON.stringify(requestData), // 将请求体数据转换为 JSON 字符串
      })
        .then(response => response.json())
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            authenticated = true;
          } else {
            console.log('登录失败：', res)
          }
        })
        .catch(error => console.error('Error:', error));
    }

    //Token Refresh
    setInterval(() => {
      keycloak.updateToken(70).then((refreshed) => {
        if (refreshed) {
          //更新token
          // setToken(keycloak.token);
          console.log('Token refreshed' + refreshed);
        } else {
          console.log('Token not refreshed, valid for ' + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
        }
      }).catch(() => {
        console.log('Failed to refresh token');
      });
    }, 6000)

  }).catch(() => {
    console.log("Authenticated Failed");
  });
}
// 退出时调用
export function keycloakLogout() {
  keycloak.logout("/login");
}

export function isAuthenticated() {
  return authenticated;
}

export default keycloak