First free Facebook Single Sign-On (SSO) Adobe AIR native extension for Android

February 26, 2013

Overview

Our GCM extension and tutorial have been available for a while now and people have requested a number of updates. Some items on the list include adding a sound flag, incorporating notification icons into the extension init, and more. Don’t worry, these are coming! For now, here is a new extension we created that will help fellow AIR developers improve their apps and games.

Until recently, our app “Sketch Guess” utilized Web View for logging people in with Facebook credentials. It works well and looks decent. However, it can be cumbersome to users who are accustomed to seamless entry into FB integrated apps and games when they are already logged into Facebook mobile. That’s where SSO comes in. It allows your app to automatically use the login token from the Facebook application if your app was authorized by the user.

While it is quite easy to implement in native Android apps, we were not able to find a ready-to-go dedicated solution on the web. Therefore we had to create our own extension.

It was written for Adobe Flex SDK 4.6 + AIR SDK 3.5. Although, I’m sure it will probably work with the earlier versions of AIR (but not too early). My weapon of choice in developing AIR apps is Intellij 10 to 12. Therefore, I won’t be providing exact procedures to link to “.ane” when you setup the project since that varies from environment to environment.

Note: Facebook requires SSO for apps in their App Center. In other words, you cannot be listed in their marketplace unless your application implements SSO.

Download the ANE and example here and let’s begin…

Application setup in Facebook to use Single Sign-On (SSO)

1. Go to https://developers.facebook.com/apps/, click ‘Create New App’ and enter basic information such as the app name and a unique namespace.

2. Once the app is created, click ‘Edit’. Note the app ID shown at the top of the dashboard page. You’ll need that ID to use for your SSO login.

Facebook App Settings

3. Check the ‘Native Android App’ section at the bottom of the page. Enter your package name. In our case it was “air.com.afterisk.sketchguessfree”.

Note: Don’t forget to add “air.” before your package name (our package name was actually “com.afterisk.sketchguessfree”) or it won’t work!

4 . Enter your application Class Name. For Adobe AIR applications, it is always “.AppEntry”, so in our case it was “air.com.afterisk.sketchguessfree.AppEntry”

5. Mark “Facebook Login” as enabled.

6. Now, enter your Key Hash. This is a security measure from Facebook to determine if the app that is trying to access SSO on your behalf is actually the app you created.

Facebook App Settings: Native Android App

To create a certificate, refer to this Adobe DevNet article:
http://www.adobe.com/devnet/air/articles/packaging-air-apps-android.html

Note: If you already have a .p12 that you are using to sign your .apk and you don’t know the hash key, then next section is for you, otherwise skip to implementation part.

Extracting the Key Hash from .p12 key

1. Open Terminal or Command line and navigate to where your .p12 key is.
2. Type in: “keytool -v -list -keystore mycert.p12 -storetype pkcs12” where mycert.p12 is the filename of your .p12 key.
3. Enter keystore password (the one you used when exported .p12 key).
4 . Copy sha1 fingerprint signature bytes text.
5. The bytes at sha1 fingerprint signature are needed to write the “sha1.bin” file. You can use a hexadecimal editor to paste the bytes you copied. Afterwards, save the file as “sha1.bin”.
6. Open terminal again and type in: “openssl base64 -in sha1.bin -out base64.txt”.
7. The resulting “base64.txt” will contain the Key Hash that is needed for Facebook.

Great and simple hexadecimal editor for mac: HexFiend

OpenSSL should be preinstalled on mac, and here is the link for Windows version.

Extension implementation

Now, that we are done with Facebook’s “easy” setup, we can implement our extension into the app. If you never used Facebook Actionscript API by Adobe before, please download it here and familiarize yourself with it. The inner workings of that API are not in the scope of this article. With that said, lets continue.

Add extension to your application.xml:

<extensions>
        <extensionID>com.afterisk.shared.android.AndroidSSO</extensionID>
</extensions>

Add new activity to your application tag:

<application android:enabled="true" android:hardwareAccelerated="true">
 	<activity android:name="com.afterisk.shared.android.sso.AndroidSSOActivity"/>
</application>

The activity above is what allows us to send user back from successful (or not) sign-on from Facebook.

Next up is integration of the AS3 part of the SSO interface we’ve created with your app. The interface has 2 parameters: your application Facebook ID (from step 2 in FB app setup) and a flag which indicates whether you’d like to use the Facebook native authorization window or not. Some people might prefer to fall back to Web View login if there is no authorization token.

SSO implementation example (this example is also a part of the downloadable zip):

/**
 * Created by IntelliJ IDEA.
 * User: Afterisk Tech
 * Date: 2/22/13
 * Time: 9:17 AM
 * To change this template use File | Settings | File Templates.
 */
package
{

	import com.afterisk.shared.ane.lib.AndroidSSOEvent;
	import com.afterisk.shared.ane.lib.AndroidSSOInterface;
	import flash.display.Sprite;

	public class SSOExample extends Sprite
	{

		private static var _ssoi:AndroidSSOInterface;
		//The key from your application page on Facebook developer portal (http://developers.facebook.com)
		public static const FACEBOOK_APPLICATION_KEY:String = "yourkeyhere";

		public function SSOExample():void
		{
			_ssoi = new AndroidSSOInterface();
			//Check if Facebook App is installed on the device
			_ssoi.addEventListener(AndroidSSOEvent.INIT_CHECK_COMPLETE, handleInstallCheck, false, 0, true);
			_ssoi.checkIfInstalled();
		}

		private static function handleInstallCheck(e:AndroidSSOEvent):void
		{
			_ssoi.removeEventListener(AndroidSSOEvent.INIT_CHECK_COMPLETE, handleInstallCheck);

			if(e.facebookInstalled)
			{
				//If Facebook app is intalled add listeners to the interface and start the authorization process
				_ssoi.addEventListener(AndroidSSOEvent.NO_SESSION, handleAndroidSSOStatus, false, 0, true);
				_ssoi.addEventListener(AndroidSSOEvent.AUTHORIZED, handleAndroidSSOStatus, false, 0, true);
				_ssoi.addEventListener(AndroidSSOEvent.CANCELED, handleAndroidSSOStatus, false, 0, true);
				_ssoi.addEventListener(AndroidSSOEvent.ERROR, handleAndroidSSOStatus, false, 0, true);
				//Authorization process, setting 2nd parameter to true allows you to use Facebook
				//native authorization UI
				_ssoi.authorize(FACEBOOK_APPLICATION_KEY, true);
			}
			else
			{
				//Fall back to web view login if Facebook application is not installed on the device
			}
		}

		private static function handleAndroidSSOStatus(e:AndroidSSOEvent):void
		{
			if(e.type == AndroidSSOEvent.AUTHORIZED)
			{
				//The application has been authorized, use token to login using your Facebook Actionscript API from Adobe
				//http://code.google.com/p/facebook-actionscript-api/
				trace(e.accessToken);
				trace(e.expiresIn);
			}
			else
			{
				//the authorization was not succesful, retry, fall back to Web View login or do something else.
				trace("Event: " + e.type);
			}
		}
	}
}

That is it! You are now ready to use Facebook Single Sign-On with your own application.

The example of fully working Facebook SSO implementation on Android can be seen in our drawing game:

Good luck!

Download

Again, here is the Facebook SSO Extension and Example link.

Written by afterisktech Posted in Development, Free Software Tagged with actionscript, adobe air, afterisk, android, ane, as3, facebook single sign-on, facebook SSO, flash, key hash, mobile, native extension, sketch guess, sso login