Configuring your ASP.NET application for Microsoft OAuth account

This post is a part of the series about how to enable and use OpenID/OAuth support that was added to the ASP.NET templates in Visual Studio 2012. In this post I am going to detail the instructions on configuring your application to use Microsoft account for authentication. I am going to be focusing on configuring the application for a development environment(using VS & IISExpress)

Create a new ASP.NET MVC/WebForms or WebPages application

Build and run the website.

Use a test domain

You need to use a domain other than localhost since Microsoft account cannot redirect back to localhost
Some folks have graciously reserved localtest.me for local testing of domains so you do not have to mess with hosts files. Follow the link for more information
You can use Foo.localtest.me as a test domain. (Make sure Foo is unique. I would recommend prefixing it with something unique such as Foo<MyName>.localtest.me ). For the purpose of this article we will use Foo.localtest.me
Ping Foo.localtest.me should be reverted back to local machine

Edit firewall rules for port 80 to receive external requests.

Follow the guidelines as mentioned (These work for windows8 as well)http://maximumpcguides.com/windows-7/open-a-port-in-windows-7s-firewall/

Configuring the Microsoft live portal

Open link https://manage.dev.live.com/AddApplication.aspx. Login using live credentials

Enter Application name and click on I accept (Read the terms of use and privacy if it concerns you !)

In the Live Connect Developer Center where the APP was created in step 7, click on Application Settings page link -> API settings

In the redirectDomain enter the above created domain name. Eg: http://Foo.localtest.me

Hit Save and the changes should be saved

Configuring the keys in your application

For MVC/WebForms applications

Edit the AuthConfig file in the App_Start folder and uncomment the code for the Microsoft OAuth provider. Copy the client ID and client secret in the AuthConfig file in the uncommented section of Microsoft login

For WebPages applications

Edit the _AppStart.cshtml file and uncomment the code for the Microsoft OAuth provider. Copy the client ID and client secret to this file in the uncommented section of Microsoft login

Map the test domain to your application

Now we need to add mapping for the domain name to be redirected to our application created in step 1
For IIS Express

Open applicationHost.config in %Documents%\IISExpress\config
Locate the binding for the web application in the file. It will be defined in the <site> tag. For example

<site name="WebApplication5" id="6">

<application path="/" applicationPool="Clr4IntegratedAppPool">

<virtualDirectory path="/" physicalPath="pathtoapplication\WebApplication5" />

</application>

<bindings>

<binding protocol="http" bindingInformation="*:46178:localhost" />

</bindings>

</site>

Add a new binding for port 80 and the domain name to this web application under the <bindings>

<binding protocol="http" bindingInformation="*:80:Foo.localtest.me " />

Restart IIS Express and relaunch the website. Test the above setting made by opening in the browser Foo.localtest.me. It should open the web application created.

IIS (7.0) upwards

Host you application in IIS
Open up IIS Manager locate your web application under the Sites list and select "Bindings" from the action menu on the right. Add a binding for your chosen hostname (e.g. Foo.localtest.me ).

Run the site to see it in action

Make sure you are running VS as an admin for this to work
Now launch the application either hosted in IIS Express or IIS
Browse to the test domain Foo.localtest.me
Navigate to Login page and login using Microsoft Live credentials. Login should be successful

Hope you have fun while integrating Microsoft Account into your applications

Cross posted to http://blogs.msdn.com/b/pranav_rastogi/archive/2012/09/19/configuring-your-asp-net-application-for-microsoft-oauth-account.aspx