Facebook Dialog OAuth Tutorial

What is Facebook Dialog OAuth ?

Using Facebook OAuth Dialog, Users can authorize your website/App and give permissions to your website/App to access their information. In this tutorial, I have provided PHP, Python code samples. For JavaScript, check the tutorial https://hayageek.com/facebook-javascript-sdk/

Before going to the tutorial check the working example:

Follow the below steps for Dailog OAuth tutorial.

Step1 : Creating Facebook App

Before using Facebook OAuth Dialog, you need to create an App in Facebook Developers site and  get App ID & Secret.

To create an App, Go to https://developers.facebook.com/apps/
Click on “Create New App” and fill all the App details as shown in the  below images.

Note: “Website with Facebook Login:” and “App Domains:” are mandatory fields you need to fill and that should match your domain name.

Step2 : Invoking Facebook OAuth Dailog

After getting App ID and App Secret you can start using OAuth Dialog. Facebook Dialog can be invoked by providing the below URL format to User.

http://www.facebook.com/dialog/oauth/?
                                  client_id=APP_ID
                                   &redirect_uri=REDIRECT_URL
                                   &state=RANDOM_NUMBER_PREVENT_CSRF
                                   &scope=COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES
                                   &response_type=RESPONSE_TYPE

APP_ID : is your Application ID 
REDIRECT_URL: After successful authorization,user is redirected to this URL
RANDOM_NUMBER_PREVENT_CSRF: Random number to avoid CSRF attacks
COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES: list of permission you are asking the user
RESPONSE_TYPE cane "code" or "token". By default RESPONSE_TYPE is "code".

Sample Dialog URL looks like:

 http://www.facebook.com/dialog/oauth/?
                    client_id=113455642165175&
                    redirect_uri=https://hayageek.com/examples/facebook-oauth/callback.php&
                    scope=email,read_friendlists
                    &state=RANDOM_NUMBER

Step 3: User Authoriaztion

After clicking the Dialog URL, user will be redirected to authorize the website as shown in the below image.

After authorization, user will be redirected to REDIRECT_URL specified in the Dialog URL and you will receive “code”/”token” as part of the GET request.

If you select RESPONSE_TYPE=code then redirect URL looks like

    REDIRECT_URL?       
           code=OAUTH_CODE_GENERATED_BY_FACEBOOK
           &state=YOUR_STATE_VALUE

  Example: https://hayageek.com/examples/facebook-oauth/callback.php?
                            state=RANDOM_NUMBER&
                            code=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

If you select RESPONSE_TYPE=token then redirect URL looks like:

REDIRECT_URL#
    access_token=USER_ACCESS_TOKEN
   &expires_in=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES
   &state=YOUR_STATE_VALUE

Example: https://hayageek.com/examples/facebook-oauth/callback.php#
                               state=RANDOM_NUMBER&
                               access_token=XXXXXXXXXXXXXXXXXXXXX&
                               expires_in=XXXXXXXXXXX

Note: RESPONSE_TYPE=code is used in server-side(PHP/JSP/Python/PERL),  RESPONSE_TYPE=token is used in client-side( Javascript SDK, Android SDK)

Step 4: Getting User Access Token at server-side

After getting user’s authorization, you need to get User access token to make the API calls. Acces Token request looks like

 https://graph.facebook.com/oauth/access_token?
                                             client_id=APP_ID
                                             &redirect_uri=REDIRECT_URI
                                             &client_secret=APP_SECRET
                                             &code=OAUTH_CODE_GENERATED_BY_FACEBOOK

Below is the PHP function to get the access token:

function getAccessTokenDetails($app_id,$app_secret,$redirect_url,$code)
{

	$token_url = "https://graph.facebook.com/oauth/access_token?"
	  . "client_id=" . $app_id . "&redirect_uri=" . urlencode($redirect_url)
	  . "&client_secret=" . $app_secret . "&code=" . $code;

	$response = file_get_contents($token_url);
	$params = null;
	parse_str($response, $params); //parse name value pair

	return $params;
}

Step 5: Making the API call server-side using PHP

After getting the access token you can make API cal. Below is the PHP code to get user’s personal information.

function getUserDetails($access_token)
{
	$graph_url = "https://graph.facebook.com/me?access_token=". $access_token;
	$user = json_decode(file_get_contents($graph_url));
	if($user != null && isset($user->name))
		return $user;

	return null;
}

Note:

•  redirect_uri must be same  when getting the code and access_token

state should be a random number. if your web page is cached, state will always. So to avoid caching for the page, you can add the following code at the start of your page.

header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Cache-Control: post-check=0, pre-check=0', false );
header( 'Pragma: no-cache' );

Python Code for Facebook Dialog OAuth

import sys
import urllib2
import urllib
import json
import urlparse
def parse_str(str):
	nvps={};
	list = str.rsplit("&")
	for el in list:
		nvplist = el.rsplit("=")
		nvps[nvplist[0]]=nvplist[1]
	return nvps

def getAccessTokenDetails(app_id,app_secret,redirect_url,code):

	list ={}
	url =  "https://graph.facebook.com/oauth/access_token?client_id="+app_id+"&redirect_uri="+redirect_url+"&client_secret="+app_secret+"&code="+code;
	req = urllib2.Request(url)
	try: 
		response= urllib2.urlopen(req)
		str=response.read()
		#you can replace it with urlparse.parse_qs
		list = parse_str(str)

	except Exception, e:
		print e
	return list

def getUserDetails(access_token):
	list={}
	url = "https://graph.facebook.com/me?access_token="+access_token;
	req = urllib2.Request(url)
	try: 
		response= urllib2.urlopen(req)
		str=response.read()
		list = json.dumps(str)
	except Exception, e:
		print e

	return list
###########

APP_ID='YOUR APP ID'
APP_SECRET='YOUR APP SECRET'
REDIRECT_URL='YOUR APP REDIRECT URL'
CODE=''  ###HTTP GET Parameter received from Facebook 

details = getAccessTokenDetails(APP_ID,APP_SECRET,REDIRECT_URL,CODE)

if not details["access_token"] is None:
	jsonText =getUserDetails(details["access_token"])

	#######Load it twice... Need to check
	jsonText =json.loads(jsonText)
	userInfo =json.loads(jsonText)
	#######Load it twice... Need to check

	print "Name: "+ userInfo['name']
	print "id: "+ userInfo['id']
	print "link: "+ userInfo["link"]