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

By Ugo Lattanzi on Aug. 20th , 2012 in aspnetmvc WebDev | comments

Share On Google Share On Facebook Share On Twitter

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: xml <package id="DotNetOpenAuth.AspNet" version="" targetFramework="net45" /> <package id="DotNetOpenAuth.Core" version="" targetFramework="net45" /> <package id="DotNetOpenAuth.OAuth.Consumer" version="" targetFramework="net45" /> <package id="DotNetOpenAuth.OAuth.Core" version="" targetFramework="net45" /> <package id="DotNetOpenAuth.OpenId.Core" version="" targetFramework="net45" /> <package id="DotNetOpenAuth.OpenId.RelyingParty" version="" 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

Now, inside the method RegisterAuth into the class AuthConfig (App_Start/AuthConfig.cs), write that code: csharp 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

Now,  add this line of code into AuthConfig: csharp OAuthWebSecurity.RegisterTwitterClient(consumerKey: " yourConsumerKey", consumerSecret: "yourConsumerSecret"); LinkedIn integration:

As the previous socials, register your app here

In AuthConfig add this: csharp OAuthWebSecurity.RegisterLinkedInClient("yourKey", "yourSecret"); Yahoo Integration:

That is really simple, just add this line of code: csharp OAuthWebSecurity.RegisterYahooClient(); into AuthConfig

Google Integration:

Like Yahoo, Google integration doesn’t require any key or secret, so just add this: csharp 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 (not so easy to find the url :))

Into AuthConfig add this: csharp 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