Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Shared Object – Exemple d'utilisation des SharedObject (authentification)

Dans ce tutorial Flex, nous allons construire une application simple qui utilise les SharedObject de manière pratique. Cet exemple affiche une formulaire de login (authentification login/mot de passe). Cependant, l'utilisateur a aussi la possibilité de fixer une préférence pour que l'application se souvienne de lui.

Cette application utilise un composant MXML qui affiche une fenêtre de login. Elle utilise aussi une classe Singleton User qui permet à l'utilisateur de s'identifier. Notez que dans cet exemple, l'application utilise des valeurs codées en dur pour l'authentification. Dans une vraie application, l'authentification se ferait grâce à des données contenues dans une base de données, LDAP, ou d'autres.

Voici la classe User:

package{

	import flash.events.EventDispatcher;
	import flash.events.Event;

	public class User extends EventDispatcher{

		// l'instance
		private static var _instance:User;

		// Déclaration de deux constantes pour l'utilisation des noms d'événements
		public static const AUTHENTICATE_SUCCESS:String = "success";
		public static const AUTHENTICATE_FAIL:String = "fail";	

		public function User(){}

		// Méthode d'accèsau singleton
		public static function getInstance():User{
			if(_instance == null){
				_instance = new User();
			}
			return _instance;
		}

		// cette méthode teste si le nom d'utilisateur et le mot de passe
		// sont valides. S'ils le sont, elle envoie un événement AUTHENTICATE_SUCCESS
		// Sinon, elle envoie un événement AUTHENTICATE_FAIL
		public function authenticate(username:String, password:String):void{
			if (username == "user" && password == "pass"){
				dispatchEvent(new Event(AUTHENTICATE_SUCCESS));
			}else{
				dispatchEvent(new Event(AUTHENTICATE_FAIL));
			}
		}

	}
}

Le composant LogInForm.mxml

 <?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import User;

			// fonction appelée après un clic sur le bouton
			private function onClick(event:MouseEvent):void{
				//si l'utilisateur a coché la checkBox, alors on sauvegarde le nom d'utilisateur
				if(rememberMe.selected){
					var sharedObject:SharedObject = SharedObject.getLocal("userData");
					sharedObject.data.user = {username: username.text, password: password.text};
					sharedObject.flush();
				}
				// authetifie l'utilisateur
				User.getInstance().authenticate(username.text, password.text);
			}
		]]>
	</mx:Script>

	<mx:Form>
		<mx:FormHeading label="S'enregistrer (utiliser user/pass)"/>
		<mx:FormItem label="Nom d'utilisateur">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem label="Mot de passe">
			<mx:TextInput id="password" displayAsPassword="true"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="submit" label="Valider" click="onClick(event);"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:CheckBox id="rememberMe" label="Se souvenir de moi"/>
		</mx:FormItem>
	</mx:Form>
</mx:TitleWindow>

L'application principale de votre projet flex:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	horizontalAlign="center" verticalAlign="middle"
	initialize="initializeHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.containers.Form;
			import mx.managers.PopUpManager;
			import User;

			private var _logInForm:LogInForm;

			private function initializeHandler(event:Event):void{
				//récupère le sharedObject utilisé pour stocker la data
				var sharedObject:SharedObject = SharedObject.getLocal("userData");

				// Ecoute les évenements de cette instance d'User
				User.getInstance().addEventListener(User.AUTHENTICATE_SUCCESS,removeLogInForm);
				User.getInstance().addEventListener(User.AUTHENTICATE_FAIL,displayLogInForm);	

				// si le SOL ne contient aucune data utilisateur, alors on affiche la fenetre de login.
				// Sinon on authentifie l'utilisateur avec les infos contenues dans le SOL
				if (sharedObject.data.user == null){
					displayLogInForm();
				} else {
					User.getInstance().authenticate(sharedObject.data.user.username, sharedObject.data.user.password);
				}
			}

			private function displayLogInForm(event:Event = null):void{
				if(_logInForm == null){
					_logInForm = new LogInForm();
					PopUpManager.addPopUp(_logInForm, this, true);
					PopUpManager.centerPopUp(_logInForm);
				}
			}

			private function removeLogInForm(event:Event = null):void{
				if(_logInForm != null){
					PopUpManager.removePopUp(_logInForm);
					_logInForm = null;
				}
			}
		]]>
	</mx:Script>

	<mx:TextArea text="Application"/>

</mx:Application>

Cette application illustre l'utilisation des SharedObject de manière pratique. Pour tester cet exemple, utilisez le nom d'utilisateur "user" et le mot de passe "pass"

Flex Source Code Download: Télécharger le code source complet de l'application