UAG 2010 Custom Logon and Logoff Pages
In previous post I showed to you how to modify UAG portal page. In this post I’ll discuss how to create a custom looking UAG Logon and Logoff pages. UAG Logon and Logoff pages are controlled by the code in InternalSite folder. As with UAG Portal page we want to minimize changes to any original files and make changes to the UI via UAG CustomUpdate functionality. With UAG Portal we could do this 100% and control the portal without any changes to the original files, unfortunately with UAG Logon and Logoff pages I could not make all changes via CustomUpdate mechanism. It appears to me that development of Logon/Logoff pages was done in multiple phases by including additional functionality via calls to other scripts (inc calls). Some of the graphic files are hardcoded to be called from these additional scripts and duplication of the same graphic files in the CustomUpdate folders doesn’t do any good.
If someone with a bit better knowledge into this topic reads this post and indeed can provide a solution to update UAG Logon/Logoff pages via CustomUpdate only then please let me know how to do this and I’ll update this post.
There are nine graphic files that must be replaced in its original folder to have unique UAG Logon/Logoff pages UI. Thankfully all other changes still can be done via CustomUpdate mechanism. Before replacing original graphic files I would first back them up to another location and make another local copy with a different name. You never know how future service packs will affects the UI design and upgrade process.
On the other hand, to modify UAG Logon/Logoff pages we have to touch only two files: TEMPLATES.CSS and EN-US.XML. Much easier than Portal UI, which was controlled by multiple configuration files.
UAG Logon and Logoff pages have actually multiple views. Let’s review one by one each screen in its default UI and the target UI. First we start with the default logon page:
After making changes to UAG, our custom Logon page will have the following UI:
After user is authenticated into UAG portal and clicks on the “Credential Management” link, he will be presented with the following pop-up screen:
Which will look very different after we make changes:
When authenticated user decides to change password he is presented with this default UI:
Which we want to look like this in our custom UI:
When user logs off from the UAG portal, the default UI is like this:
Which we will change to look like this:
When user provides wrong credentials, he will see this UI:
Which we will make to look like this:
And finally, when user exceeds the allowed number of failed logons, he will see this UI:
Which we will make look like this:
Modifying Languages File
As with UAG Portal, pretty much all visible text in UI is controlled via Languages file. Let’s make changes to this file and see where it will get us with UI modification.
Make the following changes to the default EN-US.XML file:
- Modify text in ID1 to the desired text shown at the bottom of the logon screen.
- ID2 – remove all text. This is Title text and we will provide Title via graphic file.
- ID3 – remove all text. This is a Thank you note shown on the logoff screen.
- ID4 – remove all text. This is text shown on the logon page in the middle of the screen (first line).
- ID5 – remove all text. This is text shown on the logon page in the middle of the screen (second line).
- Do search and replace for “MS Forefront Unified Access Gateway” with “Contoso Application Gateway”
- ID169 – Add custom language after “Change Password.” This text is shown on the password change screen for an authenticated user.
- ID181 – Provide text with URL to reset password. This text is displayed after first unsuccessful logon.
- ID356: – Provide text with URL to reset password. This text is displayed after user exceeds allowed number of unsuccessful logons.
After making changes to the EN-US.XML file, copy it to the InternalSite\Languages\CustomUpdate folder. Refresh the browser on the client and will see our changes, as shown in the series of the following screenshots.
Modifying Templates.css File and Providing Custom Graphic Files to CustomUpdate
Next step is to make all visual UI changes, which are controlled via graphic files and TEMPLATE.CSS configuration file.
Make changes highlighted in red to the template.css file. Leave all other sections as is. Copy this file to the CustomUpdate folder. Changes are highlighted in red color.
| BODY { MARGIN: 5px; /* BACKGROUND:url(“/InternalSite/images/customupdate/headerbottomleft.gif”);*/ /* Comment it out */ BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #333333; /* Change from d0d4da */ FONT: 9pt Arial; SCROLLBAR-BASE-COLOR: #e8ecee; SCROLLBAR-TRACK-COLOR: #E4EBFA; SCROLLBAR-FACE-COLOR: #e8ecee; SCROLLBAR-ARROW-COLOR: #3E4F6F; SCROLLBAR-HIGHLIGHT-COLOR: #aaaaaa; SCROLLBAR-SHADOW-COLOR: #aaaaaa; SCROLLBAR-3DLIGHT-COLOR: #E4EBFA; SCROLLBAR-DARKSHADOW-COLOR: #E4EBFA; OVERFLOW: auto; } .blueBorder .headertext .header1 .internalTD .contentleft .contentright .regText .msgText .logoutMsg .button .errormsg .paramText .paramText A .bottomText .bottomText A .notification TD.systemTable .systemLabel .systemWarning .systemWarningBold .systemMessageBold .blueBold .copyright .errorText .urlMsgText .appLink .warningMsg |
Copy custom UI graphic files to the CustomUpdate folder. Now refresh UI and you’ll see the following UI, for each screen respectively.
As you can see, Templates.css provided a lot of changes to the UI, but we still have some leftover graphics from the default UI. If you remember, at the beginning of this post I mentioned that there are nine graphic files, which are hardcoded in some scripts called by the UAG logon code. These are those files. The only way I could figure out how to get our custom UI without modifying actual UAG code, is by replacing these nine files in its original location with our own graphic files. Make sure to backup original files in a safe place, just in case. The following is a list of graphic files and little map used for UAG Logon/Logoff screen:
- Headertopl.gif
- Headertopm.gif
- Headertopr.gif
- Headerbottoml.gif
- Headerbottomm.gif
- Headerbottomr.gif
- Footerbgl.gif
- Footerbgm.gif
- Footerbgr.gif
So finally, after replacing these files in its original folder (InternalSite\Images), we will get desired UAG Logon/Logoff UI:
Trackbacks & Pingbacks
- UAG 2010 Custom Logon and Logoff Pages | Security and Identity in the Cloud
- UAG 2010 Custom Logon and Logoff Pages - Security and Identity in the Cloud - Site Home - TechNet Blogs
- Microsoft Forefront Unified Access Gateway a.k.a UAG modifications – custom look and styling | For the love of problems :)
Security and Identity in the Cloud 
To avaoid modifications of GIF files, copy:
logo.inc and bottomText.inc from “Microsoft Forefront Unified Access Gateway\von\InternalSite\samples” to “Microsoft Forefront Unified Access Gateway\von\InternalSite\inc\CustomUpdate” and rename each file to logo.inc so if your trunk name is “test” and it is HTTPS then name would be: “test1logo.inc”. In that file you can then modify all images and other styles as well as add additional table rows, etc..
LikeLike
Good work! Regarding Issue 1. I have two comments. First, whevener you have an issue with BPOS, installation of client applications or at any time User the Support tab on the admin center to open a support ticket. Technical Support is free, fairly fast and accurate. Secondly, leaving end users with two Outlook profiles could be done, but this sounds like a symptom of testing. Custom Domains can be associated with your BPOS account, and once verified, an MX record change later new email is flowing through BPOS. For existing email on a local exchange server, use the Email Migration Tool to migrate Exchange data to the Cloud. Once data is online, you can remove the second outlook profile.
LikeLike
Great article! And a great save from Greg!
But what about customising the functionality in the login form, not just the style?
Our UAG is hooked up to multiple authentication sources (two different AD forests currently, more to come), which means users have to select which authentication source to use, on the logon form.
But if I were to use the email address instead of username, then I could have some kind of lookup table/list/XML to work out which authentication source to use based on the domain in their email address (with a fallback to a default auth source).
How would I approach this?
Thanks!
LikeLike
Hi Craig
I have the same issue here. Did You managed to get it working?
Thanks.
LikeLike
Hey Loé,
yes I did. Though in the end I had to rip it out because UAG doesn’t support Kerberos in cross-forest environments ( was connecting UAG into DMZ with SharePoint and SSRS/SSAS).
Flick me an email at craig dot humphrey at chapmantripp dot com and I’ll send you the details. It’s a bit messy for a comment…
Later’ish
Craig
LikeLike
Thanks for these instructions!!!
Is there a mobile configuration for these? When I try from either an Android or iPad I still get the old logon screen, but when coming in on IE it has my updates.
LikeLike
I have not done any modifications for mobile devices. You’d have to modify the code for mobile devices to look it the way you want.
LikeLike
Thanks. I appreciate your help.
LikeLike
Great Article…Specially correctly identifying the ‘limitations’ of custom images where we need to actually alter the default images…This got me drive in correct direction…
LikeLike
Customizing login.asp under IE 9 does not seem to render properly – no login form ..
Hello,
We have completely customized our login.asp to something a bit more stylish but on IE 9, the page looks like crap. There is even no login form where users can login into.
Looks great on IE 11, FF, Chrome, Safari, etc.
Should any redesign work and render properly under IE 9?
We simply just copied and pasted our styles appended to the end of template.css but in IE 9, its horrendous and users cannot log in.
Is there a way to put in a javascript of script of some sort to redirect if it is IE 9 and use a generic login page instead?
Thanks
LikeLike