intra-mart Accel Platform 認証プログラミングガイド 第7版 2018-04-01

6.3. ログインポートレット対応

コラム

ログインポートレットは2017 Winter(Rebecca)より利用できます。

注意

本設定を利用する場合は、以下のモジュールが必要です。
  • モジュール名:「ポータル」
    モジュールID: jp.co.intra_mart.im_portal
  • モジュール名:「ログインポートレット」
    モジュールID: jp.co.intra_mart.im_login_portlet
ログインポートレットは、一般ユーザ向けのログイン処理が行えるログイン機能を持つポートレットです。
ログインポートレットを利用する場合は、「ログイン画面表示設定」画面から設定を有効にする必要があります。
本ページでは、ログインポートレットの拡張機能の対応方法について説明します。
また、本ページでは以下の赤枠の項目を「ログインフォーム」と称します。
../../_images/login_portlet_2.png

6.3.1. ログインポートレットに任意のページを差し込む方法

ログインポートレットでは、ログインポートレット内に任意のページを差し込むことができます。
お客様が作成したページや画像をログインポートレット内の任意の位置に差し込み、ログインポートレットの画面を自由にカスタマイズできます。
設定ファイルについての詳細は、「設定ファイルリファレンス」-「ログインポートレット表示設定」を参照してください。
画面作成の際は、「ポートレット プログラミングガイド」-「注意事項」も併せて確認してください。

6.3.1.1. ログインポートレットの画面構成

ログインポートレットの画面は、以下で構成されています。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="login-portlet-view">

  <div id="login-portlet-view-top">
    <!-- position要素がTOPの場合は、ここに差し込まれます。 -->
  </div>

  <div id="login-portlet-view-middle">

    <div id="login-portlet-view-left">
      <!-- position要素がLEFTの場合は、ここに差し込まれます。 -->
    </div>

    <div id="login-portlet-view-center">
      <div>
        <!-- 通常のログイン画面はここに差し込まれます。 -->
      </div>
      <!-- position要素がCENTERの場合は、ここに差し込まれます。 -->
    </div>

    <div id="login-portlet-view-right">
      <!-- position要素がRIGHTの場合は、ここに差し込まれます。 -->
    </div>

  </div>

  <div id="login-portlet-view-bottom">
    <!-- position要素がBOTTOMの場合は、ここに差し込まれます。 -->
  </div>
</div>
表示位置設定の値によって、以下のid属性が指定されたdiv要素内にページが差し込まれます。
  • CENTER(中心)の場合: id属性 login-portlet-view-center
  • TOP(上)の場合: id属性 login-portlet-view-top
  • BOTTOM(下)の場合: id属性 login-portlet-view-bottom
  • LEFT(左)の場合: id属性 login-portlet-view-left
  • RIGHT(右)の場合: id属性 login-portlet-view-right

6.3.1.2. 表示位置に任意のページを差し込むサンプル実装

全ての表示位置に差し込みを行った場合のサンプルは以下です。
../../_images/login_portlet_1.png
上記のサンプルの設定方法を紹介します。
まず、差し込みたいページを作成します。以下は作成例です。
  • プレゼンテーション・ページ(sample_top.html)
1
2
3
4
5
6
7
<style type="text/css">
  .sample-top {
    text-align: center;
    border: 1px solid skyblue;
  }
</style>
<div class="sample-top">TOPの場合</div>
  • ファンクション・コンテナ(sample_top.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
  • プレゼンテーション・ページ(sample_top2.html)
1
2
3
4
5
6
7
8
<style type="text/css">
#sample-top2 {
  font-size: xx-small;
  border: 1px solid cyan;
  text-align: center;
}
</style>
<div id="sample-top2">ソート数によって差し込まれる位置の並び順を指定できます。</div>
  • ファンクション・コンテナ(sample_top2.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
  • プレゼンテーション・ページ(sample_bottom.html)
1
2
3
4
5
6
7
8
<style type="text/css">
  .sample-bottom {
    border: 1px solid tomato;
    text-align: center;
    margin-top: 10px;
  }
</style>
<div class="sample-bottom">BOTTOMの場合</div>
  • ファンクション・コンテナ(sample_bottom.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
  • プレゼンテーション・ページ(sample_right.html)
1
2
3
4
5
6
7
<style type="text/css">
  .sample-right {
    text-align: right;
    border: 1px solid lime;
  }
</style>
<div class="sample-right">RIGHTの場合</div>
  • ファンクション・コンテナ(sample_right.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
  • プレゼンテーション・ページ(sample_left.html)
1
2
3
4
5
6
7
8
9
<style type="text/css">
  #login-portlet-view-middle {
    align-items: center;
  }
  .sample-left {
    border: 1px solid olive;
  }
</style>
<div class="sample-left">LEFTの場合</div>
  • ファンクション・コンテナ(sample_left.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
  • プレゼンテーション・ページ(sample_center.html)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style type="text/css">
  .sample-center {
    border: 1px solid orange;
    text-align: center;
    font-size: x-small;
  }
</style>
<div class="sample-center">
  CENTERの場合は<br>
  ログインフォームの下側に<br>
  差し込まれます。
</div>
  • ファンクション・コンテナ(sample_center.js)
1
2
3
function init() {
  // 任意の処理を実装してください。
}
今回は例として、 jssp/src/sample に配置します。
次に、設定ファイルに作成したページ、および、表示位置などの情報を設定します。
今回は例として、 conf/login-portlet-view-config/login-portlet-view-config_sample.xml に設定ファイルを作成します。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<login-portlet-view-config xmlns="http://www.intra-mart.jp/im_login_portlet/login-portlet-view-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/im_login_portlet/login-portlet-view-config ../../schema/login-portlet-view-config.xsd ">
    <view>
        <page>/sample/sample_top</page>
        <position>TOP</position>
        <sort>100</sort>
    </view>
    <view>
        <page>/sample/sample_top2</page>
        <position>TOP</position>
        <sort>200</sort>
    </view>
    <view>
        <page>/sample/sample_bottom</page>
        <position>BOTTOM</position>
        <sort>100</sort>
    </view>
    <view>
        <page>/sample/sample_right</page>
        <position>RIGHT</position>
        <sort>100</sort>
    </view>
    <view>
        <page>/sample/sample_left</page>
        <position>LEFT</position>
        <sort>100</sort>
    </view>
    <view>
        <page>/sample/sample_center</page>
        <position>CENTER</position>
        <sort>100</sort>
    </view>
</login-portlet-view-config>
設定後、ユーザモジュールを作成、および、設定しアプリケーションサーバを再起動してください。
ログインポートレットに作成したページが差し込まれることを確認してください。
このように、ページ内にJavaScriptやCSSなどの任意の処理を実装することで、ログインポートレットを自由にカスタマイズできます。

6.3.2. ログインフォームの表示を制御する方法

ログインポートレットでは、ログインフォームを表示するかどうかを制御できます。
先述の通り、ログインポートレットでは任意のページを差し込むことができますが、ログインフォームはカスタマイズできません。
ログインフォームを利用せずに独自のログインフォームを用意したい場合や、何らかの理由により、ログインフォームを非表示にしたい場合は本対応を行ってください。
以下のインタフェースを実装したクラスを作成してください。
jp.co.intra_mart.foundation.portal.portlet.login.LoginViewController
標準の動作仕様は以下です。
  • 実装されたクラスが存在しない場合は、ログインフォームを表示する
  • ログインフォームを非表示にするクラスが1つでも存在する場合、ログインフォームを非表示にする
ログインポートレットモジュールには、標準で実装済みの機能、および、クラスはありません。

コラム

SAML認証機能 ログインポートレット連携モジュールを利用している場合は、SAML認証機能側の表示制御が機能します。
SAML認証機能側の表示制御については、「SAML認証プログラミングガイド」-「ログインフォームの表示方法を制御する」を参照してください。

6.3.2.1. リクエストパラメータによってログインフォームの表示を制御するサンプル実装

ログインフォームを非表示にする場合のサンプルの実装方法を紹介します。
今回は例として、パラメータ「login_form_disabled」がリクエストに付与されている場合に、ログインフォームを非表示にします。
まず、インタフェースを実装したクラスを作成します。以下は作成例です。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package jp.co.sample.portal.portlet.login;

import javax.servlet.http.HttpServletRequest;

import jp.co.intra_mart.foundation.portal.portlet.login.LoginViewController;

/**
 * サンプルの実装です。<br>
 * login_form_disabledパラメータが付与されている場合は、ログインフォームを非表示にします。
 * @author INTRAMART
 * @version 8.0.0
 */
public class SampleLoginViewController implements LoginViewController {

    @Override
    public boolean isView(final HttpServletRequest request) {
        if (request.getParameter("login_form_disabled") != null) {
            // login_form_disabledパラメータが付与されている場合はログインフォームを非表示にします。
            return false;
        }
        return true;
    }
}
次に作成したクラスをサービス定義ファイルに追加します。以下は作成例です。
  • resources/META-INF/services/jp.co.intra_mart.foundation.portal.portlet.login.LoginViewController
jp.co.sample.portal.portlet.login.SampleLoginViewController
作成後、ユーザモジュールを作成、および、設定しアプリケーションサーバを再起動してください。
以下のURLにアクセスすることで、ログインフォームが非表示になることが確認できます。
http://<HOST>:<PORT>/<CONTEXT_PATH>/login?login_form_disabled