2024 年 9 月 4 日,作者:Erik Jan de Wit
我們很高興宣布發布兩個新的 npm 套件,旨在為您的 Keycloak 自訂工作提供強大的支援。這些基於 PatternFly 建構的 React 組件庫,為您打造 Keycloak 帳戶和管理控制台提供了必要的基礎。該工具使用我們的「可組合 UI」技術,生成自訂控制台的範例程式碼。 本質上,這意味著您可以使用我們計劃在未來版本中支援的導出 Keycloak 組件來建構您的控制台。
這些套件包括:
此套件提供建立 Keycloak 管理控制台的基礎組件。
此套件提供建立 Keycloak 帳戶控制台的基礎組件。
此套件提供用於建立 Keycloak UI 的共用組件和工具。
使用我們的 npm create keycloak-theme my-theme 命令啟動您的專案。這個精簡的工具會生成專案結構、必要的相依性和配置,為您節省寶貴的時間。目前,該工具僅適用於帳戶控制台,但我們正在努力新增對管理控制台的支援。這將在下一個版本 (26.0.0) 中提供。
執行 npm create keycloak-theme@latest my-theme
。
可以使用 npm run start-keycloak
啟動 keycloak 伺服器
使用 npm run dev
啟動開發伺服器
透過編輯 src 目錄中的檔案來自訂您的佈景主題。
Keycloak 伺服器將會連線到開發伺服器,並且所有變更都會反映在瀏覽器中。只需開啟您的瀏覽器並前往 https://127.0.0.1:8080/realms/master/account/personalInfo
,然後使用 admin/admin 登入。這將開啟 keycloak 帳戶控制台。您將會看到範例程式碼在每個頁面上方都有一個額外的頁面和一些額外的內容。
快速開發:在更短的時間內建立令人驚豔的 UI。
一致性:遵循 PatternFly 設計系統,以獲得協調一致的外觀和風格。
靈活性:自訂組件以符合您的品牌和使用者偏好。
可升級:擁有 npm 套件相依性將使更新您的佈景主題更加容易。
如需更多資訊,請參閱 README。