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)https://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: https://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

Comments

• Anonymous
  October 02, 2013
  It is really unfortunate that Microsoft makes it so annoying for developer to test this. Why does it require a domain other than localhost, and why does it has to be port 80? Why not simply add like a debug-switch where we can freely chose what domain and what port. Making port 80 accessible on my developer machine is a no go. This is horror for projects using IIS Express, and I have to add an "setup introduction" for every other developer using this project - instead of just "Load solution and start project".

• Anonymous
  February 03, 2014
  I am getting 400 - Bad Request error with FaceBook as well as Microsoft logins at oAuth.VerifyAuthentication(redirecturl). Can you please help out of this?

• Anonymous
  May 28, 2014
  Microsoft seem to have moved the page where we set up an application - clientID and secret - I did this some time ago,but now the url above is a 404 manage.dev.live.com/AddApplication.aspx

• Anonymous
  January 13, 2015
  It is still not working for me on my local machine. I used Foo123localtest.me. Not sure what mistake I am doing.