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 ...

In a last couple of weeks I have been working on a lot of facebook applications. It did not took long to realize that there is always the same logic behind logging/connecting to facebook. So I came to FacebookLogger abstraction class that handles these basic steps. It only contains login/connection logic, so its pretty much the core that is usable only after extending.

FacebookLogger class look like this:

package sk.yoz.net
{
    import com.facebook.Facebook;
    import com.facebook.events.FacebookEvent;
    import com.facebook.utils.FacebookSessionUtil;

    import flash.display.LoaderInfo;
    import flash.events.EventDispatcher;

    import sk.yoz.events.FacebookLoggerEvent;

    public class FacebookLogger extends EventDispatcher
    {
        protected var facebook:Facebook;
        protected var session:FacebookSessionUtil;

        private var _connected:Boolean = false;

        public function FacebookLogger()
        {
            super();
        }

        [Bindable(event="FacebookLoggerEventCONNECTED")]
        public function get connected():Boolean
        {
            return _connected;
        }

        protected function set connected(value:Boolean):void
        {
            _connected = value;
            var type:String = FacebookLoggerEvent.CONNECTED;
            dispatchEvent(new FacebookLoggerEvent(type));
        }

        public function init(apiKey:String, appSecret:String,
            loaderInfo:LoaderInfo):void
        {
            session = new FacebookSessionUtil(apiKey, appSecret, loaderInfo);
            session.addEventListener(FacebookEvent.CONNECT, connectHandler);
            facebook = session.facebook;

            if(loaderInfo.parameters.fb_sig_session_key)
                 session.verifySession();
            else
                login();
        }

        protected function login():void
        {
            session.login();
        }

        public function validate():void
        {
            session.validateLogin();
        }

        protected function connectHandler(event:FacebookEvent):void
        {
            if(!event.success)
                return login();

            protected::connected = true;
        }
    }
}

… and you also gonna require FacebookLoggerEvent class …

package sk.yoz.events
{
    import flash.events.Event;

    public class FacebookLoggerEvent extends Event
    {
        public static const CONNECTED:String = "FacebookLoggerEventCONNECTED";

        public function FacebookLoggerEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }

    }
}

Now, lets extend the core class. This class should hold all the required logic and communication with facebook, its fine to make it singleton:

package
{
    import mx.controls.Alert;
    import mx.core.Application;
    import mx.events.CloseEvent;

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

    public class FB extends FacebookLogger
    {
        public static const NOT_LOGGED:String = "Seems like not logged, click when logged!";

        private static const SINGLETON_LOCK:Object = {};
        private static const _instence:FB = new FB(SINGLETON_LOCK);

        protected var API_KEY:String = "***";
        protected var APP_SECRET:String = "***";

		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, application.parameters);
        }

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

        override protected function login():void
        {
            super.login();
            Alert.show(NOT_LOGGED, null, 4, null, loggedClose);
        }

        protected function loggedClose(event:CloseEvent):void
        {
            validate();
        }

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

Update (Jan 6, 2009): Suggested initWithCallback() function where you can define callback function that is called after successful connect.

… so we can use in application as simple as possible:

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

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

    private function addedToStageHandler():void
    {
        fb.init2(this);
    }
]]>
</mx:Script>
<mx:Text text="{fb.connected ? 'connected' : 'connecting'}" />
</mx:Application>