A Tour of New -- Flex, AIR, OpenAIM & clientLogin: Part 1

Although my original intention for this week's blog was to create an Adobe AIR application mashed up with a little Web AIM and Mapquest, I got to thinking that it was becoming more than that. There's been quite a bit going on over the last couple months. While Adobe recently shipped Flex 3 and AIR 1.0, perhaps the biggest and most important releases for us come from AOL with their authentication support for desktop applications such as Adobe AIR via clientLogin, Mapquest's free edition, the incredible advances for the Open AIM platform, and the soon to be released Userplane Media Player. While I will still be producing an AIR/AIM/Mapquest mashup, I'll also touch on the new authentication available to AIR too.

If you followed any of my previous threads where I've created AJAX flavored Adobe AIR applications, you'll be familiar with the approach I'll take in this post. Just as we've always done in the past, we'll need to set up our Adobe AIR application's sandboxed environments, one for AIR-specific functionality, and another for traditional browser functionality. The directory structure I use is shown below.

/
+--- assets
|      +--- script
|      |      +--- Ext-2.0
|      |      +--- root.js
|      |      +--- ui.js
|      |      +--- AIRAliases.js
|      |
|      +--- style
|             +--- main.css
|
+--- root.html
+--- ui.html

Each sandbox is represented by an HTML file in the root of the application and it's sister script file in the script directory. The application sandbox is the root file and the browser sandbox is the ui file. This post will be working in the ui as we'll be making some AJAX calls to demonstrate the clientLogin invocation as well as generate content to the user interface. For now, these source files are relatively blank, they only contain their links to their companion script and style files as well as the Ext JS library we'll be using for AJAX calls and eventually UI components. Since I would like to first show you how easy it is to invoke the clientLogin method, let's get started with that.

Using the clientLogin Method for Desktop Applications

Clearly, Adobe AIR is an interesting and flexible technology that is worth investing your time in to learn. I've been using AIR for a while now and I was thrilled to see AOL come out with authentication support for desktop application such as AIR. I'm going to go through the basic steps to get you up and running using this method. We'll be using Web AIM, so you'll need to get a key first. The form I filled out looks like this:

After clicking the submit button, you should be able to see a listing of all the keys you've created. With this in hand, you're able to make a request to the clientLogin method as shown below (using the Ext JS framework as an example):

Ext.Ajax.request(
	{
		url:    "https://api.screenname.aol.com/auth/clientLogin",
		method: "POST",
		params: {
			devId: "yourDeveloperID,
			f:     "json",
			s:     "someUser",
			pwd:   "somePassword"
		},
		callback: function( c, o, r ) {
			Ext.get( "out" ).update( r.responseText );	
		}
	}
);

The parameters posted are the developer ID you created earlier, the format specified as 'json', and a username and password of the account seeking authentication. The callback to this AJAX request simply updates a div with the element ID out. A sample response I received is shown below with the resulting token shortened.

{ "response": { 
   "statusText":"OK","data":{
        "hostTime":1207460894,"sessionSecret":"n3ERIG5gm57KH3qL","token":{
               "expiresIn":86400,"a":"%2FwEAAAAA2twkW5PXu9zgq3sQ3%2F7Dw7lX0gJeHwDa..."
         }
      },"statusCode":200}
}

From here, you'll be able to use many of the Web AIM API methods requiring a token for authentication. If you need to start a session with the Web AIM API, you could also use the token returned from this call as well. However, keep in mind that you'll need to sign all requests that use this authentication token from this point forward.

Just the addition of the clientLogin alone opens many new doors to developers looking to take advantage of the Open AIM API. However we're not done yet, next time we'll mash up the AIM API to retrieve the locations of ranked AIM Fight Users with Mapquest. We'll even take it a step further by using the latest version of the Ext JS framework which ships with AIR support.

Part 2