Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

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>
Copy to Clipboard
ページのスタイルは、style.css CSS スタイルシートとロゴイメージ logo.png の 2 つのファイルで変更できます。

例4.4 ページスタイルの変更

<link rel=stylesheet href="/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>
Copy to Clipboard
この style.css ファイルは、標準の CSS ファイルであるため、タグとクラスはすべて以下のように定義できます。 
body {
background-color: grey;
        font-family: arial;
        font-size: 7p
}
Copy to Clipboard
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>
Copy to Clipboard

警告

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>
Copy to Clipboard
トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

Theme

© 2025 Red Hat