Facebook Authentication and Authorization

Facebook has changed the face of internet world. Socializing media and people has added a new dimension to this Internet Era. Ranging from facebook auth, facebook widgets (Like, Activity Stream, Share) Facebook hosts several other features to socialize the content.

Authenticating from auth providers like facebook, google, twitter also has added to seamless integration of Web Application with Social Platforms.

Lets see how facebook authentication works behind the scenes.

Authentication can happen on client side as well as server side. Facebook do provides API for each Use Case.

Lets see, how client side authentication can be done through facebook using FB Javascript APIs.

1. The Very First thing required is to Initialize the Facebook JS Plugin into your webpage.

/** Facebook Login Scripts */
window.fbAsyncInit = function() {
FB.init({
    appId : '336784893001186', // App ID
    channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html',
    status : true, // check login status on load
    cookie : true, // enable cookies
    oauth : true, // enable OAuth 2.0
    xfbml : true

});
// Additional initialization code here
// run it once with the current status and also whenever the status changes
FB.getLoginStatus(function(response) {
     onStatus(response);
     // once on page load
     FB.Event.subscribe('auth.statusChange', onStatus);
     // every status change
});
};
// Load the SDK Asynchronously
( function(d) {
     var js, id = 'facebook-jssdk';
     if(d.getElementById(id)) {
       return;
      }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

Also we need to add a div in our html page

Description :

  1. Before Using any of the API, We need to register a facebook application. Adding basic information like app name, and domain name, we’ll get an application ID which we will use here in script above to load FB JS API. So FBJS API loaded for our app will be unique to our domain name, and won’s work outside the domain.
  2. On loading FB API Script, FB.getLoginStatus function will execute which will check if user has already logged in to the application, and bind to auth.statusChange event with a method onStatus. This particularly helps when on page load when we want to load user information e.g status, profile picture, or in case of not logged in, we want to redirect user to app’s login page.
  3. fb-root is required as a placeholder to store the FB API Javascript. Without it FB Apps initialization code won’t work

Lets say user is not logged in. we will show him login button, else we’ll show logout button.

      
     function onStatus(response) {
		console.log('onStatus', response);
		if(response.status === 'connected') {
			showLoginButton();
			//showAccountInfo();
		} else {
			showLogoutButton();
			}
		}

function showLoginButton() {
          document.getElementById('login-btn').innerHTML =
          ('');
}

$("#login-btn").click(function(event) {
      FB.login(function(response) {
       if (response.status == 'connected') {
       showAccountInfo(); } }, { scope : 'read_stream,email,read_friendlists' });
       event.preventDefault();
});

Login Button is bind to click event, and onclick FB API Method FB.login will be called, that instead opens up a facebook login page in a small popup.

FB API offers few scope to be authorised when user authenticates through FB Login, like email, read_friendlist.

You can read more about permission scope at https://developers.facebook.com/docs/authentication/permissions/

On successful authentication and authorization, the response callback method would be called, where we will receive the authorization token. This token can be subsequently used to call FB API to get more info of user, like User Email Address, Personal Info, Friend List.


function showAccountInfo() {
	FB.api({
		method : 'fql.query',
		query : 'SELECT first_name, last_name, email FROM user WHERE uid=' +FB.getUserID()
			}, function(response) {
			    console.log('API Callback', response[0].name + ' ' + response[0].email);
			);
	}

So, In this example we are just using Facebook Query Language to fetch user info from FB API, and printing username and user email on console.

Depending of the business requirements of the application, several other things can be done, like posting user activity on wall, sharing some articles, music, and media.

Using Facebook applications, developers can add custom features to one of the most popular websites in the world. Facebook is the biggest social network among college students, and is gaining ground among professionals too. Facebook applications enable you to add new ways for users to interact with each other using Facebook.
Facebook applications are written in a server-side language, and hosted on the application developer’s own server. They interface with Facebook, so that they appear to users to be part of Facebook itself.

In another blog I will be discussing about Facebook Applications, their architecture, and FB Ecosystem.
This blog was to get you started on FB Platform, A plethora of information is available on FB Developerers site.
You can check it here.

https://developers.facebook.com/

Happy Blogging

Leave a Reply

Your email address will not be published. Required fields are marked *


3 × seven =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>