Introduction
In this article, I will discuss about how to implement OAuth
in getting responses from 4 major social sites (Facebook, Google, Twitter and LinkedIn). The demo application will help the developers working with social authentication or social login integration to their website. The article will cover points starting from difference between OAuth
version 1.0 and 2.0 to getting user profile responses. The demo application is a playground to test OAuth
process step by step. In the application, we have the scope to add other social provider if we wish to.
Background
I faced so many issues in getting started with Version 1.0 OAuth
code with different social sites like Google, Twitter and Linkedin. There are so many frustrating errors and responses coming from social sites that are of no real help and hint. But understanding them over again, I came to know that it is just a matter of sending correct authorization header to valid end points. I compiled all the working code of all social sites and made a working project to successfully authenticate from 4 different sites (Google, Facebook, Twitter and Linked in) and lastly getting back the user profile responses.
Difference between OAuth Version 1.0 and 2.0
OAuth 1.0 version specifications are given at http://hueniverse.com/oauth/. In a nutshell version, practical steps are:
- We need to have API keys (customer key and customer secret).
- Using API keys get Request Token.
- Using Request Token, verify user by login to social site and redirecting back to the application.
- After successful verification, get Access Token.
- Using Access token, create request for service APIs like getting user profile, post comments, get friends list etc.
OAuth 2.0 version has relatively less steps as follow:
- We need to have API keys (customer key and customer secret).
- Using API keys, verify user by login to social site and redirecting back to the application.
- After successful verification, get Access Token.
- Using Access token, Create request for service APIs like getting user profile, post comments, get friends list, etc.
Using the Code
Starting from step 1 and code sample:
- Declare "
CustomerKey
" and "CustomerSecret
" in OAuth\Credentials.cs.
- Function
GetRequestToken()
called in OAuth\OAuthClient.cs to get request token.
- After that function
ObtainVerifier()
is used to redirect to social site login page for authentication.
- After redirecting from social site, we land at "OAuthVerifier.aspx". Then button "Get Access Token" triggers function
GetAccessToken()
to get "AccessToken
" and "AccessTokenSecret
" for Version 1.0 and "Code
" for Version 2.0. Now these vars can be used to call service APIs of social sites.
- Button "Get Response" is now activated in OAuthVerifier.aspx to get profile response. It fires function
GetProfileResponse()
.
Profile Response Code Explanation
In OAuth
process, there are 2 phases:
- The first phase involves a redirection-based browser process for end-users to authorize client access to their resources.
- The second phase involves a method for making authenticated HTTP requests using set of credential for using resources.
The first phase process is straightforward and has common code for almost all social sites authorization (depends on version 1.0 and 2.0). But for the second phase, we need some awareness to call the resources APIs. E.g., In Twitter, even after getting Access token, we needed "screen_name
" or "user_id
" to get profile data from Twitter server. Profile request URL for Twitter should be http://api.twitter.com/1/users/show.json?screen_name=abc.
Similarly, other providers need some query string params to pass with URL. We have a function CreateQueryString()
in OAuth\OAuthContext.cs to add needed var
s.
private string CreateQueryString()
{
string queryString;
switch (SocialSiteName.ToLower())
{
case "twitter" : queryString = "?screen_name=" + ScreenName; break;
case "facebook" : queryString = "?access_token=" + AccessToken; break;
case "linkedin" : queryString = "?format=json"; break;
case "google" : queryString = string.Empty; break;
default : queryString = string.Empty; break;
}
return (queryString);
}
Getting Started
- Download the attached demo project. "OAuth4Client.zip", extract the file and open up the solution in Visual Studio 2010.
- Go to OAuth\Credentials.cs, give consumer key and consumer secret for each social site to test.
- Make Default.aspx page as start page and press F5. Choose your social site and now you are in the playground. :)
Facebook integration (Version 2.0)
I got some mails regarding Facebook error coming with the code. To get profile response from Facebook, we need to follow some basic steps:
- Provide
ConsumerKey
and ConsumerSecret
for Facebook in OAuth\Credentials.cs (as usual).
- Go to https://developers.facebook.com/apps -> login there -> you will be asked to give password again.
- Select the app for which you are using the
ConsumerKey
and ConsumerSecret
-> click Edit App.
- Go to Website -> Site url text box. Provide the "http://localhost:49262/OAuthVerifier.aspx" in there -> Save
- Come to the application. Press F5 (run in debug mode, it should run with "
localhost:49262
"). Then test for the profile response. It should come now.
History
- 15th January, 2012: Initial post
- 24th February, 2012: Article updated