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

You can not have a web browser inside your web flash applications right? Well, you can! This solution uses html iframe to generate fake build in browser. So the behaviour of the browser in flash is the same as the one you are previewing this flash in (it is the same one). The best part of it is, you can manipulate with the position and size of this browser directly from flash. sk.yoz.html.IFrame solution was inspired by Alistair Rutherford, www.netthreads.co.uk.

• sk.yoz.html.IFrame
• FlexIFrame.js
• Application
• Application html

Flex Iframe application

Core of this thing is sk.yoz.html.IFrame class. It extends Canvas that is used to inherit properties and methods for positioning and sizing. There is one in order to make it work – every IFrame element must have id!

package sk.yoz.html
{
    import flash.events.Event;
    import flash.external.ExternalInterface;
    import flash.geom.Point;

    import mx.containers.Canvas;

    public class IFrame extends Canvas
    {
        public var methodResize:String = "FlexIFrame.resize";
        public var methodMove:String = "FlexIFrame.move";
        public var methodNavigate:String = "FlexIFrame.navigate";
        public var methodVisibility:String = "FlexIFrame.visibility";

        public var positionChanged:Boolean = false;
        public var sizeChanged:Boolean = false;

        private var _autoResize:Boolean = false;
        private var _url:String = '';

        public function IFrame()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler)
        }

        override public function set id(value:String):void
        {
            super.id = value;
        }

        protected function addedToStageHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        public function set autoResize(value:Boolean):void
        {
            _autoResize = value;
            if(value)
                addEventListener(Event.RESIZE, autoResizeHandler);
            else
                removeEventListener(Event.RESIZE, autoResizeHandler);
        }

        public function get autoResize():Boolean
        {
            return _autoResize;
        }

        protected function autoResizeHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(positionChanged)
            {
                var point:Point = localToGlobal(new Point(0, 0));
                callJS(methodMove, point.x, point.y);
                positionChanged = false;
            }

            if(sizeChanged)
            {
                callJS(methodResize, width, height);
                sizeChanged = false;
            }
        }

        public function set url(value:String):void
        {
            _url = value;
            callJS(methodNavigate, value)
        }

        public function get url():String
        {
            return _url;
        }

        protected function callJS(method:String, ... values):void
        {
            if(!id)
                throw new Error("IFrame id is not defined");
            var args:Array = [method, id];
            try
            {
                ExternalInterface.call.apply(ExternalInterface, args.concat(values));
            }
            catch(error:Error)
            {
                trace(error.message);
            }
        }

        override public function set visible(value:Boolean):void
        {
            super.visible = value;
            callJS(methodVisibility, value);
        }

        override public function set width(value:Number):void
        {
            super.width = value;
            callJS(methodResize, value, height);
        }

        override public function set height(value:Number):void
        {
            super.height = value;
            callJS(methodResize, width, value);
        }

        override public function set x(value:Number):void
        {
            super.x = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }

        override public function set y(value:Number):void
        {
            super.y = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }
    }
}

FlexIFrame.js is JavaScript file. It uses your flex IFrame id from to create (html iframe) or use html element (any element) with the same id (id in flash = id in html). So you can use your prefabricated html elements (banners etc).

var FlexIFrame = {
    get: function(id)
    {
        var iframe = document.getElementById(id);
        if(!iframe)
            return FlexIFrame.create(id);
        return iframe;
    },

    create: function(id)
    {
        var iframe = document.createElement('iframe');
        iframe.id = id;
        iframe.frameborder = 0;
        iframe.style.position = "absolute";
        iframe.style.zIndex = 1;
        iframe.style.border = "none";
        document.body.insertBefore(iframe, document.body.firstChild);
        return iframe;
    },

    resize: function(id, width, height)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
    },

    move: function(id, x, y)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.left = x + "px";
        iframe.style.top = y + "px";
    },

    navigate: function(id, url)
    {
        var iframe = FlexIFrame.get(id);
        iframe.src = url;
    },

    visibility: function(id, visible)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.display = visible ? "block" : "none";
    }
}

This is simple applicationion presenting draggable TitleWindow with “web browser” inside:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init()" xmlns:html="sk.yoz.html.*">
<mx:Script>
<![CDATA[
    private function init():void
    {
        go();
    }

    private function go():void
    {
        iframe.url = iframeURL.text;
    }

    private function mouseDownHandler():void
    {
        container.startDrag();
        container.addEventListener(Event.ENTER_FRAME, enterFrameDrag);
    }

    private function mouseUpHandler():void
    {
        container.stopDrag();
    }

    private function enterFrameDrag(event:Event):void
    {
        iframe.positionChanged = true;
        iframe.invalidateProperties();
    }
]]>
</mx:Script>
<mx:TitleWindow id="container" layout="vertical" width="300" height="300"
    mouseDown="mouseDownHandler()" mouseUp="mouseUpHandler()" >
    <mx:HBox width="100%">
        <mx:TextInput id="iframeURL" text="http://blog.yoz.sk" width="100%"
            enter="go()"/>
        <mx:Button label="Go" click="go()"/>
    </mx:HBox>
    <html:IFrame width="100%" height="100%" id="iframe" autoResize="true"/>
</mx:TitleWindow>
</mx:Application>

Finally do not forget to add flexiframe.js into your .html file:

<html>
    <head>
        <script type="text/javascript" src="js/flexiframe.js"></script>
        ...

Update (Feb 8, 2010): flexiframe.js resize() method uses style property for width and height (instead of original html element width, height)