이 콘텐츠는 선택한 언어로 제공되지 않습니다.

4.7. Customizing the Smart Card Enrollment User Interface

The TPS subsystem displays a generically-formatted smart card enrollment screen which is opened automatically when an uninitialized smart card is inserted. This is actually comprised of three pages, depending on the mode in which the client is running:

/var/lib/pki-tps/cgi-bin/home/Enroll.html for regular enrollments
/var/lib/pki-tps/cgi-bin/so/Enroll.html for security officer enrollments
/var/lib/pki-tps/cgi-bin/sow/Enroll.html for security officer workstation enrollments (users enrolled through the security officer UI)
Note
The security officer workstation directory contains other HTML files for other token operations, such as formats and PIN resets.

There can be even more enrollment pages if there are custom user profiles.

These enrollment pages are basic HTML and JavaScript, which allows them to be easily customized for both their appearance and functionality. The resources, such as images and JavaScript files, referenced by the enrollment file are located in the corresponding docroot/ directory, such as /var/lib/pki-tps/docroot/esc/sow for the security officer enrollment file in /var/lib/pki-tps/cgi-bin/sow.

There are several ways that the smart card enrollment pages can be customized. The first, and simplest, is changing the text on the page. The page title, section headings, field names, and descriptions can all be changed by editing the HTML file, as shown in the extracts in Example 4.3, “Changing Page Text”.

Example 4.3. Changing Page Text

<!-- 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>

<!-- 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

Toggle word wrap

The styles of the page can be changed through two files: the style.css CSS style sheet and the logo image, logo.png.

Example 4.4. Changing Page Styles

<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>

<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

Toggle word wrap

The style.css file is a standard CSS file, so all of the tags and classes can be defined as follows:

body {
background-color: grey;
        font-family: arial;
        font-size: 7p
}

body {
background-color: grey;
        font-family: arial;
        font-size: 7p
}

Copy to Clipboard

Toggle word wrap

More information on CSS is available at http://www.w3.org/Style/CSS/learning.

The last way to customize the Enroll.html files is through the JavaScript file which sets the page functionality. This file controls features like the progress meter, as well as processing the inputs which are used to authenticate the user to the user directory.

Example 4.5. Changing Page Script

<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>

<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

Toggle word wrap

Warning

Be very cautious about changing the util.js file. If this file is improperly edited, it can break the Enterprise Security Client UI and prevent tokens from being enrolled.

The complete /var/lib/pki-tps/cgi-bin/home/Enroll.html file is in Example 4.6, “Complete Enroll.html File”.

Example 4.6. Complete Enroll.html File

<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>

<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

Toggle word wrap

이 콘텐츠는 선택한 언어로 제공되지 않습니다.

4.7. Customizing the Smart Card Enrollment User Interface

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat 소개

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links