How integrate Facebook, Twitter, LinkedIn, Yahoo, Google and Microsoft Account with your ASP.NET MVC application

Aug 20, 12 • In aspnetmvc, WebDev

In the past week, 15 august, Microsoft released an incredible number of cool stuff, starting from Windows 8 and ending to Visual Studio 2012 including the new ASP.NET Stack.

The version 4 of ASP.NET MVC introduces several cool features; most of them was available with the Beta and RC versions (Web API, Bundling, Mobile Projects Templates, etc.), but the RTM is not a “fixed version” of the RC, it has other interesting things.

After the installation, the first thing I noticed is a set of helpers inside the folder App_Start:

That makes the code much cleaner and maintainable, but it’s not enough J

From my point of view the most cool feature introduced with the RTM is the integration with the social network.

In the RTM, there are new packages in the default templates:

<package id="DotNetOpenAuth.AspNet" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OAuth.Consumer" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OAuth.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OpenId.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OpenId.RelyingParty" version="4.0.3.12153" targetFramework="net45" />

These packages make simple the integration with the most social networks like Facebook, Twitter, LinkedIn, Yahoo, Google and Microsoft Client.

Obviously you can extend this with other providers but we’ll take a look in another post. Right now just testing the commons social.

Facebook integration:

First step for Facebook is retrieve the ConsumerKey and ConsumerSecret (it is based on oAuth 2.0), so register you application on https://developers.facebook.com/apps

Now, inside the method RegisterAuth into the class AuthConfig (App_Start/AuthConfig.cs), write that code:

OAuthWebSecurity.RegisterFacebookClient(appId: "yourAppId", appSecret: "yourAppSecret");

Twitter integration:

Twitter is based on oAuth 1.x and, exactly like Facebook, it needs the ConsumerKey and ConsumerSecret so, register your app here https://dev.twitter.com/

Now,  add this line of code into AuthConfig:

OAuthWebSecurity.RegisterTwitterClient(consumerKey: " yourConsumerKey", consumerSecret: "yourConsumerSecret");

LinkedIn integration:

As the previous socials, register your app here https://www.linkedin.com/secure/developer?newapp=

In AuthConfig add this:

OAuthWebSecurity.RegisterLinkedInClient("yourKey", "yourSecret");

Yahoo Integration:

That is really simple, just add this line of code:

OAuthWebSecurity.RegisterYahooClient();

into AuthConfig

Google Integration:

Like Yahoo, Google integration doesn’t require any key or secret, so just add this:

OAuthWebSecurity.RegisterGoogleClient();

in AuthConfig.cs

Microsot Account (formely known as Live ID):

It is based on oAuth, so you need to register your application here https://manage.dev.live.com/AddApplication.aspx (not so easy to find the url :) )

Into AuthConfig add this:

OAuthWebSecurity.RegisterMicrosoftClient(clientId: “yourClientId”,clientSecret: “yourClientSecret”);

Start the application.
Now, all your social networks are registered, so you just need to run the application and test it.
Push F5 and everything should work automatically.

Just few notes about the login page.

As you probably noticed we called a set of static method for the class OAuthWebSecurity. Each time we add a provider, the login page changes showing the available social.
If you want to retrieve the list you just have to call the method OAuthWebSecurity.RegisteredClientData to obtain a collection of AuthenticationClientData with all information (provider name, authentication data, extra data and so on).

Is it cool?
I think so. Stay tuned for other cool stuff about ASP.NET MVC 4

Related Posts

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1172

  • http://twitter.com/Parajao Parajao

    Great!!!! thank you @imperugo!!! ;)

  • http://www.novatechconsulting.it/ Mario Saccoia

    Fantastic article!!! ;)

  • imp

    So, what is the OAuth2.0 in Google API Console is used for when it does not need key and secrete to work with Google client?

  • praveen ch

    thank you, great article..

    i want the asp.net code for send message to mobile number from asp.net application & also send future sms like way2sms or 160by2….

    plz help me

  • Manish

    my question is same as imp.
    I tried to use Google integration but I could work it out.
    I also tried to pass parameter as secret key or something but there isn’t any where to pass.
    Would you please tell me how Google integration works in VS 2012.
    Thanks in advance.!!

Scroll to top