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.
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
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
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_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
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.
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! :) :)
Try to create your own Facebook App using OAuth.. :)
Thank You! :) :)