Facebook Apps
Facebook Apps - OAuth 2.0
Now a Days Facebook Apps Have Became very Popular among all the society so I thought of writing a Blog post about How to Create Such App with requesting Facebook APIs and all those necessary information will be included this blog post
We all do click on various Facebook apps on daily basis, when we do they ask our permiiion by asking to log in to our account
Basically they Use OAuth (2.9 these days) Protocal
OAuth (Open Authorization) is an open standard for token-based authentication and authorization on the Internet. OAuth, which is pronounced "oh-auth", allows an end user's account information to be used by third-party services, such as Facebook, without exposingthe user's password.
I'm Gonna Show you How to Build one
This is Whats Happening Behind the AOuth protocol

What is this token Facebook provides? actually Facebook provides two types of tokens. Access token and refresh token. Access token can be used several times before it gets expired. Once it is expired refresh token is sent to Facebook server in order to receive another access token along with a new refresh token.User can use this access token to get information from Facebook
Lets Start
First go to : https://developers.facebook.com/

Go to "My Apps" on top right corner and select add new app.
This window will pop up. Enter required details and click "create App ID"

Now click on "Add Platform" on left corner navigation list. You will see something like this. Click on "Get started" in Audience Network.

Choose WWW

You will see this area. In here you have to provide redirect URL in valid OAuth redirect URLs.
Facebook will send all his responses to this URL.

In "settings" provide a App Domain and a Website URL.

To provide a Website you have to click on "+ Platform" and then click on website.

In Dashboard you can see your app's App ID and App secret.

Obtain Authorization code from Facebook
For this we have to prepare the URL. This URL contains for elements.When we put these elements together all should be encoded using a URL encoding method. Parameter name, value and encoded value is given below.
1. response_type.
Code
Code
2. client_id
123776704858492
123776704858492
3. redirect_uri
http://localhost/team/
http%3A%2F%2Flocalhost%2Fapp%2F
4. scope
public_profile user_posts user_friends user_photos
public_profile%20user_posts%20user_friends%20user_photos
Now combine these values and make the URL.
https://www.facebook.com/dialog/oauth?response_type=code&client_id=123776704858492&redirect_uri=http%3A%2F%2Flocalhost%2Fapp%2F&scope=public_profile%20user_posts%20user_friends%20user_photos
Enter that URL in the URL bar of your browser and hit enter. Now you will see something like this. This is called as user consent page. In there you can see "Edit this" button. If you click on that you can manage the accessing resources.
Now Before Continuing any Further You Have to Develop the App in local host
when you try to continue you will get this since you don't have your app on localhost

In the HTTP Headers, we need to add the Authorization header with the App credentials.
App ID - 123776704858492
App secret - 56aa7a00bece46353c8342e1ca3fdad3
AppID:App_secret
123776704858492:56aa7a00bece46353c8342e1ca3fdad3
Now we have to encode this whole value using a base64 encoder.MTIzNzc2NzA0ODU4NDkyOjU2YWE3YTAwYmVjZTQ2MzUzYzgzNDJlMWNhM2ZkYWQz
To get the access token we have to specify the token endpoint. In this case it is this url
https://graph.facebook.com/oauth/access_token .
Install RESTClient in your browser.
Give those values and obtain access token.

Retrive Resources using access token
From GET - Method.
Now Lets See how to implement the app which will use these information and gives meaning full outputs to the user
in this case I've Used PHP platform
My Github Repository for the php app :
https://github.com/PasanRS/Facebookapp---OAuth-2.0
You have to have Facebook SDK v5 for PHP. Please Refer Down Link
https://developers.facebook.com/docs/reference/php
Index.php




index (MAIN Page) will look like this

land.php







And Finally App result will look like this :) :)

I Hope Now you guys Have Clear understating about Whats happening Here :)
See you again soon with another article
Leave a Comment :)
Thank you for Reading
Now a Days Facebook Apps Have Became very Popular among all the society so I thought of writing a Blog post about How to Create Such App with requesting Facebook APIs and all those necessary information will be included this blog post
We all do click on various Facebook apps on daily basis, when we do they ask our permiiion by asking to log in to our account
Basically they Use OAuth (2.9 these days) Protocal
OAuth (Open Authorization) is an open standard for token-based authentication and authorization on the Internet. OAuth, which is pronounced "oh-auth", allows an end user's account information to be used by third-party services, such as Facebook, without exposingthe user's password.
I'm Gonna Show you How to Build one
This is Whats Happening Behind the AOuth protocol

What is this token Facebook provides? actually Facebook provides two types of tokens. Access token and refresh token. Access token can be used several times before it gets expired. Once it is expired refresh token is sent to Facebook server in order to receive another access token along with a new refresh token.User can use this access token to get information from Facebook
Lets Start
First go to : https://developers.facebook.com/
Go to "My Apps" on top right corner and select add new app.
This window will pop up. Enter required details and click "create App ID"
Now click on "Add Platform" on left corner navigation list. You will see something like this. Click on "Get started" in Audience Network.
Choose WWW
You will see this area. In here you have to provide redirect URL in valid OAuth redirect URLs.
Facebook will send all his responses to this URL.
In "settings" provide a App Domain and a Website URL.
To provide a Website you have to click on "+ Platform" and then click on website.
In Dashboard you can see your app's App ID and App secret.
Obtain Authorization code from Facebook
For this we have to prepare the URL. This URL contains for elements.When we put these elements together all should be encoded using a URL encoding method. Parameter name, value and encoded value is given below.
1. response_type.
Code
Code
2. client_id
123776704858492
123776704858492
3. redirect_uri
http://localhost/team/
http%3A%2F%2Flocalhost%2Fapp%2F
4. scope
public_profile user_posts user_friends user_photos
public_profile%20user_posts%20user_friends%20user_photos
Now combine these values and make the URL.
https://www.facebook.com/dialog/oauth?response_type=code&client_id=123776704858492&redirect_uri=http%3A%2F%2Flocalhost%2Fapp%2F&scope=public_profile%20user_posts%20user_friends%20user_photos
Enter that URL in the URL bar of your browser and hit enter. Now you will see something like this. This is called as user consent page. In there you can see "Edit this" button. If you click on that you can manage the accessing resources.
Now Before Continuing any Further You Have to Develop the App in local host
when you try to continue you will get this since you don't have your app on localhost
In the HTTP Headers, we need to add the Authorization header with the App credentials.
App ID - 123776704858492
App secret - 56aa7a00bece46353c8342e1ca3fdad3
AppID:App_secret
123776704858492:56aa7a00bece46353c8342e1ca3fdad3
Now we have to encode this whole value using a base64 encoder.MTIzNzc2NzA0ODU4NDkyOjU2YWE3YTAwYmVjZTQ2MzUzYzgzNDJlMWNhM2ZkYWQz
To get the access token we have to specify the token endpoint. In this case it is this url
https://graph.facebook.com/oauth/access_token .
Install RESTClient in your browser.
Give those values and obtain access token.

Retrive Resources using access token
From GET - Method.
Now Lets See how to implement the app which will use these information and gives meaning full outputs to the user
in this case I've Used PHP platform
My Github Repository for the php app :
https://github.com/PasanRS/Facebookapp---OAuth-2.0
You have to have Facebook SDK v5 for PHP. Please Refer Down Link
https://developers.facebook.com/docs/reference/php
Index.php
index (MAIN Page) will look like this
land.php
And Finally App result will look like this :) :)
I Hope Now you guys Have Clear understating about Whats happening Here :)
See you again soon with another article
Leave a Comment :)
Thank you for Reading
Comments
Post a Comment