6.3. ログインポートレット対応¶
項目
コラム
ログインポートレットは2017 Winter(Rebecca)より利用できます。
注意
本設定を利用する場合は、以下のモジュールが必要です。
- モジュール名:「ポータル」モジュールID: jp.co.intra_mart.im_portal
- モジュール名:「ログインポートレット」モジュールID: jp.co.intra_mart.im_login_portlet
ログインポートレットは、一般ユーザ向けのログイン処理が行えるログイン機能を持つポートレットです。
ログインポートレットを利用する場合は、「ログイン画面表示設定」画面から設定を有効にする必要があります。
詳細は「テナント管理者操作ガイド」-「ログイン画面の表示を切り替える」を参照してください。
本ページでは、ログインポートレットの拡張機能の対応方法について説明します。
また、本ページでは以下の赤枠の項目を「ログインフォーム」と称します。
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. 表示位置に任意のページを差し込むサンプル実装¶
全ての表示位置に差し込みを行った場合のサンプルは以下です。上記のサンプルの設定方法を紹介します。まず、差し込みたいページを作成します。以下は作成例です。
- プレゼンテーション・ページ(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.LoginViewControllerjp.co.sample.portal.portlet.login.SampleLoginViewController作成後、ユーザモジュールを作成、および、設定しアプリケーションサーバを再起動してください。以下のURLにアクセスすることで、ログインフォームが非表示になることが確認できます。http://<HOST>:<PORT>/<CONTEXT_PATH>/login?login_form_disabled