Keycloakのログインページのカスタマイズ

投稿日: 2022-11-08 2022-11-08
タグ: Keycloak, OAuth, Spring

1. 概要

Keycloak は、Webまたはモバイルアプリケーションの認証および承認要件を管理するために使用されるサードパーティの承認サーバーです。デフォルトのログインページを使用して、アプリに代わってユーザーにサインインします。

このチュートリアルでは、 Keycloakサーバーのログインページをカスタマイズして、別のルックアンドフィールを実現する方法に焦点を当てます。これは、スタンドアロンサーバーと組み込みサーバーの両方で見られます。

Keycloakチュートリアルのテーマをカスタマイズして、それを実現します。

2. スタンドアロンKeycloakサーバーのカスタマイズ

custom テーマの例を続けて、最初にスタンドアロンサーバーを見てみましょう。

2.1. 管理コンソールの設定

サーバーを起動するには、Keycloakディストリビューションが保存されているディレクトリに移動し、binフォルダーから次のコマンドを実行します。

./standalone.sh -Djboss.socket.binding.port-offset=100

以前にstandalone.xmlに加えた変更のおかげで、サーバーが起動したら、ページを更新するだけで、変更が反映されていることを確認できます。

次に、 themes /customディレクトリ内にloginという名前の新しいフォルダを作成しましょう。簡単にするために、最初に themes / keycloak /loginディレクトリのすべての内容をここにコピーします。これはデフォルトのログインページのテーマです。

次に、管理コンソールに移動し、 initial1 / zaq1！QAZ クレデンシャルを入力して、テーマに移動します。私たちの領域のタブ：

ログインテーマにカスタムを選択し、変更を保存します。

そのセットで、いくつかのカスタマイズを試すことができます。ただし、その前に、デフォルトのログインページを見てみましょう。

2.2. カスタマイズの追加

ここで、背景を変更する必要があるとしましょう。そのために、 login / resources / css / login.css を開き、クラス定義を変更します。

.login-pf body {
    background: #39a5dc;
    background-size: cover;
    height: 100%;
}

効果を確認するために、ページを更新してみましょう。

次に、ユーザー名とパスワードのラベルを変更してみましょう。

これを実現するには、 theme / login /messagesフォルダーにmessages_en.propertiesという新しいファイルを作成する必要があります。このファイルは、指定されたプロパティに使用されているデフォルトのメッセージバンドルを上書きします。

usernameOrEmail=Enter Username:
password=Enter Password:

テストするには、ページをもう一度更新します。

HTML全体またはその一部を変更したい場合、Keycloakがデフォルトで使用するフリーマーカーテンプレートをオーバーライドする必要があります。ログインページのデフォルトのテンプレートは、 base /loginディレクトリに保持されます。

SPRINGBOOTKEYCLOAKの代わりにWELCOMETOBAELDUNG[X41X]を表示したいとします。

そのためには、 base / login /template.ftlをcustom/loginフォルダーにコピーする必要があります。

コピーしたファイルで、次の行を変更します。

<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">
    ${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}
</div>

に：

<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">
    WELCOME TO BAELDUNG
</div>

ログインページに、レルム名の代わりにカスタムメッセージが表示されるようになりました。

3. 組み込みKeycloakサーバーのカスタマイズ

ここでの最初のステップは、スタンドアロンサーバー用に変更したすべてのアーティファクトを組み込み認証サーバーのソースコードに追加することです。

それでは、 src / main / resources / themes /custom内に次の内容の新しいフォルダloginを作成しましょう。

ここで行う必要があるのは、レルム定義ファイル baeldung-realm.json に命令を追加して、customがログインテーマタイプに使用されるようにすることです。

"loginTheme": "custom",

すでにカスタムテーマディレクトリにリダイレクトされているため、サーバーはログインページのテーマファイルをどこから取得するかを知ることができます。

テストのために、ログインページにアクセスしてみましょう。

ご覧のとおり、背景、ラベル名、ページタイトルなど、スタンドアロンサーバーに対して以前に行われたすべてのカスタマイズがここに表示されます。

4. Keycloakログインページのバイパス

技術的には、パスワードまたは直接アクセス許可フローを使用して、Keycloakログインページを完全にバイパスできます。ただし、この付与タイプはまったく使用しないことを強くお勧めします。

この場合、認証コードを取得してからアクセストークンを受け取るという中間ステップはありません。代わりに、REST API呼び出しを介してユーザーの資格情報を直接送信し、それに応じてアクセストークンを取得できます。

これは事実上、ログインページを使用してユーザーのIDとパスワードを収集し、クライアントIDとシークレットとともにトークンエンドポイントへのPOSTでKeycloakに送信できることを意味します。

ただし、Keycloakには、覚えておく、パスワードのリセット、MFAなどの豊富なログインオプションセットが用意されているため、これをバイパスする理由はほとんどありません。

5. 結論

このチュートリアルでは、 Keycloakのデフォルトのログインページを変更し、カスタマイズを追加する方法を学びました。

これは、スタンドアロンインスタンスと組み込みインスタンスの両方で見られました。

最後に、Keycloakのログインページを完全にバイパスする方法と、それを行わない理由について簡単に説明しました。

いつものように、ソースコードはGitHubで入手できます。スタンドアロンサーバーの場合はチュートリアルGitHubにあり、組み込みインスタンスの場合は OAuthGitHubにあります。

getdocs

13036