Default facebook login page is usualy opened in new browser window or popup window, so user lose focus from your page. This application opens facebook login page within your flash application, so user will not lose your page. In fact little iframe trick is used.

This post connects my 3 previous posts: Flex IFrame – Web browser in flash, FacebookLogger and Facebook Extended Permissions With Authorization by Overriding Class in swc in order to create elegant solution for facebook connect with your desktop application (means outside facebook iframe or fbml). I recomend to read all previous mentioned posts before trying to run this app.

Final application (view source enabled)

FB class. Read more about FacebookLogger class here.

package
{
    import flash.net.URLRequest;
    import flash.net.URLVariables;

    import mx.core.Application;

    import sk.yoz.events.FacebookLoggerEvent;
    import sk.yoz.net.FacebookLogger;

    public class FB extends FacebookLogger
    {
        private static const SINGLETON_LOCK:Object = {};
        private static const _instence:FB = new FB(SINGLETON_LOCK);

        protected var API_KEY:String = "bc55511efba53af7a3529ea9e7d1989b";
        protected var APP_SECRET:String = "727616ab7a9acb969e7cec3c7de04d79";

        private var initCallback:Function;

        public function FB(lock:Object)
        {
            super();

            if(lock != SINGLETON_LOCK)
                throw new Error("Use FB.instance!");

            addEventListener(FacebookLoggerEvent.CONNECTED, loggerConnectedHandler)
        }

        public static function get instance():FB
        {
            return _instence;
        }

        public function init2(application:Application):void
        {
            if(public::connected)
                return;
            init(API_KEY, APP_SECRET, application.loaderInfo);
        }

        public function initWithCallback(application:Application, callback:Function):void
        {
            initCallback = callback;
            init2(application);
        }

        private function loggerConnectedHandler(event:FacebookLoggerEvent):void
        {
            if(initCallback != null)
                initCallback();
            initCallback = null;
            // now we are connected, your code may go here
        }

        public function openPopup(login_url:String, auth_token:String):void
        {
            var request:URLRequest = new URLRequest(login_url);
            var variables:URLVariables = new URLVariables();

            variables.req_perms = 'publish_stream';
            variables.api_key = facebook.api_key;
            variables.v = facebook.api_version;
            variables.auth_token = auth_token;
            variables.fbconnect = "true";
            variables.connect_display = "popup";

            request.data = variables;

            FacebookPopup.open(request);
        }
    }
}

DesktopSession class. Read more about Overriding Class in swc.

... some code ...

protected function onLogin(p_event:FacebookEvent):void {
	p_event.target.removeEventListener(FacebookEvent.COMPLETE, onLogin);

	if (p_event.success) {
		_auth_token = (p_event.data as StringResultData).value;

		FB.instance.openPopup(login_url, _auth_token);

		_waiting_for_login = true;
		dispatchEvent(new FacebookEvent(FacebookEvent.WAITING_FOR_LOGIN));
	} else {
		onConnectionError(p_event.error);
	}
}

... some code ...

FacebookPopup class. Read more about Flex IFrame.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    width="510" height="465" xmlns:html="sk.yoz.html.*" move="moveHandler()"
    title="Facebook login">
<mx:Script>
<![CDATA[
    import mx.core.Application;
    import mx.managers.PopUpManager;

    [Bindable]
    protected var url:String;

    [Bindable]
    protected var fb:FB = FB.instance;

    protected function moveHandler():void
    {
        iframe.positionChanged = true;
        iframe.invalidateProperties();
    }

    public function set request(value:URLRequest):void
    {
        var url:String = value.url;
        url += "?";
        for(var param:String in value.data)
            url += "&" + param + "=" + value.data[param];
        this.url = url;
    }

    public static function open(request:URLRequest):void
    {
        var window:FacebookPopup = new FacebookPopup();
        window.request = request;
        window.visible = true;
        PopUpManager.addPopUp(window, Application(Application.application));
        PopUpManager.centerPopUp(window);
    }

    protected function validateLogin():void
    {
        fb.validate();
        close();
    }

    protected function close():void
    {
        visible = false;
        PopUpManager.removePopUp(this);
    }

    protected function refresh():void
    {
        iframe.url = url;
    }
]]>
</mx:Script>
<html:IFrame width="100%" height="100%" id="iframe" autoResize="true"
    url="{url}" visible="{visible}"/>
<mx:HBox width="100%">
    <mx:Text text="Clik Ok after you login to Facebook." />
    <mx:Spacer width="100%" />
    <mx:Label text="refresh" click="refresh()" textDecoration="underline"
        buttonMode="true"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center" >
    <mx:Button label="Ok" click="validateLogin()"/>
    <mx:Button label="Cancel" click="close()"/>
</mx:HBox>
</mx:TitleWindow>

Application (do not forget to add facebook flex .swc, version 3.4 used in example)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
    import FB;

    [Bindable]
    private var fb:FB = FB.instance;
]]>
</mx:Script>
<mx:Button label="Facebook connect" click="fb.init2(this)"/>
<mx:Text text="{fb.connected ? 'connected' : 'not connected'}" />
</mx:Application>

Application html template. More about flexiframe.js here.

... some code ...
<script type="text/javascript" src="flexiframe.js"></script>
... some code ...

It may be not popular, but it is possible to substitute / override whole class from .swc file. Lets say you are using some public api, in our case Facebook actionscript api. I admire work of developer team, but I would like to have some things different. My facebook application requires publish_stream extended permission right after user login (authorize) my application. Even if official facebook api documentation says it is possible to ask for extended permission with login.php call (req_perms parameter), our facebook actionscript api does not offer setting this parameter.

After few moments of research it was clear that login.php call makes DesktopSession class, method onLogin()…

... some code ...

protected function onLogin(p_event:FacebookEvent):void {
	p_event.target.removeEventListener(FacebookEvent.COMPLETE, onLogin);

	if (p_event.success) {
		_auth_token = (p_event.data as StringResultData).value;

		//now that we have an auth_token we need the user to login with it
		var request:URLRequest = new URLRequest();
		var loginParams:String = '?';

		if (_offline_access) {
				loginParams += 'ext_perm=offline_access&';
		}

		request.url = login_url+loginParams+"api_key="+api_key+"&v="+api_version+"&auth_token="+_auth_token;

		navigateToURL(request, "_blank");

		_waiting_for_login = true;
		dispatchEvent(new FacebookEvent(FacebookEvent.WAITING_FOR_LOGIN));
	} else {
		onConnectionError(p_event.error);
	}
}

... some code ...

Now lets do the dirty work. If it were possible, I would extend DesktopSession class and override just onLogin function, but api creates and uses DesktopSession inside its whole logic, so there is no way to succeed. However, it is possible to override whole class. First, in your flex project (with facebook swc in library path), create directory structure com/facebook/session/ (the same as DesktopSession package defines), than copy DesktopSession.as file inside. Well, thats it … From now, when you publish your application, compilator uses your DesktopSession instead of the one in .swc.

To make the new class working for my needs, onLogin function needs to be changed into something like this:

... some code ...

protected function onLogin(p_event:FacebookEvent):void {
	p_event.target.removeEventListener(FacebookEvent.COMPLETE, onLogin);

	if (p_event.success) {
		_auth_token = (p_event.data as StringResultData).value;

		//now that we have an auth_token we need the user to login with it
		var request:URLRequest = new URLRequest(login_url);
		var variables:URLVariables = new URLVariables();

		variables.req_perms = 'publish_stream';
		variables.api_key = api_key;
		variables.v = api_version;
		variables.auth_token = _auth_token;
		variables.fbconnect = "true";
		variables.connect_display = "page";

		request.data = variables;
		navigateToURL(request, "_blank");

		_waiting_for_login = true;
		dispatchEvent(new FacebookEvent(FacebookEvent.WAITING_FOR_LOGIN));
	} else {
		onConnectionError(p_event.error);
	}
}

... some code ...

By asking extended permissions with login.php, facebook opens more step authorization dialog where each permissions is separated into own step and user can allow or dont allow each.

Important:

• Even if you send req_perms=publish_stream with login.php, facebook only accepts it when your app is live (not from your desktop testing) … Functionality already bugged in facebook bugzilla
• Even if it is possible to override class this way, consider using it. Next time there may be newer version of .swc with some changes in your overriden class!