FLEX{er}

In this post we will implement a login process with remember password functionality. In AS3 and also in AS2 we can use a SharedObject to store data on the users browser. Shared objects are similar to the all known browser cookies but are managed by the flash player. Shared objects can store data also remotely on the server and using this feature some complex communication models can be implemented. But we will focus on our login with remember password (see here the working application).

For this we need a server-side and I used PHP because my preferred server-side language is PHP. The server-side is very simple and contains one function that will check the user name and the password with some hard coded constants. Here is the code inside login.php:

// hard coded username and password
define("USER","flexer");
define("PASS","fx{r}");
// login function
function login($u,$p) {
    // checking for valid username and password
    if (strlen($u)>0 && strlen($p)>0 && $u == USER && $p == PASS) {
        // login was successful
        $loginOk = 1;
        $loginErr = "";
    } else {
        // login failed
        $loginOk = 0;
        $loginErr = "Invalid user and/or password!";
    }
    // returning an XML with data
    return "<login><loginOk>".$loginOk."</loginOk><loginErr>".$loginErr."</loginErr></login>";
}
// we send the xml header
header("Content-type: text/xml");
// we print resutl to output
echo login($_REQUEST["username"],$_REQUEST["password"]);

What this server-side script file does can be easily understand from the comments so we will move forward to client-side.

For the remember password functionality we use a SharedObject which will be saved in the local machine. This file can be encoded (we didn't encode it) and a location to save in can be specified. More about encoding here and about setting a location here.

A SharedObject is called like this

var _remeberSO:SharedObject = SharedObject.getLocal("loginData");

and what it happens:

if the shared object named "loginData" doesn't exists a new one with empty data property is created
if the shared object named "loginData" exists the previously saved info is retrieved and the data property is filled in with that info

The data property is set like this:

_remeberSO.data.username = username.text;
_remeberSO.data.password = password.text;

and is get in the same manner.

To save/write the object we use

_remeberSO.flush();

To clear

_remeberSO.clear();

In this example we use also a ViewStack but to make everything more clear bellow you can study the whole flex code and I hope you'll understand very well what is happening from the comments.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="253" height="307"
    creationComplete="init()">
    <mx:HTTPService id="doLoginService" method="POST"
        url="http://www.flexer.info/wp-content/uploads/2008/05/login.php"
        resultFormat="e4x" result="handleDoLoginResult(event)"
        showBusyCursor="true"/>
    <mx:ViewStack x="10" y="10" width="233" height="287" id="myStack"
        change="handleStackChange(event)">
        <mx:Canvas id="logIn" width="100%" height="284">
            <mx:Label x="0" y="77" text="Username:"/>
            <mx:Label x="0" y="103" text="Password:"/>
            <mx:TextInput x="75" y="75" id="username" width="158"/>
            <mx:TextInput x="75" y="101" id="password" width="158"
                displayAsPassword="true"/>
            <mx:CheckBox x="75" y="131" label="Remeber password"
                id="rememberStack1"/>
            <mx:Button x="75" y="157" label="Login"
                click="handleDoLoginClick(event)"/>
            <mx:Text x="0" y="0" width="233" height="67">
                <mx:htmlText>
<![CDATA[Use the following login data.
 
Username: <b>flexer</b>
Password: <b>fx{r}</b>]]>
                </mx:htmlText>
            </mx:Text>
        </mx:Canvas>
        <mx:Canvas id="loggedIn" width="100%" height="285">
            <mx:Text x="0" y="0" width="233" height="219">
                <mx:htmlText>
<![CDATA[<b>You are logged in!</b> You can log out
and specify if you prefer to have the
password remembered next time. 
 
To see that the username and password
are remembered please use the follwing
scenarios:
 
1) Refresh the whole browser page.
2) Logout and the refresh the whole
page.
3) Uncheck "Remember password" and
refresh the page.
4) Uncheck "Remember password",
logout and refresh.]]>
                </mx:htmlText>
            </mx:Text>
            <mx:CheckBox x="0" y="227" label="Remember password"
                id="rememberStack2"/>
            <mx:Button x="0" y="253" label="Logout"
                click="handleLogout(event)"/>
        </mx:Canvas>
    </mx:ViewStack>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
 
            // our shared object that will save
            // the username and password localy
            private var _remeberSO:SharedObject;
 
            // initialization
            private function init():void
            {
                // getting data from shared object
                // if the object named "loginData" and
                // saved localy doesn't exists it is
                // created without data
                // if it exists the data is recovered and
                // put inside "data" property
                _remeberSO = SharedObject.getLocal("loginData");
                // if we have username and password saved
                // we do auto-login
                if (_remeberSO.data.username != undefined &&
                    _remeberSO.data.password != undefined)
                {
                    rememberStack1.selected = true;
                    username.text = _remeberSO.data.username;
                    password.text = _remeberSO.data.password;
                    // calling the login service to check
                    // the username and password
                    doLoginService.send(_remeberSO.data);
                }
            }
 
            // called when the "Login" button is clicked
            private function handleDoLoginClick(event:MouseEvent):void
            {
                var sendData:Object = { username:username.text,
                                        password:password.text };
                // calling the login service
                doLoginService.send(sendData);
            }
 
            // called by the "HTTP Service" when successful
            private function handleDoLoginResult(event:ResultEvent):void
            {
                // get the status of login process
                // loginOk = 0 - means invalid username/password
                // loginOk = 1 - means login successful
                // loginErr = "" - when loginOk = 1
                // loginErr = "error" - when loginOk = 0
                var loginOk:uint = int(event.result.loginOk);
                var loginErr:String = event.result.loginErr.toString();
                if (!loginOk) {
                    // if the login failed we alert
                    Alert.show(loginErr);
                } else {
                    if (rememberStack1.selected) {
                        // if we selected remember password
                        // we save the login data in the shared object
                        _remeberSO.data.username = username.text;
                        _remeberSO.data.password = password.text;
                        // saving/writing
                        _remeberSO.flush();
                    } else {
                        // otherwise we clear the shared object
                        _remeberSO.clear();
                    }
                    // move to next stack
                    myStack.selectedIndex++;
                }
            }
 
            // called when the "Logout" button is clicked
            private function handleLogout(event:MouseEvent):void
            {
                if (!rememberStack2.selected) {
                    // if have NOT selected remember password
                    // we clear the shared object
                    _remeberSO.clear();
                } else {
                    // if we selected remember password
                    // we save data as we may login
                    // without checking the checkbox in the
                    // first screen but we want to select it
                    // after login
                    _remeberSO.data.username = username.text;
                    _remeberSO.data.password = password.text;
                    // saving/writing
                    _remeberSO.flush();
                }
                myStack.selectedIndex--;
            }
 
            private function handleStackChange(event:Event):void
            {
                // we are sychronizing the two checkboxes
                if (myStack.selectedChild == logIn)
                {
                    // we got back to first screen - login
                    rememberStack1.selected = rememberStack2.selected;
                } else {
                    // we got to the second screen
                    rememberStack2.selected = rememberStack1.selected;
                }
            }
        ]]>
    </mx:Script>
</mx:Application>