4.1 Identity Server Advanced Configuration

Customizing the Default Login Page to Prompt for Different Credentials

This section explains how to prompt the users for an identifier other than the user’s name. Figure 4-1 displays the default login page with the username prompt.

Figure 4-1 Modifying the Credential Prompts

This section explains how to modify the content of the login.jsp file. If you want to modify other aspects of this page, you need to select one of the other methods.

The instructions below explain how to create a method that sets up the appropriate query so that the user can be found in the user store with an identifier other than the username (the cn attribute). The instructions then explain how to create a contract that uses this method and how to modify the login.jsp page so that it prompts for the appropriate identifier such as an email address instead of a username.

Customizing the nidp.jsp File

Figure 4-2 displays the default login page provided by Access Manager. Multiple JSPs are used to create the page.

Figure 4-2 The JSPs That Create the Login Page

You can use the nidp_legacy.jsp file to customize the header with the Access Manager product name and the NetIQ logo. The menus.jsp file controls the Authentication and User Login tabs. The login.jsp file controls the credential frame with username and password. The content.jsp file controls what is displayed on the page, including the available authentication cards.

The following sections explain how to modify the login page that these JSPs create:

Rebranding the Header

Customizing the Card Display

The easiest method to control what appears in the Authentication Cards section is not by modifying the content.jsp file. It is by using the Show Card option that appears on the definition of each card. If this option is not selected, the card does not appear in the Authentication Cards section. Each contract has an associated card. For information about modifying the card options, see Section 5.1.4, Configuring Authentication Contracts.

Continue with one of the following:

Customizing the Credential Frame

The most common reason for modifying the login.jsp page is to prompt the users for an identifier other than the user’s name. To do this, you need to create a method that sets up the appropriate query so that the user can be found in the user store with an identifier other than the username. You then need to create a contract that uses this method. You also need to modify the prompt in the login.jsp page to match the identifier you are prompting for.

Customizing the nidp.jsp File to Customize Error Message

Identity Server publishes a generic error message for error code during SAML failure such as request denied or Invalid Name ID Policy and so on. You can customize the NIDP jsp file available at /opt/novell/nids/lib/webapp/jsp and write an appropriate error message for either redirection or to inform the user about the issue with an appropriate message. Perform the following steps to customize error message.

Modifying the login.jsp File

The login.jsp file gives you just the credential frame with the login prompts in an iframe. It has no branding header. If you use this page, you are responsible for writing the HTML code for the header and the branding.

Using Properties to Specify the Login Page

For each resource that needs a unique login page, you need to create an authentication method and add the JSP and MainJSP properties to the method. You then need to create a contract for each method.

The following steps assume that the custom login page is called custom1.jsp.

Adding Logic to the main.jsp File

You can modify the main.jsp file and use the contract URI to specify the login page to display. Identity Server must be running 3.2 or later to use this feature. Be aware of the following:

Modifying the main.jsp file allows you to have the following type of configuration:

With this type of configuration, you must create three different authentication contracts with an authentication method with a JSP property defined for each of them. These contracts require the types of values listed in the table below. The URI is defined so that it reflects the custom login.jsp and the custom nidp_legacy.jps that are used by the contract.

The following procedure explains how to configure Access Manager to display these custom login pages with custom credentials.

Customizing the Titles

The window title appears in the browser title bar. To replace this text, open the err_legacy.jsp file and locate the following text that appears between the <head></head> tags:

<title><%=handler.getResource(JSPResDesc.TITLE)%></title>

Replace the content between the <title> and </title> tags with the title you want to appear. For example:

<title>My Company</title>

The display title is the title that appears in the top frame of the page. Locate the following text that appears in the <body> of the page:

<div id="title"><%=handler.getResource(JSPResDesc.PRODUCT)%></div>

Replace the content between the <div id="title"> and </div> with the title you want to appear. For example:

<div id="title">My Company</div>

Customizing the Images

To replace the header image, open the err_legacy.jsp file and locate the following text in the body of the file.

<div><img src="/nesp/images/AccessMan_Login_Head.png"></div>

Replace the value of the src attribute with the path and filename of the image you want to use.

To replace the Novell logo image, locate the following text in the body of the file.

<div id="logo"><img src="/nesp/images/AccessMan31_Nlogo.png"></div>

Replace the value of the src attribute with the path and filename of the image you want to use.

Customizing the Colors

To change the background colors on the page, modify the color values in the <style> section of the <head>.

The Modified nidp.jsp File

The background, menu, and border colors are set to black. These colors are specified in the following lines in the sample file:

    // Background color
    String bgcolor   = "#000000";

    // Menu color
    String menucolor   = "#000000";

    // Border color
    String bcolor   = "#000000";

Figure 4-4 illustrates the image (images2.jpeg) that this custom page uses for the header background image:

Figure 4-4 Background Image

This image is the repeatable image that allows the header to be resized. This image is specified in the following lines in the file:

 // The header background image that gets repeated
    String hdrBgndImg  = "/custom_images/images2.jpeg";

Figure 4-5 illustrates the image (images3.jpeg) that this custom page uses for the product logo that appears on left of the header frame.

Figure 4-5 Header Image

Figure 4-6 illustrates the image (hhbimages.jpeg) that this custom page uses to replace the Novell company logo on the right of the header frame.

Figure 4-6 Company Logo

The following lines define what appears as the title for the browser window:

<title>HHB WORLD</title>

The following line defines the header title value:

String hdrTitle     = "Enter MY WORLD";

Its position is controlled by the following line in the file:

 #title { position: absolute; font-size: 1.2em; color: white; top: 18px; left: 85px; }

The top position has been modified from 13px to 18px and the left position has been modified from 55px to 85px. The other lines in this section control the position of the other items in the header.

The lines that have been modified are marked in bold in the following file.

<%
    ContentHandler handler = new ContentHandler(request,response);

    // Background color
    String bgcolor   = "#000000";

    // Menu color
    String menucolor   = "#000000";

    // Border color
    String bcolor   = "#000000";

    // The header background image that gets repeated
    String hdrBgndImg  = "/custom_images/images2.jpeg";

    String hdrImage  = "/custom_images/images3.jpeg";

    String hdrLogo      = "/custom_images/hhbimages.jpeg";

    String hdrTitle     = "Enter MY WORLD";

    String query     =  request.getQueryString();
    if (query != null && query.length() > 0)
        query = "&" + query;
    else query = "";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//<%=handler.getLanguageCode()%>">
<html lang="<%=handler.getLanguageCode()%>">
    <head>
        <title>HHB WORLD</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link href="<%= handler.getImage("hf_menu.css",false)%>" rel="stylesheet"> 
        <link href="<%= handler.getImage("HF_message.css",false)%>" rel="stylesheet"> 
        <link href="<%= handler.getImage("HF_obj_list_table.css",false)%>" rel="stylesheet"> 
    <style>
    * { margin: 0; padding: 0; }
        #header    { background-image: url(<%= handler.getImage(hdrBgndImg,false)%>); background-repeat: repeat-x; }
        #logo      { position: absolute; top: 0px; right: 0px;  }       
        #title         { position: absolute; font-size: 1.2em; color: white; top: 18px; left: 85px; }
    #subtitle    { position: relative; font-size: .9em; color: black; white-space: nowrap; top: 0px; left: 0px; text-align: right; }
    #mcontent     { position: relative; padding: 5px; background-color: <%=bgcolor%>; }  
    #content      { width: 100%; border: 0; margin: 0; padding: 0; overflow: none; height: 376px; background-color: <%=bgcolor%>;}
    #logoutbut    { position: absolute; top: 25px; right: 35px;  }      
    #helpbutlogin  { position: absolute; color: yellow; top: 25px; right: 10px; }
    #loggingbut    { position: absolute; color: blue; top: 25px; right: 65px;  }

    .NLtab .tab1s    { background-color: <%=menucolor%>; padding-left: 3px; padding-right: 8px; text-align: center; white-space: nowrap;   }
    .NLtab .tab1s a   { text-decoration: none; }
    .NLtab span.tab1s { padding:5; color: white; font-size: 0.9em; font-weight: bold; line-height: 17px; background-color: transparent; background-image: none; text-decoration: none; }
    .NLtab .tab1u   { background-color: <%=bgcolor%>; padding-left: 3px; padding-right: 3px; text-align: center; white-space: nowrap; border-left: 1px solid <%=bcolor%>; border-right: 1px solid <%=bcolor%>; border-top: 1px solid <%=bcolor%>;          }
    .NLtab span.tab1u { border: none; padding:5; color: black; font-size: 0.8em; font-weight: bold; line-height: 17px; text-decoration: none; background-color: transparent;  }

    .NLtab tr.subtab td  {  color: white; padding: 2px }
    .NLtab tr.subtab a  { font-size: .8em; color: white; text-decoration: none; padding: 2px 5px 2px 5px}

    .selx  { border: 1px solid rgb(239, 238, 236); font-size: 1em; font-weight: bolder; background-repeat: repeat-x; background-position: 0pt bottom;}
    .unselx  { border: 0px; font-size: .9em; font-weight: normal; background-image: none; }
        </style>

        <script>
         var g_curCard = null;     // initial displayed card
     var g_cardContainer = null;   // div that holds all the authentication cards
     var g_curSubtab = null;   // subtab currently displayed
     var g_curTab = null;     // tab currently displayed

         var menuItem = 0;
             function showHide(i)
             {
                 document.getElementById('menu1').style.display='none';
                 document.getElementById('menu2').style.display='none';
                 document.getElementById('submenu1').style.display='none';
                 document.getElementById('submenu2').style.display='none';
                 document.getElementById('menu' + i).style.display='block';
                 document.getElementById('submenu' + i).style.display='block';
         if (i == 1)
             switchContentPage("<%= handler.getJSP("content")%>");
         else 
             switchContentPage("<%= handler.getJSP("IdentityEditor")%>");
             }

     function switchContentPage(newSrc)
     {
           parent.document.getElementById("content").src = newSrc;
     }  

     function onloadhandler()
     {
         g_cardContainer = document.getElementById("cardcontainer");
         g_curSubtab     = document.getElementById("loginsubtab");
         g_curTab        = document.getElementById("authtab");
         g_curCard       = document.getElementById("selectedCard0");
     }  

      function showhideTab(divid)
     {
         var element1 = document.getElementById(divid);  
      
         if(element1.style.display == "none")
         {
             element1.style.display = "block";
         g_curTab.style.display = "none";
          
             g_curTab = element1;
         }
     }

     function subtabchange(divid)
      {
         var element1 = document.getElementById(divid);
         var element2 = g_curSubtab;
         element1.className = "selx";
         if (element1.id != element2.id)
         {
             element2.className = "unselx";
         }
         g_curSubtab = element1;  
     }
      
     function showHelp()
      {
         var helpURL = "login.html";
                 if (g_curSubtab.id == "fedsubtab")
             helpURL = "<%=handler.getHelp("federations.html")%>";

                 else if (g_curSubtab.id == "myprofile")
         helpURL = "<%=handler.getHelp("myprofile.html")%>";

                 else if (g_curSubtab.id == "sharing")
          helpURL = "<%=handler.getHelp("sharing.html")%>";

                 else if (g_curSubtab.id == "loginsubtab")
         helpURL = "<%=handler.getHelp("userlogin.html")%>";

                 else if (g_curSubtab.id == "newcardsubtab")
         helpURL = "<%=handler.getHelp("newcard.html")%>";

               else if (g_curSubtab.id == "logTicketsubtab")
             helpURL = "<%=handler.getHelp("logticket.html")%>";

             var w;
             w = window.open(helpURL, "nidsPopupHelp", "toolbar=no,location=no,directories=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500");
             if (w != null)
             {
              w.focus();
             }
     }
        </script>
    </head>

    <body onload="onloadhandler()">
        <table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=<%=bgcolor%> >
            <tr>
        <td>
            <table cellspacing=0 width=100% border=0>
            <tr>
            <td width=100%>   
                <div id="header"><img src="<%=handler.getImage(hdrImage,false)%>"></div>   
                <div id="logo"><img src="<%=handler.getImage(hdrLogo,false)%>"></div>   
                <div id="title"><%=hdrTitle%></div>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
            <table cellspacing=5 width=100%>
            <tr>
            <td>
                <%@ include file="menus.jsp" %>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
            <table cellspacing=0 border=0 width=100%>
            <tr>
            <td>
                         <iframe scrolling=no id="content" src="<%=handler.addCardParm(handler.getJSP(handler.isJSPMsg() ? handler.getJSPMessage().getJSP() : NIDPConstants.JSP_CONTENT)) + query%>" frameborder=0></iframe>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    </body>
</html>

The Modified main.jsp File

The following sample file has two types of modifications. The following line has been added so that the URI of the contract can be read and used as a condition for selecting the login page to display:

String strContractURI = hand.getContractURI();

The following lines define the login page to use when the URI of the contract is set to login/custom.

else if(strContractURI != null && strContractURI.equals("login/custom"))
    {
%>
     <%@ include file="custom.jsp" %>

<%  }

The lines that have been added are marked in bold in the following file.

<%@ page language="java" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page import="com.novell.nidp.*" %>
<%@ page import="com.novell.nidp.resource.jsp.*" %>
<%@ page import="com.novell.nidp.ui.*" %>
<%@ page import="com.novell.nidp.common.util.*" %>
<%@ page import="com.novell.nidp.liberty.wsf.idsis.apservice.schema.*" %>

<%
    ContentHandler hand = new ContentHandler(request,response);
    String strContractURI = hand.getContractURI();

    // Is there a JSP defined on a class definition or a method definition 
    // that must be displayed as the main jsp here?
    if (hand.contractDefinesMainJSP())
    {
%>

        <%@ include file="mainRedirect.jsp" %>
<%  }

else if(strContractURI != null && strContractURI.equals("login/custom"))
    {
%>
     <%@ include file="custom.jsp" %>

<%  }

    // This is the jsp used by default
    else
    {
%>
        <%@ include file="nidp.jsp" %>
<%  }  %>

The Method and the Contract

After modifying the two files, you still need to create a method and a contract. The method needs to use a name/password class and have the following properties defined:

You then need to create a contract that uses this method and assign it to a protected resource.

The Modified login.jsp File

This custom page does not modify the credential frame. The lines that define the window title (HHB CUSTOM LOGIN), the page header title (IT’S A NEW WORLD), and the image (hhbimages.png) are marked in bold in the following sample file.

<%@ page language="java" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.novell.nidp.*" %>
<%@ page import="com.novell.nidp.servlets.*" %>
<%@ page import="com.novell.nidp.resource.*" %>
<%@ page import="com.novell.nidp.resource.jsp.*" %>
<%@ page import="com.novell.nidp.ui.*" %>
<%
    ContentHandler handler = new ContentHandler(request,response);
    String target = (String)request.getAttribute("target");
    String hdrImage = "/custom_images/hhbimages.jpeg";

 %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//<%=handler.getLanguageCode()%>">
<html lang="<%=handler.getLanguageCode()%>">
   <head>
            <title>HHB CUSTOM LOGIN </title>
      <META HTTP-EQUIV="Content-Language" CONTENT="<%=handler.getLanguageCode()%>">
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
             


      <style type="text/css" media="screen">
         

         td label       { font-size: 0.85em ; padding-right: 0.2em; }
         label       { font-size: 0.77em; padding-right: 0.2em; }
            input { font-family: sans-serif; }
         .instructions  { color: #4d6d8b; font-size: 0.8em; margin: 0 10px 10px 0 }
      </style>

      <script type="text/javascript" src="<%= handler.getImage("showhide_2.js",false)%>"></script>
      <script language="JavaScript">
         var i = 0;
         function imageSubmit()
         {
             if (i == 0)
             {
                i = 1;
                document.IDPLogin.submit();
             }
  
             return false;
         }
      </script>
      </head>
   <body text="lightcyan" style="background-color:Black" marginwidth="300" marginheight="100" leftmargin="350" topmargin="0" rightmargin="0" onLoad="document.IDPLogin.Ecom_User_ID.focus();" >
   <br>
         <h1><u>       IT'S A NEW WORLD</u></h1>
        
       <form name="IDPLogin" enctype="application/x-www-form-urlencoded" method="POST" action="<%= (String) request.getAttribute("url") %>" AUTOCOMPLETE="off">
         <input type="hidden" name="option" value="credential">
<% if (target != null) { %>
         <input type="hidden" name="target" value="<%=target%>">
<% } %>
            <table border=0 style="margin-top: 1em" width="20" cellspacing="0" cellpadding="0">
                               <tr>
                                   <div id="headimage"><img src="<%=handler.getImage(hdrImage,false)%>" alt="" height="80" width="150" border="0"></div>
                                             </tr>
                                        <tr>
                          
                                       <td style="padding: 0px">
                  <table border=0>
                  <br><br>

                     <tr>
                        <td align=center>
                           <label><%=handler.getResource(JSPResDesc.USERNAME)%></label>
                        </td>
                        <td align=center>
                           <input type="text" class="smalltext" name="Ecom_User_ID" size="30">
                        </td>
                     </tr>
                     <tr>
                        <td align=center>
                           <label><%=handler.getResource(JSPResDesc.PASSWORD)%></label>                  
                        </td>                   
                        <td align=center>
                           <input type="password" class="smalltext" name="Ecom_Password" size="30">
                        </td>
                     </tr>
                     <tr>
                        <td align=right colspan=2 style="white-space: nowrap">
                           <input alt="<%=handler.getResource(JSPResDesc.LOGIN)%>" border="0" name="loginButton2" src="<%= handler.getImage("btnlogin.gif",true)%>" type="image" value="Login" onClick="return imageSubmit()">
                        </td>                   
                     </tr>
                  </table>
               </td>
            </tr>
<%
    String err = (String) request.getAttribute(NIDPConstants.ATTR_LOGIN_ERROR);
    if (err != null)
    {
%>
               <td style="padding: 10px">
                  <div class="instructions"><%=err%></div>
               </td>
                     </tr>
<%  } %>
<%
   if (NIDPCripple.isCripple())
   {
%>        
               <tr>
                     <td width="100%" align="center"><%=NIDPCripple.getCrippleAdvertisement(request.getLocale())%></td>
               </tr>
<%
   }
%>
            </table>
         </form>
      </body>
</html>

The Method and the Contract

After modifying the file, you still need to create a method and a contract. The method needs to use a name/password class and have the following properties defined:

You then need to create a contract that uses this method and assign it to a protected resource.

Modifying the File

The bold lines in the following sample file are the lines that have been modified to change the branding and the login prompts.

<%@ page language="java" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page import="com.novell.nidp.common.provider.*" %>
<%@ page import="java.util.*" %>
<%@ page import="com.novell.nidp.ui.*" %>
<%@ page import="com.novell.nidp.*" %>
<%@ page import="com.novell.nidp.servlets.*" %>
<%@ page import="com.novell.nidp.resource.*" %>
<%@ page import="com.novell.nidp.resource.jsp.*" %>
<%@ page import="com.novell.nidp.common.xml.w3c.*" %>
<%
    ContentHandler handler = new ContentHandler(request,response);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//<%=handler.getLanguageCode()%>">
<html lang="<%=handler.getLanguageCode()%>">
    <head>
    <link rel="stylesheet" href="<%= request.getContextPath() %>/images/hf_style.css" type="text/css">
    <style type="text/css" media="screen"><!--
      #headimage    { position: relative; top: 0px; left: 0px; z-index: 1}
      #title    { position: relative; top: 40px; left: 5px; color: white; z-index: 4}
      #locallabel    { position: relative; top: 78px; left: 10px; z-index: 4}
      #login       { text-align: center }
         --></style>
    <META HTTP-EQUIV="Content-Language" CONTENT="<%=handler.getLanguageCode()%>">
    <title>MY WORLD</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="<%= request.getContextPath() %>/images/showhide_2.js"></script>
    <script language="JavaScript">

      var i = 0;
      function imageSubmit()
      {
          if (i == 0)
          {
             i = 1;
             document.IDPLogin.submit();
          }
  
          return false;
      }
  </script>
    </head>
    <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" rightmargin="0" onLoad="document.IDPLogin.Ecom_User_ID.focus();" >
        <form name="IDPLogin" enctype="application/x-www-form-urlencoded" method="POST" action="<%= (String) request.getAttribute("url") %>" AUTOCOMPLETE="off">
        <table style="margin-top: 6em" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="50%" height="80 px">&nbsp;</td>
        <td colspan="2">
            <div id="title"><b>HHB Partner</b></div>
        <div id="locallabel"><b>My Company</b></div>
        <div id="headimage"><img src="<%= request.getContextPath() %>/images/Odyssey_Head.gif" alt="" height="80" width="550" border="0"></div>
                    </td>
        <td width="100%">&nbsp;</td>
        </tr>
        <tr>
            <td width="50%">&nbsp;</td>
        <td style="background-color: #efeee9; padding: 10px" colspan="2">
<%
    String err = (String) request.getAttribute(NIDPConstants.ATTR_LOGIN_ERROR);
    if (err != null)
    {
%>
        <div><label><%=err%></label></div>
<%  } 
    
    // Determine if this login page is being used for account identification
    // purposes
 %>
          <span id="login2" style="display: block;">
            <table>
              <tr>
                <td nowrap="nowrap">
                  <div>
                    <label style="width: 100px"><%=handler.getResource(JSPResDesc.USERNAME)%></label></label>
                  </div>
                </td>
                <td width="100%" nowrap="nowrap">
                  <div>
                    <input type="text" class="smalltext" name="Ecom_User_ID" size="30">
                  </div>
                </td>
              </tr>
              <tr>
                <td nowrap="nowrap">
                  <div>
                    <label style="width: 100px">Email Address:</label></label>
                  </div>
                </td>
                <td width="100%" nowrap="nowrap">
                  <div>
                    <input type="text" class="smalltext" name="Ecom_User_Mail" size="30">
                  </div>
                </td>
              </tr>

              <tr>
                <td nowrap="nowrap">
                  <div>
                    <label><%=handler.getResource(JSPResDesc.PASSWORD)%></label>
                  </div>            
                </td>              
                <td style="white-space: nowrap">
                  <div>
                    <input type="password" class="smalltext" name="Ecom_Password" size="30">&nbsp;&nbsp;
                    <input alt="<%=handler.getResource(JSPResDesc.LOGIN)%>" border="0" name="loginButton2" src="<%=handler.getImage("btnlogin.gif",true)%>"
 type="image" value="Login" onClick="return imageSubmit()">
                  </div>            
                </td>              
              </tr>
            </table>
          </span>
        </td>
        <td width="100%">&nbsp;</td>
      </tr>
    
        <tr>
            <td width="50%"></td>
        <td style="background-color: #E6D88C; padding-left: 10px"><img style="padding-right: 200px" src="<%= request.getContextPath() %>/images/LAP_interoperable_logo_100.gif" align="absmiddle" border="0"></td>
        <td style="background-color: #E6D88C; padding-right: 10px" align="right" width="100">

         
        </td>
            <td width="100%"></td>
        </tr>
<%
  if (NIDPCripple.isCripple())
  {
%>        
        <tr>
               <td colspan=4 width="100%" align="center"><%=NIDPCripple.getCrippleAdvertisement(request.getLocale())%></td>
        </tr>
<%
  }
%>      
        </table>
        </form>
    </body>
</html>

The Method and the Contract

After modifying the file, you still need to create a method and a contract. The method needs to use a name/password class and have the following properties defined:

You then need to create a contract that uses this method and assign it to a protected resource.