やりたいこと

Keycloakを社内の業務用に構築していて、
管理画面はKeycloakのデフォルトテーマでいいけど、
各アプリのレルムの背景は、変えたいと思った。

具体的には公式に載っている下記のような画面にしたいと思った。
公式のリンク

やり方を調べる

公式のリンクは詳しいんだけど、CSSとかの知識がなく、カスタマイズする元の設定があるわけではなく、どうしたもんか悩む。

他にもテーマをいじるのは下記にもあって、理解は進んだけど、公式サンプルの設定がやはりほしい。
しかし、インストールしたkeycloak内にも公式サンプルのテーマはない

参考URL
Keycloakのカスタマイズポイントを整理してみる
 Keycloakのテーマをカスタマイズする

公式サンプルの場所

KeycloakのGithubで「sunrize」というテーマを見つけ、これが公式ドキュメント内のサンプルだった。
https://github.com/keycloak/keycloak/tree/master/examples/themes/src/main/resources/theme/sunrise

設定方法

公式サンプルを配置

Githubのsunrize以下をまるっと、keycloakのホームディレクトリ/themeのディレクトリ下に配置する。
keycloakのホームディレクトリ/theme/sunrize

テーマ名を「sunrize」から変えたければ、ディレクトリ名を変えればOK
keycloakのホームディレクトリ/theme/テーマ名

背景の変更

keycloakのホームディレクトリ/theme/sunrize/login/resources/imgの下に背景画像のファイルを配置し、
keycloakのホームディレクトリ/theme/sunrize/login/resources/css/styles.cssの下記の箇所で画像ファイル名を変更する。

body {
    background-color: #040507;
    background-image: url('../img/bkgrnd.jpg');　←ここのファイル名を修正する
    background-size: cover;
    background-repeat: no-repeat;

    color: #fff;
    font-family: sans-serif;
    text-shadow: 0px 0px 10px #000;
}

ちなみに公式ドキュメントでは、ここらへんで書いてある

左上の「Log In」とメッセージの変更

ここまでで、反映すると画面左上に「Log In」という文字が残った。
これはカッコ悪い。

baseのとこにあるtemplate.ftlをコピーして、このテーマのloginディレクトリ下において、いじって削除することも試したらできたけど、
簡単にやるなら、「Log In」という文字列をアプリ名にすれば、
そんなに違和感ないし、ログイン画面でアプリ名区別できるので、メッセージの変更で修正した。

英語と日本語やっておけばいいだろうという感じで、
keycloakのホームディレクトリ/theme/sunrize/login/messages下に
messages_en.propertiesとmessages_ja.propertiesを作成。

# mkdir keycloakのホームディレクトリ/theme/sunrize/login/messages
# vi keycloakのホームディレクトリ/theme/sunrize/login/messages/messages_en.properties
~中身~
doLogIn=アプリ名 Log In
#vi keycloakのホームディレクトリ/theme/sunrize/login/messages/messages_ja.properties
~中身~
doLogIn=アプリ名 ログイン

ちなみに公式ドキュメントでは、ここらへんで書いてある。

上記のdoLogInのとこで変更できる項目が分からない場合は、
baseテーマの
keycloakのホームディレクトリ/theme/base/login/messages下にbaseの設定があるのでそれで確認できる。

おまけ
ログイン画面のユーザー名の箇所は、
デフォルト設定だと上記の公式ドキュメントの例と同じで「usernameOrEmail」だが、
emailでログインをオフにすると、「username」の方に変わる

反映

keycloakを再起動すると、レルムのテーマとして選択できるようになる。
また、デフォルトは選択した後に、再起動で画面が反映される。

構築中などは、下記の設定で再起動なしで反映可能になる。

公式ドキュメントの該当箇所

テーマを作成する際は、キャッシュを無効にすることをお勧めします。なぜなら、無効にしたことにより、Keycloakを再起動せずに、 themes ディレクトリーからテーマ・リソースを直接編集することができるからです。これを実行するには standalone.xml を編集します。以下のとおり、 theme 用に staticMaxAge を -1 に設定し、 cacheTemplates と cacheThemes の両方は false に設定します。

<theme>
    <staticMaxAge>-1</staticMaxAge>
    <cacheThemes>false</cacheThemes>
    <cacheTemplates>false</cacheTemplates>
    ...
</theme>

パフォーマンスにかなり影響を与える可能性があるので、プロダクション環境でキャッシュを再度有効にすることを忘れず実行してください。