Udostępnij za pośrednictwem


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
  • 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.