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>