Build a better Login with Adobe Flex, Zend_Amf, Zend_Auth, and Zend_Acl – On The Flex Side

Since Adobe announced that they were officially supporting Zend_Amf, developed by Wade Arnold, I thought it would behoove me to discover what this was all about, so I developed a simple Access control project to get familiar with the Zend Framework.

This example is a Flex 3 application developed using Cairngorm, Zend_Amf, Zend_Auth, and Zend_Acl to verify user accounts and permissions in a MySQL database.

The php code for this project is covered in the second half of this tutorial Build a better Login with Adobe Flex, Zend_Amf, Zend_Auth, and Zend_Acl - On The PHP Side

Zend_Auth has several adapters to authenticate with, there are adapters for OpenID, LDAP, text files, and databases. For this tutorial we will use the Zend_Db to authenticate the user against a MySQL database.

Zend _Acl is used to control the users access privileges.

With a few changes you could also use SQL Server, PostGreSQL , Oracle, or whatever your database setup happens to be. Also if you don't wish to use the MAMP structure you will have to modify the configuration to match your webserver setup. This tutorial is specific to MAMP on a local computer.

Please Note: This is an over simplified example and not meant to be a best Security practice.

This tutorial does not go into detail about the workings of the Cairngorm framework, if you need additional infomation about Cairngorm please consult the Cairngorm Docs.

Please consult the Zend Framework Reference Guide for more information about Zend_Amf,  Zend_Auth and Zend_Acl.

This application is licensed under the

Build a better Login with Flex, Zend_Amf, Zend_Auth, and Zend_Acl by Keith Craigo is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License

You can view the completed application here, right click the application to view and download the Flex, SQL, and PHP source code

or can build as you go through this tutorial.

Okay let's get started:

Project Requirements:

1. Flex Builder 3
   or the Free Open Source Flex SDK
2. Cairngorm
3. PHP 5 .2.8 , PHP 5.2.6
4. MAMP - I use living e
5. Zend Framework 1.7.1

Project Overview

Let's clear up some terminolgy first, Verification and Authorization are two totally different things.

Verification is the process of verifying that you are who you say you are.
Authorization is the process of determining what you have access to. What privileges are assigned to you.

Just because I can Verify I'm Keith doesn't mean I'm Authorized to view every area of a website.

Here's the basic workflow.

First screen of the application asks the user to login or go to the public screen, upon login submission there are 3 possible outcomes:

1. The user is authorized and their access privileges will be retrieved based on their assigned user role Super, admin or manager. Their access privileges determine what they will see on the control panel.
2. If either the username or password is incorrect the user will be presented with the message "Sorry! Either your username or password is incorrect, please try again or view the public site."
3. The user is not authorized in which case they will default to the guest role and they are presented with the PublicView. The guest role only allows the user to view the PublicView.

Role Privileges:

Setting up the Acl can become quite complicated but for now I'll try to keep it simple.
guest is the default role and is only allowed acces to the public area.
manager inherits all the privileges of guest plus this role is assigned some unique privileges shown in the table.
admin inherits all the privileges of guest and manager plus this role is assigned some unique privileges shown in the table.
Super is a special role, this role does not inherit from any other role but is given all privileges as well as some unique privileges as shown in the table above. I'll explain more in the server side code.

Initial Setup

Basic Directory Setup.

1. Follow the Download and Install instructions of items 1 -4
2. Download and unzip the Zend Framework 1.7.1 file to a location on your computer.
3. Under your MAMP home directory and above the htdocs folder, create two new folders frameworks and utils.
   Please note: it's a best practice to keep sensitive data such as database connection details out of the web root.
4. Copy the Zend Framework 1.7.1 /library/Zend folder to the new frameworks directory you just created.

Your directory structure should be similiar to:

MAMP/frameworks/Zend

MAMP/utils

Setup the MAMP MySQL database

Create a new database called AccessControlExample

Copy the following SQL into AccessControlExample

CREATE TABLE IF NOT EXISTS `admin` (`username` varchar(20)
NOT NULL,`password` varchar(20) NOT NULL,`realfirstName`
varchar(20) NOT NULL,`reallastName`
varchar(20) NOT NULL,`role` varchar(20)
NOT NULL,PRIMARY KEY  (`username`))
ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `admin`
VALUES('admin', 'password','admin', 'admin', 'admin');

INSERT INTO `admin`
VALUES('manager', 'password','manager', 'manager',  'manager');

INSERT INTO `admin`
VALUES('Super', 'password','Super', 'Super', 'Super');

On The Flex Side

Setup your Flex Builder Project:

In Flex Builder create a new Flex project by either clicking File->New->Flex Project or
by clicking the arrow of the New Project button then select the Flex Project link as illustrated in the following image.

In the following dialog

for the project name type AccessControlExample

You can choose to accept the default location or supply a new location for the project.

Application type - Select Web application (runs in Flash Player)

Server technology - Application Server Type select PHP from the drop down.

Click next.

All of the above are fairly self explanatory. MAMP runs on port 8888.
Your configuration may be different depending on your particular Web Server.

After you click Validate Configuration and if all goes well, Select Next then Library path.

Here you can change the name of the main application file, I chose to leave the default.

Click Add SWC.

Provide the path to the Cairngorm.swc you downloaded previously.

Click Finish.

Configure the Compiler

Create a configuration file in your projects root directory, name the file services-config.xml, you can save this anywhere you like actually, you just have to provide the compiler the absolute path to it's location.

Copy and save the following xml into the services-config.xml file

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="zend">
<channels>
<channel ref="my-zend"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition
id="my-zend"class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost:8888/AccessControlExample/"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels></services-config>

Select Project->properties from the Main Flex builder menu.

In the left side menu select Flex Compiler as shown in the following image:

NOTE: this is how my configuration is setup, yours may be different depending on your locale.

In the additional compiler arguments after the -locale en_US,

Type -services services-config.xml

Click Apply if you wish to Apply the change and make any other changes
otherwise click OK to Apply the changes and close the dialog box.

Setup your project folders:

In the project src dir create the following structure:

1. com/business
2. In the com/business folder create the following 4 folders - commands, control, events, and delegates.
3. com/vo
4. com/views
5. com/model
   There are other layout configurations but I wanted to keep this as simple as possible for now.
6. Your folder structure should resemble the following,

In the business folder create a new MXML Component called Services.mxml , just accept the default settings for now, we will overwrite all the default code by copying, pasting and saving the following in the Services.mxml

<?xml version="1.0" encoding="utf-8"?>
<rds:ServiceLocator
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:rds="com.adobe.cairngorm.business.*">

<mx:RemoteObject
id="LoginService"
destination="zend"
source="Login"showBusyCursor="true">
<mx:method name="verifyUser"/>
</mx:RemoteObject>

</rds:ServiceLocator>

Save and close this file, we won't need this anymore in this tutorial.

In the com/model folder create a new Actionscript class named ModelLocator.
Leave the Superclass empty, in the Interfaces section click the add button and select IModelLocator or just start typing IModel and then select com.adobe.cairngorm.model.IModelLocator.

You can accept the defaults for now.

after the declaration

package com.model

{

replace all the existing code with the following

import com.adobe.cairngorm.CairngormError;
import com.adobe.cairngorm.CairngormMessageCodes;
import com.adobe.cairngorm.model.IModelLocator;

[Bindable]
public class ModelLocator implements IModelLocator {
// Single Instance of Our ModelLocator
private static var __instance:ModelLocator = null;

public function ModelLocator(__enforcer:SingletonEnforcer) {
if (__enforcer == null) {
throw new CairngormError( CairngormMessageCodes.SINGLETON_EXCEPTION, "ModelLocator" );
}
}
// Returns the Single Instance
public static function getInstance() : ModelLocator {
if (__instance == null) {
__instance = new ModelLocator( new SingletonEnforcer );
}
return __instance;
}
//DEFINE YOUR VARIABLES HERE
public var workflowState:uint = LOGIN;
public var CURRENT_USER_ROLE:String="";
public var MAINNAV:ArrayCollection = new ArrayCollection();

public var admingranted:Boolean = false;
public var supergranted:Boolean = false;

// DEFINE VIEW CONSTANTS

public static const LOGIN:uint = 0;
public static const CONTROLPANEL:uint = 1;
public static const PUBLIC:uint = 2;

}
// Utility Class to Deny Access to Constructor
class SingletonEnforcer {}

Here were setting up our default screen, the Login screen, in the workflowstate variable. A little later we will see how we can change this variable to control the different states of the application. You can close ModelLocator.as,  we won't need to visit this code anymore.

In the com/views folder create the following MXML Components. Base all the components on Canvas.

Login.mxml, PublicView.mxml, and ControlPanel.mxml

In Login.mxml create a form with two textInput controls, give the first one an id of " txt_username" ,
for the second give it an id of "txt_password". The forms Formheading label="Please Login or you can click Public in the nav bar above if you don't have an account." You could setup a subscribe feature but that is beyond the scope of this tuturial.

Place a button on this form and give it an id of "btn_login" with the label "LOGIN" and pass the mouse click event to the function verifyUser(event) as shown in the following snippet.

Or you can just copy and paste the following code right after the <mx:Application> tag.

<mx:Script>
<![CDATA[
import com.model.ModelLocator;
import com.business.events.LoginEvent;
import flash.events.Event;
import com.vo.LoginVO;

[Bindable] public var __model:ModelLocator = ModelLocator.getInstance();

public function verifyUser(e:MouseEvent):void {
var loginEvent:LoginEvent =

new LoginEvent(new LoginVO(txt_username.text, txt_password.text));
loginEvent.dispatch(); } ]]>
</mx:Script>
<mx:Form horizontalCenter="0" verticalCenter="0">
<mx:FormHeading label="Please Login or you can click Public in the nav bar above if you don't have an account."/> <mx:FormItem label="User Name:" height="26">
<mx:TextInput id="txt_username"/>
</mx:FormItem>
<mx:FormItem label="Password:" height="26">
<mx:TextInput id="txt_password" displayAsPassword="true"/>
</mx:FormItem>

<mx:FormItem>
<mx:Button label="LOGIN" id="btn_login" click="verifyUser(event);"/>
</mx:FormItem>
</mx:Form>

Please note: Normally styling information such as fonts, colors etc... should be placed in a css file, but in my opinion
inline styles are fine for quick demo purposes.

Next in the PublicView.mxml , I'll keep this real simple, just place a single label in this file.

The label text should be "Welcome ! This is the public page."

In the ControlPanel.mxml, replace the code contents with the following

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300"
creationComplete="init();">

<mx:Script>
<![CDATA[
import com.model.ModelLocator;
[Bindable] public var __model:ModelLocator = ModelLocator.getInstance();

/** Initializes the control panel by enablingUI elements based on the users access privilegesthat are set in the model.
*  @param none
*  @return void
* */
public function init():void {
// The userRole determines which
// buttons will be enabled or disabled
Admin.enabled = __model.admingranted;
Super.enabled = __model.supergranted; }]]>
</mx:Script>

<mx:VBox
fontFamily="Verdana"
horizontalAlign="center"
verticalAlign="middle"
fontSize="10"
color="#020202"
width="100%"
height="100%"
x="0" y="0">
<mx:Label text="Welcome! This is the Secure page." />
<mx:Label text="You are logged in with the User Role of"/>
<mx:Label text="{__model.CURRENT_USER_ROLE}"
fontFamily="Verdana"
fontSize="12"
fontWeight="bold"
color="#FC0202"/>
<mx:Button id="Admin"
label="Admin Functions"/>
<mx:Button id="Super"
label="Super Admin Functions"/>
<mx:Button id="btn_common"
label="Create Project"/>
<mx:Button id="btn_common0"
label="Assign Tasks"/>

</mx:VBox>

</mx:Canvas>

We now need to modify our main mxml file, AccessControlExample.mxml or whatever you saved the main file as.
Replace all the code in this file with the following

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:views="com.views.*"
xmlns:business="com.business.*"
xmlns:control="com.business.control.*"
layout="absolute"
creationComplete="init();"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import com.model.ModelLocator;
[Bindable]public var __model:ModelLocator = ModelLocator.getInstance();
/** Initilizes the main menu
* @param none
* @return void
**/
public function init():void {
var mnuItems:Array = [{label: "Public"}];
__model.MAINNAV = new ArrayCollection(mnuItems);
}
/** Handles navigation when a user
* clicks a button in the main nav bar
* @param uint - Nav Bar Buttons SelectedIndex

* @return String - returns the lable text associated
* with the SelectedIndex

**/
public function handleMainNav(i:uint):void
{
switch(__model.MAINNAV.getItemAt(i).label)
{
case 'Control Panel':__model.workflowState = ModelLocator.CONTROLPANEL;
break;
default:

__model.workflowState = ModelLocator.PUBLIC;
break;
}]]>
</mx:Script>

<!-- Cairngorm Mappings -->
<business:Services id="services" />
<control:Controller id="controller"/>
<mx:ViewStackid="userViews"
horizontalCenter="0"
verticalCenter="0"
selectedIndex="{__model.workflowState}">
<views:Login/>
<views:ControlPanel/>
<views:PublicView />
</mx:ViewStack>
<mx:ApplicationControlBar
y="100"
width="400"
height="36"
horizontalCenter="0">
<mx:MenuBar id="mainNav""
width="100%" height="100%"
dataProvider="{__model.MAINNAV}"
click="handleMainNav(mainNav.selectedIndex);" />
</mx:ApplicationControlBar>
</mx:Application>

Remember the verifyUser function in our Login.mxml file, we need to create a LoginEvent.as class now.

Right click com/business/events, select New->Actionscript class and name this new file LoginEvent.as .

Make sure the package is com.business.events

Set the Superclass to com.adobe.cairngorm.control.CairngormEvent

Click Finish

Replace the contents of this file with the following code

package com.business.events {

import com.adobe.cairngorm.control.CairngormEvent;

import com.vo.LoginVO;

import flash.events.Event;

public class LoginEvent extends CairngormEvent    {

public static const LOGIN:String = "Login";

public var userVO:LoginVO;

public function LoginEvent(_userVO:LoginVO)  {

super(LOGIN);

this.userVO = _userVO;

}

override public function clone():Event  {

return new LoginEvent(userVO);

}

}

}

Create a new Actionscript class in com/vo. Name this file LoginVO.as

Click Finish

Replace the contents of this file with

package com.vo {

import com.adobe.cairngorm.vo.IValueObject;

[Bindable]    [RemoteClass(alias="LoginVO")]
public class LoginVO implements IValueObject    {
public var username:String;
public var password:String;

public function LoginVO(_username:String,_password:String)        {
this.username = _username;
this.password = _password;

}

}

}

Save and close both LoginEvent.as and LoginVO.as

Create a new Actionscript class file in com/business/commands. Name the file LoginCommand.as

Replace the contents of LoginCommand.as with the following

package com.business.commands {
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.business.delegates.LoginDelegate;
import com.business.events.LoginEvent;
import com.model.ModelLocator;
import mx.controls.Alert;
import mx.rpc.IResponder;

public class LoginCommand implements ICommand, IResponder {
public var __model:ModelLocator = ModelLocator.getInstance();

public function LoginCommand() {  }

public function execute(event:CairngormEvent):void {
var loginEvent:LoginEvent = event as LoginEvent;
var delegate:LoginDelegate = new LoginDelegate( this );
delegate.verifyUser(loginEvent.userVO);
}

public function result(event:Object):void {
if(event.result)  {
if(event.result == "FAILURE_CREDENTIAL_INVALID") {
mx.controls.Alert.show("Sorry! Either your User Name or your password are incorrect. Please try again or you can view the public page");
return;
}
var accessPrivs:Object = event.result;
if(accessPrivs["viewRestrictedUI"]=="allowed") {
// set default privileges
__model.supergranted = false;
__model.admingranted = false;
__model.MAINNAV.addItem({label: "Control Panel"});
__model.workflowState = ModelLocator.CONTROLPANEL;
__model.CURRENT_USER_ROLE = accessPrivs["userRole"];
if(__model.CURRENT_USER_ROLE == "Super") {
__model.supergranted = true;
__model.admingranted = true;
} else if(__model.CURRENT_USER_ROLE == "admin") {
__model.supergranted = false;
__model.admingranted = true;
}

} else {
__model.workflowState = ModelLocator.PUBLIC;
}
// DEBUG MODE
trace("[User Login] - user Role:" +accessPrivs["userRole"]);
trace("[User Login] - viewPublicUI:" +accessPrivs["viewPublicUI"]);
trace("[User Login] - viewRestrictedUI:" +accessPrivs["viewRestrictedUI"]);
trace("[User Login] - createManager:" +accessPrivs["createManager"]);
trace("[User Login] - viewLogs:" +accessPrivs["viewLogs"]);
}
}

public function fault(event:Object):void {
trace("[User Login] - Error Connecting!" + event.toString());
}

}
}

Create a new Actionscript class file in com/business/delegates. Name the file LoginDelegate.as
Replace the contents of Logindelegate.as with the following

package com.business.delegates {
/**

* LoginDelegate

*  Passes the users credentials as a value object tothe service.

* */

public class LoginDelegate {
import mx.rpc.IResponder;
import com.vo.LoginVO;
import com.adobe.cairngorm.business.ServiceLocator;

private var responder : IResponder;
private var service : Object;

/**
* Initilizes the service call

* @param IResponder responder

* @return nothing

* */

public function LoginDelegate( responder:IResponder ) {
this.responder = responder;
this.service = ServiceLocator.getInstance().getRemoteObject("LoginService");
}

/**
* Command that actually calls the service and addsthe responder mapping to the service method call
* @param LoginVO login
* @return void
* */
public function verifyUser(login:LoginVO):void {
var call:Object = service.verifyUser( login );
call.addResponder( responder );
}

}

}

Next we need to create the controller to map the LoginEvent to the LoginCommand.
In com/business/control create a new Actionscript class named Controller.as.
Replace the contents with the following.

package com.business.control {
import com.adobe.cairngorm.control.FrontController;
import com.business.commands.*;
import com.business.events.*;

/**
* Controller
* Mappings of Cairngorm Events to Cairngorm commands
**/
public class Controller extends FrontController{
/**
* Class constructor
* @param none
**/
public function Controller() {this.initialize();
}

/**
* Initializes the mappings
* @param none
* @return void
**/
public function initialize():void {
//ADD COMMANDS
this.addCommand(LoginEvent.LOGIN,LoginCommand);
}
}
}

Now on to the PHP code