Cisco Identity Services Engine ユーザ ガイド リリース 1.2
スポンサー ポータルおよびゲスト ポータルのカスタマイズのサンプル コード
スポンサー ポータルおよびゲスト ポータルのカスタマイズのサンプル コード
発行日;2014/01/15 | 英語版ドキュメント(2013/10/25 版) | ドキュメントご利用ガイド | ダウンロード ; この章pdf , ドキュメント全体pdf (PDF - 7MB) | フィードバック

目次

スポンサー ポータルおよびゲスト ポータルのカスタマイズのサンプル コード

スポンサー ポータルからのカスタム ゲスト通知のサンプル コード

電子メール通知テンプレート

SMS テキスト メッセージ通知テンプレート

印刷通知テンプレート

ゲスト ポータル用のカスタム ページのサンプル HTML

カスタム HTML ページで使用するフィールド

ログイン ページのサンプル HTML

成功したゲスト ログイン ページのサンプル HTML

エラー ページのサンプル HTML

アクセプタブル ユース ポリシー(AUP)ページのサンプル HTML

パスワードの変更ページのサンプル HTML

アカウントの登録ページのサンプル HTML

アカウントの登録結果ページのサンプル HTML

デバイス登録ページのサンプル HTML

カスタム ゲスト ポータル HTML ページの style.css のサンプル

スポンサー ポータルおよびゲスト ポータルのカスタマイズのサンプル コード

Cisco ISE では、スポンサー ポータルのゲスト通知およびゲスト ポータルのルック アンド フィールをカスタマイズできます。

「スポンサー ポータルからのカスタム ゲスト通知のサンプル コード」

「ゲスト ポータル用のカスタム ページのサンプル HTML」

スポンサー ポータルからのカスタム ゲスト通知のサンプル コード

スポンサーがゲストにログイン クレデンシャルを送信するために使用するテンプレートをカスタマイズできます。

「電子メール通知テンプレート」

「SMS テキスト メッセージ通知テンプレート」

「印刷通知テンプレート」

電子メール通知テンプレート

次の例は、英語のテンプレートを使用して電子メールの本文にログイン情報を示したものです。

Welcome to the Guest Portal, your username is $username$ and password is $password$

$username$ および $password$ 文字列は、ゲスト ユーザ アカウントのユーザ名とパスワードに置き換えられます。

電子メールの本文では、特殊変数を使用して、作成したゲスト アカウントの詳細を指定できます。これらの変数を使用する場合は、すべて大文字またはすべて小文字を使用する必要があり、混在させることはできません。たとえば、ユーザ名の文字列は $USERNAME$ または $username$ にすることができますが、$UserName$ にすることはできません。

電子メール通知テンプレートで次の変数を使用できます。

$USERNAME$ = ゲスト用に作成したユーザ名。

$PASSWORD$ = ゲスト用に作成したパスワード。

$STARTTIME$ = ゲスト アカウントが有効になる時間。

$ENDTIME$ = ゲスト アカウントが期限切れになる時間。

$FIRSTNAME$ = ゲストの名。

$LASTNAME$ = ゲストの姓。

$EMAIL$ = ゲストの電子メール アドレス。

$TIMEZONE$ = ユーザのタイム ゾーン。

$MOBILENUMBER$ = ゲストの携帯電話の番号。

$OPTION1$ = 編集用の任意指定のフィールド。

$OPTION2$ = 編集用の任意指定のフィールド。

$OPTION3$ = 編集用の任意指定のフィールド。

$OPTION4$ = 編集用の任意指定のフィールド。

$OPTION5$ = 編集用の任意指定のフィールド。

$DURATION$ = アカウントが有効になる期間。

$RESTRICTEDWINDOW$ = ゲストがログインできない時間枠。

$TIMEPROFILE$ = 割り当てられた時間プロファイルの名前。

SMS テキスト メッセージ通知テンプレート

テキスト メッセージでは、特殊変数を使用して、作成したゲスト アカウントの詳細を指定できます。これらの変数を使用する場合は、すべて大文字またはすべて小文字を使用する必要があり、混在させることはできません。たとえば、ユーザ名の文字列は $USERNAME$ または $username$ にすることができますが、$UserName$ にすることはできません。

SMS テキスト メッセージ通知テンプレートで次の変数を使用できます。

$USERNAME$ = ゲスト用に作成したユーザ名。

$PASSWORD$ = ゲスト用に作成したパスワード。

$STARTTIME$ = ゲスト アカウントが有効になる時間。

$ENDTIME$ = ゲスト アカウントが期限切れになる時間。

$FIRSTNAME$ = ゲストの名。

$LASTNAME$ = ゲストの姓。

$EMAIL$ = ゲストの電子メール アドレス。

$TIMEZONE$ = ユーザのタイム ゾーン。

$MOBILENUMBER$ = ゲストの携帯電話の番号。

$OPTION1$ = 編集用の任意指定のフィールド。

$OPTION2$ = 編集用の任意指定のフィールド。

$OPTION3$ = 編集用の任意指定のフィールド。

$OPTION4$ = 編集用の任意指定のフィールド。

$OPTION5$ = 編集用の任意指定のフィールド。

$DURATION$ = アカウントが有効になる期間。

$RESTRICTEDWINDOW$ = ゲストがログインできない時間枠。

$TIMEPROFILE$ = 割り当てられた時間プロファイルの名前。

テキスト メッセージをゲストの携帯電話の番号に送信するには、変数 $MOBILENUMBER$ を使用します。$MOBILENUMBER$ 変数は、スポンサーが入力した携帯電話の番号に置き換えられます。

印刷通知テンプレート

印刷版では、特殊変数を使用して、作成したゲスト アカウントの詳細を指定できます。これらの変数を使用する場合は、すべて大文字またはすべて小文字を使用する必要があり、混在させることはできません。たとえば、ユーザ名の文字列は $USERNAME$ または $username$ にすることができますが、$UserName$ にすることはできません。

印刷通知テンプレートで次の変数を使用できます。

$USERNAME$ = ゲスト用に作成したユーザ名。

$PASSWORD$ = ゲスト用に作成したパスワード。

$STARTTIME$ = ゲスト アカウントが有効になる時間。

$ENDTIME$ = ゲスト アカウントが期限切れになる時間。

$FIRSTNAME$ = ゲストの名。

$LASTNAME$ = ゲストの姓。

$EMAIL$ = ゲストの電子メール アドレス。

$TIMEZONE$ = ユーザのタイム ゾーン。

$MOBILENUMBER$ = ゲストの携帯電話の番号。

$OPTION1$ = 編集用の任意指定のフィールド。

$OPTION2$ = 編集用の任意指定のフィールド。

$OPTION3$ = 編集用の任意指定のフィールド。

$OPTION4$ = 編集用の任意指定のフィールド。

$OPTION5$ = 編集用の任意指定のフィールド。

$DURATION$ = アカウントが有効になる期間。

$RESTRICTEDWINDOW$ = ゲストがログインできない時間枠。

$TIMEPROFILE$ = 割り当てられた時間プロファイルの名前。

ゲスト ポータル用のカスタム ページのサンプル HTML

これらの例を使用すると、ゲスト ポータル ページ用の HTML ページを作成することができます。独自の HTML ページをアップロードしてカスタム ポータルを作成した場合、詳細ポリシー、言語テンプレート、およびポータル テーマは適用されません。したがって、これらの機能が重要になる場合は、独自に HTML コードを記述して類似の機能を提供するか、代わりに標準ポータル ページを使用する必要があります。

カスタム html ファイルをアップロードした場合、それらの変更はゲスト ポータルにのみ適用されます。その他のポータルでは、ポータル テーマで定義された設定が使用されます(「Web ポータルのイメージおよびカラー スキームのカスタマイズ」を参照)。ポータル間でルックアンドフィールをさらに同期するには、ポータル テーマにもカスタム ロゴとバナーをアップロードしてください。

次の HTML の例では、demo2 という名前のポータルのディレクトリ構造を参照しています。

「カスタム HTML ページで使用するフィールド」

「ログイン ページのサンプル HTML」

「成功したゲスト ログイン ページのサンプル HTML」

「エラー ページのサンプル HTML」

「アクセプタブル ユース ポリシー(AUP)ページのサンプル HTML」

「パスワードの変更ページのサンプル HTML」

「アカウントの登録ページのサンプル HTML」

「アカウントの登録結果ページのサンプル HTML」

「デバイス登録ページのサンプル HTML」

「カスタム ゲスト ポータル HTML ページの style.css のサンプル」

カスタム HTML ページで使用するフィールド

Cisco ISE 管理 UI で、次を含め、以下のフィールドの一部を定義する必要があります。

ゲスト パスワード ポリシー:[管理(Administration)] > [Web ポータル管理(Web Portal Management)] > [設定(Settings)] > [ゲスト(Guest)] > [パスワード ポリシー(Password Policy)] を選択します。

ゲスト ユーザ名ポリシー:[管理(Administration)] > [Web ポータル管理(Web Portal Management)] > [設定(Settings)] > [ゲスト(Guest)] > [ユーザ名ポリシー(Username Policy)] を選択します。

 

表 D-1 カスタム HTML ページ フィールド

フィールド
ID 名
制約事項 
ログイン ページ

ユーザ名(Username)

guestUser.name

1000 文字の英数字および特殊文字。Cisco ISE 管理で指定します。

パスワード(Password)

guestUser.password

1000 文字の英数字。Cisco ISE 管理で指定します。

アカウントの登録ページ

名(First name)

guestUser.firstName

100 文字の英数字および特殊文字

姓(Last name)

guestUser.lastName

100 文字の英数字および特殊文字

電子メール アドレス(Email address)

guestUser.emailAddress

100 文字の英数字および特殊文字

電話番号(Phone number)

guestUser.phoneNumber

1000 文字の英数字および特殊文字

会社(Company)

guestUser.company

1000 文字の英数字および特殊文字

オプション データ 1(Optional Data 1)~オプション データ 5(Optional Data 5)

guestUser.optionaData 1
guestUser.optionaData 2
guestUser.optionaData 3
guestUser.optionaData 4
guestUser.optionaData 5

4000 文字の英数字および特殊文字

TimeZone

guestUser.timezone

ドロップダウン ボックス

パスワードの変更ページ

ユーザ名(Username)

username

1000 文字の英数字および特殊文字。Cisco ISE 管理で指定します。

古いパスワード(Old Password)

currentpassword

1000 文字の英数字および特殊文字。Cisco ISE 管理で指定します。

新しいパスワード(New password)

newpassword

1000 文字の英数字および特殊文字。Cisco ISE 管理で定義します。

パスワードの確認(Confirm Password)

confirmpassword

1000 文字の英数字および特殊文字。Cisco ISE 管理で指定します。

AUP ページ

条件の承認(Accept terms and conditions)

guestUser.acceptUsePolicy

チェックボックス(Check box)

デバイス登録ページ

デバイス ID(Device ID)

registeredMac

6 ペアの英数字セット

ログイン ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="headding">ISE 1.1</td>
</tr>
<tr>
<td align="left" class="label">Guest Access</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding1">Version:1.1</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="50%" border="0" cellspacing="0" cellpadding="0">
<form id="cuesLoginForm" method="POST" action="/guestportal/LoginCheck.action">
<tr>
<td width="32%" height="30" align="left" valign="middle" class="label">Username :</td>
<td width="68%" align="left"><input alt="Username:" name="guestUser.name" id="username" type="text" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Password :</td>
<td align="left"><input alt="Password:" name="guestUser.password" id="password" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" value="Log In" />
</td>
</tr>
<input type="hidden" name="drpPassword" id="drpPassword" />
<input type="hidden" name="drpUsername" id="drpUsername" />
</form>
<!-- <form id="doSelfService" action="/guestportal/SelfService.action">-->
<!-- <input type="hidden" id="buttonClicked" name="buttonClicked" value=""></input>-->
<!-- <input type="hidden" id="switch_url" name="switch_url" value=""></input>-->
<!-- <input type="hidden" id="redirect" name="redirect" value=""></input>-->
<!-- <input type="hidden" id="err_flag" name="err_flag" value=""></input>-->
<!-- </form>-->
 
<!-- form for self service -->
<struts2:form id="selfServiceForm" action="SelfService.action">
<input type="hidden" id="buttonClicked" name="buttonClicked" value="${buttonClicked}"></input>
<input type="hidden" id="switch_url" name="switch_url" value="${switch_url}"></input>
<input type="hidden" id="redirect" name="redirect" value="${redirect}"></input>
<input type="hidden" id="err_flag" name="err_flag" value="${err_flag}"></input>
</struts2:form>
 
<struts2:form id="changePasswordForm" action="ChangePassLoginMultiPortal.action">
<input type="hidden" id="username" name="guestUser.name" value="${username}"></input>
<input type="hidden" id="password" name="guestUser.password" value="${password}"></input>
</struts2:form>
 
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left">&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><a href="javascript:doChangePassword();" class="link" >Change Password</a>&nbsp;&nbsp;
<a href="javascript:doSelf();" class="link">SelfService</a>&nbsp;&nbsp;
<a href="javascript:submitMyForm();" class="link">Device Registration</a>
</td>
</tr>
 
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doSelf()
{
document.forms[0].action = "SelfService.action";
document.getElementById("buttonClicked").value = document.getElementById("buttonClicked").value;
document.getElementById("redirect").value = document.getElementById("redirect").value;
document.getElementById("switch_url").value = document.getElementById("switch_url").value;
document.forms[0].submit();
}
 
function doChangePassword()
{
//var changePasswordForm = document.getElementById("changePasswordForm");
//changePasswordForm.submit();
document.forms[0].action = "ChangePassLoginMultiPortal.action";
document.getElementById("username").value = document.getElementById("username").value;
document.getElementById("password").value = document.getElementById("password").value;
document.forms[0].submit();
}
 
function submitMyForm(){
document.forms[0].action = "DevRegPortalLogin.action";
document.getElementById("drpUsername").value = document.getElementById("username").value;
document.getElementById("drpPassword").value = document.getElementById("password").value;
document.forms[0].submit();
}
 

</script>

成功したゲスト ログイン ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/CustomPortal/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/CustomPortal/logo.png" alt="" width="90" height="90" /></td>
<td width="72%" class="headding">ISE 1.0 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<!--INSERT HEADER HERE --><td align="left" class="headding2"> CoA Successful </td><!--END HEADER HERE -->
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<form id="loginform" action="/guestportal/Login.action" method="post">
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button2" id="button2" onclick="javascript:doOk()" value="OK" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2008-2009, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
 
function doOk()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

エラー ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Error Detected</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="heading">Error Detected in Guest Portal</td>
</tr>
<tr>
<!--INSERT ERROR HERE -->
<td height="35" align="left" class="heading">Second</td>
<!--END ERROR HERE -->
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="50%" border="0" cellspacing="0" cellpadding="0">
 
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left">&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doSelf()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

アクセプタブル ユース ポリシー(AUP)ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding2">Acceptable Use Policy</td>
</tr>
<tr>
<td align="left" >Please accept the policy:<br /><br />
 
1. You are responsible for </br>(1) maintaining the confidentiality of the password and </br>(2) all activities that occur under your username and password.
</br></br>
2. Cisco systems offers the Service for activities such as the active use of e-mail, instant messaging, browsing the World Wide Web and accessing corporate intranets. High volume data transfers, especially sustained high volume data transfers, are not permitted. Hosting a web server or any other server by use of our Service is prohibited. Trying to access someone elseâ ™s account, sending unsolicited bulk e-mail, collection of other peopleâ ™s personal data without their knowledge and interference with other network users are all prohibited.
</br></br>
3. Cisco systems reserves the right to suspend the Service if (1) Cisco systems reasonably believes that your use of the Service is unreasonably excessive or (2) you are using the Service for criminal or illegal activities.
</br></br>
4. You do not have the right to resell this Service to a third party.
 
</br></br>
5. Cisco systems reserves the right to revise, amend or modify these Terms & Conditions, our other policies and agreements, and aspects of the Service itself. Notice of any revision, amendment, or modification will be posted on Cisco systemâ ™s website and will be effective as to existing users 30 days after posting same.
</br></br></td>
</tr>
<form action="/guestportal/AcceptPolicy.action" method="post">
<tr>
<td align="left"><input type="checkbox" name="guestUser.acceptUsePolicy" id="guestUser.acceptUsePolicy" value="false" onclick="javascript:enableButtons()" />Accept terms and conditions</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><input type="Submit" id="acceptButton" value="Accept" />
<input type="button" id="declineButton" value="Decline" onclick="javascript:doDeclineTerms()"/></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</form>
</table></td>
</tr>
</table>
<form id="declineTerms" onsubmit="return true;" action="/guestportal/DeclinePolicy.action" method="post"><table class="wwFormTable">
<input type="hidden" id="buttonClicked" name="buttonClicked" value=""></input>
<input type="hidden" id="switch_url" name="switch_url" value=""></input>
<input type="hidden" id="redirect" name="redirect" value=""></input>
<input type="hidden" id="err_flag" name="err_flag" value=""></input>
</table></form>
 
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
enableButtons();
function enableButtons(){
accepttermsCheckbox = document.getElementById('guestUser.acceptUsePolicy').checked;
if (!accepttermsCheckbox) {
document.getElementById('acceptButton').disabled = true;
document.getElementById('guestUser.acceptUsePolicy').value = false;
}
else {
document.getElementById('acceptButton').disabled = false;
document.getElementById('guestUser.acceptUsePolicy').value = true;
}
}
</script>
 
<script>
function doDeclineTerms()
{
var declineTermsForm = document.getElementById("declineTerms");
declineTermsForm.submit();
}
</script>

パスワードの変更ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="headding">ISE 1.1</td>
</tr>
<tr>
<td align="left" class="label">Guest Access</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding1">Version:1.1</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="65%" border="0" cellspacing="0" cellpadding="0">
<form action="/guestportal/ChangePassword.action" method="post">
<tr>
<td height="30" align="left" valign="middle" class="label">Enter current password :</td>
<td align="left"><input alt="Password:" name="currentpassword" id="currentpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Enter new password :</td>
<td align="left"><input alt="Password:" name="newpassword" id="newpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Re-enter new password :</td>
<td align="left"><input alt="Password:" name="confirmpassword" id="confirmpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" value="Log In" />
</td>
</tr>
</form>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>

アカウントの登録ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding2">Self Registration</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<form id="selfServiceForm" action="/guestportal/SelfServiceSubmit.action" method="post">
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">First Name :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.firstName" id="firstName" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Last Name :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.lastName" id="lastName" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Email Address :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.emailAddress" id="emailId" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Phone Number :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.phoneNumber" id="phoneno" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Company :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.company" id="company" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 1 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData1" id="data1" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 2 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData2" id="data2" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 3 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData3" id="data3" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 4 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData4" id="data4" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 5 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData5" id="data5" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">TimeZone :</td>
<td width="70%" align="left"><select name="guestUser.timezone">
<option value="UTC">UTC</option>
<option value="America\New_York">America\New_York</option>
<option value="Europe\London">Europe\London</option>
</select></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" onclick="javascript:doOnSubmit()" value="Submit" />
<input type="submit" name="button2" id="button2" onclick="javascript:doCancel()" value="Cancel" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doOnSubmit()
{
var selfServiceForm = document.getElementById("selfServiceForm");
selfServiceForm.submit();
}
function doCancel()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

アカウントの登録結果ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<!--INSERT HEADER HERE --><td align="left" class="headding2"> Self Registration created user: fsdf</td><!--END HEADER HERE -->
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<!--INSERT RESULTS HERE --><tr><td width="30%" align="left" class="content"> User name: fsdf</td></tr><tr><td width="30%" align="left" class="content"> Password: 9F_</td></tr><tr><td width="30%" align="left" class="content"> First Name: fdsf</td></tr><tr><td width="30%" align="left" class="content"> Last Name: sdf</td></tr><tr><td width="30%" align="left" class="content"> Email Address: </td></tr><tr><td width="30%" align="left" class="content"> Phone Number: </td></tr><tr><td width="30%" align="left" class="content"> Company: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 1: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 2: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 3: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 4: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 5: </td></tr><!--END RESULTS HERE -->
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<form id="loginform" action="/guestportal/Login.action" method="post">
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button2" id="button2" onclick="javascript:doOk()" value="OK" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
 
function doOk()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

デバイス登録ページのサンプル HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body bgcolor="#ccebfe">
<form id="deviceRegistrationPortal" action="/guestportal/RegisterDevice.action" method="post">
 
<input type="hidden" name="drpUsername" id="drpUsername" value="" />
<input type="hidden" name="devRegLimit" id="devRegLimit" value="" />
 
<input type="hidden" name="regDevices" id="regDevices" value="" />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Device Registration Portal</td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#abcee4" style="padding:10px; border:#6b93ac solid 1px;">
<tr>
<td style="padding:10px 0 0 10px;">Please register your device :<br />
Please note that you can not register more than 5 devices</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="padding:0 0 0 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7%">MAC Address : </td>
<td width="93%"><input id="registeredMac" name="registeredMac" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="padding:0 0 0 10px;"><input type="Submit" value="Register" /></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table></td>
</tr>
 
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</form>
</body>
</html>

カスタム ゲスト ポータル HTML ページの style.css のサンプル

@charset "utf-8";
/* CSS Document */
 
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.pagebg {
background:url("../demo2/pageBg.jpg") repeat-x;
}
.label {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
}
#footer {
height:23px;
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
position:absolute;
width:100%;
margin:0px auto;
text-align:left;
bottom:-0px;
font-size:12px;
}
.headding {
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:20px;
}
.headding1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#ffffff;
}
.headding2 {
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
font-size:17px;
font-weight:bold;
}
.headding3 {
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
font-size:12px;
font-weight:bold;
}
.content {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#022d4d;
}
.link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:none;}
a.link:link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:none;}
a.link:hover {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:underline; }