Custom Home-Realm Selection Page for AppFabric Access Control Service

One of the major benefits to using ACS is that it reduces the heavy lifting when it comes to dealing with multiple Identity Providers, especially if they use different token types and specifications.

The consequence of using multiple identity providers is something called the Home-Realm Discovery problem.  Frankly, it deserves it’s own book on the subject, but suffice to say here is the basic problem: if your customer can log in from multiple identity providers, how do you know which provider to send them to?

There is no elegant solution to this problem (I lie, InfoCards are an elegant solution), so each developer has to make a decision how to find the appropriate provider.  Microsoft didn’t want to make any assumptions so they kept it simple: just ask.

As a result you ended up with a pretty simple menu:

image

A lot of times people aren’t too happy with this and want to change how the user gets to the provider.

It’s actually pretty simple.  Log into your Access Control management panel and find the Develop section.  Select Application Integration.

image

Once there, select the Login Pages:

image

Then select which Relying Party you want a custom login page for:

image

Then select Option 2:

image

This will provider you with a JSON metadata feed of all the providers your particular Relying Party can accept tokens from.  The feed is pretty simple:

  • Name: Describes the IdP – e.g. “Windows Live ID”.
  • LoginUrl: The URL to redirect to if the user wants to login with this particular provider.
  • ImageUrl: A URL for a logo for the IdP.  Could be blank.
  • EmailAddressSuffixes: A collection of email domains associated with the IdP.  Currently these can only be configured for ADFS 2v providers.

The JSON feed looks something like this:

[{
     "Name":"Windows Live ID",
      "LoginUrl":"https://login.live.com/login.srf...",
      "ImageUrl":"",
      "EmailAddressSuffixes":[]
},
{
      "Name":"Google",
      "LoginUrl":"https://www.google.com/accounts/o8/ud...",
      "ImageUrl":"",
      "EmailAddressSuffixes":[]
},
{
      "Name":"Yahoo!",
      "LoginUrl":"https://open.login.yahooapis.com/openid/op/auth...",
      "ImageUrl":"",
      "EmailAddressSuffixes":[]
}]

For more information on customizing ACS, check out the CodePlex site.

Once you have pulled down the feed you can break it down into a custom menu or interface of your choosing.  All you need to do is redirect to the LoginUrl of their choosing.