4.7. スマートカード登録ユーザーインターフェースのカスタマイズ
TPS サブシステムは、一般的な形式のスマートカード登録画面を表示します。これは、初期化されていないスマートカードを挿入する際に自動的に開きます。これは、クライアントが稼働しているモードに応じて、実際には 3 つのページで構成されています。
- 通常の登録の
/var/lib/pki-tps/cgi-bin/home/Enroll.html - セキュリティー担当者の登録の
/var/lib/pki-tps/cgi-bin/so/Enroll.html - セキュリティー担当者ワークステーション登録 (セキュリティー担当者 UI から登録されたユーザー) の
/var/lib/pki-tps/cgi-bin/sow/Enroll.html注記
セキュリティー担当者ワークステーションディレクトリーには、形式や PIN リセットなどのその他のトークン操作用の HTML ファイルが含まれます。
カスタムユーザープロファイルがある場合は、さらに多くの登録ページがある可能性があります。
これらの登録ページは基本的な HTML および JavaScript で、外観と機能を簡単にカスタマイズできます。登録ファイルによって参照されるイメージや JavaScript ファイルなどのリソースは、
/var/lib/pki-tps/cgi-bin/sow のセキュリティー担当者の登録ファイルの /var/lib/pki-tps/docroot/esc/sow など、対応する docroot/ ディレクトリーにあります。
スマートカードの登録ページをカスタマイズする方法は複数あります。最初の、および最も簡単なものは、ページのテキストを変更します。ページタイトル、セクション見出し、フィールド名、および説明はすべて、例4.3「ページテキストの変更」 の抽出に示したように HTML ファイルを編集して変更できます。
例4.3 ページテキストの変更
<!-- Change the title if desired --> <title>Enrollment</title> ... <p class="headerText">Smartcard Enrollment</p> ... <!-- Insert customized descriptive text here. --> <p class="bodyText">You have plugged in your smart card!After answering a few easy questions, you will be able to use your smart card.</p> <p class="bodyText">Now we would like you to identify yourself.</p> ... <table> <tr> <td><p >LDAP User ID:</p></td> <td> </td> <td><input type="text" id="snametf" value=""></td> </tr> </table>
ページのスタイルは、
style.css CSS スタイルシートとロゴイメージ logo.png の 2 つのファイルで変更できます。
例4.4 ページスタイルの変更
<link rel=stylesheethref="/esc/home/style.css"type="text/css"> ... <table width="100%" class="logobar"> <tr> <td> <img alt=""src="/home/logo.jpg"> </td> <td> <p class="headerText">Smartcard Enrollment</p> </td> </tr> </table>
この
style.css ファイルは、標準の CSS ファイルであるため、タグとクラスはすべて以下のように定義できます。
body {
background-color: grey;
font-family: arial;
font-size: 7p
}
CSS の詳細は、http://www.w3.org/Style/CSS/learning で参照できます.。
Enroll.html ファイルをカスタマイズする最後の手段では、ページ機能を設定する JavaScript ファイルを使用します。このファイルは、進捗メーターなどの機能や、ユーザーディレクトリーに対するユーザーの認証に使用される入力の処理を制御します。
例4.5 ページスクリプトの変更
<progressmeter id="progress-id" hidden="true" align = "center"/> ... <table> <tr> <td><p >LDAP User ID: </p></td> <td> </td> <td><input type="text"id="snametf"value=""></td> </tr> </table>
警告
util.js ファイルの変更は十分に注意してください。このファイルを誤って編集した場合は、Enterprise Security Client UI が破損し、トークンが登録できなくなります。
完全な
/var/lib/pki-tps/cgi-bin/home/Enroll.html ファイルは例4.6「完全な登録 .html ファイル」 にあります。
例4.6 完全な登録 .html ファイル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel=stylesheet href="/esc/home/style.css" type="text/css">
<title>Enrollment</title>
</head>
<script type="text/JavaScript" src="/esc/home/util.js">
</script>
<body onload="InitializeBindingTable();" onunload=cleanup()>
<progressmeter id="progress-id" hidden="true" align = "center"/>
<table width="100%" class="logobar">
<tr>
<td>
<img alt="" src="/home/logo.jpg">
</td>
<td>
<p class="headerText">Smartcard Enrollment</p>p
</td>
</tr>
</table>
<table id="BindingTable" width="200px"align="center">
<tr id="HeaderRow">
</tr>
</table>
<p class="bodyText">You have plugged in your smart card! After answering a few easy questions, you will be able to use your smart card.
</p>p
<p class="bodyText">
Now we would like you to identify yourself.
</p>p
<table>
<tr>
<td><p >LDAP User ID: </p>p</td>
<td> </td>
<td><input type="text" id="snametf" value=""></td>
<td> </td>
<td><p>LDAP Password: </p>p</td>
<td> </td>
<td><input type="password" id="snamepwd" value=""></td>
</tr>
</table>
<p class="bodyText"> Before you can use your smart card, you will need a password to protect it.</p>p
<table>
<tr>
<td><p >Password:</p>p</td>
<td><input type="password" id="pintf" name="pintf" value=""></td>
<td><p >Re-Enter Password:</p>p</td>
<td><input type="password" id="reenterpintf" name="reenterpintf" value=""></td>
</table>
<br>
<table width="100%">
<tr>
<td align="right">
<input type="button" id="enrollbtn" name="enrollbtn" value="Enroll My Smartcard" onClick="DoEnrollCOOLKey();">
</td>
</tr>
</table>
</body></html>