OAuth with Facebook

Most of the applications over the web these days need to get connected with each other. With the surge of Social Aware applications, people started integrating all of their social applications in one location. Following is my attempt to solve the "Complex" but easy puzzle for novice developers.

To start with, I’ll demonstrate how to Login with Facebook and details of Facebook user into your application.

Let me first explain what OAuth means in brief. Below is the diagram which explains it.

First, we call Service provider with ClientID / CallBack URL and some additional parameters based on the service provider you use.

Then, if we pass the right parameters, the Service provider will give us a call back to given callback URL with Authorization Token and some parameter that states time to live.

Now we can use this Authorization token in our subsequent requests to Service Provider provided services.

Here is example of Facebook.

Step 1

Go to Facebook developer Page.

Step 2

Register your app. You will get your app key/secret, etc.

Step 3

Now go to this sample URL to get your token.

Test with this URL

https://graph.Facebook.com/oauth/authorize?type=user_agent&client_id=
168452316544703&redirect_uri=http%3A%2F%2Fnorthalley.com%2FTestWeb%2F/
GetIPServlet&scope=user_photos,email,user_birthday,user_online_presence

Replace corresponding tokens for your application:

https://graph.Facebook.com/oauth/authorize?type=user_agent&client_id=
CLIENT_ID&redirect_uri=REDIRECT_URL&scope=user_photos,email,user_birthday,
user_online_presence

Step 4

Once you get Call back, get the access_token from the request and store it.

Example

http://northalley.com/TestWeb/GetIPServlet#access_token=168452316544703%7C2.
WKMyHmlbzscco7HjrkJUMw__.3600.1304560800.1-100000131478113%7C9IpaoHOvCIfS4bqRZSqbu5-
Rp8E&expires_in=5233

Step 5

Get user data using the above token:

https://graph.Facebook.com/me?access_token=168452316544703|2.
WKMyHmlbzscco7HjrkJUMw__.3600.1304560800.1-100000131478113|9IpaoHOvCIfS4bqRZSqbu5-Rp8E

This gets user data in the following format:

"id": "100000131478113",
"name": "Ashwin Kumar",
"first_name": "Ashwin",
"last_name": "Kumar",
"link": "http://www.Facebook.com/profile.php?id=100000131478113",
"birthday": "06/24/1984",
"hometown": {
   "id": "103095893064172",
   "name": "Rajahmundry"
},
"location": {
   "id": "103129393060364",
   "name": "Allentown, Pennsylvania"
},
"work": [
   {
      "employer": {
         "id": "111926488822704",
         "name": "Freelancer"
      },
      "position": {
         "id": "130875350283931",
         "name": "CEO & Founder"
      },
      "start_date": "0000-04",
      "end_date": "0000-00"
   },

...

Enjoy integrating Facebook to your application. Subsequent series will cover Google/Twitter/LinkedIn/Yahoo Integration. I am also writing a Java library for this.. I will share that in open source once it has been completed.

Enjoy playing with social apps.