Oauth 2.0 with Facebook

First of all lets see what Oauth 2.0 is, it is an authorization framework that let 3rd party apps to obtain limited and access permission a user account and perform some action on behalf of the user. It uses delegated tokens provided by service that hosts the user account to access user account information.  it is important to understand that Oauth 2.0 is not an authentication framework but an authorization framework. Today many sites like Facebook and google provide Oauth 2.0 services.



As you can see Facebook provide Oauth services.below diagram show how Oauth protocol work.

1. The 3rd party application requests authorization permission from the user
2. If user approves the request, the application receives the authorization to user's approved resources
3. Application requests an access token from the authorization server 
4. If the application identity is authenticated the authorization is granted and app is allowed limited access  to the user account using an access token issued by authorization server
5. Application request the user resources from resources from resource server and presents the access token
6. If the token is valid resource server serves the application request.

Authorization server issues 2 types of tokens

1. Access token - access user resources.
2. Refresh token - renew the access token when expired.

As you can guess all those app you use in Facebook uses the Oauth to get your information and post on you wall.

Lets create a Facebook app that uses Oauth protocol.

first you need to visit Facebook developers page by clicking here

Click My Apps and add a new app, if your window doesn't say My Apps don't worry, that is because you don't have any applications yet.Click create app and give a display name for the app and click create app.
then you will get the app dash board.

Click get started in Facebook Login and select "WWW" as platform. Click facebook Login which is available under Products and click settings and change redirect url to your app URL,in my case it's the localhost/facebookapp.

 

 Next click settings of the app and add the domain of the site where your app is hosted, again in my case its localhost.   

    And remember to copy both app ID and app secret. because we are going to need them later.

You can change the app permissions by clicking Tools and support , then graph explorer, and then set your app name from the application drop down and then select get user token in token drop down, then tick all the permission you need for the app

and click "Get Access Token", If everything went well you will get a window like below

This means we can get the token now,Next we have to download the "facebook php SDK" from git hub. Click here to download.

and put the folder inside your app folder. we can use built-in methods to access user information and perform actions like posting on user's wall. this free us from the burden of manually creating URLs to access user information.

I'm going to write 3 php files to implement my app.

     1. fbConfig.php

     2. index.php

     3. ops.php

Change the fbConfig.php file using the app details related to your application.

 index.php is where your designs related to homepage go. Modify it according to your needs

   

Just remember to include the fbConfig.php at the beginning of the file.Once the try now button is clicked it will go to ops.php

Here app will request for user's Name, birthday and profile picture and then it will compare month of the birth with a given list and generate the result.

After login into facebook app works as follows

Click Try now button

 If you Click the Share App button, It'll share the URL of the app in the user's wall as below

You can download the source codes here

To setup the app download the source files from git hub and extract the zip file and place the uncompressed file in "www" folder inside wamp installation folder. and then run the localhost and access the localhost/facebookapp/ 

Some Methods used inside the application which are from the Graph API are given below

• $fb -> get('/me?fields=name,first_name,last_name,birthday,picture') - This method request the basic profile information from the user account
• $fb -> get('/me/picture?redirect=false&height=310&width=300') - Request user profile picture from facebook
• $fb -> getOAuth2Client() - Request Oauth client support
• $fb -> setDefaultAccessToken($_SESSION['facebook_access_token']) - Setting the default access token to be used inside the application
• $fb->post('/me/feed',array('message'=>$_POST['msg'])) - Posting a message on the user's wall