Keycloak 入門實戰(5)--自定義登錄頁面-有解無憂

Keycloak 默認的登錄頁面顯然不適合實際的使用，本文主要介紹如何自定義登錄頁面；文中使用到的軟體版本：JDK 1.8.0_191、Keycloak 16.1.1，

1、Keycloak 準備

這里假設 Keycloak 已經安裝完畢；Keycloak 的安裝方法可參考：Keycloak 入門實戰(2)--安裝，

2、主題簡介

2.1、主題型別

Keycloak 有多種不同型別的主題：

Account - Account management
Admin - Admin console
Email - Emails
Login - Login forms

主題設定的位置如下：

2.2、默認主題

Keycloak 與主題根目錄中的默認主題捆綁在一起；為了簡化升級，不應直接編輯默認主題；應創建新的主題來擴展已有的主題，

2.3、主題組成部分

一個主題包含如下模塊：

HTML templates (Freemarker Templates)
Images
Message bundles
Stylesheets
Scripts
Theme properties

除非打算替換每個頁面，否則應該擴展另一個主題，一般情況下你可能會控制 Keycloak 主題，但是如果要顯著更改頁面的外觀和感覺，也可以考慮擴展 base 主題，base 主題主要由 HTML 模板和訊息組成，而 Keycloak 主題主要包含圖片和樣式表，

要創建新主題，首先在主題目錄中創建一個新目錄，目錄的名稱將成為主題的名稱，例如，要創建一個名為 mytheme 的主題，創建目錄 themes/mytheme 即可，在主題目錄中創建對應主題型別的目錄，如：對應登錄主題型別，創建 themes/mytheme/login 目錄，

對于每種型別的主題都已一個對應的組態檔：<THEME TYPE>/theme.properties，它有如下屬性：

parent - Parent theme to extend
import - Import resources from another theme
styles - Space-separated list of styles to include
locales - Comma-separated list of supported locales

你也看自定義屬性，然后在模板中使用它們，執行此操作時，可以使用以下格式替換系統屬性或環境變數：

${some.system.property} - for system properties
${env.ENV_VAR} - for environment variables.

如：javaVersion=${java.version}

2.4、樣式

一個主題可以有一個或多個樣式表，要添加樣式表，可在 <THEME TYPE>/resources/css 目錄中創建樣式檔案，然后將其添加到 theme.properties 中的 styles 屬性中，

如：創建 themes/mytheme/login/resources/css/styles.css 檔案：

.login-pf body {
    background: DimGrey none;
}

在 themes/mytheme/login/theme.properties 中增加：

styles=css/styles.css

如果需要包含父主題的樣式，應這樣配置：

styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/login.css css/styles.css

2.5、JS 腳本

一個主題可以有一個或多個 JS 檔案，要添加 JS 檔案，可在 <THEME TYPE>/resources/js 目錄中創建 JS 檔案，然后將其添加到 theme.properties 中的 scripts 屬性中，

如：創建 themes/mytheme/login/resources/js/script.js 檔案：

alert('Hello');

在 themes/mytheme/login/theme.properties 中增加：

scripts=js/script.js

2.6、圖片

要使影像可用于主題，將其添加到 <THEME TYPE>/resources/img 目錄中；這樣就可以在樣式表中使用，也可以直接在 HTML 模板中使用，

如：拷貝圖片檔案到 themes/mytheme/login/resources/img/image.jpg，在樣式表中使用：

body {
    background-image: url('../img/image.jpg');
    background-size: cover;
}

在 HTML 模板中使用：

<img src="${url.resourcesPath}/img/image.jpg">

2.7、訊息

模板中的文本是從訊息包加載的，擴展另一個主題將繼承父級訊息包中的所有訊息，可以添加 <THEME TYPE>/messages/messages_en.properties 來覆寫單個訊息，

如：要將登錄表單上的 “Username or email” 替換為 “Your Username”，創建 themes/mytheme/login/messages/messages_en.properties 檔案：

usernameOrEmail=Your Username

2.8、國際化

Keycloak 支持國際化，可以在控制臺開啟該功能，要添加新語言環境，可創建 <THEME TYPE>/messages/messages_<LOCALE>.properties 檔案，然后在其中定義需覆寫的屬性，

如：創建中文的訊息檔案 themes/mytheme/login/messages/messages_zh_CN.properties，覆寫登錄標題：

# encoding: utf-8
loginAccountTitle=登錄您的帳戶

注：默認的編碼為 ISO-8859-1，如果檔案為其他編碼，需使用 encoding 頭指定，

3、自定義主題

這里只演示自定義登錄主題，主題名稱為 mytheme，該主題繼承 keycloak 主題，

3.1、創建主題目錄

創建 themes/mytheme/login 目錄，

3.2、上傳圖片

上傳圖片檔案：
themes/mytheme/login/resources/img/login-bg.png
themes/mytheme/login/resources/img/logo-text.png

3.3、撰寫樣式檔案

themes/mytheme/login/resources/css/mylogin.css:

.login-pf body {
    background: url("../img/login-bg.png") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

div.kc-logo-text {
    background-image: url(../img/logo-text.png);
    background-repeat: no-repeat;
    height: 63px;
    width: 300px;
    margin: 0 auto;
}

3.4、撰寫訊息檔案

themes/mytheme/login/messages/messages_zh_CN.properties:

# encoding: utf-8
loginAccountTitle=登錄您的帳戶

3.5、撰寫主題組態檔

themes/mytheme/login/theme.properties:

parent=keycloak
import=common/keycloak

styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.qmin.css css/login.css css/mylogin.css

3.6、主題效果

重啟 Keycloak 后，把登錄主題設定為 mytheme：

重新登錄的頁面樣式如下：

3.7、涉及新增的檔案

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/462904.html

標籤：其他

上一篇：Rn次相乘

下一篇：C++基礎-類與物件(2)