Keycloak - docker 运行 前端集成

Keycloak - docker 运行 & 前端集成

这里的记录主要是跟我们的项目相关的一些本地运行/测试，云端用的 keycloak 版本不一样，不过本地我能找到的最简单的配置是这样的

docker 配置 & 运行 keycloak

keycloak 有官方(Red Hat Inc.)的镜像，官方文档里也提供了一些配置好的 Dockerfile，具体可以参考 https://www.keycloak.org/server/containers，最新的版本已经支持到了 v23。不过我这里用的是 JBoss 提供的镜像，上一次更新是两年前的事情，目前的版本是 v16.1.0，稍微有一点旧，优点在于不需要额外的配置和修改，只针对前端部分的测试会方便一些。

docker-compose.yaml 文件如下：

version: '3.8'
services:keycloak:container_name: keycloakimage: jboss/keycloak:16.1.0volumes:- ./realm-config:/opt/jboss/keycloak/realm-config- ./keycloak-db:/opt/jboss/keycloak/standalone/dataenvironment:- KEYCLOAK_USER=admin- KEYCLOAK_PASSWORD=pass- DB_VENDOR=h2ports:- 9090:8080

运行指令为 docker compose up，如下：

在这里插入图片描述

在这里插入图片描述

这个时候一个名为 keycloak 的 container 就启动了，这个时候访问 http://localhost:9090/auth/ 会看到以下界面：

在这里插入图片描述

admin 的用户名和密码可以直接在 docker 的环境配置里查看：

在这里插入图片描述

这里的配置是跟着 compose 文件来的，用户名是 admin，密码就是 pass

docker 文件简单解析

JBoss 已经接手了不少配置，所以 docker compose 文件比较简单，这里简单过一遍，不感兴趣的可以跳过到下一个 section，直接到前端集成部分。

  • version

    docker compose 文件的版本，目前标准配置要么是 3 要么是 3.8

  • services

    docker 要启动的 services/containers，这里只有一个 keycloak

    • keycloak

      这里启动的服务

      • container_name

        容器的名称

      • image

        这里的镜像名称是 JBoss 提供的 keycloak，在 docker 的镜像官网能找到，我这里顺带 tag 了一下版本

      • tag

        上面指定了版本，所以这个可以忽略

        如果 images 里面没有指定版本，tags 也不存在，那么就会自动拉 latest 版本

      • volumes

        这里相当于做一个数据的持久化，这样只要保存了对应的文件/文件夹，别的项目直接拉取，开启 docker 同样能够获取对应的 realms 和 client 信息，运行 docker compose up 后会自动创建对应的文件夹

        运行指令前，只有一个 compose 文件：

        在这里插入图片描述

        运行后自动生成对应的 realms 和 db：

        在这里插入图片描述

      • environment

        docker 的一些环境变量，上文提到了，用户名密码就是在这里设置的

      • ports

        这里是 docker 的 port mapping。默认 containers 的端口都是在 8080 上运行的，不过外部访问需要用其他的端口，可以理解成 <out_port>:<container_port>

        这也是为什么通过 http://localhost:9090/ 可以访问 keycloak

keycloak 极简配置

这里会生成一个 minimal 配置，大体就是需要创建 realm 和对应的 client，刚开始新登录的 realm 是空白的，只会有一个 master：

在这里插入图片描述

创建完的配置如下：

在这里插入图片描述

这里需要特别注意两个点：

  • web-origin，这个是 CORS 的设置，只有这个设置为 * 才能从其他的端口定向到 keycloak 所在的 port

  • valid redirect uri，这个需要设置前端部分的 port，如果没有设置的话会在登录页面抛出 invalid redirect uri

server 的信息，即 installation 如下：

{"realm": "OIDC-client","auth-server-url": "http://localhost:9090/auth/","ssl-required": "external","resource": "vanilla","public-client": true,"confidential-port": 0
}

前端集成

整个 OIDC client 的集成是一个很大的部分，我们也是在已经实现的 package 上新建了一个 wrapper，底层的实现使用的是 oidc-client-ts 这个 package，具体查看地址在 https://authts.github.io/oidc-client-ts/

keycloak 本身支持 Oauth 2.0， OpenID Connect(OIDC)和 SAML，所以这里 keycloak 和oidc-client-ts 的集成，一旦看懂这个 package 的代码，实现起来还是比较方便的。

这里依旧用 React 的代码实现，不过版本是 v17。React v18 会更新状态两次，从而导致 token 获取不一致无法顺利实现功能。

配置

配置这方面还是需要参考 Interface UserManagerSettings，网址：https://authts.github.io/oidc-client-ts/interfaces/UserManagerSettings.html

这里同样实现最低可需要的部分：

const config = {authority: 'http://localhost:9090/auth/realms/OIDC-client/',client_id: 'vanilla',redirect_uri: 'http://localhost:4200',silent_redirect_uri: 'http://localhost:4200',post_logout_redirect_uri: 'http://localhost:4200',
};
  • authority 是写死的值，这是 OIDC 接收的验证网址，即需要实现重定向的网址
  • client_id 就是 client

这部分参考 installation 即可

初始化

也就是实例化一个 UserManager:

// 建议写在配置文件里
const config = {authority: 'http://localhost:9090/auth/realms/OIDC-client/',client_id: 'vanilla',redirect_uri: 'http://localhost:4200',silent_redirect_uri: 'http://localhost:4200',post_logout_redirect_uri: 'http://localhost:4200',
};const userManager = new UserManager(config);

登陆

功能如下：

const login = async () => {await userManager.signinRedirect();
};

userManager 会根据配置的信息进行重定向，如：

在这里插入图片描述

query param 会携带所有必需的信息，同样，对应的登录信息也会在返回的时候加到 query param 里：

在这里插入图片描述

更新

const refreshToken = async () => {await userManager.signinSilent();
};

这时候 userManager 就会背地调用对应的 token API，进行用户信息的更新，包括 access token，session time 之类的，这个在下面一个 section 会重新提到

这些根据对应的 idle 配置可以实现自动登出的功能

获取用户信息

这个部分相当于是最麻烦的，我写了一个 auth 函数去实现，如果没有用户信息的话就重定向到登录页面去：

const auth = async () => {const urlData = urlparse(window.location.href, true);if (urlData?.query?.state) {const storedState = await userManager.settings.stateStore?.get(urlData.query.state);if (storedState) {try {await userManager.signinRedirectCallback();logUser();} catch (e) {console.log(e);}} else {await login();}}
};

之前提到过了，在登录完成后 URL 会包含一些对应的 query param，如下：http://localhost:4200/?state=994a9e5d79f843ad822740007389b392&session_state=6dc0fd00-3229-49c3-b500-2f839f16538b&code=2acd9512-e8b1-4e8d-9e2b-362fc39912f5.6dc0fd00-3229-49c3-b500-2f839f16538b.541c1dbc-f6ab-4838-b9c1-7be9f09f5f50

这里主要需要的是 code，需要用这个值去调用 keycloak 的 token API 去获取对应的 token 信息，这也就是 userManager.signinRedirectCallback() 的用处，调用如下：

在这里插入图片描述

获取用户信息

当 token 正确获取之后，就可以通过调用 userManager 封装好的功能去获取用户信息了，如下：

const logUser = async () => {const user = await userManager.getUser();console.log(user);
};

在这里插入图片描述

其他

这里还是简化了很多的实现，UserManager 还是建议写成一个 singleton，这样可以在任意地方获取同一个 UserManager 的实例对象

这里是直接在 App.js 里面实现的功能，但是可以将实例化的 singleton 抽出来放到 Context 里面去，同样的 singleton 也可以在 axios instance 里面调用，实现自动注入 bearer token 到 header 里、自动更新 session 或是在 session 过期时自动登出等功能

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于固件库的RT-THREAD移植

基于固件库的RT-THREAD移植

为什么要使用操作系统 当我们进入嵌入式这个领域的时候&#xff0c; 往往首先接触的都是单片机编程&#xff0c; 单片机编程又首选 51 单片机来入门。 这里面说的单片机编程通常都是指裸机编程&#xff0c;即不加入任何 RTOS&#xff08;Real Time Operation System 实时操作系…
阅读更多...
药物使用不当可能会导致耳聋，尤其是这6类，需警惕

药物使用不当可能会导致耳聋，尤其是这6类，需警惕

耳聋的原因有很多&#xff0c;其中之一就是药物使用不当。有些药物具有耳毒性&#xff0c;也就是说&#xff0c;它们会损害内耳的结构和功能&#xff0c;导致听力下降或丧失。这种药物性耳聋有时是可逆的&#xff0c;有时则是永久的。那么&#xff0c;到底哪些药物会导致耳聋和…
阅读更多...
ctf-idea调试jar包

ctf-idea调试jar包

0.拿到jar包并解压 进入解压出来的目录,然后以该目录打开项目 1.设置maven 设不设置都行 2.添加依赖 添加两个依赖, boot-inf下的 classes和lib 3.配置调试器 添加 remote jvm debug 1.根据jdk版本选择调试参数 2.选择module classpath为解压后的文件夹名 如图,运行jar包的…
阅读更多...
CDR绘图软件｜安装教程来了（小白福利：有红包封面领取哦！）

CDR绘图软件｜安装教程来了（小白福利：有红包封面领取哦！）

前言 今天给小伙伴们讲讲&#xff1a;如何安装CDR软件。 如果未来的你想从事平面设计/广告行业&#xff0c;那应该就会接触到CDR这款软件。 CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件&#xff1b;该软件是Corel公司出品的矢量图形制作工具软件&#xff0c;这…
阅读更多...
Confluence 的文章导入到 YouTrack KB 中

Confluence 的文章导入到 YouTrack KB 中

YouTrack 是有一个 KB 的&#xff0c;我们可以吧 Confluence 的文章全部导入到 YouTrack 的 KB 中。 首先&#xff0c;你需要具有管理员权限&#xff0c;然后选择导入。 然后可以在打开的界面中新增一个导入。 在新增导入中输入 Confluence 在随后的界面中输入你 Confluence …
阅读更多...
【Hexo博客|Fluid主题】实现链接卡片效果

【Hexo博客|Fluid主题】实现链接卡片效果

文章目录 前言一、CardLink库二、配置步骤1. 添加静态js文件2. 使库文件生效3. 编写启用CardLink4. 查看效果效果与前面一致。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/06e0630f994d4d67a90e18e291c3fdc5.png#pic_center) 总结 前言 今天在阅读Github…
阅读更多...
格子表单GRID-FORM | 嵌套子表单与自定义脚本交互

格子表单GRID-FORM | 嵌套子表单与自定义脚本交互

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互 新版本功能 &#x1f389; 不觉间&#xff0c;GRID-FORM 已经开源一年&#xff08;2023年1月29日首次提交…
阅读更多...
通过FileZilla配置FTP

通过FileZilla配置FTP

FileZilla服务端的安装 在虚拟机里安装FileZilla服务器 FileZilla的官网 下载一个客户端和一个服务端的FileZilla 如果已经有了一个客户端&#xff0c;可以不下用载。 FileZilla的配置 说明一下&#xff1a;通过FileZilla配置FTP有两种模式&#xff0c;我们先用被动模式 下载…
阅读更多...
GoZero微服务个人探究之路（九）api文件编写总结

GoZero微服务个人探究之路（九）api文件编写总结

参考来源go-zero官方文档https://go-zero.dev/docs/tutorials 前言 go-zero是目前star最多的go语言微服务框架&#xff0c;api 是 go-zero特殊的语言&#xff0c;类型文件&#xff0c;go-zero自带的goctl可以通过.api文件生成http服务代码 api文件内容编写 不可使用关键字 …
阅读更多...
Datawhale 组队学习之大模型理论基础 Task7 分布式训练

Datawhale 组队学习之大模型理论基础 Task7 分布式训练

第8章 分布式训练 8.1 为什么分布式训练越来越流行 近年来&#xff0c;模型规模越来越大&#xff0c;对硬件&#xff08;算力、内存&#xff09;的发展提出要求。因为内存墙的存在&#xff0c;单一设持续提高芯片的集成越来越困难&#xff0c;难以跟上模型扩大的需求。 为了…
阅读更多...
MATLAB|融合需求侧虚拟储能系统的楼宇微网优化调度¥29

MATLAB|融合需求侧虚拟储能系统的楼宇微网优化调度¥29

目录 主要内容 模型研究 一、虚拟储能特征 二、楼宇微网虚拟储能 结果一览 下载链接 主要内容 该模型以楼宇为研究对象&#xff0c;围绕夏季制冷负荷&#xff0c;利用楼宇的蓄热特性&#xff0c;实现融合需求侧虚拟储能系统的楼宇微网优化调度模型&#xff0c;…
阅读更多...
带【科技感】的Echarts 图表

带【科技感】的Echarts 图表

Echarts脚本在线地址 https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 引入Echarts 脚本后粘贴代码 vue2 代码&#xff1a; <template><div><div ref"col-2-row-2" class"col-2-row-2"></div></div> <…
阅读更多...
力扣题目训练（1）

力扣题目训练（1）

2024年1月25日力扣题目训练 2024年1月25日力扣题目训练225. 用队列实现栈257. 二叉树的所有路径258. 各位相加81. 搜索旋转排序数组 II82. 删除排序链表中的重复元素 II30. 串联所有单词的子串 2024年1月25日力扣题目训练 2024年1月25日开始进行编程训练&#xff0c;今天主要是…
阅读更多...
网安渗透攻击作业（1）

网安渗透攻击作业（1）

实现负载均衡 第一步&#xff1a;安装依赖 sudo apt insta11 libgd-dev 第二步&#xff1a;下载nginx wget http://nginx.org/download/nginx-1.22.1.tar.gz 第三步&#xff1a;对nginx进行解压 tar -zvxf nginx-1.22.1.tar.g2 第四步&#xff1a;编译安装nginx cd ngi…
阅读更多...
通达信动量振荡指标公式(AO)，反映市场驱动力的变化

通达信动量振荡指标公式(AO)，反映市场驱动力的变化

动量振荡指标AO(Awesome Oscillator)衡量的是最近5根K线的动量与过去34根K线的动量对比&#xff0c;反映市场驱动力的变化。 一、动量振荡指标公式&#xff08;副图&#xff09; 动量振荡指标AO计算公式&#xff1a; 1、计算中间价&#xff0c;将最高价和最低价的和除以2&…
阅读更多...
浅析HTTP协议

浅析HTTP协议

首先&#xff0c;前端请求后端数据&#xff0c;后端响应数据给前端&#xff0c;这是我们大家都知道的&#xff0c;那其中所涉及到的数据传输协议又是什么呢&#xff1f;这个传输规范就是我们大名鼎鼎的HTTP协议&#xff01; 什么是HTTP协议&#xff1f; HTTP&#xff08;超文本…
阅读更多...
SqlAlchemy使用教程(六) -- ORM 表间关系的定义与CRUD操作

SqlAlchemy使用教程(六) -- ORM 表间关系的定义与CRUD操作

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用SqlAlchemy使用教程(五) ORM API 编程入门 本章内容&#xff0c;稍微有…
阅读更多...
Java链表（1）

Java链表（1）

&#x1f435;本篇文章将对单链表进行讲解&#xff0c;模拟实现单链表中常见的方法 一、什么是链表 链表是一种逻辑结构上连续而物理结构上不一定连续的线性表&#xff0c;链表由一个一个节点组成&#xff1a; 每一个节点中都由数据域&#xff08;val&#xff09;和指针域&…
阅读更多...
实战EDA电子设计自动化经典入门模型VHDL代码编写（含代码解释）上篇--状态机，逻辑设计：Y=AB+C

实战EDA电子设计自动化经典入门模型VHDL代码编写（含代码解释）上篇--状态机，逻辑设计：Y=AB+C

前言 电子设计自动化&#xff08;EDA&#xff09;&#xff1a; 定义&#xff1a;EDA是用于设计和开发复杂的电子系统&#xff08;如集成电路&#xff09;和印刷电路板的软件工具集合。这些工具通常用于设计电路、进行仿真测试、分析电路行为以及协助制造过程。应用&#xff1a;…
阅读更多...
机器人学论文——智能施药机器人调研报告

机器人学论文——智能施药机器人调研报告

目录 摘 要 Abstract 第一章&#xff1a;引言 1.1研究背景 1.2 研究意义 1.3文章架构 第二章&#xff1a;智能施药机器人发展现状 2.1引言 2.2 大田智能施药机器人发展现状 2.3 果园智能施药机器人发展现状 2.4 设施农业智能施药机器人发展现状 第三章&#xff1a;智能施药机器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023