OpenAM 14 画面カスタマイズガイド

OSSTech 株式会社
更新日

2023 年 5 月 31 日

リビジョン

1.2

目次
1

はじめに

1

1.1

本書の目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

前提条件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

OpenAM 14 画面レイアウトの仕組み

2

2.1

テーマ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2

HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.4

キャッシュ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

画像の変更

7

3.1

OSSTech 版 OpenAM の標準画面 . . . . . . . . . . . . . . . . . . . . . .

7

3.2

ログインロゴの変更 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.3

製品ロゴの変更. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

2

3

4

表示されるメッセージの変更

11

4.1

変更可能なメッセージの表示箇所 . . . . . . . . . . . . . . . . . . . . . . .

11

4.2

各画面を構成する HTML ファイル . . . . . . . . . . . . . . . . . . . . . .

11

4.3

メッセージの変更方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.4

OpenAM 全体のタイトルの変更. . . . . . . . . . . . . . . . . . . . . . .

15

4.5

ログイン画面のメッセージの変更 . . . . . . . . . . . . . . . . . . . . . . .

16

4.6

ログイン画面（LDAP 認証モジュールの場合） . . . . . . . . . . . . . . . .

20

4.7

ログアウト、セッションタイムアウト画面 . . . . . . . . . . . . . . . . . .

21

4.8

ログイン失敗時のエラーメッセージの変更 . . . . . . . . . . . . . . . . . .

23

プロファイル画面/ダッシュボードのカスタマイズ

27

5.1

プロファイル画面の変更 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

5.2

ダッシュボードの変更 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

5.3

ユーザーメニューの編集 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

6

遷移先 URL の変更について

44

7

改版履歴

45

5

i

1 はじめに
1.1 本書の目的
本文書は弊社提供の OpenAM 14 の Web インターフェース (画面) のカスタマイズに関する手順書です。
本文書に関する記載内容について疑問点等がある場合には、弊社サポート窓口までお問い
合わせください。

1.2 前提条件本 文 書 で は 、OpenAM の イ ン ス ト ー ル デ ィ レ ク ト リ の パ ス を{OPENAM_INSTALL}と
表 記 し ま す 。OSSTech 版 Tomcat と OpenAM を イ ン ス ト ー ル し て い る 場 合 、デ フ ォ
ルトではこのパスは/opt/osstech/share/tomcat/webapps/openam となります。更に、{OPENAM_INSTALL}/XUI を{XUI_DIR}と略記します。
本文書では、ブラウザから OpenAM の URL にアクセスする際に、ブラウザ上の言語設定として日本語を選択していることを前提とします。
また、本文書は読者が以下に関する知識を有する又はそれらに関する資料を参照しながら読むことを想定しています。

• Bootstrap CSS フレームワーク• Handlebars.js Javascript テンプレートエンジン

1

2 OpenAM 14 画面レイアウトの仕組み
2.1 テーマ
OpenAM 14 ではテーマを定義し、それを特定のレルムや認証連鎖に適用することによって画面レイアウトを生成します。
テーマとは以下のようなものから構成されています。

• CSS
• 画像
• HTML ファイルを置くディレクトリの指定• フッター文字列
テーマの定義は{XUI_DIR}/config/ThemeConfiguration.js というファイルに書かれています。
次の節で ThemeConfiguration.js について解説します。

2.1.1 ThemeConfiguration.js
テーマはこのファイルに JSON 形式で設定を書いていくことで定義できます。
以下にこのファイルの例を示します。
define({themes: {// themes オブジェクト。後述。
// There must be a theme named "default".
"default": {// An ordered list of URLs to stylesheets//that will be applied to every page.
stylesheets: ["css/bootstrap-3.4.1-openam-jp.css","css/structure.css","css/theme.css"],// A path that is prepended to every relative URL// when fetching HTML resources
path: "",// A URL to a favicon icon
icon: "favicon.ico",
settings: {// This logo is displayed on user profile pages.
logo: {

2

// The URL of the image.
src: "images/openam-xui-menu-logo.png",// The title attribute used on <img> tags.
title: "OpenAM",// The alt attribute used on <img> tags.
alt: "OpenAM",// The width of the logo as a CSS length.
width: "100px"},// This logo is displayed on login pages.
loginLogo: {// The URL of the image.
src: "images/openam-xui-login-logo.png",// The title attribute used on <img> tags.
title: "OpenAM",// The alt attribute used on <img> tags.
alt: "OpenAM",// The height of the logo as a CSS length.
height: "90px",// The width of the logo as a CSS length.
width: "300px"},// The footer is displayed on every page.
footer: {// A contact email address.
mailto: "",// A contact phone number.
// If empty, it will not be displayed.
phone: ""}}},"my-theme": {path: "themes/myTheme/",stylesheets: ["themes/myTheme/css/bootstrap.min.css","css/structure.css","themes/myTheme/css/theme-dark.css"],
settings: {loginLogo: {src: "images/login-logo-white.png",
title: "OpenAM",
alt: "OpenAM",3

height: "228px",
width: "220px"}}}},
mappings: [ // mappings 配列。後述。
{ theme: "my-theme",
realms: ["/subrealm1"],
authenticationChains: ["xuiTest"] },{ theme: "my-theme", realms: ["/subrealm2"] }]});この中で、themes オブジェクトのキー値がそのテーマの名前になり、キー値に対応するオブジェクトがそのテーマの中身になります。例えばこの ThemeConfiguration.js では"default"と"my-theme"を名前とする 2 つのテーマをそれぞれ定義しています。テーマの名前はその後の mappings 配列内で使用されます。

mappings 配列はどのレルム（のどの認証連鎖）にどのテーマを適用するかを決めます。
配列のどの要素にもレルム（と認証連鎖）が一致しない場合には default テーマが適用されます。
画像や CSS を変更する場合は、mappings 配列を見て、どのテーマの設定を編集すればいいかを判断してください。以下の解説では、default テーマを編集するものとして解説します。

2.2 HTML
OpenAM 14 では 1 つの画面が 1 つの HTML ファイルや JSP ファイルに対応することはなく、複数の HTML ファイルを組み合わせることで 1 つの画面が生成されます。これは、OpenAM 14 の UI 部分が Handlebars.js という Javascript のテンプレートエンジンを使用しているからです。従って、{XUI_DIR}内に置かれている HTML ファイルは、Handlebars.jsの構文を使って書かれています。
デ フ ォ ル ト で は 使 用 す る HTML フ ァ イ ル は{XUI_DIR}/templates デ ィ レ ク ト リと{XUI_DIR}/partials ディレクトリに置かれています。この 2 つのディレクトリの場
所 は 、ThemeConfiguration.js の path 属 性 で 指 定 す る こ と が で き ま す 。templates,

partials ディレクトリの場所を変更したい場合は、この属性に{XUI_DIR}/からの相対パスを記述してください。

path 属性の値をデフォルト（"" （空文字列））から変更した場合は、path 属性で指定し4たディレクトリの直下に、partials, templates ディレクトリを中身を含めて全てコピーしてください。そのコピーしたファイルを編集することでテーマ毎の HTML のカスタマイズができます。

2.3 CSSOpenAM 14 では CSS のフレームワークとして Bootstrap を使用しています。
CSS の変更は、変更した CSS のファイルを ThemeConfiguration.js の stylesheets 属性で指定することで行います。HTML ファイルで指定する方法ではないことにご注意ください。

stylesheets 属性の値は Javascript の文字列の配列になっていて、基本的に以下の 3 つのファイルの{XUI_DIR}からの相対パスを含めることになります。

• css/structure.css– 必ず含めてください。
• 使用する Bootstrap テーマの CSS– 必ず含めてください。
• それ以外の CSS– Bootstrap では扱いきれない細かい指定を書く場合に含めてください。
具体例としては上記に掲載した ThemeConfiguration.js の例を参照してください。

HTML の場合と違い CSS のパスは path 属性のディレクトリからの相対パスではなく、{XUI_DIR}からの相対パスであることに注意してください。

2.4 キャッシュ
OpenAM が応答するコンテンツはブラウザにキャッシュされます。キャッシュの有効
期間は 30 日です。カスタマイズ結果の反映にあたり、ブラウザのキャッシュの更新が必要となります。画面カスタマイズの設計・開発時点ではブラウザ上でキャッシュクリアする方法でも良いですが、既に運用しているシステムへカスタマイズ内容を反映する際は、{XUI_DIR}/data-main.js 内にある urlArgs の v=の値を変更することでキャッシュの更新を行ってください。例を以下に記します。
変更前例：
urlArgs : "v=cf9cad8",

変更後例：

5

urlArgs : "v=cf9cad8-customize-01",• v= の値について– 値が異なることでブラウザのキャッシュが更新されます。
– 値には任意の文字列を使用できます。
– OpenAM が複数台構成の場合は、すべての号機で同じ値にしてください。
• data-main.js のキャッシュ– data-main.js ファイル自体がブラウザに 5 分間の有効期限でキャッシュされます。
– data-main.js を変更しても最大 5 分間は画面カスタマイズの内容がブラウザに反映されない可能性があります。

6

3 画像の変更
本章では、OpenAM のログイン画面/ログインエラー画面の画像を変更する方法を説明します。

default テーマを編集することを前提にした解説であることに注意してください。他のテーマや独自に定義したテーマを編集する場合はそれに応じて読み替えてください。
画像の設定を変更した後にブラウザで確認する際には、キャッシュの回避が必要です。

3.1 OSSTech 版 OpenAM の標準画面
OSSTech 版 OpenAM では以下のログイン画面が標準で表示されます。デスクトップからでもモバイル端末からでも同じ画面が表示されます。

図 1 標準のログイン画面

この画面には画像が 1 つ表示されています。

• ログインロゴ（OpenAM ロゴ）– 上の画像の赤い枠線で囲った画像です。
7

この画像の変更方法を次の節で説明します。
また、ログインに成功した後に表示される OpenAM 内でのユーザーのプロファイル表示
画面は以下になります。アクセスに使用する端末の画面サイズに応じて青で囲った部分の表示が若干変わりますが、それ以外の部分はどの端末からアクセスしても同じように表示されます。

図 2 標準のプロファイル画面

この画面には画像が 1 つ表示されています。

• 製品ロゴ（OpenAM ロゴ）– 上の画像の赤い枠線で囲った画像です。
この画像の変更方法を次の次の節で説明します。

3.2 ログインロゴの変更
標準のログインロゴ（OpenAM ロゴ）は下記の画像ファイルを ThemeConfiguration.js
で設定しています。

• 対象ファイル: {XUI_DIR}/images/openam-xui-login-logo.png• 画像形式: PNG
ログインロゴを変更する場合は、まず{XUI_DIR}/images/ディレクトリに新たに設定する

8

画像ファイルを配置します。
# cp login-logo.png {XUI_DIR}/images

次に ThemeConfiguration.js ファイルを編集して新たに設定する画像ファイルとそのサイズを指定します。
define({themes: {"default": {// 中略settings: {// 中略loginLogo: {// 画像ファイルの場所を指定します。
src: "images/login-logo.png",// img タグの title 属性の値を指定します。
title: "OpenAM",// img タグの alt 属性の値を指定します。
alt: "OpenAM",// ロゴの高さを指定します。
height: "90px",// ロゴの幅を指定します。
width: "300px"
},
// 後略

画像を表示しない場合は loginLogo 属性をまるごとコメントアウトするか削除してくだ
さい。

3.3 製品ロゴの変更
標準の製品ロゴ（OpenAM ロゴ）は下記の画像ファイルを ThemeConfiguration.js で設定しています。

• 対象ファイル: ‘{XUI_DIR}/images/openam-xui-menu-logo.png• 画像形式: PNG
製品ロゴは、画像の配置箇所に背景色が設定されているため、透過画像を設定する必要があります（ただし、スタイルを変更する場合はその限りではありません）。
製品ロゴを変更する場合は、まず{XUI_DIR}/images/ディレクトリに新たに設定する画像

9

ファイルを配置します。
# cp product-name.png {XUI_DIR}/images

次に ThemeConfiguration.js ファイルを編集して新たに設定する画像ファイルとそのサイズを指定します。
define({themes: {"default": {// 中略settings: {// 中略
logo: {// 画像ファイルの場所を指定します。
src: "images/product-name.png",// img タグの title 属性の値を指定します。
title: "OpenAM",// img タグの alt 属性の値を指定します。
alt: "OpenAM",// ロゴの高さを指定します。
height: "50px",// ロゴの幅を指定します。
width: "78px"
},
// 後略

画像を表示しない場合は logo 属性をまるごとコメントアウトするか削除してください。

10

4 表示されるメッセージの変更
本章では、ログイン画面/ログアウト画面/エラー画面に表示されるメッセージの変更方法について説明します。

4.1 変更可能なメッセージの表示箇所
以下の画像の赤い枠線で囲まれたメッセージは変更することが可能です。

図 3 ログイン画面において変更可能なメッセージ

以降でメッセージの変更方法について説明します。

4.2 各画面を構成する HTML ファイル
この節では、使用する HTML ファイルの置き場所（デフォルトでは{XUI_DIR}/templatesと{XUI_DIR}/partials）をそれぞれ templates, partials と略記します。

11

4.2.1 セッションタイムアウト、ログアウト時の画面を構成する HTML ファ
イル
セッションタイムアウト、ログアウト時には、

templates/openam/ReturnToLoginTemplate.html が大枠の HTML として表示されます。

4.2.2 ユーザー認証時の画面を構成する HTML ファイル
ユーザー認証時に表示される大枠の HTML は使用する認証モジュールによって変わります。
認証モジュール名が Modulehoge、ステージが 1 番だとすると、templates/openam/authn/Modulehoge1.html が大枠の HTML として最初に検索され、使用されます（ステージとは、{OPENAM_INSTALL}/config/auth/default_ja/Modulehoge.xml の Callbacks 要 素 のorder 属性の値のことを指しています）。
もしそれが見つからなかった場合、templates/openam/RESTLoginTemplate.html が大枠の HTML として使用されます。
それらのテンプレートは、その認証モジュールのそのステージが使用するコールバックに
よって別々の HTML を更に呼び出します。
もしコールバック名が HogehogeCallback だった場合、partials/login/_Hogehoge.html
を使用します。このファイルがそのコールバックに対応する画面上の入力要素を構成します。

NameCallback など、partials/login/ディレクトリ内に対応する HTML ファイルがな
いコールバックの場合は、partials/login/_Default.html が使用されます。

4.3 メッセージの変更方法
メッセージを変更する場合、変更したいメッセージの種類に応じて、以下の 3 種の方法を使い分けます。

• ファイルをそのまま編集するケース• メッセージプロパティファイルを編集するケース• {XUI_DIR}/locales/*/translation.json を編集するケース
メッセージの種類と変更方法との対応は次節以降で詳述することにし、本節では各ケースの方法について詳しく解説します。

12

4.3.1 ファイルをそのまま編集する場合
html ファイルや xml ファイルなどをそのまま編集します。
html ファイル以外を編集した場合は、反映のために OpenAM を再起動してください。

4.3.2 メッセージプロパティファイルの編集方法
メッセージの中には、Java のプロパティファイルに定義されているものがあります。プロ
パティファイルに日本語を記述する場合は、Unicode エスケープ形式で記述する必要があります。*1 ここでは、JDK の native2ascii コマンドを利用してプロパティファイルを編集する方法を示します。

1. 編集したいプロパティファイルを Unicode エスケープ形式から日本語 (UTF-8) へ変
換して、日本語で編集可能なファイルを作成します。

2. 変換したファイルを編集します。
3. 編集後、再び日本語 (UTF-8) から Unicode エスケープ形式へ変換します。
上記の手順のコマンドによる実行例は以下になります。
# native2ascii -reverse amAuth_ja.properties amAuth_ja.properties.utf8# vi amAuth_ja.properties.utf8# native2ascii amAuth_ja.properties.utf8 amAuth_ja.properties

以上で完了です。OpenAM を再起動すると、変更したメッセージがブラウザ画面に反映されます。
プロパティファイルの書式は、以下のようにプロパティ名と値を=（イコール）でつなげて一行で記述します。
openam.sample=プロパティ値

途中で改行を入れたい場合は\n を記述します。全角スペースはそのまま記述可能です。
以下に例を示します。
openam.sample=1 行目\n2 行目 全角スペース

ただし、上記のように改行を含んだ値をブラウザ上で確認する際は、HTML の仕様により*1 OpenAM14(Java11) では、Unicode エスケープ形式での記述が不要になりました。プロパティファイルに直接日本語 (UTF-8) を記述可能です。

13

改行ではなくスペースとして扱われることにご注意ください。

4.3.2.1 native2ascii コマンドについてメッセージプロパティファイルの編集作業は必ずしも OpenAM のサーバーで実施する必
要はありません。別のサーバーで作成したプロパティファイルを OpenAM サーバーに配置することで対応可能です。

native2ascii コマンドは java-1.8.0-openjdk-devel パッケージに含まれています。開発環境などのサーバーに java-1.8.0-openjdk-devel パッケージをインストールし、native2ascii
コマンドを使いプロパティファイルを編集します。

4.3.3 translation.json の編集方法{XUI_DIR}/locales/*/translation.json は、対応したいロケール毎に作る必要があります。パスの中の*をロケール名（de や fr など）に置き換えたファイルが、各ロケール用の translation.json です。デフォルトでは{XUI_DIR}/locales/en/translation.json および{XUI_DIR}/locales/ja/translation.json
が存在します。

OpenAM はエンドユーザーからの HTTP リクエストの Accept-Language ヘッダーを見て、適切なロケールの translation.json を読み込みます。
従って、translation.json の編集方法は以下になります。

1. {XUI_DIR}/locales/ディレクトリ直下にロケール名のディレクトリを作ります。
2. {XUI_DIR}/locales/en/translation.json をそのディレクトリにコピーします。
3. コピーした translation.json を編集します。
コマンドによる操作例は以下になります。
# cd {XUI_DIR}# mkdir locales/de# cp locales/en/translation.json locales/de# vi locales/de/translation.json

以上で完了です。変更は OpenAM を再起動しなくても反映されますが、キャッシュの回避が必要です。
ファイルの中身は、JSON のオブジェクトがネストした構造になっています。

• 例

14

{
"config" : {（中略）"messages" : {"AppMessages" : {"invalidRealm": "The realm doesn't exist","duplicateRealm": "Duplicate realm","deleteFail": "Failed to delete","duplicateItem": "Duplicate item","invalidItem": "Invalid item","changesSaved": "Changes saved"
},
（後略）

}

以下の説明では、「"config"オブジェクト内の"messages"オブジェクト内の"AppMessages"オ
ブジェクト内の"invalidRealm"」を指し示すような場合に、「config.messages.AppMessages.invalidRealm」と略記します。
大抵の場合は、デフォルトの値（メッセージ）でファイル内を検索すれば編集すべき行はすぐに見つかります。

4.4 OpenAM 全体のタイトルの変更
以下の画面の赤枠で囲まれたタイトルを変更できます。

15

図 4 タイトルの変更

項目

内容

デフォルトのメッセージ

OpenAM

メッセージ定義ファイル{XUI_DIR}/index.html

ファイル内の該当部分<title>OpenAM</title>

メッセージ変更方法

ファイルの該当部分を編集します。

4.5 ログイン画面のメッセージの変更
4.5.1 読み込み画面
OpenAM にプラウザからログインすると、以下のような画面が一瞬表示されることがあ
ります。

16

図 5 読み込み画面

赤枠で囲んだメッセージの変更方法は以下になります。
項目

内容

デフォルトのメッセージ

Loading. . .

メッセージ定義ファイル{XUI_DIR}/index.html

ファイル内の該当部分<div id="wrapper">Loading...</div>

メッセージ変更方法

ファイルの該当部分を編集します。

場合によって、（正しく設定ができていたとしても）この画面からログイン画面に遷移しない場合があります。その場合には、ブラウザでページのリロード（更新）をすると正しく遷移します。
そのため、このメッセージには「画面が遷移しない場合にはリロードをするとよい」というようなことを書いておくことが推奨されます。

17

4.5.2 ログイン画面（共通設定）

図 6 ログイン画面の認証モジュール共通のメッセージ項目

内容

デフォルトのメッセージ

ユーザー名を記憶する。
ログイン

メッセージ定義ファイル

translation.json

変更する属性

templates.user.LoginTemplate.loginRemember
common.user.logintranslation.json の編集方法

メッセージ変更方法

loginRemember の小文字は自動的に大文字になります。

18

4.5.3 ログイン画面（ユーザーデータストア認証の場合）

図7

データストア認証のログイン画面のメッセージ項目

内容

デフォルトのメッセージOPENAM へのサインイン
ユーザー名
パスワード

メッセージ定義ファイル{OPENAM_INSTALL}/config/auth/default_ja/DataStore.xml
header="OpenAM へのサインイン"

ファイル内の該当部分<Prompt>ユーザー名:</Prompt><Prompt>パスワード:</Prompt>

19

項目

内容

メッセージ変更方法

ファイルの該当部分を編集します。

header の小文字は自動的に大文字になります。
<Prompt>要素の末尾の:（半角コロン）は自動的に除去されます。
（半角コロンの後にスペースなどが入っていると取り除かれません）

4.6 ログイン画面（LDAP 認証モジュールの場合）

図 8 LDAP 認証のログイン画面のメッセージ項目

内容

デフォルトのメッセージ

このサーバーは LDAP 認証を使用します
ユーザー名
パスワード

メッセージ定義ファイル{OPENAM_INSTALL}/config/auth/default_ja/LDAP.xml
20

項目

内容

ファイル内の該当部分

header="このサーバーは LDAP 認証を使用します"<Prompt>ユーザー名:</Prompt><Prompt>パスワード:</Prompt>
メッセージ変更方法

ファイルの該当部分を編集します。

header の小文字は自動的に大文字になります。
<Prompt>要素の末尾の:（半角コロン）は自動的に除去されます。
（半角コロンの後にスペースが入っていると取り除かれません）

4.7 ログアウト、セッションタイムアウト画面
4.7.1 共通設定

図 9 ログアウト、セッションタイムアウト画面共通のメッセージ項目

内容

デフォルトのメッセージ

ログインページに戻りますメッセージ定義ファイル

translation.json

変更する属性

common.user.returnToLoginPage
21

項目

内容

メッセージ変更方法

translation.json の編集方法

4.7.2 ログアウト画面

図 10 ログアウト画面のメッセージ項目

内容

デフォルトのメッセージ

ログアウトしました。

メッセージ定義ファイル

translation.json

変更する属性

templates.user.RestLogoutTemplate.loggedOut

メッセージ変更方法

translation.json の編集方法

22

4.7.3 セッションタイムアウト画面

図 11 セッションタイムアウト画面のメッセージ項目

内容

デフォルトのメッセージ

セッションの有効期限が切れました。

メッセージ定義ファイル

translation.json

変更する属性

templates.user.SessionExpiredTemplate.sessionExpired

メッセージ変更方法

translation.json の編集方法

4.8 ログイン失敗時のエラーメッセージの変更
4.8.1 ログインエラーメッセージの表示のされ方
ログイン時のエラーメッセージはログインに失敗したときに下の図のようにログイン画
面の上部に赤い背景で約 2 秒間表示されます。赤枠で囲った部分が変更できるメッセージ
です。

23

図 12

ログインエラーメッセージ

4.8.2 ログインエラーメッセージの変更方法
上述のログインエラーメッセージは一部を除いて{OPENAM_INSTALL}/WEB-INF/classes/amAuth_ja.properties で設定できます。
デフォルトの amAuth_ja.properties ファイルは、{OPENAM_INSTALL}/WEB-INF/lib/openam-core-14.x.x.jar の中にあります。メッセージを変更したい場合は、まず jar ファイルを展開し、その中にある amAuth_ja.properties
を{OPENAM_INSTALL}/WEB-INF/classes/ディレクトリにコピーして編集してください。
ファイル名の_ja の部分は、ロケールを表しています。他のロケール（‘de’ や’fr’）のメッ
セージを変更したい場合は、そのロケールに対応したファイルを編集してください。また、英語（‘en’）の場合は、ロケールの名前抜きの’amAuth.properties’ という名称のファイルを編集してください。

4.8.3 エラー原因とエラーメッセージの対応
amAuth_ja.properties には 100 から 124 までの 25 個のログインエラーメッセージが定義されています。このファイルの編集方法はメッセージプロパティファイルの編集方法を参24

照してください。
そのファイル内でのエラーメッセージ定義の書式は以下のようになっています。
107=認証に失敗しました。|login_failed_template.jsp=（イコール）の前の数字がエラーの番号（エラーコード）です。=（イコール）と|（バーティカルバー）の間の部分がエラーメッセージとして表示される文字列になります。|（バーティカルバー）以降の部分は変更しないでください。
以下によく使われるエラーコードとそれに対応するデフォルトのエラーメッセージ、そのエラーが出る原因を列挙します。
デフォルトのエラーメッ
エラー原因

セージ

エラーコード

ユーザーデータス

ユーザーがログインするには

100

トアの

プロファイルが必要です

検索エラー
ユーザーアカウン

ユーザーがアクティブではあ

トの状態が

りません

104

「非アクティブ」
通常のエラー

認証に失敗しました。

107

URL のクエリ文

認証モジュールが拒否されま

111

字列で指定した

した

認証モジュールが利用できない最大セッション数

最大セッション数の限度に到の上限に到達達しました。

115

その他のよく使われるエラーメッセージとして、認証モジュール内で例外が発生した場合のエラーメッセージがあります。その修正方法は以下になります。
項目

内容

デフォルトのメッセージ

不明なエラー。システム管理者にお問い合わせください。

エラーの原因認証モジュール内で例外が発生した。

メッセージ定義ファイル

translation.json

変更する属性

config.messages.CommonMessages.unknown

25

項目

内容

メッセージ変更方法

translation.json の編集方法

amAuth_ja.properties に定義されていないエラーメッセージが表示される場合もあります。その場合はエラーに応じたメッセージが表示されます。

26

5 プロファイル画面/ダッシュボードのカスタマイズ
本章では、ユーザーのプロファイル画面とダッシュボードのカスタマイズについて説明します。プロファイル画面は OpenAM ログイン後に表示されるデフォルトの画面です。「基本情報」タブの画面と「パスワード」タブの画面があり、ダッシュボードはプロファイル画
面からリンクを押すことで表示出来ます。

• プロファイル画面

図 13 プロファイル画面 (基本情報)

図 14

プロファイル画面 (パスワード変更)27

• ダッシュボード

図 15

ダッシュボード

5.1 プロファイル画面の変更
プロファイル画面は下記のテンプレートファイルを元に表示されます。プロファイル画面の変更は基本的にこのテンプレートファイルに対して実施します。

• /opt/osstech/var/lib/tomcat/webapps/openam/XUI/templates/user/UserProﬁleTemplate.html

5.1.1 プロファイル画面の非表示
テンプレートファイルを空のファイルとする事で、プロファイル画面は非表示となります。
# cd /opt/osstech/var/lib/tomcat/webapps/openam/XUI/templates/user# > UserProfileTemplate.html

テンプレートファイルが空の場合は、次のような画面となります。

28

図 16

テンプレートファイルを空とした場合の表示

5.1.1.1 プロファイル画面の任意のメッセージを表示
テンプレートファイルの記述を全て削除し、次のような内容にして、任意のメッセージを表示することも可能です。
<div class="container"><div class="page-header"><h1>ページが見つかりません</h1></div></div>

この場合は、次のような画面となります。

図 17 任意のメッセージのプロファイル画面

29

表示するメッセージは多言語対応可能です。translation.json の編集方法に従い、各言語のtranslation.json に任意のメッセージ定義を追加します。
• ja/translation.json の設定例{
"config" : {〜"templates" : {"user" : {〜"UserProfileTemplate" : {"changeEmailAddress" : "電子メールアドレスの変更","changeSecurityData" : "パスワードの変更","changeSiteIdentification" : "サイト ID の変更","cantDisplayThisPage" : "ページが見つかりません"},〜}

テンプレートファイルに追加した translation.json の定義を表示する記述を行います。
<div class="container"><div class="page-header"><h1>{{t "templates.user.UserProfileTemplate.cantDisplayThisPage"}}</h1></div></div>

30

5.1.2 プロファイルの基本情報の表示項目の削除
プロファイル画面の基本情報には「ユーザー名」や「電子メールアドレス」などが表示されます。不要な項目を削除する手順を説明します。
テンプレートファイル内の<div class="panel-body"> 内の定義がプロファイルの項目です。
{{#user}}{{> form/_basicInput property="username" label="common.user.username" readonl
y=true}}{{> form/_basicInput property="givenName" label="common.user.givenName"}}{{> form/_basicInput property="sn" label="common.user.sn" required="true"}}{{> form/_basicInput type="email" property="mail" label="common.user.emailAdd
ress"
extraAttributes='data-validator="validEmailAddressFormat" data-validatorevent="keyup"' }}{{> form/_basicInput type="tel" property="telephoneNumber" label="common.user.
phoneNumber"
extraAttributes='data-validator="validPhoneFormat" data-validator-event="
keyup"'}}{{/user}}

ここから不要な項目の定義を削除することで、プロファイル画面からその項目の表示を無くすことが出来ます。

5.1.3 パスワード変更の非表示
パスワード変更画面を非表示にする方法を説明します。テンプレートファイルからパス
ワード変更に関する記述を削除します。「タブのメニュー」と「パスワード変更画面」の 2
つの記述を削除します。

31

5.1.3.1 タブのメニューの削除
下記の tab-menu から userPasswordTab のリンクの行を削除します。

• 変更前<div class="tab-menu"><ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#userDetailsTab" role="tab" data-toggle="tab">{{t "common.user.basicInfo"}}</a></li><li><a href="#userPasswordTab" role="tab" data-toggle="tab">{{t "common.u
ser.password"}}</a></li></ul></div>• 変更後<div class="tab-menu"><ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#userDetailsTab" role="tab" data-toggle="tab">{{t "common.user.basicInfo"}}</a></li></ul></div>

5.1.3.2 パスワード変更画面の削除
id=userPasswordTab の記述を全て削除します。
• 削除する内容<div role="tabpanel" class="tab-pane panel panel-default fr-panel-tab" id="userPa
sswordTab"><form class="form-horizontal" id="password"><div class="panel-body">〜 省略 〜<div class="panel-footer clearfix">{{> form/_basicSaveReset}}</div></form></div>

32

テンプレートファイルからパスワードの記述を削除すると次のような画面になります。

図 18

パスワードを削除したプロファイル画面

5.1.4 デフォルトでアクティブとなるタブの変更
プロファイル画面はデフォルトでは「基本情報」タブが表示されます。このデフォルトの表示を「パスワード」タブに変更する方法を説明します。この変更を実施すると、ログイン
後に表示されるプロファイル画面はパスワード変更画面となります。

5.1.4.1 AppConﬁguration.js の編集/opt/osstech/var/lib/tomcat/webapps/openam/XUI/conﬁg/AppConﬁguration.js の routes のconﬁg/routes/UserRoutesConﬁg を conﬁg/routes/CustomUserRoutesConﬁg に変更します。
• 変更前
moduleClass: "org/forgerock/commons/ui/common/main/Router",configuration: {routes: {},loader: [{ "routes": "config/routes/AMRoutesConfig" },{ "routes": "config/routes/CommonRoutesConfig" },{ "routes": "config/routes/UserRoutesConfig" },

• 変更後

33

moduleClass: "org/forgerock/commons/ui/common/main/Router",configuration: {routes: {},loader: [{ "routes": "config/routes/AMRoutesConfig" },{ "routes": "config/routes/CommonRoutesConfig" },{ "routes": "config/routes/CustomUserRoutesConfig" },5.1.4.2 CustomUserRoutesConﬁg.js の作成
UserRoutesConﬁg.js をコピーして CustomUserRoutesConﬁg.js を作成します。
# cd /opt/osstech/var/lib/tomcat/webapps/openam/XUI/config/routes# cp -p UserRoutesConfig.js CustomUserRoutesConfig.js

5.1.4.3 CustomUserRoutesConﬁg.js の編集
defaults の定義を details から password に変更します。
• 変更前"profile": {view: "UserProfileView",
role: "ui-self-service-user",url: /^profile\/(.*)/,
pattern: "profile/?",defaults: ["details"],navGroup: "user"
},

• 変更後
"profile": {view: "UserProfileView",
role: "ui-self-service-user",url: /^profile\/(.*)/,
pattern: "profile/?",defaults: ["password"],navGroup: "user"},

34

5.1.5 基本情報の非表示 (パスワード変更画面のみ表示)
プロファイル画面の「基本情報」タブを表示せず、パスワード変更画面のみ表示する方法
を説明します。「デフォルトでアクティブとなるタブの変更」を実施し、テンプレートファ
イルの「タブのメニュー」から基本情報のリンクと「基本情報の画面」に関する記述を削除します。

5.1.5.1 デフォルトでアクティブとなるタブの変更
デフォルトでアクティブとなるタブの変更の手順を実施します。

5.1.5.2 タブのメニューの削除
下記の tab-menu から userDetailsTab のリンクの行を削除します。

• 変更前<div class="tab-menu"><ul class="nav nav-tabs" role="tablist"><li class="active"><a href="#userDetailsTab" role="tab" data-toggle="tab">{{t "common.user.basicInfo"}}</a></li><li><a href="#userPasswordTab" role="tab" data-toggle="tab">{{t "common.u
ser.password"}}</a></li></ul></div>• 変更後<div class="tab-menu"><ul class="nav nav-tabs" role="tablist"><li><a href="#userPasswordTab" role="tab" data-toggle="tab">{{t "common.u
ser.password"}}</a></li></ul></div>

5.1.5.3 基本情報画面の削除
id=userDetailsTab の記述を全て削除します。
• 削除する内容

35

<div role="tabpanel" class="tab-pane active panel panel-default fr-panel-tab"
id="userDetailsTab"><form class="form-horizontal" id="details" data-form-validate="true"><div class="panel-body">〜 省略 〜<div class="panel-footer clearfix">{{> form/_basicSaveReset}}</div></form></div>

作業を全て行うと次のようなパスワード変更だけの画面になります。

図 19 基本情報を削除したプロファイル画面36

5.2 ダッシュボードの変更
ダッシュボードは下記のテンプレートファイルを元に表示されます。ダッシュボードの変更は基本的にこのテンプレートファイルに対して実施します。

• /opt/osstech/var/lib/tomcat/webapps/openam/XUI/templates/user/dashboard/DashboardTemplate.html

5.2.1 ダッシュボードの非表示
テンプレートファイルを空とする事で、 画面を非表示とすることが出来ます。
# cd /opt/osstech/var/lib/tomcat/webapps/openam/XUI/templates/user/dashboard# > DashboardTemplate.html

テンプレートファイルを空とした場合は、次のような画面となります。

図 20

テンプレートファイルを空とした場合の表示

プロファイル画面の任意のメッセージを表示と同様の手順で、ダッシュボードに任意のメッセージを表示することが可能です。

37

5.2.1.1 メニューの「ダッシュボード」の削除
プロファイル画面の上部のメニューに「ダッシュボード」のリンクがあります。このリンクを削除する方法を説明します。

/opt/osstech/var/lib/tomcat/webapps/openam/XUI/conﬁg/AppConﬁguration.js か ら user のurls で定義している dashboard の記述を全て削除します。
• 変更前"user" : {"urls": {"dashboard": {"url": "#dashboard/","name": "config.AppConfiguration.Navigation.links.dashboard","icon": "fa fa-dashboard","visibleToRoles": ["ui-self-service-user"]},"uma": {"icon": "fa fa-user",• 変更後"user" : {"urls": {"uma": {"icon": "fa fa-user",この変更で上部メニューからダッシュボードのリンクが削除されます。

38

図 21 ダッシュボードのリンク削除

5.2.2 ダッシュボードの表示項目の削除
テンプレートファイルを編集し、不要な項目を削除する手順を説明します。
<div class="container" id="dashboard">{{> headers/_Title title="openam.dashboard.title" }}<section id="myApplicationsSection" class="dashboard-section"></section><section id="myTrustedDevicesSection" class="dashboard-section"></section><section id="myOAuthTokensSection" class="dashboard-section"></section><section id="authenticationDevices" class="dashboard-section"></section><section id="authenticationFIDO2Devices" class="dashboard-section"></section></div>

不要な項目の section を削除します。例えば下記の場合は認証デバイスの管理の画面のみ表示されます。
<div class="container" id="dashboard">{{> headers/_Title title="openam.dashboard.title" }}<section id="authenticationDevices" class="dashboard-section"></section></div>

39

図 22 認証デバイスの管理のみ表示

5.3 ユーザーメニューの編集
プロファイル画面とダッシュボードの共通して右上に表示される、ユーザーメニューの編集について説明します。

図 23 ユーザーメニュー

ユーザーメニューの編集は下記のファイルを修正します。

• /opt/osstech/var/lib/tomcat/webapps/openam/XUI/conﬁg/AppConﬁguration.js

40

5.3.1 プロファイルのリンク削除
メニューに含まれるプロファイルのリンクを削除する手順を説明します。AppConﬁgura-tion.js の navGroup の user の #profile/details の定義を削除します。
• 変更前
}, {
"href": "#profile/details","i18nKey": "common.user.profile","navGroup": "user","visibleToRoles": ["ui-self-service-user"]}, {"href": "#realms","i18nKey": "common.user.administration","navGroup": "user","visibleToRoles": ["ui-realm-admin"]
},

• 変更後
}, {
"href": "#realms","i18nKey": "common.user.administration","navGroup": "user","visibleToRoles": ["ui-realm-admin"]},

変更後は次のような画面になります。

41

図 24

プロファイルのリンク削除

5.3.2 ログアウトのリンク削除
メニューに含まれるログアウトのリンクを削除する手順を説明します。AppConﬁgura-tion.js の #logout/ の定義に下記に示す admin に関する定義を追加します。これはプロファ
イルやダッシュボードからはログアウトのリンクを削除し、管理コンソールのメニューからは削除しないためです。

• 変更前
}, {
"href": "#logout/","i18nKey": "common.form.logout"
}],

• 変更後
}, {
"href": "#logout/","i18nKey": "common.form.logout","navGroup": "admin","visibleToRoles": ["ui-realm-admin"]}],42

変更後は次のような画面になります。

図 25 ログアウトのリンク削除

43

6 遷移先 URL の変更について
OpenAM では、ログインに成功したユーザー、失敗したユーザーをそれぞれ任意の URLに遷移させることが可能です。
設定するには OpenAM の管理者としてログインして以下の手順を踏みます。

1. OpenAM 管理コンソールで [レルム] →対象のレルム→ [認証] → [認証連鎖] →対象の認証連鎖→ [設定] に遷移します。

2. ログイン成功時に遷移する URL を [ログイン成功 URL] に、ログイン失敗時に遷移する URL を [ログイン失敗 URL] に設定します。

3. [変更の保存] をクリックして設定を保存します。
以上で完了です。
注意点として、ユーザー ID/パスワードの間違いによるログイン失敗に限らず、その他の全てのログインエラー発生時も上記で設定した URL に遷移します。そのため、ブラウザ画
面の挙動からはログイン失敗の原因が判別できない点にご注意ください。

44

7 改版履歴• 2019 年 12 月 9 日 リビジョン 1.0– 初版作成• 2022 年 7 月 14 日 リビジョン 1.1– 表紙の社名を OSSTech 株式会社に変更• 2023 年 5 月 31 日 リビジョン 1.2– OpenAM のロゴの変更を反映–「プロファイル画面 / ダッシュボードのカスタマイズ」を追加–「native2ascii コマンドについて」を追加

45