Monthly Archive for May, 2008

I wanted to write this post hopefully to help anyone develop flash applications that are running within Facebook’s canvas. There are currently 3 options in the AS3 Facebook API to hook up to facebook, namely startDesktopSession, startJSBridgeSession and startWidgetSession. Let me briefly talk about these 3 different ways of connecting and which one you should use to work with the facebook API.

startDesktopSession()

This method of connecting to the Facebook AS3 API is mainly for flash/flex applications running in webpages that have no relation with the facebook canvas. This applies to AIR applications as well.

When you use startDesktopSession, you generally have to supply your API_KEY and SECRET_KEY and navigate the user to facebook’s login page.

After that is done, you have to validate the desktop session after which you will receive an session_key that is limited or infinite depending on whether the user chose to save the login information.

Thereafter the API is ready for calls.

startJSBridgeSession()

This method of connecting to Facebook makes use of the facebook javascript API to make the calls and proxy the results back into the SWF using externalInterface calls.

You can see the javascript API on facebook at http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library which has a pretty good example on hooking up the javascript API. (not a SWF example though)

The startJSBridgeSession simply makes similar calls using ExternalInterface from within flash and then gets the results back through a javascript callback.

Personally i haven’t had found any use for this yet.

startWidgetSession()

Use this if you are trying to make API calls from a flash app that is nested within an fb:iframe or fb:swf. You basically have to pass in your stage.loaderInfo.parameters which contains all the information the API requires to create a signature so that it can make proper API calls to facebook.

The API says this is depreciated but until there is a better way of calling APIs within flash (like facebook taking away allowScriptAccess, though highly unlikely), I would recommend this way of calling the API.

Important Note when using the 3 different methods

For those who are lazy to peek into the code within the API, for startDesktopSession(), asynchronous calls are made so it doesn’t matter if you add an eventListener before or after the startDesktopSession() to capture the results from facebook. However, for startWidgetSession() and startJSBridgeSession(), they are synchronous calls (meaning code executes line after line and the next line will not execute until the previous has finished executing) and you must add your eventListener before those functions or else the event handler will not fire. To be safe, add all your eventListeners before the call to start a session.

e.g.

var fb:Facebook = new Facebook();
fb.addEventListener(”complete”, fbCallback);
fb.startDesktopSession( ….. ) //can be startWidgetSession() or startJSBridgeSession()

Extra Misc Notes

If you are using custom headers with URLRequest for crossdomain calls, remember that for your crossdomain.xml, you must explicitly allow custom http headers within the crossdomain.xml. Adobe has a very comprehensive white paper for Flash Player security and its really worth a read.

You can find it at: http://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdf

An example of a crossdomain.xml that allows custom headers:

<?xml version="1.0"?>
<cross-domain-policy>

<!– Establish a meta-policy –>
<site-control permitted-cross-domain-policies=”master-only”/>

<allow-http-request-headers-from domain=”*” headers=”*”/>

<!– Data loading permissions are separate, and don’t affect headers –>
<allow-access-from domain=”*” />

</cross-domain-policy>

*Important for Flash CS3 users* If you are using the latest release from the google code SVN as of May 23rd 2008, search through the AS files in the pbking package and comment out import mx.controls.Alert, that code is meant for flex users.

Hope that this article will help anyone developing facebook applications with Flash/Flex/AIR.

For examples and code, there is a facebook authentication article on google code that gives the specifics of these 3 modes of authentication:

http://code.google.com/p/facebook-actionscript-api/wiki/FacebookAuthentication

I will post my own examples in the next few days, so watch this space

Cheers!