Mobile Facebook OAUTH authentication with Air 2.5

by Fredrik on 2011-01-14 · 5 Comments

The current version (1.5) of the Facebook-Actionscript API doesn´t support Air 2.5 for Mobile. The authentication process requires you to launch some html with buttons where the user can acccept or deny access by your app, but:

The Mobile package of Facebook-Actionscript API is using External Interface which is not available.
The Desktop package of Facebook-Actionscript API is using the HTMLLoader class which is not available.

Instead you can call the authentication url (remember to register your app´s redirect uri – which should be one of the params – in your application settings at Facebook):

public static const FACEBOOK_AUTHORIZE_URL:String = "" +
			"https://graph.facebook.com/oauth/authorize?" +
			"client_id="+APP_ID+"&" +
			"redirect_uri="+APP_URL+"&" +
			"display=touch";

with the StageWebView class. Listen for the LocationChangeEvent when you get redirected and catch the access code from the new url string, something like this:

private function onLocationChange(event:LocationChangeEvent):void
{
	var codeUrl:String = APP_URL + "?code=";
	var code:String = event.location.substr(codeUrl.length);
 
	var fb:FacebookAirAndroid = new FacebookAirAndroid();
	fb.login(code);
 
}

By making a FacebookAirAndroid subclass of AbstractFacebook from the Facebook-Actionscript API you can write a public login method that takes this access code and builds a url, which now is fired by the URLLoader class.

public function login(code:String):void
{
	var url:String = "" +
		"https://graph.facebook.com/oauth/access_token?" +
		"client_id="+APP_ID+"&" +
		"redirect_uri="+APP_URL+"&" +
		"client_secret="+APP_SECRET+"&" +
		"code="+ code+"";
 
	var req:URLRequest = new URLRequest(url);
	var loader:URLLoader = new URLLoader();
 
	loader.addEventListener(Event.COMPLETE, onUrlLoaded);
	loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
 
	loader.load(req);
}

When the URLLoader dispatches Event.COMPLETE you should now have received an access token which you keep by setting the FacebookSession variable:

private function onUrlLoaded(event:Event):void
{
	var loader:URLLoader = event.currentTarget as URLLoader;
	var data:String = loader.data as String;
	var token:String = data.split("=")[1];
	token = token.split("&")[0];
 
	this.session = new FacebookSession();
	session.accessToken = token;
	session.secret = APP_SECRET;
}

Now you can use the inherited api method in your subclass to call Facebook with whatever you want. Good luck!

5 Responses to Mobile Facebook OAUTH authentication with Air 2.5

Paw Suddergaard says:

2011-01-15 at 13:08

Nice one dude!

Reply
Shawn says:

2011-01-16 at 16:44

The current API already provides a class for this purpose:
com.facebook.graph.FacebookMobile

Main source repo, under mobileAPI

Reply
- Fredrik says:
  
  2011-01-16 at 23:40
  
  Cool! Never checked the latest source from the repos. Thanks for responding. Will change this post to reflect the available class. Thanks for your comment.
  
  Reply
Simon Wang says:

2011-01-20 at 10:19

Thanks a lot! Really helpful. I’ve stuck in this for days.

Reply
Alex says:

2011-09-14 at 15:06

Not a good method, because you disclose the APP_SECRET

Reply