Jozef Chúťka's blog » JavaScript

Authorizing Facebook Applications in AIR

Jozef Chúťka — Tue, 21 Sep 2010 12:43:53 +0000

I was asked to make AIR compatibile version of FacebookOAuthGraph class. It was a nice little challenge for me, where I learn some new things about AIR. E.g. how easy it is to define the JavaScript callback directly from ActionScipt (HTMLLoader.window.methodName)… There are more ways to make authorization process work for you, I have chosen the one with popup window. In order to make FacebookOAuthGraph work for AIR, the short extending is required, instead of creating popup window from JavaScript, popup is created by HTMLLoader.createRootWindow (no ExternalInterface required)…

Lets start with the main AIR Application file:



    
        
    

    ... here comes the same content as in:
    "http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/"
    ...
    just change redirectURI to:
    "http://blog.yoz.sk/examples/FacebookOAuthGraph/aircallback.html"
    ...

Do not bother with callback.html (you do not need any, if you do, create an empty .html file) and make your Facebook class look something like this:

package
{
    import flash.display.NativeWindowInitOptions;
    import flash.events.Event;
    import flash.geom.Rectangle;
    import flash.html.HTMLLoader;
    import flash.net.URLRequest;

    public class Facebook extends FacebookOAuthGraph
    {
        public var loader:HTMLLoader;

        public function Facebook()
        {
            super();
        }

        override public function connect():void
        {
            var options:NativeWindowInitOptions = new NativeWindowInitOptions();
            var boundaries:Rectangle = new Rectangle(200,200,500,500);
            loader = HTMLLoader.createRootWindow(true, options, true, boundaries);
            loader.load(new URLRequest(authorizationURL));
            loader.addEventListener(Event.LOCATION_CHANGE, onLocationChange);
        }

        private function onLocationChange(event:Event):void
        {
            var hash:String = locationExtractHash(loader.location);
            var error:String = locationExtractError(loader.location);
            if(hash)
                confirmConnection(hash);
            if(hash || error)
                destroyLoader();
        }

        protected function locationExtractHash(url:String):String
        {
            var index:int = url.indexOf("#");
            if(index <= -1)
                return null;
            var hash:String = url.substr(index + 1);
            return hashToToken(hash) ? hash : null;
        }

        protected function locationExtractError(url:String):String
        {
            var index:int = url.indexOf("?");
            if(index <= -1)
                return null;
            var query:String = url.substr(index + 1);
            var variables:URLVariables = new URLVariables(query);
            return variables.hasOwnProperty("error") ? variables.error : null;
        }

        private function destroyLoader():void
        {
            loader.removeEventListener(Event.LOCATION_CHANGE, onLocationChange);
            loader.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
            loader.stage.nativeWindow.close();
            loader = null;
        }
    }
}

How does this works? You do not need any callback.html, just generate some redirect_uri that correctly targets your domain, it can be anything, even 404.html, or asdf-foo-bar.html file that does not exist. Once the Facebook, redirects you back to the redirect_uri, the url contains access_token within url hash

http://domain/whatever-or-404.html#access_token=123

… now, if it does, it is parsed by locationExtractHash(), if it does not, the url contains error (user clicked Cancel button), the url contains error:

http://domain/whatever-or-404.html?error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.

In case of error locationExtractError() parses and error. In both cases (error or access_token), the HTMLLoader window is closed and token is handled via confirmConnection(). Yeah, this way you can authorize !ANY! existing facebook application for your AIR app.

Depricated version using JavaScript in callback

Keep the changes in main AIR Application file (see above), and make small changes in aircallback.html, in fact it got even simplier comparing to the original:

You may now close this window.

… finally some method changes in FacebookOAuthGraph class:

package
{
    import flash.display.NativeWindowInitOptions;
    import flash.events.Event;
    import flash.geom.Rectangle;
    import flash.html.HTMLLoader;
    import flash.net.URLRequest;

    import sk.yoz.net.FacebookOAuthGraph;

    public class Facebook extends FacebookOAuthGraph
    {
        public var loader:HTMLLoader;

        public function Facebook()
        {
            super();
        }

        override public function connect():void
        {
            var options:NativeWindowInitOptions = new NativeWindowInitOptions();
            var boundaries:Rectangle = new Rectangle(200,200,500,500);
            loader = HTMLLoader.createRootWindow(true, options, true, boundaries);
            loader.load(new URLRequest(authorizationURL));
            loader.addEventListener(Event.HTML_DOM_INITIALIZE, onDOMInit);
        }

        private function onDOMInit(event:Event):void
        {
            loader.window[jsConfirm] = confirmConnection;
        }

        override public function confirmConnection(hash:String):void
        {
            super.confirmConnection(hash);
            loader.stage.nativeWindow.close();
        }
    }
}

What it does is, it pushes JavaScript callback into HTMLLoader that is called via aircallback.html JavaScript…

Where to go from here:

Quick tip: ExternalInterface.call is synchronous!

Jozef Chúťka — Fri, 12 Feb 2010 16:21:01 +0000

It is a little wonder to me how flash player communicates with JavaScript. Calls are fully synchronous, it works as those (fp and js) were fully integrated into each other. To simulate this lets test some simple flow:

Flash Player calls JavaScript
    JavaScript calls FlashPlayer
        FlashPlayer do some stuff and finishes
    JavaScript finishes
FlashPlayer continues

Following flex application runs simple JavaScript:

document.getElementById("flash").universalCallback();
return "synchronous return";

and results are logged into TextArea:

universalCallback
synchronous return

This means that ExternalInterface.call() is synchronous and waits until called JavaScript finishes. Just after that, flash player moves on the next line. This interesting behaviour makes flash player to hold (but not to freeze) on one line while it is able to continue on different execution (universalCallback()).

Notice, JavaScript to ActionScript data can be sent via ExternalInterface.addCallback() or simple by synchronous return:

var result:String = ExternalInterface.call("function(){" + script + "}");

however, you can not use eval method this way!

var result:String = ExternalInterface.call("eval", script);

Full JavaScript Access From ActionScript (update)

Jozef Chúťka — Wed, 10 Feb 2010 10:10:55 +0000

Have you ever tought about accessing DOM from ActionScript? In fact, you can do it and even far more. You can create and call JavaScript methods and objects, access cookies, change styles… All you need is correct AllowScriptAccess parameter within your flash object. No framework needed here, no hacks, ExternalInterface takes care.

Following application runs JavaScript from textarea:

Application. Line 16 does all the fun

HTML template




    Full Javascript Access

No additional nothing here just:

line 20: allowscriptaccess: “always” (“sameDomain” may also be used)
line 24: tip – add name attribute with swfobject so ExternalInterface.objectID will get correct value

Considerations of using eval:

Improper use of eval opens up your code for injection attacks
Debugging can be more challenging (no line numbers, etc.)
eval’d code executes more slowly (no opportunity to compile/cache eval’d code)

Update (Feb 11, 2010): You can use either eval call:

ExternalInterface.call("eval", script.text);

or wrap your script into anonymous function:

ExternalInterface.call("function(){" + script.text + "}");

Personally, I do not see any difference in execution, it seems to be the same, maybe some performance testing would clarify it. What do you think?

Where to go from here:

FB.Connect.showPermissionDialog

Jozef Chúťka — Mon, 19 Oct 2009 13:01:08 +0000

If your facebook iframe applications need extra permissions granted, you can use Facebook JavaScript Api to generate modal window over your content to request permissions from users. For this purpose I created a simple FB_test_perm() function. It takes 4 arguments:

api_key – your application api key
xd_receiver – path to xd_receiver.htm file (Cross-Domain Receiver Page)
permission – publish_stream, read_stream …
callback – your function with boolean return (true if permission granted, false if not granted)

facebook_permission_test.js

function FB_test_perm(api_key, xd_receiver, permission, callback)
{
	FB.Bootstrap.requireFeatures(["Connect"], function()
	{
		FB.Facebook.init(api_key, xd_receiver);
		FB.Connect.requireSession(function()
		{
			FB.Facebook.apiClient.users_hasAppPermission(permission, function(result)
			{
				if (result != 0)
					return callback(true);

				FB.Connect.showPermissionDialog(permission, function(result)
				{
					return callback(result == null ? false : (result.indexOf(permission) != -1));
				}, true, null);
			});
		});
	});
}

index.html

xd_receiver.htm




    Cross-Domain Receiver Page

If you can not get your facebook showPermissionDialog popup opened, make sure you set Canvas Callback URL, Connect URL, Base domain, Connect Preview URL correctly:

Make sure you embed flash in transparent / opaque wmode and iframe size (width, height) is enough to display facebook modal window.

Flex IFrame – Web browser in flash (update)

Jozef Chúťka — Mon, 19 Oct 2009 10:45:21 +0000

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:

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

...

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