Facebook.Connect Javascript-Flex Communication – Facebook Photo Gallery

Facebook actionscript API can only make login calls by opening a new browser page to an official Facebook login page. To avoid this redirection, Facebook javascript API is used for login/logout operations. It has the advantage of presenting dhtml login/logout popups over the flex app without any user redirection. The flex app still controls all the authentication logic with the difference that login/logout calls are done using javascript functions via ExternalInterface.

Overview.
Once the flex application initializes, a javascript check is being made to determine whether or not a valid Facebook session already exists for the current user. If it does, information about the user (name, public albums and photos) can automatically be retrieved by the flex app and instead of a login button the user gets a “welcome user” message. If a valid Facebook session doesn’t exist for the current user, a Facebook login button is being displayed. Both login and logout buttons from the flex app invoke corresponding javascript calls since the two operations are conducted via the Facebook javascript API.

Detailed steps.
FB.Facebook.init from the javascript API is responsible for checking whether or not a Facebook session is already active for the current user. In a standard javascript scenario, this function is being called automatically after the html page finishes loading. In our case, FB.Facebook.init is called from the flex app once all its external modules and runtime shared libraries are loaded.

From asabau_cg3_fb_shell, MainLauncher.mxml

// flex app is ready now, time to init the FB session
dispatchEvent(SessionEvent.newInitEvent());

This session event is handled in asabau_cg3_fb_api, FBSession.as

[MessageHandler(selector="fbInit")]
public function init():void {
	ExternalInterface.addCallback("sessionUpdate", sessionUpdate);
	ExternalInterface.call("init", API_KEY);
}

First we register for the app swf object a sessionUpdate javascript handler. When sessionUpdate function is called on the embedded html swf object in javascript, a corresponding sessionUpdate function from FBSession.as will be called in flex. This sessionUpdate function will be called every time the Facebook session changes its status via init, login, logout Facebook operations.

Once the flex app has the means to listen for javascript Facebook session update events, it triggers a Facebook session initialization by calling javascript function init

function init(api_key) {
    FB_RequireFeatures(["Api", "Connect"], function() {
        FB.Facebook.init(
            api_key,
            'xd_receiver.htm',
            {
                "ifUserConnected": sessionUpdate,
                "ifUserNotConnected": sessionUpdate
            }
        );
    });
}

Results from the FB.Facebook.init javascript call are handled in javascript function sessionUpdate, responsible for propagating the changes to the flex app.

function sessionUpdate() {
	swfobject.getObjectById("flashContent").sessionUpdate(
		sessionInfo()
	);
}

The flex app receives a sessionInfo object constructed in javascript using the Facebook actionscript API

function sessionInfo() {
	var info = FB.Facebook.apiClient.get_session();
	return info;
}

FBSession.as from asabau_cg3_fb_api determines if a valid javascript Facebook session has been established in its corresponding sessionUpdate actionscript function. If it does, based on the established javascript session an actionscript session is created that will be used for all Facebook related calls – getting user info, public albums and photos.

public var facebook:Facebook;
public var session:WebSession;

public function sessionUpdate(sessionData:Object):void {
	...
	session = new WebSession(
		API_KEY,
		sessionData.secret,
		sessionData.session_key
	);
	session.facebook_internal::_uid = sessionData.uid;

	facebook.startSession(session);
	session.verifySession();

SessionController.as from asabau_cg3_fb_authentication handles all actionscript session events including FacebookEvent.CONNECT.

protected function onConnect(event:FacebookEvent):void {
	...
	dispatchEvent(UserDataEvent.newLoadEvent());
	...
}

This UserDataEvent signals the flex app has reached a state when it’s now possible to query the Facebook servers via Facebook actionscript API to get user first and last name, public albums and photos, etc.

Login and logout events are being dispatched via the Parsley framework eventually reaching FBSession.as

public function login():void {
	ExternalInterface.call("connect");
}

public function logout():void {
	ExternalInterface.call("logout");
}

The corresponding javascript calls making use of Facebook Connect javascript API:

// trigger connect popup
function connect() {
	FB.ensureInit( function() {
		FB.Connect.requireSession(null, true);
	});
}

// terminate all FB sessions
function logout() {
	FB.Connect.logout();
}

This post is part of Facebook Photo Gallery.

One thought on “Facebook.Connect Javascript-Flex Communication – Facebook Photo Gallery”

  1. Pingback: Yosh

Leave a Reply

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