Facebook Graph and AOuth API in Flex 4

 DEPRICATED!!!

Official Adobe Facebook API's become/would become obsolete with new API's that were introduced by Facebook. It was about time that they make something breadcrumb style like and simple, clear and understandable.
http://graph.facebook.com/who/what?arguments
who - id or name of the person,company...,id of the comment,photos album,event...
what - could be properties of "who" like /photos,/feeds...,
could be query
could be method
...and more.

Out there you can found facebook-actionscript-api supporting the new Facebook API's (as they could cos new API's aren't final nether have passed child sickness).
This post would show you how you can make Flex application that will access FacebookAPI's without using too much JavaScripts as in some examples. If you want to just wrap your swf file with the Facebook functionalities you will took this kind of approach making all API's calls and responses thru JavaScripts without involving swf in it.
In order to handle query string parameters returned from Facebook we need change default .htm file adding:

var flashVars = {};
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aparam =" aQueryString[iParam].split(">
which will parse the url and send parameters as flash variables to the embedded swf.
We could use this approach in order to avoid changing default html file produced by Flash Builder:

var queryString:String=ExternalInterface.call("window.location.href.toString");
//parse string
with ActionScript parsing url returned by JavaScript call but we will gone into bottle neck later if we want to add support of Opera, Safari or some early version of IE or Mozzila in which window.location.href not work as expected. I hope this would be JSON encoded object in the future.

We will focus our code on 2 parameters returned, for orientation of actions in our code:
-fb_sig_added (defines if user has granted permission to your application or not)
-fb_sig_logged_out_facebook (mean that user has loggout option, actually that user is logged)


If this fb_sig_added exist we could be sure we are access application thru Facebook.


if(loaderInfo.parameters.hasOwnProperty('fb_sig_added'))
{
//check if user is logged
if(!loaderInfo.parameters.hasOwnProperty('fb_sig_logged_out_facebook'))
{
}
else
{
//send the user to login facebook page with refrence to continue to your application
}
{
}
else//user has access application not thru facebook
{
//send the user to login facebook page with refrence to continue to your application
}


If user isn't logged we redirect him/her to facebook login page with refrence to continue to your application after login.
To access user data,photos,videos... access should be granted and access_token received. Every time user access your application would be redirected to authorization page. If user haven't grant permission to the application will be ask to do in page like this:

with listed permissions defined in scope(scope=user_photos,user_videos,publish_stream...)
else application would be supplied with access_token.
You may look in access_token as somekind of grant permission key that application is using to identify itself as permited to access user data or write on user wall or else.

if (loaderInfo.parameters.hasOwnProperty("access_token"))
{
_accessToken = loaderInfo.parameters.access_token;





_urlVariables = new URLVariables();
_urlVariables.access_token = _accessToken;
_urlVariables.fields = "id,name,picture";
call(_urlVariables, onUserDataComplete);


}
else//
{

//https://graph.facebook.com/oauth/authorize?
//client_id=application_api_key&
//redirect_uri=http://www.example.com/myapplication&
//scope=user_photos,user_videos,publish_stream




navigateToURL(new URLRequest(AUTORIZE_URL+"?client_id="+loaderInfo.parameters.fb_sig_api_key+"&redirect_uri="+APPLICATION_URL+"&type=user_agent&display=page&scope=publish_stream"),"_top");

}
There is a possibility access_token to be saved as SharedObject and fb_sig_added to be checked, if true, not to send user every time to authorization page so access_token is acquired. But access_token is short lived and after expiration new access_token need to be requested.

Application API key isn't hard coded inside your application as that is security risk
but obtained thru fb_sig_api_key parameter.
Important thing is that in authorization you need to use "GET" and in requesting data "POST" method.
Obtaining access_token allow us to request data:
https://graph.facebook.com/uid or me(meaning current user)/?access_token=...,&fields=id,name,picture
and got JSON coded data.


/**
*
* @param arg (arguments)
* @param handler (function that will handle response)
* @param category (subcategory or property)
* @param method (GET or POST)
*/
private function call(arg:URLVariables,handler:Function,category:String="",method:String=URLRequestMethod.GET):void

Our handler function will decode and assign values

/**
*
* @param e
*/
private function onUserDataComplete(e:Event):void
{
var data:Object;
_urlLoader.removeEventListener(Event.COMPLETE, onUserDataComplete, false);

//Alert.show(_urlLoader.data);

/*{
"id": "1104286707",
"name": "Alex Extream",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs256.snc3/23172_1104286707_7803_q.jpg"
}*/
data= JSON.decode(_urlLoader.data);

if (data.error)
{
throw new Error(data.message);
}
else
{
userImg.source = data.picture;
nameLbl.text = data.name;
publishButton.visible=true;
}





}
to the Lable and Image control previously add to mxml.

source download