It would seem that I may have over complicated this, we have a ISAM feature to do this already! 🙂
Apparently since TAM 6.1.1 we can use static management and error page templates per junction, as stated in the following technote:
So feel free to choose your own adventure!
In this post, I’ve put together a login page and set of accompanying resources that will appear differently in the browser depending on the junctioned resource the user is trying to reach. In this example, I’ve defined three different resources:
- Resources at the WebSEAL root: “/”
- Resources at the junctioned application “/demo/”
- Resources at the junctioned application “/test/”
The end result should look something like this:
This particular mechanism could be shaped a couple of different ways with ISAM for Web, in this article, I will make use of the standard ISAM for Web login form page templating, and the inbuilt macros available to the HTML. Another way this could be implemented is through an EAI, this would allow server side page manipulation, something that you cannot do with the WebSEAL login template.
Step 1: Crafting a base login page
When using Forms based authentication with WebSEAL, there is a few core concepts required:
- A Username Input Field named “username”.
- A Password Input Field named “password”.
- A hidden field called “login-form-type” with the value “pwd”.
- The form is POSTed to /pkmslogin.form
With this in mind, that is the base requirement for any custom login page.
WebSEAL also exposes a selection of macros that allow information about the request to be replaced into the templated HTML file. The minimum you would likely use in this scenario are:
The hard-coded error message returned from ISAM.
The requested URL cached by WebSEAL.
With that in mind, here is a base Login page:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Page</title> </head> <body> var cachedURL = "%URL_ENCODED%"; <form method="POST" ACTION="/pkmslogin.form"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required> <a href="/lostpasswordURL" class="forgot_link">forgot ?</a> <INPUT TYPE="HIDDEN" NAME="login-form-type" VALUE="pwd"> <button TYPE="SUBMIT">Sign in</button> </div> </FORM> </body> </html>
Note the macros in their prefilled form. (%ERROR%, %URL_ENCODED%).
Step 2: Crafting the CSS per junctioned application
Next, I crafted some CSS pages, that would modify the look and feel of the three separate applications.
Note: This CSS was based off a login page example from:
Having just completed the article ISAM for Web – Clickjacking prevention it would be remiss of me not to include this feature.
- CSS Styling based on the destination URL.
- This example doesn’t show the use of Virtual Host junctions, but a similar mechanism could be achieved via the macros %HOSTNAME%, %HTTP_BASE% and %HTTPS_BASE%.
Step 4: Importing it all into ISAM for Web
a) Import the new login HTML into the login.html template file.
b) Place the CSS and accompanying images in an accessible location either on ISAM for Web under the Management root -> junction-root.
c) Apply an unauthenticated ACL to the CSS files so that they can be displayed without authentication.
You can either use an existing Unauth ACL – such as the favicon, or the isam for mobile unauth ACL, or you can make your own, following the steps described here:
Optionally: If you’re loading your CSS files off the WebSEAL host and you’re running a version of ISAM that is 220.127.116.11 or older, you might need to add the MIME content type to the WebSEAL configuration file under the content-mime-types stanza:[content-mime-types] css = text/css
This will ensure the browser accepts the CSS as a style sheet.
Step 5: Testing
Ensure you test both HTTP and HTTPS, and watch for “Mixed Content” and also check for handling of incorrect URLs.
Step X: Adding a new Application
Subsequently adding a new application is very easy. Once you’ve created the new junction, attempt to access the URL for the application, and using FireBug watch for the requested hashed CSS file.
Now with your newly adapted CSS file to suit the new application, add this to your CSS store.