Help us understand the problem. What is going on with this article?

OpenAMログイン画面のUIを変更する

More than 1 year has passed since last update.

はじめに

OpenAMのログイン画面を変更する方法。

OpenAM CommunityEditionをデプロイし、初期設定を終えた画面は以下。

image.png

今回は、以下のように画面を変更する。

image.png

変更するポイントは

  • タイトルの設定
  • テーマの設定
  • ログイン画面で実行するスクリプト
  • ロゴ下のメッセージの修正
  • フッターの修正

image.png

OpenAM UIの修正

タイトルの設定

※ファイルパスはTomcatへデプロイ後のファイルパス

titleタグの値を修正

XUI/index.html
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cattle</title>
    </head>

テーマの設定

テーマは XUI/config/ThemeConfiguration.js に設定でき、以下では

  • スタイルシート
  • アイコンイメージ
  • ロゴイメージ

の設定をしています。

また設定したテーマをどの realm で適用させるかも指定します。

XUI/config/ThemeConfiguration.js
        "cattle-theme": {
            stylesheets: ["themes/dark/css/bootstrap.min.css", "css/structure.css", "themes/dark/css/theme-dark.css"],
            icon: "images/cattle.png",
            settings: {
                loginLogo: {
                    src: "images/cattle.png",
                    title: "Cattle",
                    alt: "Cattle",
                    height: "256px",
                    width: "256px"
                }
            }
        },
...
    mappings: [
        { theme: "cattle-theme", realms: ["/"] }
    ]

※ロゴイメージは XUI/images/cattle.png に配置しています。

ログイン画面で実行するスクリプト

XUI/templates/common/LoginHeaderTemplate.html はログインヘッダーのテンプレートになります。

スクリプトタグを最終行に追加することで、追記したスクリプトが適用されます。

以下は、

  • ドキュメントタイトルの設定(機能単位に設定したい場合)
  • ロゴをクリックした際の画面遷移

を出来るようなスクリプトを記述しています。

XUI/templates/common/LoginHeaderTemplate.html
<script language="javascript" type="text/javascript">
   document.title = "CATTLE";
   $(".main-logo").click(function() {
     location.href = "https://qiita.com/";
   });
</script>

ロゴ下のメッセージの修正

XUI/templates/openam/authn/DataStore1.html
    {{#if reqs.header}}
        <div class="page-header">
            <h1 class="text-center">Cattleへのサインイン</h1>
        </div>
    {{/if}}

フッターの修正

XUI/templates/common/FooterTemplate.html
<div class="container">
    <p>
        CATTLE
    </p>
</div>

最後に

今回は、必要最小限の要件(ログイン画面を既存サービスに合わせたい)にのみ対応したので、ちょっと無理やりコードに手を入れて修正しました。(マネできるようなコードではないです。。。)

このような要件は意外にあるのではないかな?と思ったので。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした