My favorites | Sign in
Project Logo
                
Search
for
Updated Aug 12, 2008 by mikechambers
Labels: Authenticate, Login, Phase-Implementation
LoginProcess  
Sample code to authenticate a user for your application

Introduction

Some methods require a user to be authenticated before being invoked. For example, calling the delete photo method will fail unless the user gives your application permission to delete her photos.

The following sample code snippet demonstrate the login process

Flex Based Authentication

The library contains a Flex control that provides a UI and code for authenticating an application with Flickr. You can find a quick overview of the control at: http://www.mikechambers.com/blog/2008/08/12/flex-based-flickr-api-authorization-control/

Sample code for authenticating a user

			/**
			 * Some methods require authentication, so this is how you
			 * would start the login sequence.  We need to set the secret
			 * assigned to our particular application, and then get
			 * a frob used for authentication.
			 */
			private function startLoginSequence():void {
				service.addEventListener( FlickrResultEvent.AUTH_GET_FROB, getFrobResponse );
				service.auth.getFrob();
			}
			
			/**
			 * When we receive the frob, we need to construct a login link
			 * and open a browser window for the user to log into the flickr
			 * site.  Use the service getLoginURL method to construct a 
			 * login link with the frob we received, and pass along the
			 * permission we'd like to be granted from the user.
			 */
			private function getFrobResponse( event:FlickrResultEvent ):void {
				debug.text += "getFrobResponse: success = " + event.success + "\n";
				
				if ( event.success ) {
					// Have the service construct a login url for us with the
					// authentication frob, and request the user that we'd like
					// to have DELETE access to their data
					frob = String( event.data.frob );
					var auth_url:String = service.getLoginURL( frob, AuthPerm.DELETE );
					
					// 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,
								onCloseAuthWindow );
								
				} else {
					debug.text += "error code: " + event.data.error.errorCode + "\n";
					debug.text += "error message: " + event.data.error.errorMessage + "\n";
				}
			}
			
			/**
			 * After the alert closes, if they pressed the OK button we
			 * assume that they logged into Flickr, so try to get their
			 * auth token that we can use throughout the rest of our app
			 */
			private function onCloseAuthWindow( event:* ):void {
				// Only process if they pressed OK
				if ( event.detail == Alert.OK ) {
					// Get their authentication token, and call getTokenResponse
					// when it's available
					service.addEventListener( FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse );
					service.auth.getToken( frob );	
				}
			}
			
			/**
			 * This completes the login process.  When the user is successfully
			 * authenticated and the application has permission to use their
			 * data, there will be a token that flickr assigns to us.
			 */
			private function getTokenResponse( event:FlickrResultEvent ):void {
				debug.text += "getTokenResponse: success = " + event.success + "\n";
				
				if ( event.success ) {
					var authResult:AuthResult = AuthResult( event.data );
					// dump the object internals for debugging
					debug.text += ObjectUtil.toString( authResult ) + "\n";
					
					// 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;
					
					// Save the token in a shared object so that when the application
					// loads again we can re-authenticate automatically
					var flickrCookie:SharedObject = SharedObject.getLocal( "FlickrServiceTest" );
					flickrCookie.data.auth_token = service.token;
					flickrCookie.flush();
					
					// Update the UI to show the currently logged in username
					username.text = authResult.user.username + " (" + authResult.user.fullname + " )";
					permission.text = service.permission;
					
					debug.text += "token: " + service.token + "\n";
					debug.text += "perms: " + service.permission + "\n";
					
					// Toggle the login/logout buttons
					login.visible = false;
					logout.visible = true;
					
				} else {
					debug.text += "error code: " + event.data.errorCode + "\n";
					debug.text += "error message: " + event.data.errorMessage + "\n";
				}
			}

Comment by typerecords, Jul 31, 2007

I've just spent a good few hours just trying to get rid of error messsages trying to use this library in Flash CS3.

Here's what I have learnt. It's hacky and will be out of date soon.

Basically, the authResult items above just don't return the data received from Flickr. If you debug (which I have), you can see the data is there, it's just not coming out where it's needed.

So - a nasty hack just to get it to work (use at your own peril).

The only way I have managed to get this to work (this is in Flash CS3 not Flex) is to put the following code in events/MethodGroupHelper?.as

var authShared:SharedObject? = SharedObject?.getLocal("authResult");

authShared.data.token = new String(authResult.token);
authShared.data.perms = new String(authResult.perms);
authShared.flush();

before the return statement.

And then create an AS file called FlickrAuth?.as and use the following code:

package {

import com.adobe.webapis.flickr; import com.adobe.webapis.flickr.;
import com.adobe.webapis.flickr.events;
import com.adobe.webapis.flickr.events.
;
import com.adobe.webapis.flickr.methodgroups; import com.adobe.webapis.flickr.methodgroups.;
import flash.net.; import flash.text.; import flash.display.; import fl.controls.Button; import flash.events.MouseEvent?;

public class FlickrAuth? extends Sprite {
private var theService:FlickrService?; private var debug:TextField?; private var username:TextField?; private var permission:TextField?; private var frob:String; private var letsgo:Button;
public function FlickrAuth?() {
trace("constructor"); theService = new FlickrService?("90649aba08b97543e379cd4cc8820ba9"); theService.secret = "b038bab0f761ba6c"; startLoginSequence();
} /
  • Some methods require authentication, so this is how you
  • would start the login sequence. We need to set the secret
  • assigned to our particular application, and then get
  • a frob used for authentication.
private function startLoginSequence():void {
trace("start login sequence"); theService.addEventListener( FlickrResultEvent?.AUTH_GET_FROB, getFrobResponse ); theService.auth.getFrob();
}
/
  • When we receive the frob, we need to construct a login link
  • and open a browser window for the user to log into the flickr
  • site. Use the theService getLoginURL method to construct a
  • login link with the frob we received, and pass along the
  • permission we'd like to be granted from the user.
private function getFrobResponse( event:FlickrResultEvent? ):void {
trace("getFrobResponse: success = " + event.success + "\n");
if ( event.success ) {
trace("Success"); // Have the theService construct a login url for us with the // authentication frob, and request the user that we'd like // to have DELETE access to their data
frob = String( event.data.frob ); trace("THE FROB!" + frob); var auth_url:String = theService.getLoginURL( frob, AuthPerm?.DELETE );
// Open a new browser window to authenticate the user // and grant our application permission navigateToURL( new URLRequest( auth_url ), "blank" );
letsgo = new Button(); addChild(letsgo);
letsgo.addEventListener( MouseEvent?.MOUSE_UP, onCloseAuthWindow );

} else {
trace("error code: " + event.data.error.errorCode + "\n"); trace("error message: " + event.data.error.errorMessage + "\n");
}
}
/
  • After the alert closes, if they pressed the OK button we
  • assume that they logged into Flickr, so try to get their
  • auth token that we can use throughout the rest of our app
public function onCloseAuthWindow( event:MouseEvent? ):void {
// Only process if they pressed OK // Get their authentication token, and call getTokenResponse
// when it's available
theService.addEventListener( FlickrResultEvent?.AUTH_GET_TOKEN, getTokenResponse ); theService.auth.getToken( frob );
}
/
  • This completes the login process. When the user is successfully
  • authenticated and the application has permission to use their
  • data, there will be a token that flickr assigns to us.
private function getTokenResponse( event:FlickrResultEvent? ):void {
trace("getTokenResponse: success = " + event.success + "\n"); trace("event: " + event); trace("data token:" + event.data.error);
if ( event.data ) {
//trace("Event.data " + ObjectUtil?.toString( event.data ));
//var authResult:AuthResult? = AuthResult?( event.data ); // dump the object internals for debugging //trace(ObjectUtil?.toString( authResult ) + "\n");
// Assign the token and permission to the theService so that // all calls that require authentication have their values // populated
var authShared:SharedObject? = SharedObject?.getLocal("authResult");

theService.token = authShared.data.token; theService.permission = authShared.data.perms;

// Save the token in a shared object so that when the application // loads again we can re-authenticate automatically var flickrCookie:SharedObject? = SharedObject?.getLocal( "FlickrServiceTest?" ); flickrCookie.data.auth_token = theService.token; flickrCookie.flush();
// Update the UI to show the currently logged in username //username.text = authResult.user.username + " (" + authResult.user.fullname + " )"; //permission.text = theService.permission;
trace( "token: " + theService.token + "\n"); trace("perms: " + theService.permission + "\n");
// Toggle the login/logout buttons //login.visible = false; //logout.visible = true;
} else {
trace("error code: " + event.data.errorCode + "\n"); trace("error message: " + event.data.errorMessage + "\n");
} parent.play();
}
}
}

Then put this on frame one of your movie:

stop(); var flickrAuth = new FlickrAuth?();

addChild(flickrAuth);

Like I say, it's not good practice but useful for getting the library up and running!

Comment by typerecords, Jul 31, 2007

I've just spent a good few hours just trying to get rid of error messsages trying to use this library in Flash CS3.

Here's what I have learnt. It's hacky and will be out of date soon.

Basically, the authResult items above just don't return the data received from Flickr. If you debug (which I have), you can see the data is there, it's just not coming out where it's needed.

So - a nasty hack just to get it to work (use at your own peril).

The only way I have managed to get this to work (this is in Flash CS3 not Flex) is to put the following code in events/MethodGroupHelper?.as

var authShared:SharedObject? = SharedObject?.getLocal("authResult");

authShared.data.token = new String(authResult.token);
authShared.data.perms = new String(authResult.perms);
authShared.flush();

before the return statement.

And then create an AS file called FlickrAuth?.as and use the following code:

package {

import com.adobe.webapis.flickr; import com.adobe.webapis.flickr.;
import com.adobe.webapis.flickr.events;
import com.adobe.webapis.flickr.events.
;
import com.adobe.webapis.flickr.methodgroups; import com.adobe.webapis.flickr.methodgroups.;
import flash.net.; import flash.text.; import flash.display.; import fl.controls.Button; import flash.events.MouseEvent?;

public class FlickrAuth? extends Sprite {
private var theService:FlickrService?; private var debug:TextField?; private var username:TextField?; private var permission:TextField?; private var frob:String; private var letsgo:Button;
public function FlickrAuth?() {
trace("constructor"); theService = new FlickrService?("90649aba08b97543e379cd4cc8820ba9"); theService.secret = "b038bab0f761ba6c"; startLoginSequence();
} /
  • Some methods require authentication, so this is how you
  • would start the login sequence. We need to set the secret
  • assigned to our particular application, and then get
  • a frob used for authentication.
private function startLoginSequence():void {
trace("start login sequence"); theService.addEventListener( FlickrResultEvent?.AUTH_GET_FROB, getFrobResponse ); theService.auth.getFrob();
}
/
  • When we receive the frob, we need to construct a login link
  • and open a browser window for the user to log into the flickr
  • site. Use the theService getLoginURL method to construct a
  • login link with the frob we received, and pass along the
  • permission we'd like to be granted from the user.
private function getFrobResponse( event:FlickrResultEvent? ):void {
trace("getFrobResponse: success = " + event.success + "\n");
if ( event.success ) {
trace("Success"); // Have the theService construct a login url for us with the // authentication frob, and request the user that we'd like // to have DELETE access to their data
frob = String( event.data.frob ); trace("THE FROB!" + frob); var auth_url:String = theService.getLoginURL( frob, AuthPerm?.DELETE );
// Open a new browser window to authenticate the user // and grant our application permission navigateToURL( new URLRequest( auth_url ), "blank" );
letsgo = new Button(); addChild(letsgo);
letsgo.addEventListener( MouseEvent?.MOUSE_UP, onCloseAuthWindow );

} else {
trace("error code: " + event.data.error.errorCode + "\n"); trace("error message: " + event.data.error.errorMessage + "\n");
}
}
/
  • After the alert closes, if they pressed the OK button we
  • assume that they logged into Flickr, so try to get their
  • auth token that we can use throughout the rest of our app
public function onCloseAuthWindow( event:MouseEvent? ):void {
// Only process if they pressed OK // Get their authentication token, and call getTokenResponse
// when it's available
theService.addEventListener( FlickrResultEvent?.AUTH_GET_TOKEN, getTokenResponse ); theService.auth.getToken( frob );
}
/
  • This completes the login process. When the user is successfully
  • authenticated and the application has permission to use their
  • data, there will be a token that flickr assigns to us.
private function getTokenResponse( event:FlickrResultEvent? ):void {
trace("getTokenResponse: success = " + event.success + "\n"); trace("event: " + event); trace("data token:" + event.data.error);
if ( event.data ) {
//trace("Event.data " + ObjectUtil?.toString( event.data ));
//var authResult:AuthResult? = AuthResult?( event.data ); // dump the object internals for debugging //trace(ObjectUtil?.toString( authResult ) + "\n");
// Assign the token and permission to the theService so that // all calls that require authentication have their values // populated
var authShared:SharedObject? = SharedObject?.getLocal("authResult");

theService.token = authShared.data.token; theService.permission = authShared.data.perms;

// Save the token in a shared object so that when the application // loads again we can re-authenticate automatically var flickrCookie:SharedObject? = SharedObject?.getLocal( "FlickrServiceTest?" ); flickrCookie.data.auth_token = theService.token; flickrCookie.flush();
// Update the UI to show the currently logged in username //username.text = authResult.user.username + " (" + authResult.user.fullname + " )"; //permission.text = theService.permission;
trace( "token: " + theService.token + "\n"); trace("perms: " + theService.permission + "\n");
// Toggle the login/logout buttons //login.visible = false; //logout.visible = true;
} else {
trace("error code: " + event.data.errorCode + "\n"); trace("error message: " + event.data.errorMessage + "\n");
} parent.play();
}
}
}

Then put this on frame one of your movie:

stop(); var flickrAuth = new FlickrAuth?();

addChild(flickrAuth);

Like I say, it's not good practice but useful for getting the library up and running!

Comment by rrossen, Feb 25, 2008

The problem is of a much simpeler nature,

//line causing havoc var authResult:AuthResult? = AuthResult?( event.data );

If you debug correctly and step into the processAndDispatch function of the MethodGroupHelper? class you will find that the problem lies in the fact that the AuthResult? object is assigned to event.data.auth, not simply event.data.

so changing var authResult:AuthResult = AuthResult( event.data ); to var authResult:AuthResult = AuthResult( event.data.auth ); fixes the script and all goes fine.

Comment by micahslavens, Mar 14, 2008

Is there no way to authenticate without a popup window?

Comment by emddudley, Jun 03, 2008

micahslavens: There is no way to authenticate without a popup. The Flickr API requires that you open a page on Flickr to authenticate.


Sign in to add a comment
Hosted by Google Code