1.概要
IBM Security Verifyはブランド管理機能を使って、ログイン・ページなどのVerifyによって表示されるページをカスタマイズすることが出来ます。お客様は、会社のロゴなどを使って、アプリケーションのルック・アンド・フィールをより一貫性のあるものにし、認識し易くすることが出来ます。カスタマイズの方法はいくつかありますが、この投稿では、管理コンソールからテンプレートをダウンロードし、それに変更を加えて、適用する方法を説明します。
2.計画と準備
カスタマイズ作業を実施する前に、お客様はどのページをどのように変更するのか検討する必要があります。ログイン画面のイメージ・ファイルや表示されるメッセージなど、カスタマイズする箇所と内容を事前に決定し、イメージ・ファイルなどは予め用意しておく必要があります。
3.カスタマイズ作業の実施
3.1 テンプレートのダウンロードと解凍
IBM Security Verifyのテナントにアクセスして、「ユーザー・エクスペリエンス」の「ブランド設定」のページを開きます。そのページの右上にある「テンプレートのダウンロード」をクリックして、テンプレート(ZIPファイル)をパソコンにダウンロードします。次にパソコン上でダウンロードしたテンプレートのZIPファイルを解凍します。
3.2 変更するWebリソースを置き換え
今回は、ログイン画面のロゴ・イメージとページ・タイトルを置き換えます。
3.2.1 ロゴ・イメージの置き換え
デフォルトのロゴ・イメージは、common/logo/defaultにあります。置き換えるロゴ・イメージをこのフォルダーにコピーします。今回は、デフォルトで用意されているlogo.pngを作成したイメージで置き換えました。デフォルトでは、logo.svgを利用しているため、それを参照しているcommon/page_components/default/page_header.html をエディターで下記のように編集しました。
3.2.2 ページ・タイトルの置き換え
ページ・タイトルは、言語毎に用意されているプロパティー・ファイルに記載されています。日本語の場合には、common/labels/ja/template_labels.propertiesになります。ログイン画面のページ・タイトルは、$LOGIN_TITLE$で定義されていますので、エディターで編集して、これを置き換えます。今回は、「$LOGIN_TITLE$=サインイン - Big Blue」に置き換えました。
3.3 更新用のZIPファイルの作成
更新が終わったら、解凍したZIPファイルと同じ構造のZIPファイルを作成します。
3.4 テーマの作成とZIPファイルのアップロード
IBM Security Verifyのテナントにアクセスして、ユーザー・エクスペリエンスのブランド設定のページを開きます。そのページの右上にある「テーマの作成」ボタンをクリックします。
すると、下図のように指定したテーマが作成されます。
3.5 アプリケーションへのテーマの適用
IBM Security Verifyのテナントのアプリケーションのアプリケーションのページを開きます。リストされたアプリケーションの中から作成したテーマを適用するアプリケーションを探します。適用するアプリケーションが見つかったら、その設定ボタンをクリックします。表示された詳細画面のテーマ・フィールドに上で作成したテーマを指定し、保存します。
3.6 動作確認
作成したテーマを適用したアプリケーションにアクセスします。今回は、ログイン画面のロゴのイメージとページ・タイトルをBig Blueに置き換えました。下図のように正しく置き換えられたことが確認出来ました。
4.まとめ
今回は、ログイン画面を例に、画面のカスタマイズする方法を説明しました。ログイン画面だけではなく、他の画面やメッセージもこの方法で変更することが可能です。また、今回は、テンプレートをテナントのUIを使って置き換える方法で、画面のカスタマイズを行いました。この他にも、テンプレートをAPIで変更することも可能です。そして、テンプレートを使わずに全てを独自に画面で作り込むことも可能です。お客様の画面の要件に合わせて、適切な方法で画面をカスタマイズしてご利用ください。