Hi, so once again an AIR post. I was going to talk about AIR for Android Facebook authentification however due to beta restrictions i am not able to share it before it goes live. So we are going to talk about the desktop AIR and how to authentificate user on Facebook from within your native AIR application. Since this seems to be a hot issue and spare examples out there, one more reason to write this one up. I will write this up in the Android version in mind so later when i post the Android version you will be able to run it with minimal changes.

So lets jump into the issue, i will be working with Flash Builder 4 but you can pretty much work with anything that is capable to create AIR applications and ease your life doing so. So create Flex AIR Application but set your main class as an AS file not MXML since we will be working with pure AS3 once again.

First we need to understand when working with FB is that we can’t authentificate simply by sending credentials due to security issues what we need to do is to practically open an internal web browser send user to facebook authentification, wait for him to complete it and then grab the required data within the returned url. Quite a handful i know, when we work inside a web application this is probably not something we need to take into account since most of the time our application will simply get the authentification data within the flash parameters once we reside on facebook callback url.

But since we are not a web application but a native AIR application we need to do all the stuff ourselves, here we go.

First we setup our web view, which is a canvas displaying internal web browser.

  1. var rect:Rectangle = new Rectangle(100,100,400,300)
  2.  
  3. __hlLoader = HTMLLoader.createRootWindow(true, new NativeWindowInitOptions(), true, boundaries);
  4. __hlLoader.addEventListener(Event.LOCATION_CHANGE, onWebLocationChange);
  5. __hlLoader.load(new URLRequest(auth));

We define our HTMLLoader instance which displays internal web browser inside AIR application and listeners for it so we can check what is going on and when the deed is done.

Next we need to specify the facebook authentification url:

  1. __sAppId = "define your application id";
  2. __sRedirectUri = "define your redirect uri";
  3. __sScope = "define your application scope";
  4.  
  5. __hlLoader.load(new URLRequest("https://graph.facebook.com/oauth/authorize?client_id="+__sAppId+"&redirect_uri="+__sRedirectUri+"&type=user_agent&display=popup&scope="+__sScope));

Here you need to define your fb application related stuff, check fb developers site for more detailed info.

Finally the main callback for location change.

  1. private function onWebLocationChange(event:Event):void
  2. {
  3.   // Is this the end of authentification and we have access token avialable
  4.   if (__hlLoader.location.indexOf(__sRedirectUri) == 0 && __hlLoader.location.indexOf("access_token")!=-1)
  5.   {
  6.       // Grab the access token
  7.       __sAccessToken = "?"+__hlLoader.location.substring(__hlLoader.location.indexOf("access_token"), __hlLoader.location.indexOf("&expires_in"));
  8.       // Close the web
  9.       __hlLoader.stage.nativeWindow.close();
  10.    }
  11. }

This is the heart of authentification called each time a location change which can change quite a lot in the process of authentification and it may be a different number of times for each authentification. For example if you specified permissions user will need to confirm them as well. So each time we check if we are at the redirectUri which means the authentification is at its end and at the same time we need to check if we got our access token and store it.

Now we are pretty much done, and we are free to make graph API calls.

For example lets fetch our fb info.

  1. private function getMyInfo():void
  2. {
  3.    var urlLoader:URLLoader = new URLLoader();
  4.    urlLoader.addEventListener(Event.COMPLETE, onMyInfo);
  5.    urlLoader.load(new URLRequest("https://graph.facebook.com/me"+__sAccessToken));
  6. }
  7.  
  8. private function onMyInfo(event:Event):void
  9. {
  10.    trace(event.target.data);
  11. }

Huurrraaaay we can now see our nice tidy info. Its in JSON format so for parsing i would advise to use adobe classes but thats out of scope of this example.

Enjoy, and happy facebooking ;)