接入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
// 需要设置为自己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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/172652.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

UE4基础篇十六:自定义 EQS 生成器

UE4 中的 EQS 带有一组很好的查询项生成器,但在某些情况下,您可能更喜欢根据需要创建生成器。我决定编写自己的生成器,因为我必须编写一个查询来找到查询器周围的最佳位置,但又不能太靠近它。我知道我可以添加一个距离测试来随着距离增加分数,但我什至不想考虑距查询器一定…

成长在于积累——https 认证失败的学习与思考

1. 引言 本周二长城项目在收尾过程中&#xff0c;出现了一个车端无法进行注册的问题&#xff1a;curl提示证书认证失败&#xff08;其实已经能确认问题方向了&#xff0c;运维人员去确认证书问题即可&#xff09;。虽然最终的原因是由于长城运维人员导致的。但是这个过程让我颇…

DeepMind 推出 OPRO 技术,可用于优化 ChatGPT 提示

本心、输入输出、结果 文章目录 DeepMind 推出 OPRO 技术&#xff0c;可用于优化 ChatGPT 提示前言消息摘要OPRO的工作原理DeepMind的研究相关链接花有重开日&#xff0c;人无再少年实践是检验真理的唯一标准 DeepMind 推出 OPRO 技术&#xff0c;可用于优化 ChatGPT 提示 编辑…

NSSCTF web刷题记录6

文章目录 [HZNUCTF 2023 final]eznode[MoeCTF 2021]地狱通讯-改[红明谷CTF 2022] Smarty Calculator方法一 CVE-2021-26120方法二 CVE-2021-29454方法三 写马蚁剑连接 [HZNUCTF 2023 final]eznode 考点&#xff1a;vm2沙箱逃逸、原型链污染 打开题目&#xff0c;提示找找源码 …

【数据结构(四)】栈(1)

文章目录 1. 关于栈的一个实际应用2. 栈的介绍3. 栈的应用场景4. 栈的简单应用4.1. 思路分析4.2. 代码实现 5. 栈的进阶应用(实现综合计算器)5.1. 栈实现一位数计算(中缀表达式)5.1.1. 思路分析5.1.2. 代码实现 5.2. 栈实现多位数计算(中缀表达式)5.2.1. 解决思路5.2.2. 代码实…

私域运营如何提高收益?

一旦建立了私域之后&#xff0c;企业需要不断地进行数据统计与分析&#xff0c;以寻找提高收益的方法。通过收集和分析用户的信息&#xff0c;了解他们的购物行为、心理需求等&#xff0c;从而制定更符合顾客口味的促销计划和产品服务。只有持续对数据进行监控&#xff0c;才能…

Markdown Nice:表格

第二行用来对齐&#xff1a; -表示左对齐 :-:表示居中 -:表示右对齐

安防监控视频云存储平台EasyCVR页面播放卡顿的优化方法

视频监控平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能支持视…

股票池(三)

3-股票池 文章目录 3-股票池一. 查询股票池支持的类型二. 查询目前股票池对应的股票信息三 查询股票池内距离今天类型最少/最多的股票数据四. 查询股票的池统计信息 一. 查询股票池支持的类型 接口描述: 接口地址:/StockApi/stockPool/listPoolType 请求方式&#xff1a;GET…

Jmeter监听器

Jmeter监听器 一、监听器介绍二、监听器的类型三、监听器详解3.1 察看结果树3.2 Summary Report3.3 聚合报告3.4 后端监听器3.5 Aggregate Graph3.6 Comparison Assertion Visualizer&#xff08;比较断言可视化器&#xff09;3.7 JSR223 Listener3.8 Response Time Graph3.9 S…

第三届VECCTF-2023 Web方向部分wp

拳拳组合 题目描述&#xff1a;明喜欢保存密钥在某个文件上。请找到秘钥并读取flag文件。 开题&#xff0c;点不完的。源码提示&#xff1a; <!--据说小明很喜欢10的幂次方--> 扫一下看看&#xff0c;应该是有git泄露。 其它一些路由没什么用 git泄露拿下一堆码 pytho…

API网关那些事【架构新知系列】

目前随着云原生ServiceMesh和微服务架构的不断演进&#xff0c;网关领域新产品不断出现&#xff0c;各种网关使用的技术&#xff0c;功能和应用领域也不断扩展&#xff0c;在各有所长的前提下也有很多功能重合&#xff0c;网上各种技术PR文章&#xff0c;评测资料和网关落地实践…

从零开始的C++(十八)

avl树中insert的模拟实现 avl树特点&#xff1a; 1.是搜索二叉树 2.每个结点的左右子树高度差的绝对值不超过2 inser模拟实现&#xff1a; // 右单旋void RotateR(Node* pParent){Node* parent pParent;Node* pr parent->_pRight;Node* prl pr->_pLeft;//记录父节点…

spring boot项目未将resource目录标志为资源目录导致配置文件无效因而运行报错问题

能编译&#xff0c;但不能运行。感觉配置文件没有生效。 将程序代码发给同事&#xff0c;我自己能跑&#xff0c;他不能跑&#xff0c;提示无法构造redis对象。redis的链接写在配置文件里&#xff0c;其实是可以连接的。然后从GIT库下载代码&#xff0c;也同样不能跑。同事的操…

CV计算机视觉每日开源代码Paper with code速览-2023.11.16

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构】ConvNet vs Transformer, Supervised vs CLIP: Beyond ImageNet Accuracy 论文地址&#xff1a;https://arxiv.org//pdf/23…

VBA技术资料MF85:将工作簿批量另存为PDF文件

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…

基于SSM的社区生鲜商城的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

【探索嵌入式虚拟化技术与应用】— 虚拟化技术深入浅出自学系列

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏:【探索嵌入式虚拟化技术与应用】&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 一、虚拟技术的发展历史 1.1传统技术的局限性&#xff1a; ​编辑 1.2云计算和万物互联技术的发展机遇&#x…

Altium Designer学习笔记6

原理图库的制作&#xff0c;SMA元件的制作&#xff1a; 图形不是很重要&#xff0c;重要的是管脚的功能。 Design Item ID和Designator两个值是要注意的。 进行Place放置&#xff0c;切换到原理图工作区&#xff0c;测试下功能。 AD9851元件库制作&#xff1a; 不需要再新建原…

UE4 基础篇十四:自定义插件

文末有视频地址和git地址 一、概念 虚幻里插件都是用C++写的,C++包括.h文件和.cpp文件,.h头文件通常包含函数类型和函数声明,cpp文件包含这些类型和函数的实现, 你为项目编写的所有代码文件都必须位于模块中,模块就是硬盘里的一个文件夹,包含名为“Build.cs”的C#文件…