Mobile Friendly Forefront TMG Forms Based Authentication Template

Microsoft Forefront TMG 2010's Web Publishing feature enables you to securely publish internal sites such as Outlook Web Access and SharePoint to the external network. Using Forms Authentication to secure these sites is a good choice because with a little bit of work, you can customize the login form with your own corporate identity.

Unless you've been living under a rock for the past 5 years, you know that A LOT of web browsing is now done on small screen devices such as smart phones and tablets. Unfortunately, TMG's default authentication form is not very mobile friendly. By default, browsing to a published site secured with Forms Based Authentication on an iPhone looks like this:

Sure, with a bit of zooming and scrolling you can eventually login using this form. But try logging in while driving between lunch meetings with a coffee in one hand! Suddenly the ability to login becomes a real chore.

Fastvue does not condone driving while logging into corporate resources and drinking coffee. It's very dangerous. Don't do it. Really.

Mobile Friendly Authentication Template

Luckily, your users no longer have to live with this peril as we have developed a mobile friendly TMG Forms Based Authentication template. Now when users browse to your published site, they can see this on their hand held devices:

No more pinching, zooming or scrolling! And the form looks great on large screens as well:

Using The Template

The good news is that this template is free for you to download, modify and use in your environment.

1. Download the template files here, or from the github repo.
2. On your Forefront TMG Server, duplicate the existing ISA Templates folder at: C:\Program Files\Microsoft Forefront Threat Management Gateway\Templates\CookieAuthTemplates\ISA
3. Rename the duplicated folder to 'Custom'. You should now have the following path: C:\Program Files\Microsoft Forefront Threat Management Gateway\Templates\CookieAuthTemplates\Custom\HTML
4. Extract the downloaded zip file into the HTML folder above. Replace the usr_pwd.htm file when prompted.
5. In your TMG Management Console, edit your desired Web Publishing rule and go to the Listener tab. Click  Properties.
6. On the Authentication tab, ensure HTML Forms Authentication is selected.
7. On the Forms Tab enter 'Custom' (you don't need to enter the entire path, just the word 'Custom' without the quotes)
8. Click Apply and then apply the changes to TMG.
9. Restart the TMG Firewall Service (Unfortunately TMG Caches these pages and restarting the service is the only way to clear it as far as I know).

You can also replace the Forefront TMG logo with your own company's logo. Simply replace the 'Logo.png' file with your own company's logo. Again, you will need to restart the TMG Firewall service for the change to take effect.

Issues

For now, only the usr_pwd.htm file has been customized. This file is served when using Windows (Active Directory) authentication (set on the Authentication page in step 5 above).

I intend to customize the other forms (Radius and SecureID) soon. Feel free to contribute!