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.rhkb.cn/news/246100.html

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

相关文章

搭建Redis集群

搭建Redis集群

一 应用场景 为什么需要redis集群&#xff1f; 当主备复制场景&#xff0c;无法满足主机的单点故障时&#xff0c;需要引入集群配置。 一般数据库要处理的读请求远大于写请求 &#xff0c;针对这种情况&#xff0c;我们优化数据库可以采用读写分离的策略。我们可以部 署一台…
阅读更多...
数据结构与算法——队列

数据结构与算法——队列

概述 计算机科学中&#xff0c;queue 是以顺序的方式维护的一组数据集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。添加的一端称为尾&#xff0c;移除的一端称为头。 功能 插入offer(value : E) : boolean　　取值并移除poll() : E　　取值peek() : E　　判断…
阅读更多...
项目中日历管理学习使用

项目中日历管理学习使用

一些项目中会有日历或日期设置&#xff0c;最基本的会显示工作日&#xff0c;休息日&#xff0c;节假日等等&#xff0c;下面就是基于项目中的日历管理功能&#xff0c;要显示工作日&#xff0c;休息日&#xff0c;节假日 效果图 获取国家法定节假日工具类 public class Holi…
阅读更多...
「QT」QString类的详细说明

「QT」QString类的详细说明

✨博客主页何曾参静谧的博客📌文章专栏「QT」QT5程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「
阅读更多...
Qt编写手机端视频播放器/推流工具/Onvif工具

Qt编写手机端视频播放器/推流工具/Onvif工具

一、视频播放器 同时支持多种解码内核&#xff0c;包括qmedia内核&#xff08;Qt4/Qt5/Qt6&#xff09;、ffmpeg内核&#xff08;ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5/ffmpeg6&#xff09;、vlc内核&#xff08;vlc2/vlc3&#xff09;、mpv内核&#xff08;mpv1/mp2&#xff09;、…
阅读更多...
第十七讲_HarmonyOS应用开发Stage模型应用组件

第十七讲_HarmonyOS应用开发Stage模型应用组件

HarmonyOS应用开发Stage模型应用组件 1. 应用级配置2. Module级配置3. Stage模型的组件3.1 AbilityStage3.1.1 AbilityStage的创建和配置3.1.2 AbilityStage的生命周期回调3.1.3 AbilityStage的事件回调&#xff1a; 3.2 UIAbility3.2.1 UIAbility生命周期3.2.3 UIAbility启动模…
阅读更多...
修复idea,eclipse ,clion控制台中文乱码

修复idea,eclipse ,clion控制台中文乱码

控制台乱码问题主要原因并不在编译器IDE身上&#xff0c;还主要是Windows的控制台默认编码问题。。。 Powershell&#xff0c;cmd等默认编码可能不是UTF-8&#xff0c;无需改动IDE的settings或者properties&#xff08;这治标不治本&#xff09;&#xff0c;直接让Windows系统…
阅读更多...
初识MQRabbitMQ快速入门

初识MQRabbitMQ快速入门

一、同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你却不能…
阅读更多...
老旧小区火灾频发，LoRa无线系统筑牢安全防线

老旧小区火灾频发，LoRa无线系统筑牢安全防线

近日&#xff0c;全国各地多个老旧小区火灾事故频发&#xff0c;从安微合肥南二环一老旧小区居民楼起火、上海金山区一小区居民楼火灾&#xff0c;到1月24日江西新余市特大火灾......都造成了不同程度的人员伤亡和财产损失&#xff0c;令人扼腕痛惜&#xff0c;教训十分深刻。 …
阅读更多...
【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解

【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解

【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解 提示:最近开始在【医学图像分割】方面进行研究,记录相关知识点,分享学习中遇到的问题已经解决的方法。 文章目录 【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解前言UNet模型运行环境搭…
阅读更多...
前端工程化之：webpack1-6(编译过程)

前端工程化之：webpack1-6(编译过程)

一、webpack编译过程 webpack 的作用是将源代码编译&#xff08;构建、打包&#xff09;成最终代码。 整个过程大致分为三个步骤&#xff1a; 初始化编译输出 1.初始化 初始化时我们运行的命令 webpack 为核心包&#xff0c; webpack-cli 提供了 webpack 命令&#xff0c;通过…
阅读更多...
第八篇 交叉编译华为云Iot SDK到Orangepi3B

第八篇 交叉编译华为云Iot SDK到Orangepi3B

本篇主要内容&#xff1a; 一、交叉编译华为云Iot SDK依赖1.宿主机安装交叉编译工具链&#xff08;1&#xff09;选择下载交叉编译工具链&#xff08;2&#xff09;解压、添加环境变量、重启2.交叉编译依赖库&#xff08;0&#xff09; 准备工作&#xff08;1&#xff09; 交叉…
阅读更多...
水文模型SWMM与LisFlood耦合（pdf文档、软件见资源）

水文模型SWMM与LisFlood耦合（pdf文档、软件见资源）

总技术路线图 INP生成图解 文献&#xff1a;面向服务的Web-SWMM构建研究 regardingINP为ArcGIS Pro项目 1.SWMM模型数据准备与参数设置 1.子汇水区 文件位于&#xff1a;beforeGenerateINP/generateSub.py&#xff08;一级划分&#xff09; 问题&#xff1a; 水文分析阈值划…
阅读更多...
【PyTorch】使用PyTorch创建卷积神经网络并在CIFAR-10数据集上进行分类

【PyTorch】使用PyTorch创建卷积神经网络并在CIFAR-10数据集上进行分类

前言 在深度学习的世界中&#xff0c;图像分类任务是一个经典的问题&#xff0c;它涉及到识别给定图像中的对象类别。CIFAR-10数据集是一个常用的基准数据集&#xff0c;包含了10个类别的60000张32x32彩色图像。在本博客中&#xff0c;我们将探讨如何使用PyTorch框架创建一个简…
阅读更多...
CSS3如何实现从右往左布局的按钮组（固定间距）

CSS3如何实现从右往左布局的按钮组（固定间距）

可以通过下方CSS实现&#xff0c;下面的CSS表示按钮从右往左布局&#xff0c;且间距为10px: .right-btn {position: relative;float: right;margin-right: 10px; }类似这种&#xff1a; 这种&#xff1a; 注意&#xff1a; 不能使用right:10px代替margin-right:10px&#x…
阅读更多...
LINUX基础培训十八之常见服务vsftp介绍

LINUX基础培训十八之常见服务vsftp介绍

前言、本章学习目标 了解vsftp服务用途掌握配置vsftp服务器掌握vsftp日常使用 一、什么是文件传输协议(VSFTP) vsftpd一红帽企业版linux的默认ftp服务器 不再由xinetd管理 xinetd是一个非独立服务有很多服务要依靠它实现” xinetd是一个daemon程序&#xff0c;所有结尾带d的…
阅读更多...
Backtrader 文档学习-Bracket Orders

Backtrader 文档学习-Bracket Orders

Backtrader 文档学习-Bracket Orders 1. 概述 组合订单类型是一个非常宽泛的订单类别&#xff0c;只要brokder支持的订单类型都可以&#xff0c; 包括(Market, Limit, Close, Stop, StopLimit, StopTrail, StopTrailLimit, OCO)。 该功能用于回测&#xff0c;交互broker Brac…
阅读更多...
银行数据仓库体系实践（3）--数据架构

银行数据仓库体系实践（3）--数据架构

狭义的数据仓库数据架构用来特指数据分布&#xff0c;广义的数据仓库数据架构还包括数据模型、数据标准和数据治理。即包含相对静态部分如元数据、业务对象数据模型、主数据、共享数据&#xff0c;也包含相对动态部分如数据流转、ETL、整合、访问应用和数据全生命周期管控治理。…
阅读更多...
TensorFlow2实战-系列教程2：神经网络分类任务

TensorFlow2实战-系列教程2：神经网络分类任务

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 1、Mnist数据集 下载mnist数据集&#xff1a; %matplotlib inline from pathlib imp…
阅读更多...
项目实战——Qt实现FFmpeg音视频转码器

项目实战——Qt实现FFmpeg音视频转码器

文章目录 前言一、移植 FFmpeg 相关文件二、绘制 ui 界面三、实现简单的转码四、功能优化1、控件布局及美化2、缩放界面3、实现拖拽4、解析文件5、开启独立线程6、开启定时器7、最终运行效果 五、附录六、资源自取 前言 本文记录使用 Qt 实现 FFmepg 音视频转码器项目的开发过…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023