Authentication Example 2.0 – Flex SDK 4.1, Zend 1.10.7, RobotLegs and AS3 Signals – Flex Side

If you haven’t downloaded the required files for this tutorial yet, you may want to view part 1 of this series before continuing.

I’m going to cover setting up Flex Builder 3 to use SDK 4.1.
You may want to take a look at Sean Smith’s tutorial about setting up Flex SDK 4 with the Eclipse IDE.

I’m not going explain everything in detail but I will provide the example code on github so you can look through it.

Setting up the Flex project:

File->new->Flex Project

  1. Project name: AccessControl

  2. Project Location: Up to you

  3. Application type: Web application

  4. Server Technology: PHP

  5. Click next

  6. Web Root: path of the AccessControl-Flex4/public folder

  7. Validate Configuration

  8. Click Next

  9. Accept the defaults or do what I do and change Main application file to main.mxml, just my personal preference.

  10. Click Finish

    We could have setup the library paths too but my personal preference is to copy the required libraries into my libs folder, why, no particular reason, it’s just what I like to do.

    Now unzip the RobotLegs, AS3 Signals, and AS3 Signals Command packages and copy their swcs into the libs folder.

    Unzip the Flex SDK to somewhere easy to remember on your hard drive.

    I put all the SDKS into a dedicated directory, it just makes things easier.

    Flex 3′s default namespace is mx we will change that in a minute but first let’s tell Flex 3 where to find the Flex 4 SDK.

    1. In the main menu click Project->Properties

    2. Navigate to Flex Compiler

    3. Click the link for Configure Flex SDK’s

    4. Click Add

    5. Locate where you unzipped the Flex 4 SDK, you want to select the main directory of the SDK.

    6. Make sure the Flex 4 SDK is checked in the Installed Flex SDK’s screen.

    7. Click Apply

    8. Click OK

    9. In the Flex compiler screen, for the Additional compiler arguments copy and paste the following.
      -locale en_US -allow-source-path-overlap=true  -keep-as3-metadata+=Inject
      -keep-as3-metadata+=PostConstruct

      For an explanation of the -keep-as3-metadata+=Inject 
      -keep-as3-metadata+=PostConstruct compiler options


    10. For Require Flash Player version: 10.0.0

    11. Click Run/Debug Settings

    12. Click New

    13. Type of configuration – Flex Application

    14. Name: AccessControl_configuration or anything you want

    15. url or path to launch, OK this depends on how you’ve setup your webserver. For this tutorial I’m not using a virtual directory so I have to map these url’s to the AccessControl-Flex 4/public directory on the webserver, you’ll need modify to your settings.

    16. Unclick the Use defaults checkbox.

    17. http://localhost:10088/AccessControl-Flex4/public/main.html

      for Debug, Run and Profile.

    18. Click Apply

    19. Click OK

    20. Click OK

      Please take a look and download the finished code located on github

      Hope this helps

      - Keith

Posted in AS3 Signals, Flex 4 SDK, PHP, Robotlegs, Zend | Tagged , , , | Leave a comment

Authentication Example 2.0 – Flex SDK 4.1, Zend 1.10.7, RobotLegs and AS3 Signals – Server Side

My how time fly’s by, it’s been awhile since I’ve posted a tutorial, not because I didn’t want to, I just haven’t had the time.

Whew! this past year was full of some major changes, Flex was changed to Flash Builder,  Zend Framework just had several major upgrades, PHP 5.3 came out, Cairngorm is no longer a framework, it’s now an Architecture, they really should change the name. To avoid confusion, not in this article but for the future, I think I’m going to refer to the Cairngorm framework as Cairngorm1 and Cairngorm Architecture as Cairngorm 2 from now on. Or maybe just C1 and C2, I haven’t decided until the Adobe team changes it to something else. Sorry I digress.

This tutorial will show you one way you can take advantage of Free Flex SDK 4.1 and Zend Framework.

This tutorial will be an update to

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

And

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

Please keep in mind I won’t be explaining every single detail, only the necessary information for getting Flex to talk to the Zend Framework. So if you need more information on the technologies being used please see the respective documentation.

I’ll try to keep my references about directory structure neutral for both MAC and Windows but where needed I’ll try to point out the difference.

This time around I’m going to use the RobotLegs framework and AS3 Signals instead of Cairngorm. Why not Cairngorm? , nothing against Cairngorm. And Yes! I could’ve just used the Flex framework by itself  but I wanted to learn RobotLegs and AS3 Signals a little better and this was the perfect opportunity.

FlashBuilder allows you to setup the basic server connections when you create your project but I can’t afford the new FlashBuilder IDE right now so I will be using my Flex 3 IDE and the free Flex 4.1 SDK from Adobe for this tutorial. That means we have to do the setup ourselves.

Zend Server CE now ships with PHP 5.3 and MySQL 5.1, I’m not sure about the latest MAMP or XAMPP.

I switched from MAMP to Zend Server CE not too long after I wrote the tutorials being updated in this series, so all the settings going forward refer to Zend Server CE, you will need to adjust to your environment.

In my opinion the LAMP stack is the fastest and easiest way to get started. LAMP stacks like Zend Server CE, MAMP, or XAMPP, contain everything you need to get started quickly, i.e. PHP and MySQL.

Ok! Requirements

  1. 1.10.7 or Latest build of Zend Framework

  2. Web Server – I use Zend Server CE

  3. PHP 5.3 or the latest version.

  4. MySQL – 5.1 or latest version, If you are not using one of LAMP stacks.

  5. Shaun Smith’ latest version of RobotLegs framework.

  6. Robert Penner’ AS3 Signals

  7. Joel Hooks’ AS3 Signals Command map utility

  8. Choose one:

    1. Adobe Flex SDK

    2. Open Source Flex SDK and Adobe Add-ons

    3. FlashBuilder 4

Unfortunately at the time of this writing, Zend Server CE does not have auto updates so you may have to upgrade the framework yourself. Piece of cake!

You can follow along or you can download all the source code from github

Server setup – Upgrade the Zend Framework

If you are using Zend Sever CE:
On the command line navigate to the ZendFramework directory, replace all of the contents of this dir with the contents of the latest Zend Framework package you just downloaded. Restart the web server and That’s it!

Setup the Project dir:

Assuming the latest Zend Framework is installed and your path variables are setup correctly, let’s create our basic folder structure on the web server using the new Zend command line tool.

MAC’s – open terminal, Windows – start->run->cmd


Navigate to your web root dir and use zf.sh if you have a MAC, or zf.bat for Windows –
zf.sh create project AccessControl-Flex4

If your PATH variable is not setup you will need to provide the complete path to the the appropriate zf script.

To make sure everything went well, if you click http://localhost:10088/AccessControl-Flex4/public/ you should see the following:

You may need to change the port number depending on your setup.

NOTE: You can also setup a virtual host on your system if you want but to keep things simple I won’t go into that in this tutorial. 

Just because I’m lazy, I like to create a symbolic link to my projects under my local Sites folder, it just makes things a little easier for me, but you can do whatever is best for you.

Configure your configuration file:

Navigate to the AccessControl-Flex4/application/configs directory and open the application.ini file in your favorite editor.

In the default ini file you have something like this with extra settings of course,
but the basic skeleton is :

[production]

[staging : production]

[testing : production]

[development : production]

Let’s put some meat on them thar bones, I know that was cheesy.

under [production] add:

phpSettings.date.timezone = “America/Los_Angeles”

; You need to put your timezone here

salt = “qZPJeZbQv])7fnKxS’U0\2V^Eg.|})+obZ:H6|y.[#EBqo;Evp"

;salt can be anything really just make it virtually impossible to guess.

resources.db.adapter = "MYSQLI"

resources.db.params.dbname = "AccessControl-Flex4"

resources.db.params.username = "root"

resources.db.params.password =

resources.db.params.unix_socket = "/usr/local/zend/mysql/tmp/mysql.sock"

;you will need to tweak the unix_socket setting depending on your setup, this may not even be applicable to your environment.

under [testing : production] add

resources.db.adapter = “MYSQLI”

resources.db.params.dbname = “AccessControl-Flex4-test”

and finally under [development : production] add

resources.db.adapter = “MYSQLI”

resources.db.params.dbname = “AccessControl-Flex4-dev”

resources.db.params.username = “root”

resources.db.params.password =

You should now have an application.ini file that looks similar to

[production]

phpSettings.display_startup_errors = 0

phpSettings.display_errors = 0

phpSettings.date.timezone = “America/Los_Angeles”

; You need to put your timezone here

salt = “qZPJeZbQv])7fnKxS’U0\2V^Eg.|})+obZ:H6|y.[#EBqo;Evp"

;salt can be anything really just make it virtually impossible to guess.

includePaths.library = APPLICATION_PATH "/../library"

bootstrap.path = APPLICATION_PATH "/Bootstrap.php"

bootstrap.class = "Bootstrap"

appnamespace = "Application"

resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"

resources.frontController.params.displayExceptions = 0

resources.db.adapter = "MYSQLI"

resources.db.params.dbname = "AccessControl-Flex4"

resources.db.params.username = "root"

resources.db.params.password =

resources.db.params.unix_socket = "/usr/local/zend/mysql/tmp/mysql.sock"

;you will need to tweak the unix_socket setting depending on your setup, this may not even be applicable to your environment.

[staging : production]

[testing : production]

phpSettings.display_startup_errors = 1

phpSettings.display_errors = 1

resources.db.adapter = “MYSQLI”

resources.db.params.dbname = “AccessControl-Flex4-test”

[development : production]

phpSettings.display_startup_errors = 1

phpSettings.display_errors = 1

resources.frontController.params.displayExceptions = 1

resources.db.adapter = “MYSQLI”

resources.db.params.dbname = “AccessControl-Flex4-dev”

resources.db.params.username = “root”

resources.db.params.password =

Now, in production you will want to change the database username and password to something more secure.

If you will recall in Build a better Login with Adobe Flex, Zend_Amf, Zend_Auth, and Zend_Acl – On The Flex Side we created a connectionHelper.php file to hold all of our connection parameters we don’t need this file anymore since we put all of those settings into our application.ini file.

Setup Services

  1. Navigate to AccessControl-Flex4/application
    I like to create my directories in reverse domain format:
    services/com/{domain}/{project name}/
    ex. services/com/keithcraigo/AccessControl-Flex4/

  2. Navigate to services/com/keithcraigo/AccessControl-Flex4/
    a. Copy the LoginManager.php file from my AccessControlExampleSessions Demo into this directory.
    b. Rename LoginManager.php to Authenticate.php – we will need to modify this file shortly
    c. Create directories models/DbTable
    d. In DbTable folder create another directory called AccessControl-Flex4
    e. In the same directory as models create a folder called vo
    f. In vo create AuthVO.php
    copy and paste this code into AuthVO.php

    class AuthVO {

    public $userID=”;

    public $password=”;

    }
    f. Save and close AuthVO.php

Your folder structure should now be something similar to this

Several things to take note of in this file as opposed to the LoginManager.php,

  1. We replace the require statements:

    require_once ‘LoginVO.php’;
    require_once ‘AccessPrivsVO.php’;
    require_once ‘ConnectionHelper.php’;
    require_once ‘Zend/Auth.php’;
    require_once ‘Zend/Acl.php’;
    require_once ‘Zend/Db.php’;
    require_once ‘Zend/Session.php’;

    with

    require ‘vo/AuthVO.php’;
    require ‘models/DbTable/Admin.php’;










  2. We change the way we setup dbAdapter, we no longer need the ConnectionHelper.php file, all of our settings are now in a more secure place, in the application.ini file and these settings are made easily accessible via the Zend _Registry.










  3. We change the:
    $acl->add(new Zend_Acl_Resource(‘viewLogs’));
    $userRolePrivs->viewLogs = $acl->isAllowed($userRole, null, ‘logReports’) ? “allowed” : “denied”;
    To










    $acl->add(new Zend_Acl_Resource(‘logReports’));
    $userRolePrivs->logReports = $acl->isAllowed($userRole, null, ‘logReports’) ? “allowed” : “denied”;

    nothing major here just a simple permissions change.










  4. Finally we add two new classes, AccessPrivsVO and UserRole,  to the bottom of Authenticate.php, the files are just value objects to be passed back to our Flex application









Setup the public directory files, gateway.php and amf_config.ini

Navigate to AccessControl-Flex4/public directory.

Create two new files gateway.php and amf_config.ini open these files in your favorite editor.

gateway.php – this is the file your Flex project needs to call, we’ll set Flex up shortly.

    Let’s setup the amf_config.ini

I always want to give attribution, I learned about amf_config from an article by Kevin Hoyt, sorry I would provide a link but I can’t seem to find the article now.

>If you haven’t already done so, open amf_config.ini in your favorite editor and paste the following:

[zend]

;set the zend installation directory

zend_path = ../library/

[zendamf]

amf.production = false

amf.directories[] = ../application/services/

amf.directories[] = ../application/services/com/keithcraigo/AccessControl-Flex4/

amf.directories[] = ../application/services/com/keithcraigo/AccessControl-Flex4/models/DbTable/

; initialize database

dbAdapter = “MYSQLI”

;LOCAL DEVELOPMENT

host = localhost

username = root

password =

dbname = “AccessControl-Flex4″

salt = “qZPJeZbQv])7fnKxS’U0\2V^Eg.|})+obZ:H6|y.[#EBqo;Evp"

;salt can be anything really just make it virtually impossible to guess.

api_key = "d5f75f4ddc0a5cead58b4269ca22b217b71ed893"

;api_key can be anything really just make it virtually impossible to guess.

db_date_format = "YYYY-MM-ddTHH:mm:ss"

of course substituting your structure for the amf.directories paths.

    Now  copy and paste the following into gateway.php

ini_set("display_errors", 1);

error_reporting(E_ALL | E_STRICT);

$dir = dirname(__FILE__);

$webroot = $_SERVER['DOCUMENT_ROOT'];

$configfile = “$dir/amf_config.ini”;

date_default_timezone_set(‘America/Los_Angeles’);

//default zend install directory

$zenddir = $_SERVER['DOCUMENT_ROOT']. ‘../library/’;

>//Load ini file and locate zend directory

if(file_exists($configfile)) {

$arr=parse_ini_file($configfile,true);

if(isset($arr['zend']['zend_path'])){

$zenddir = $arr['zend']['zend_path'];

}

}

// Setup include path

//add zend directory to include path

set_include_path(get_include_path().PATH_SEPARATOR.$zenddir);

// Initialize Zend Framework loader

require_once ‘Zend/Loader/Autoloader.php’;

Zend_Loader_Autoloader::getInstance();

>Zend_Session::start();

// Load configuration

$default_config = new Zend_Config(array(“production” => false), true);

$default_config->merge(new Zend_Config_Ini($configfile, ‘zendamf’));

$default_config->setReadOnly();

$amf = $default_config->amf;

// Setup database connection params

$dbAdapter = $default_config->dbAdapter;

$host = $default_config->host;

;$port = $default_config->port;

$username = $default_config->username;

$password = $default_config->password;

$dbname = $default_config->dbname;

$salt = $default_config->salt;

$api_key = $default_config->api_key;

// Store configuration in the registry

Zend_Registry::set(“amf-config”, $amf);

Zend_Registry::set(‘dbAdapter’, $dbAdapter);

Zend_Registry::set(‘dbname’, $dbname);

Zend_Registry::set(‘username’, $username);

Zend_Registry::set(‘password’, $password);

Zend_Registry::set(‘host’, $host);

;Zend_Registry::set(‘port’, $port);

Zend_Registry::set(‘salt’, $salt);

Zend_Registry::set(‘api_key’, $api_key);

// Initialize AMF Server

$server = new Zend_Amf_Server();

$server->setProduction($amf->production);

if(isset($amf->directories)) {

$dirs = $amf->directories->toArray();

foreach($dirs as $dir) {

$server->addDirectory($dir);

}

}

// Initialize introspector for non-production

if(!$amf->production) {

$server->setClass(‘Zend_Amf_Adobe_Introspector’, ”, array(“config” => $default_config,      ”server” => $server));

$server->setClassMap(‘UserVO’, ‘UserVO’);

}

// Handle request

echo $server->handle();

You’ll notice several things about the code above;

  1. - this is similar to what’s in the default index.php file created by zend command line tool, true they are similar but one key difference gateway.php is used exclusively by our Flex application, it gives us the flexibility to extend our application beyond the Flash player. We can now develop additional sections such as administration, info pages, help sections etc… , using just the Zend Framework, not everything has to be built using Flex nor should it be.

  2. - date_default_timezone_set(‘America/Los_Angeles’); didn’t we set this in the application.ini, yes we did but I’ve run into errors being logged that the application has to set this, why I’m not sure I just know that with this set in both files the error goes away.

  3. - we’re storing our dbAdapter info in the Zend Registry, this will come in very handy when get to setting up our services. We don’t need to setup a db helper file like I did in Build a better Login with Adobe Flex, Zend_Amf, Zend_Auth, and Zend_Acl – On The PHP Side

  1. - there’s an api_key setting, we can require that our services can only be called from our Flex application if we want.

  2. We’re initializing the AMF Server on an as needed basis, we only want to do this when we call our services from our Flex application not when someone just browses to the home page.

Now If you point your browser to http://localhost:10088/AccessControl-Flex4/public/gateway.php

Either in your browser window or as a download you should see Zend Amf Endpoint

this means it’s setup correctly on the server. You may be wondering ,what about Bootstrap.php file,

we won’t need to use this file in this tutorial but you could use this file to setup your application log files, debugging with FireFox, html headers etc… maybe another tutorial.

Setup the Database:

Using your favorite Admin tool, mine is phpMyAdmin, create a new database called AccessControl-Flex4.

Create the tables using the following SQL

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 (username, password, realfirstName, reallastName, role) VALUES (‘admin’, ‘a72d11da902a6a63c9702109c9dd3f96’, ‘admin’, ‘admin’, ‘admin’);

INSERT INTO admin (username, password, realfirstName, reallastName, role) VALUES (‘manager’, ‘a72d11da902a6a63c9702109c9dd3f96’, ‘manager’, ‘manager’, ‘manager’);

INSERT INTO admin (username, password, realfirstName, reallastName, role) VALUES (‘Super’, ‘a72d11da902a6a63c9702109c9dd3f96’, ‘Super’, ‘Super’, ‘Super’);

Please NOTE:

$password = ‘password’

$salt = “qZPJeZbQv])7fnKxS’U0\2V^Eg.|})+obZ:H6|y.[#EBqo;Evp”

a72d11da902a6a63c9702109c9dd3f96 is the result of MD5($password.$salt)

OK! now on to Part 2 – Setup our Flex Project

Posted in AS3 Signals, Flex, Flex 4 SDK, PHP, Robotlegs, Useful Links, Zend | 2 Comments