Keycloak UI 组件库发布!

2024 年 9 月 4 日,作者:Erik Jan de Wit

我们很高兴地宣布发布两个新的 npm 包,旨在增强您的 Keycloak 定制工作。 这些 React 组件库构建于 PatternFly 之上,为构建 Keycloak 帐户和管理控制台提供了必要的构建块。 该工具使用我们的“可组合 UI”技术为自定义控制台生成示例代码。 本质上,这意味着您可以使用我们计划在未来版本中支持的导出的 Keycloak 组件来构建您的控制台。

这些软件包是:

@keycloak/keycloak-admin-ui

此软件包为创建 Keycloak 管理控制台提供了构建块。

@keycloak/keycloak-account-ui

此软件包为创建 Keycloak 帐户控制台提供了构建块。

@keycloak/ui-shared

此软件包为构建 Keycloak UI 提供了共享组件和实用程序。

使用我们的快速入门工具加速您的开发

使用我们的 npm create keycloak-theme my-theme 命令快速启动您的项目。 这个简化的工具生成项目结构、必要的依赖项和配置,从而节省您宝贵的时间。 目前,该工具仅适用于帐户控制台,但我们正在努力添加对管理控制台的支持。 这将在下一个版本 (26.0.0) 中提供。

开始使用

  1. 运行 npm create keycloak-theme@latest my-theme

  2. 可以使用 npm run start-keycloak 启动 Keycloak 服务器

  3. 使用 npm run dev 启动开发服务器

  4. 通过编辑 src 目录中的文件来自定义您的主题。

Keycloak 服务器将连接到开发服务器,所有更改都将反映在浏览器中。 只需打开您的浏览器并转到 https://127.0.0.1:8080/realms/master/account/personalInfo 并使用 admin/admin 登录。 这将打开 Keycloak 帐户控制台。 您将看到示例代码有一个额外的页面以及每个页面上方的一些额外内容。

主要优势

  1. 快速开发:在更短的时间内创建出色的 UI。

  2. 一致性:遵守 PatternFly 设计系统,以获得一致的外观和感觉。

  3. 灵活性:自定义组件以匹配您的品牌和用户偏好。

  4. 可升级:拥有 npm 包依赖项将使更新您的主题更容易。

有关更多信息,请参阅 README