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>
The working application is bellow and you can try the following scenarios to test the login process:
- Refresh the whole browser page
- Logout and the refresh the whole page
- Uncheck “Remember password” and refresh the page
- Uncheck “Remember password”, logout and refresh
Hope you got the whole idea and now you can use shared object as you like in you projects.
Here is the documentation about shared objects very nice and clean (by Adobe, on Livedocs).
Popularity: 87%
| ||
| ||
|
Tags: ActionScript, Events, login, MXML, sharedobject
This post was written by Andrei Ionescu
Views: 1788
Hi, Can u tell me how to change shared object pathe from “C:\Documents and Settings\Harish\Application Data\Macromedia\Flash Player\#SharedObjects\D8F43EBD\localhost\Sample\Sample.swf” to My “D:\Sample” folder.
Plse help..
Thank you
No since the saving/loading is handled by the player itself.
More Info
Although getLocal static method has localPath parameter there you can specify the availability (and avoid some conflicts) of a shared object to other swf applications in the same domain.
SharedObject has also getRemote method that allow you to save share objects remotely on another server. This may be helpful to you but you need special server software like LiveCycle Data Services (old Flash Media Server), Red5, etc.