AquaLogic User Interaction Development Guide

     Previous Next  Open TOC in new window   View as PDF - New Window  Get Adobe Reader - New Window
Content starts here

Creating a Custom Ensemble Login Page

The login page allows you to customize the Ensemble login form display and functionality.

The pt:ensemble.authsourcedata tag provides a collection of the authentication sources available for the resource. The data is stored as a collection, and each item in the collection is a data object containing information about the authentication source (prefix, name, description) accessible through the data object dot notation ($authsource.name). You can use additional adaptive tags to iterate through the collection and allow the user to select the appropriate choice, as shown in the example that follows.

The example below (loginpage.jsp) displays a banner and a login form. The login form posts back to the page, which sets the appropriate headers to authenticate with the resource (runner_username, runner_password, runner_authentication_provider, and runner_portal_authentication_source). This page uses the pt:ensemble.authsourcedata tag, as well as several other adaptive tags to handle logic and display.

 <%@ page import="java.net.*"%>
 <%@page contentType="text/html;charset=UTF-8"%>
<%
String username = request.getParameter( "username" ); 
String password = request.getParameter( "password" );
if(username != null && password != null)
{
   response.addHeader( "runner_username", username);
   response.addHeader( "runner_password", password);
}
String authsource = request.getParameter( "authsource" ); 
if ( authsource != null
{
   response.addHeader( "runner_authentication_provider", "portal");
   response.addHeader( "runner_portal_authentication_source", authsource );
}
%>
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='css/main.css'/> 
</head> 
<body>
<span xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
<table class="banner" cellpadding="0" cellspacing="0"> 
<tr>
   <td class="appLogo"></htm:td>
   <td class="liquid"></htm:td>
 </tr> 
</table>
<br/>

<!-- Welcome message: -->
<font face="arial" size=2> <pt:logic.value pt:value="$#3.ptmsgs_login"/><br> <pt:logic.value pt:value="$#7.ptmsgs_login"/> </font>
<br/>
<%
String errorValue = request.getHeader("runner_error_last_error_message" );
if(errorValue != null)
{
   out.println("<br>");
   out.println("<font face=\"arial\" color=\"0000AA\" size=2>");
   out.println("<pt:logic.value pt:value=\"$#8.ptmsgs_login\"/><br>");
   out.println("</font>");
   out.println("<font face=\"arial\" color=\"AA0000\" size=2>");
   out.println("<b>");
   out.println(errorValue);
   out.println("</b>");
   out.println("</font>");
   out.println("<br>");
}
%>
<br/>
<pt:common.error> 
<P><B><FONT color="red"><pt:logic.value pt:value="$#10.ptmsgs_login"/></FONT>:</B>
<pt:common.errortext/> 
 </pt:common.error>

<!-- Login form: -->
<FORM name="loginform" action="loginpage.jsp" method="POST"> 
<table>
<tr><!-- Username -->
    <td align="right"><font face="arial" size=2> 
    <pt:logic.value pt:value="$#0.ptmsgs_login"/>
    </font></td>
    <td align="left"><font face="arial" size=2>
    <!-- inputs and password inputs are of slightly different length in IE.  This can be fixed with CSS.-->
    <pt:core.html pt:tag="input" type="text" name="username" alt="$#0.ptmsgs_login" size="30" value="${param["username"]}"/>
    </font> </td> </tr>
<tr><!-- Password --> 
    <td align="right"><font face="arial" size=2>
    <pt:logic.value pt:value="$#1.ptmsgs_login"/>
    </font></td>
    <td align="left"><font face="arial" size=2>
    <pt:core.html pt:tag="input" onkeypress="return submitform(event)"  type="password" 
name="password" size="30" alt="$#1.ptmsgs_login" value="${param["password"]}"/>
    </font> </td> </tr>
 <!-- Auth sources -->
<pt:ensemble.authsourcedata pt:key="authsources"/>
<pt:logic.collectionlength pt:data="authsources" pt:key="authsourceslength"/>
<pt:logic.intexpr pt:expr="($authsourceslength)>0" pt:key="hasvalues"/>
<pt:logic.if pt:expr="$hasvalues">
<pt:logic.iftrue>
   <pt:logic.intexpr pt:expr="($authsourceslength)>1" pt:key="hasmultvalues"/>
   <pt:logic.if pt:expr="$hasmultvalues">
   <pt:logic.iftrue>
       <tr><!--Authentication Source:-->
          <td align="right" width="40%" colspan="1"><font face="arial" size=2>
          <pt:logic.value pt:value="$#5.ptmsgs_login"/>
          </font></td>
          <td align="left" width="40%" colspan="1"><font face="arial" size=2>
          <select name="authsource" onkeypress="return submitform(event)" lang="en">
             <pt:logic.foreach pt:data="authsources" pt:var="auth">
                <pt:core.html pt:tag="option" value="$auth.prefix" alt="$auth.description"> <pt:logic.value pt:value="$auth.name"/></pt:core.html>
             </pt:logic.foreach>
          </select>
          </td> </tr>
</pt:logic.iftrue>
<pt:logic.iffalse>
   <!-- Hidden input for single auth source. -->
   <pt:logic.foreach pt:data="authsources" pt:var="auth">
      <pt:core.html pt:tag="input" type="hidden" name="authsource" alt="" value="$auth.prefix"/>
   </pt:logic.foreach>
</pt:logic.iffalse>
</pt:logic.if>
</pt:logic.iftrue>
<pt:logic.iffalse><!-- Otherwise no auth sources for this resource. --></pt:logic.iffalse>
</pt:logic.if>
 <tr><!-- Login -->
   <td align="right"></td>
   <td align="left">
   <pt:core.html pt:tag="input" type="submit" value="$#2.ptmsgs_login"/>
   </td>
</tr></table>
</FORM>
<br>

<SCRIPT language="JavaScript"> 
function submitform(evt)
{
   evt = (evt) ? evt : event;
   var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
   if (charCode == 13 || charCode == 3)
   {
   document.loginform.submit();
   }
return true;
}
</SCRIPT

The login page can use the pt:ensemble.loginlink tag to retrieve the external URL prefix defined for the resource. For example, if the external URL prefix of the resource is http://www.ensemble.com/app/ and the desired page after login is http://www.ensemble.com/app/pages/mainpage.html, then the full login link would be made by adding pages/mainpage.html to the login link prefix as shown in the sample code below.

 <pt:ensemble.loginlink pt:level="4" pt:key="loginurlprefix"/>
var loginLink = "<pt:logic.value pt:value="$loginurlprefix"/>" + "pages/mainpage.html";

  Back to Top      Previous Next