Adobe AIR has a quick and safe way to store encrypted user data when building applications. Data such as login and password can be persisted in the application using the EncryptedLocalStore available for AIR applications.
To demonstrate this, I wrote a quick demo application that will store username and password after users login. When the application is launched again, the same username and password will be retrieved from the EncryptedLocalStore and propagate the login and password text boxes. User’s also have the option to reset the data and store a new username and password, removing the stored data from the EcryptedLocalStore.
This can be handy when you want your application to do auto-login, using the existing stored information from the user’s previous session, and of course, the stored data is encrypted.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="410" height="260" creationComplete="initComponent()"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function initComponent():void { var password:ByteArray = EncryptedLocalStore.getItem("password"); var username:ByteArray = EncryptedLocalStore.getItem("username"); try{ if(password.length && username.length){ passwordInput.text = password.readUTFBytes(password.length); nameInput.text = username.readUTFBytes(username.length); } } catch (e:Error){Alert.show(e.message);} } private function onLogin(event:Event):void { if(nameInput.text == "" || passwordInput.text == ""){ Alert.show("Please enter username and password"); return; } try { EncryptedLocalStore.reset(); var bytes:ByteArray = new ByteArray(); bytes.writeUTFBytes(nameInput.text); EncryptedLocalStore.setItem("username", bytes); bytes = new ByteArray(); bytes.writeUTFBytes(passwordInput.text); EncryptedLocalStore.setItem("password", bytes); Alert.show("Writing username and password to local store."); } catch(e:Error){Alert.show("Error writing store: " + e.message)} } private function onReset(event:Event):void { passwordInput.text = ""; nameInput.text = ""; nameInput.setFocus(); EncryptedLocalStore.reset(); } private function onKeyDown(event:KeyboardEvent):void { if ( event.charCode == Keyboard.ENTER) { onLogin(null); } } ]]> </mx:Script> <mx:Canvas width="380" height="240" horizontalCenter="0" verticalCenter="0"> <mx:VBox verticalAlign="middle" horizontalAlign="left" verticalGap="0" horizontalCenter="0" bottom="142"> <mx:Label id="userText" text="username" creationComplete="nameInput.setFocus()"/> <mx:TextInput id="nameInput" creationComplete="{nameInput.setFocus()}" keyDown="onKeyDown(event)"/> </mx:VBox> <mx:VBox verticalAlign="middle" horizontalAlign="left" verticalGap="0" horizontalCenter="0" bottom="95"> <mx:Label text="password" /> <mx:TextInput id="passwordInput" displayAsPassword="true" keyDown="onKeyDown(event)"/> </mx:VBox> <mx:ControlBar bottom="16" width="161" height="35" horizontalCenter="0"> <mx:Button id="submitButton" label="submit" click="onLogin(event)" textAlign="center" /> <mx:Button id="resetButton" label="reset" click="onReset(event)" textAlign="center"/> </mx:ControlBar> </mx:Canvas> </mx:WindowedApplication> |
To use the example code, just create a new AIR application in Flex Builder and paste the code into your main MXML file.
-Mister
5 Comments
its really good example,
could u tell where exactlly the uername and password files are stored on local pc ?
Hmmmm. That looks a lot like the code I wrote while at AOL.
Lar, you mean because, like your code, it had to be fixed to work? Haha. Actually this code is similar to login code that was implemented for the desktop application in the last public release but also borrows from other examples on the web and modified to make a practical login example. Since we often borrow from other examples, it seems fair to give back to the community. Also, we never mention the evil empire on this blog, nobody wants that kind of bad luck!!
Thanks for your login tutorial in flex, nice.
Sure man, glad it helped!