Flickr over Flex - Tutorial

So you want to use the Flickr API with Flex 2.0 to interact with the Flickr Web Services. Here's what I know:

Setup

  1. Sign up for Flickr
  2. Download the corelib from labs.adobe.com (I'll let you find it, it isn't hard)
  3. Sign up for a Flickr API key
  4. Download my revised version of the flickr API

Once those are all done, proceed:

Know What you're doing
  1. Putting your Flickr secret key inside your apps is a security risk. Anyone of moderate skill in the art can decompile your flash .swf file and get your key out of it.

If you're going to run it from a desktop, or you're going to carefully limit distribution, continue

Building your app

There are two parts to the Flickr API:

Authentication

    • Setup the FlickrService object with your api key and secret key
    • Acquire a "Frob"
    • Validate your credentials with an authorization token

Step 1: Configure the FlickrService

	var service:FlickrService = new FlickrService( api_key );
	service.secret = api_md5;
	Security.allowDomain(["api.flickr.com", "flickr.com", "*"]);
	Security.allowInsecureDomain(["api.flickr.com", "flickr.com", "*"]);

I'm not certain that Security.allowDomain and Security.allowInsecureDomain are necessary.

Step 2: Request The "Frob"

Note: You only have to do this step once (ideally) when you are first validating that you (as a Flickr subscriber) are verifying that it is ok for your app (as an anonymous application) is allowed to access your Flickr account

	service.addEventListener(FlickrResultEvent.AUTH_GET_FROB, frobListener);
	service.auth.getFrob();

getFrob() engages the Flickr API and talks to the Flickr server. Now, you need to define frobListener to receive the results:

Step 3: Handle the arrival of the "Frob"

  public function frobListener(ev:FlickrResultEvent):void {
	  //				Alert.show("Got result event: "+ev); 				 				
	  if ( ev.success ) { 					 					
	  	frob = String( ev.data.frob ); 					 					
		
		var auth_url:String = service.getLoginURL( frob, AuthPerm.READ );  					
		
		// Open a new browser window to authenticate the user 					
		// and grant our application permission 					
		navigateToURL( new URLRequest( auth_url ), "_blank" );   					
		
		// Show the alert saying  they need to authenticate on the  					
		// flickr site.  when the alert closes, we need to get the  					
		// token then to get their logged-in status 					
		Alert.show( "This application requires that you authenticate" 								
				+ " on Flickr.com before proceeding.  Please log in" 								
				+ " to Flickr in the separate browser window that" 								
				+ " opened.  After you have successfully logged in," 								
				+ " press 'OK' below to continue", 								
				"Authentication Required", 								
				Alert.OK | Alert.CANCEL, 								
				null,
				onCloseAuthWindowListener  ); 					  					 				
	} else { 					
		Alert.show("Unsuccessful login attempt."); 				
	}   				 			
}

Step 4: Validate the "Frob" and get a Token

Once you have told Flickr that you're ok with the app accessing your account, you shouldn't have to do that step again. So the next step is to listen for the close of the window, which indicates (in theory) that the user (you) has told Flickr that your app is legit.

In step three above, you defined a listener (in purple). Now you need to implement that. This listener needs to fetch an authentication token from Flickr. Once acquired, you can use this authentication token with your calls. Unlike the Frob, you don't have to go back to Flickr to revalidate it each time you use it. 

	public function onCloseAuthWindowListener( event:*):void {
	
		if ( event.detail == Alert.OK ) {
		
			// Get their authentication token, and call getTokenResponse
			// when it's available
			
			service.addEventListener( FlickrResultEvent.AUTH_GET_TOKEN,  tokenListener );
			service.auth.getToken( frob );	
		}
	}

Step 5: Validate the Token

The last step of the setup is the listener set up in green above - to listen for the token to come back from Flickr. 
		public function tokenListener( event:FlickrResultEvent ):void {
							
			if ( event.success ) {
				
				var authResult:AuthResult = AuthResult( event.data.auth );
				
				// Assign the token and permission to the service so that
				// all calls that require authentication have their values
				// populated
				service.token = authResult.token;
				service.permission = authResult.perms;
													
			} else {
				Alert.show("Unable to acquire user credentials");
			}
		}
Note that the token is just a simple string, so you can store it as a parameter in your program, or put into the SharedObject, etc.

Actual Work

Once you have the token, the actual work is straightforward. There are a bunch of services, each one taking a different list of parameters. I'll provide one example, and let you look at this page to find out about the others

	var tags:String = "dog";
	service.addEventListener( FlickrResultEvent.PHOTOS_SEARCH, fetchByTagListener );
	service.photos.search( "me", tags );
Obviously this is the "search photos by tag" method, and the important item is the listener, highlighted in blue above. 
	public function fetchByTagListener( event:FlickrResultEvent ):void {
			
		if (event.success) {
	
			// I found this by using the debugger and manually inspecting the event.data.  you'll probably
			// want to do the same.				
			var photoList:Array = event.data.photos.photos; 
							
				
		}
	}

The output of this - photoList - is an Array of Photo objects (defined as part of the Flickr API).

Fin

At this point, you should have a working application that demonstrates how to authenticate, and then how to do one of the more common Flickr API methods. Congratulations.

If you have questions or comments, feel free to let me know on the comment page.

Shout Out

Thanks!