Customizing the Windows Azure Access Controle Service identity providers login page to something feasible

About a year ago, I wrote a blog post about how to easily integrate some external identity providers like Facebook, Google, Hotmail into your web application through the Windows Azure Access Control Service (ACS). You can find the information here:
Using Windows Azure Access Control Service to provide a single sign-on experience with popular identity providers

I will not explain what ACS is or what it is used for. You can find all that information in the previous post. The only thing that is different these days is the layout of the Windows Azure portal, which now looks a bit different because of the HTML5 layout. The Windows Azure Access Control itself has not changed, so it shouldn’t be much of a problem to create an ACS namespace and manage it.

As discussed in my previous post about ACS, you can download the ACS login page and customize this within your own web application. Using the identity providers login page hosted on ACS itself is not much of an option to be honest, because it simply doesn’t fit properly into your application. As shown in the previous post, you can download an HTML sample page that will manage the identity providers you have enabled into ACS. This post will prolong onto that specific topic.

When you download the ACS HTML login page, you get an HTML page with a bunch mumbo jumbo javascript in which will just hurt your eyes. By default the login page will look like this:

Windows Azure Access Control Service Authentication and Authorization

Making it look like something like this is a bit more feasible:

Custom Windows Azure Access Controle Service login page

It will only take you about 3 minutes to generate the layout above, but you’ll need some external tools to do so.

  1. jQuery: Feature-rich javascript library (http://jquery.com/)
  2. Bootstrap: Front-end framework for easier web development. You’ll need the bootstrap CSS and JS for the container layout and the tooltip. (http://twitter.github.com/bootstrap/)
  3. Knockout.js:  Managing javascript UI’s with MVVM (http://knockoutjs.com/)

To do so, you will basically have to throw away the entire ACS sample login page. The only thing you’ll need from that page is the location of the ACS script that will load your enabled identity providers for your web application in the Access Control Service. It will look like something like this:

https://mynamespace.accesscontrol.windows.net/v2/metadata/IdentityProviders.js?
protocol=wsfederation&realm=http%3a%2f%2flocalhost%3a50029%2f&
reply_to=&context=&request_id=&version=1.0&callback=showSigninPage

Take the location of the script and put it in your web.config appSettings and give it a name like  ‘AcsLoginPageIdentityProvidersScript’. Change the callback function name:

Windows Azure Access Controle Service customizing

The HTML you need to show your ACS identity providers like the image shown above will look like this:

Windows Azure Access Control Service custom HTML

Basically it will generate a list of enabled ACS identity providers through knockoutjs template binding. If you don’t know about knockoutjs, you can find the documentation and tutorials on the website of knockoutjs. The data-bind attributes and the script are being used by knockoutjs to databind the JSON results to the web page.

The javascript will look like this:

Windows Azure Access Control Service Custom login page Facebook, Google

Notice the callbackIdentityProviders function. This is the function that will be called when the ACS script has been loaded. The script will query ACS which identity providers are enabled for your application and it will return these returns in JSON. These results are passed on through a callback function, which you can define through the callback parameter in the script url. In our the callbackIdentityProviders function will be triggered when the results are retrieved from ACS and a JSON result will be passed on to this function, containing the information we need about the identity providers.

Basically we will parse the returned JSON (enabled identity providers) from ACS to our own identityProvider class and we will map the list of identity providers to the knockout.js template. Within the /Images/user/ folder I have the following images:

Single Sign-on Facebook, Google in ASP.NET

Due to the computed imageUrl function we created with knockoutjs, in the knockout template we can bind this imageUrl to the image source.

To attach the tooltip to the identity providers, you can use some of the bootstrap functionality:

Bootstrap

You add the data-toggle=’tooltip’ attribute to the item you want to use the tooltip for, through knockoutjs we databind the name of the identity provider to the title attribute of the image, which is being used for the tooltip. Finally we attach the tooltip on the identity provider images through javascript. You can also find all this in the bootstrap documentation.

After having logged in with an external identity provider, you will be returned to your root page defined in your relying party application in ACS. If you want your user to return to a specific page, you can change the reply_to parameter in the script url. In your web.config you can add a placeholder for the reply_to parameter and change the parameter in your view depending on where you want to customer to be redirected to after being logged in at the identity provider:

Windows Azure Access Control Service

The only thing you have to make sure of is that the url you place in the reply_to parameter is url-encoded or you’ll have an invalid request to ACS.

Yes, the example code is a bit robust and could be improved. If you found this information useful, make sure to support me by leaving a comment.

Cheers and have fun,

Robbin

Advertisements