Facebook App - OAuth

Nowadays Facebook apps are very popular among the people. There are various types of apps developed by many people. These apps are built most of the time for entertaining purposes.

Today everyone who is using Facebook, they use at least one app. Most of the time when someone sees an app interesting they click on that app. As an example if you click on an app they ask you to login as Facebook. So if you have a Facebook account you can access that app without any issue. But do you know how we able to access an app which developed by unknown person? That’s the point the OAuth word comes to our topic.

Actually what is this OAuth or Open Authorization mean? OAuth is a framework for delegated authorization. It’s a protocol to access an external party. It allows an end user’s account information to be used by third-party services, such as Facebook / Twitter, without exposing the user’s password.

Let’s see what the procedure of this OAuth framework is.

In this blog post I’m going to show you how to create a simple Facebook account using OAuth.

You can visit this URL to download a sample application from my github account.

https://github.com/janitha1st/OAuth---Sample-Facebook-App

Now we move to the creating steps..

First go to the https://developers.facebook.com/ page and create an app.

After that if you’re not logged in to our Facebook account, login to it. If you already logged in just go to “My Apps” which is on the top right corner of the page and simply click “New App”. Then give the required details. 

Then you will display a interface like this… Click the "get started" button in "Audience network"

Then choose a platform

After that you will see a page like this. There you should provide valid redirect URL in valid OAuth direct URLs. In my scenario my Facebook app is hosted in localhost/fb/ folder.

In “Settings” tab give the app domain and the Website URL… You can see the App ID and the App Secret here.

Now we will see how to use this Redirection point URL, App ID and the App Secret to get information from the Facebook.,

We have to prepare the URL for this app. To that first of all we should encode response type, client ID , Redirect uri and scope. You can use online encoding tool for do it. Here is a sample online encoding tool (https://meyerweb.com/eric/tools/dencoder/). Here is my one..,

·         response_type

Before encoding – Code                      

After encoding – Code

·         client_id

Before encoding – 1326621240784654   

After encoding – 1326621240784654

·         redirect_uri

Before encoding – http://localhost/faceb/       

After encoding –  http%3A%2F%2Flocalhost%2Ffaceb%2F

·         scope

Before encoding – public_profile user_friends user_photos user_posts

After encoding – public_profile%20user_friends%20user_photos%20user_posts

Now type https://www.facebook.com/dialog/oauth? and combine all these encoded values and paste it on URL bar. Then, you will redirect to a page like this.
Example - https://www.facebook.com/dialog/oauth?response_type=code&cclient_id=1326621240784654&redirect_uri=http%3A%2F%2Flocalhost%2Ffaceb%2F&scopepublic_profile%20user_friends%20user_photos%20user_posts

   

After that you will display another page simply click on "Continue as <your name>" or you can edit privacy and then click on it.
Then this page will display..,

Why are we getting this type of message? Because we don’t have a project to support http://localhost/faceb

But in URL box we can get the authorization code which sent from the Facebook

http://localhost/faceb/?code=JSCRsjK348Gmy1upjm7vXVWPA5_n3A64gRs43npMFInR7b3H2-ibuf7s9vMaPnx3uqQt_oT2wx7XeICuIUlR2J-xICsHREiV5RmZ_-tqEPxKZYWfbI9qCtUopJBtLPkvC7KkPlWsshukf2siNYG1oAJTI87cYmNPC5_vhFdJeVAG7jqPu-Wbc1ACrLHMkCvMXXiWryWz0hMOGWMiZfgA8kteKuj0Y18fzL8vI156P1UiOiOr9pAz11OXrEPtga

7bZt4UJzzFJ0V8QJ0rof8Kc2HmKvGoaKpOC6oJBpR09fPo2fRs8umhQ5JMa4pHZwpm7j4nI-t4goKumDxpMMnlHG7R#_=_  

In the HTTP Headers, we need to add the Authorization header with the App credentials. 
App_ID                1326621240784654

App_Secret        a1adb0a3904efe17c94fb48474a941c9

APP_ID:APP_Secret 1326621240784654:a1adb0a3904efe17c94fb48474a941c9

Now encode this whole value by using a 64 bit encoder..

MTMyNjYyMTI0MDc4NDY1NDphMWFkYjBhMzkwNGVmZTE3Yzk0ZmI0ODQ3NGE5NDFjOQ

To receive the Access Token we should clearly mention the token endpoint.

Before type this values in URL bar you should install the “RESTClient” plugin to your browser.

Then type https://graph.facebook.com/oauth/access_token and give those values as before to obtain access token.

How to retrieve properties using Access Token?

Method – GET

URL - https://graph.facebook.com/v2.8/me?fields=id

Authorization: Bearer <access token value>
This will give user’s ID in JSON object format. Using this ID you can get any information you want.

Now it’s time to look at the implementation of this app. I implemented this using PHP. To do the implementation you have to get the Facebook SDK v5 for PHP. It’s also available in my github repository.

These are the files which contains in that folder.,

If you are not already logged in to your Facebook account, when you run the app you will display this page. This is the index.php page.

Then you will display the login page of Facebook. After login to your account you will redirect to 1.php (in my app) page. It’s like this..,

You can download source code and Facebook SDK v5 for PHP folder from my github account by clicking above URL..

Try to create your own Facebook App using OAuth.. :)

Thank You! :) :)