I still remember the days when few of the apps built to modify emails, wanted the username and password of the user to fetch their information. It was always unsafe, even when websites promised a lot. Basically, it was a violation of privacy, giving third party websites full control of the entire account. The biggest loophole was that if they changed the password of your account, it would be lost forever and you were bound completely without any legal support.
While Facebook was expanding, it noticed that there was a need to exchange lots of data. There were users who came for gaming, social marketing, shopping or for simple authentication and Facebook had lots of data which could be shared like name, email, activities and likes. Most other platforms didn’t realize the importance of sharing data as a business model (and yes, Google did exactly the reverse — it took your data away) and rarely took a step in this direction. But when Facebook wanted to share user’s data with other websites and in turn wanted to receive the data from them in a secure manner without exposing the credentials of the user, they made a ‘Login Via Facebook’ plugin which is based on OAuth protocol. The major feature of this method is that the user doesn’t have to share his username/password to the third party websites in order to let them access his/her data. That means, it eliminates the requirement of different key/secret for each user. Instead an app key/secret pair is enough to fetch the required data.
The whole effort by Facebook opened new gates for business. Every other website came up withLogin Via XXXX
option be it Twitter, Google+, LinkedIn, GitHub, FreshDesk and most others. But Facebook is still leads the way by long with Google catching it up. Hence this post is about the OAuth protocol along with some basic Facebook API setup.
OAuth Introduction
OAuth is basically an authentication protocol using which apps can access data from third party websites about a particular entity. An idea about how this technology works will help you understand its implementation. By taking the example of Facebook Javascript SDK Let us define OAuth in few steps so that its can be easily understood while we write the code for the same.
Facebook Javascript SDK Loads
A div
with id = fb-root
is appended to the <body>
and Facebook uses that as a reference to load its Javascript SDK on to the browser. This SDK is basically a library which has functions defined to send requests to Facebook Server which includes obtaining permissions, fetching data and posting on the behalf of a user.
User Grants Permission
User grants the permission by clicking on a the ‘Login via Facebook’ button. A request is sent to Facebook’s server. Along with that a key is also sent which has to be obtained prior to coding. It is obtained by registering your domain name with Facebook. Now Facebook matches this key and the domain it has been called from just to make sure that user grants permission to the correct website. Now the user encounters a popup from Facebook where he can grant certain permissions which Facebook takes note of. Then finally an access token is sent to the browser.
Access Token
The access token obtained is basically a string, which is an authorization of the user and Facebook to allow using certain data related to user. Now the website can send its key and access token to the Facebook server along with specifying what data it requires. Facebook cross checks the access token against the permissions it granted and sends data/error codes respectively. An access token is related to a user and a Facebook application created by the third party website for this purpose.
Validity of Access Token
The access token is valid only for 2 hours after its creation. Also if the user deactivates their Facebook account, all existing tokens become invalid. Although an access token of 2 months validity can be obtained and stored, but usually websites acquire a fresh token each time the user logs in.
Creating an App on Facebook
There are numerous tutorials available and the website itself is self explanatory. We are going to describe it briefly once again.
- Log on to Facebook and then open Facebook Developers in a new tab.
- Click on
Apps
followed byCreate a new app
.
3. Write a name for your app, select a category and click on create.
4. You can see you AppId and Secret Key.
5. Click on ‘Create a Platform’ followed by ”Website’.
6. Enter Domain name and save it.
Just keep a note of the key and secret as these will help you in the process. In the next post, a real implementation of the whole process can be discussed. Both Javascript and PHP based examples on extraction of data from Facebook Graph API will be discussed where we will build an app to show details of the user using data from his Facebook account. A lot of documentation is provided on theFacebook Developers website which provides a great deal of understanding and scope to which you can access data. It includes access user’s profile, his feed. You can also take permissions to send messages, post status and manage pages from your website on his behalf. There is API for metrics and stats of pages too. I hope you enjoyed reading this post.