OAuth/OpenID Support for WebForms, MVC and WebPages

OAuth/OpenID Support for WebForms, MVC and WebPages

Rate This
  • Comments 45

[Update]

Adding relevant links at the bottom of the post

One of the coolest features in Visual Studio 2012 is the ability to login using your Microsoft, Facebook, Twitter or Google account. The project templates showcase a social way of logging in along with the usual way of logging in by creating a local account

This post highlights how you can turn on support for logging through these services in the project  templates. Head over the following video to get a quick glance on this feature http://www.asp.net/vnext/overview/videos/oauth-in-the-default-aspnet-45-templates

Enable OAuth login using Facebook, Twitter

Steps to get keys for Facebook

  • Go to the Facebook developers site (log in if you're not already logged in).
  • Choose the Create New App button, and then follow the prompts to name and create the new application.
  • In the section Select how your app will integrate with Facebook, choose the Website section.
  • Fill in the Site URL field with the URL of your site (for example, http://www.example.com). The Domain field is optional; you can use this to provide authentication for an entire domain (such as example.com).
    Note   If you are running a site on your local computer with a URL like http://localhost:12345 (where the number is a local port number), you can add this value to the Site URL field for testing your site. However, any time the port number of your local site changes, you will need to update the Site URL field of your application.
  • Choose the Save Changes button.
  • Choose the Apps tab again, and then view the start page for your application.
  • Copy the App ID and App Secret values for your application and paste them into a temporary text file. You will pass these values to the Facebook provider in your website code.
  • Exit the Facebook developer site.

Steps to get keys for Twitter

  • Browse to the Twitter developers site.
  • Choose the Create an App link and then log into the site.
  • On the Create an Application form, fill in the Name and Description fields.
  • In the WebSite field, enter the URL of your site (for example, http://www.example.com).
    Note   If you're testing your site locally (using a URL like http://localhost:12345), Twitter might not accept the URL. However, you might be able to use the local loopback IP address (for example http://127.0.0.1:12345). This simplifies the process of testing your application locally. However, every time the port number of your local site changes, you'll need to update the WebSite field of your application.
  • In the Callback URL field, enter a URL for the page in your website that you want users to return to after logging into Twitter. For example, to send users to the home page of the Starter Site (which will recognize their logged-in status), enter the same URL that you entered in the WebSite field.
  • Accept the terms and choose the Create your Twitter application button.
  • On the My Applications landing page, choose the application you created.
  • On the Details tab, scroll to the bottom and choose the Create My Access Token button.
  • On the Details tab, copy the Consumer Key and Consumer Secret values for your application and paste them into a temporary text file. You'll pass these values to the Twitter provider in your website code.
  • Exit the Twitter site.

Steps to enable OAuth support in WebForms

    • Create a new ASP.NET WebForms Application
    • Goto App_Start\AuthConfig.cs and uncomment the following lines of code
OpenAuth.AuthenticationClients.AddTwitter(
                 consumerKey: "your Twitter consumer key",
                 consumerSecret: "your Twitter consumer secret");
 
            OpenAuth.AuthenticationClients.AddFacebook(
                 appId: "your Facebook app id",
                 appSecret: "your Facebook app secret");

Steps to enable OAuth support in MVC

    • Create a new ASP.NET MVC Internet Application
    • Goto App_Start\AuthConfig.cs and uncomment the following lines of code
//OAuthWebSecurity.RegisterTwitterClient(
            // consumerKey: "",
            // consumerSecret: "");
 
            //OAuthWebSecurity.RegisterFacebookClient(
            // appId: "",
            //    appSecret: "");

Steps to enable OAuth support in WebPages

    • Create a new ASP.NET WebSite(Razor2)
    • Goto _AppStart.cshtml and uncomment the following lines of code
//OAuthWebSecurity.RegisterTwitterClient(
            // consumerKey: "",
            // consumerSecret: "");
 
            //OAuthWebSecurity.RegisterFacebookClient(
            // appId: "",
            //    appSecret: "");

OpenID services such as Google

Steps to enable OpenID support in WebForms

  • Create a new ASP.NET WebForms Application
  • Goto App_Start\AuthConfig.cs and uncomment the following lines of code
OpenAuth.AuthenticationClients.AddGoogle();

 

Steps to enable OpenID support in MVC

  • Create a new ASP.NET MVC Internet Application
  • Goto App_Start\AuthConfig.cs and uncomment the following lines of code

OAuthWebSecurity.RegisterGoogleClient();

Steps to enable OpenID support in WebPages

  • Create a new ASP.NET WebSite(Razor2)
  • Goto _AppStart.cshtml and uncomment the following lines of code

OAuthWebSecurity.RegisterGoogleClient();

Links to relevant posts

http://blogs.msdn.com/b/webdev/archive/2012/08/22/extra-information-from-oauth-openid-provider.aspx

http://blogs.msdn.com/b/pranav_rastogi/archive/2012/08/23/plugging-custom-oauth-openid-providers.aspx

http://blogs.msdn.com/b/webdev/archive/2012/08/24/customizing-the-login-ui-when-using-oauth-openid.aspx

http://blogs.msdn.com/b/webdev/archive/2012/09/12/integrate-openauth-openid-with-your-existing-asp-net-application-using-universal-providers.aspx

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

http://www.asp.net/mvc/overview/getting-started/using-oauth-providers-with-mvc 

Happy Logging in a social way!!!

Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post
  • @Michael/@Stephen yes you get extra metadata(first name/last name) from the oauth/openid provider if available

    You can even write your own provider if you want to customize the data you want back from the provider. I will be soon be putting out a blog post for this

  • Any ideas when the Microsoft OAUTH in Live will allow development domains like http://localhost or http://127.0.0.1?

  • Hi Pranav,

    How would I be able to retrieve additional data such as: First Name, Last Name, Email Address, default Photo URL and other profile information from sites such as Facebook, Twitter, Google, etc. using these providers?

    John.

  • I just blogged about how to retrieve more data from the oauth/opened default built in providers. blogs.msdn.com/.../extra-information-from-oauth-openid-provider.aspx

    I will be blogging more on how to extend this stack to plug in your own providers as well over the next few days

  • Thanks much for all your work here. Really appreciated. Can't wait for more information on how to add other providers.

  • blogs.msdn.com/.../plugging-custom-oauth-openid-providers.aspx shows you how you can plug in your own provider for google and similarly you can do this for others

  • Thanks Pranav for writing about retrieving additional data and provider customization!

  • @pranav rastogi

    What's wrong with linked-in? It doesn't seem to be working properly, the AuthenticationResult is always unsuccessful.

  • @Raul what is failing for you? Are you getting a 401 from the server when you are authenticating?

  • Yes. I had to create a custom client in order to get this working properly. The problem seems to be with the token manager.

    This constructor overload works fine:

    public LinkedInCustomClient(string consumerKey, string consumerSecret) :

               base("linkedIn", LinkedInServiceDescription, consumerKey, consumerSecret) { }

    The default one that the included client uses doesn't.

  • For facebook, how or where do I pass permissions required for my App (or "scope" settings) such as user_photos or publish_stream.  Is this done by setting the "extraData" parameter on the OAuthWebSecurity.RegisterFacebookClient method?

  • Hi we're using 2012 and .net 4.5 and just started using oauth

    I was just wondering with the Roles table that is created is there any way to get the roles hooked up using the asp.net configuration tool or do you have to manually write an admin page to add roles and add users to roles?

    Cheers,

    Tom

  • @Victor you will have to extend the facebook provider and plug it in into the system. Have a look at this post which explains on how you can plugin your own provider and request for more information blogs.msdn.com/.../plugging-custom-oauth-openid-providers.aspx

    @Raul Thanks for the information. We have taken a note of it and will fix it in the next version. for now you can plugin your own provider and work around this issue

    @Tom, if you are using universal providers, you can use the webadmin tool to configure roles with users. I will show how to do this in a post coming in a few days

  • @pranav I did just that. Thanks in advance for your quick response and I'm looking forward for the update.

    Here's how I did it in case anyone else wants to use it: blog.mrroa.com/.../asp-net-custom-linkedin-oauth-provider

  • Great article, thanks. May be a stupid question but could you add a section on  "Steps to get keys for Live (i mean Microsoft account)" Thanks again

Page 2 of 3 (45 items) 123