je créé un module authentification pas à pas [Fait]

**miya** · 21/04/2009, 12h06

Bonjour,

Je suis entrain de créer la partie administration de mon projet, je développe la partie authentification, et je rencontre des problèmes. J'ouvre ce post qui pourra surement intéressé tout débutant.

Voici le début de mon code :

LoginForm.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
	title="Authentification" borderColor="#000000"
	showCloseButton="true" >
	<mx:Script>
		<![CDATA[
 
			import actionscript.login.*;
 
			public var _user: User;
 
			public function onClick(e:MouseEvent):void{
				_user.login(username.text, password.text);
			}
		]]>
	</mx:Script>
 
    <mx:Form id="loginForm">
        <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:ControlBar id="buttonBar" width="100%" horizontalAlign="center">
            <mx:Button id="submit" label="Connexion" click="onClick(event);"/>
        </mx:ControlBar>
        <mx:FormItem id="remember">
            <mx:CheckBox id="rememberMe" label="Se souvenir de moi"/>
        </mx:FormItem>
    </mx:Form>
 
</mx:TitleWindow>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
package actionscript.login{
 
	import flash.events.EventDispatcher;
	import mx.controls.Alert;
 
	public class User  {
		public function User(){
		}
 
		public function login(name:String, password:String):void{
			Alert.show("test");
		}
 
	}
}

J'ai une erreur sur la méthode onClick, qui n'est pas instancier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
	at components::LoginForm/onClick()[E:\Flex Builder 3\workspace\myWorldMap\src\components\LoginForm.mxml:13]
	at components::LoginForm/__submit_click()[E:\Flex Builder 3\workspace\myWorldMap\src\components\LoginForm.mxml:26]

**ellene** · 21/04/2009, 13h46

Bonjour,
Je crois que c'est ton objet _user qui n'est pas instancié. Il faudrait que tu fasses quelque chose du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
	title="Authentification" borderColor="#000000"
	showCloseButton="true" creationComplete="onCreationComplete()">
 
<mx:Script>
		<![CDATA[
                 public function onCreationComplete():void{
 
                       _user = new User();
                 }
 
                // le reste de ton code

**miya** · 21/04/2009, 15h21

Merci ellene de ta réponse.

Je continue dans le développement du module, et je bloque sur la récupération de la réponse de mon fichier php, voici le code :

loginForm.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
...
	<mx:Script>
		<![CDATA[
 
			import actionscript.login.*;
			import mx.controls.Alert;
 
			public var _user: User;
 
			private function onCreationComplete():void{
				_user = new User();
			}
			public function onClick(e:MouseEvent):void{
				_user.login(username.text, password.text);
			}
		]]>
	</mx:Script>
...

User.as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public class User extends EventDispatcher{
		public function User(){
		}
 
		public function login(name:String, password:String):void{
 
			var chargeur : URLLoader = new URLLoader ();
			//recupere les variables envoye par l url
			var vars : URLVariables = new URLVariables();
			vars.user = name;
			vars.pass = password;
 
			//definit le fichier php
			var url:URLRequest = new URLRequest("php/login.php");
			url.method = URLRequestMethod.POST;
			//envoie des variables au fichier php
			url.data = vars;
 
			chargeur.addEventListener(Event.COMPLETE, endLoading);
			chargeur.load(url);
 
		}
 
		public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
			if( result == "true" ){
				Alert.show("Connection ok");
			}else{
				Alert.show("Erreur");
			}	
		}

login.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<?php
        echo '<response>true<response>' ;
?>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
TypeError: Error #1088: Le marquage du document après l'élément root doit être composé correctement.
	at actionscript.login::User/endLoading()[E:\Flex Builder 3\workspace\myWorldMap\src\actionscript\login\User.as:44]

Je voudrais récupérer le contenu du fichier php, mais XML(e.target.data) ne fonctionne pas

**Jim_Nastiq** · 21/04/2009, 15h41

et avec ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<root><response>true<response></root>' ;

?

**ellene** · 21/04/2009, 15h42

Tu as regardé ce qu'il te renvoie comme valeur ?

**T_bo_** · 21/04/2009, 16h18

Envoyé par Jim_Nastiq

et avec ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<root><response>true<response></root>' ;

?

Avec ou sans <root></root> ce sera toujours <response>true</response>

Le marquage du document après l'élément root doit être composé correctement.

**miya** · 21/04/2009, 16h47

J'ai suivi vos conseils, en mettant la balise <root> et j'ai regardé ce que je récupère

Je pensais que l'erreur venait du XML(e.target.data);, mais apparemment cela fonctionne bien si je met uniquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<?php
        echo "<?xml version=\"1.0\" ?>" ;
        echo "<response>true</response>" 
?>

L'erreur provenait dans le code php, une accolade erroné dans un if, donc en sortie du code il générait pas correctement le code XML.

**miya** · 22/04/2009, 16h06

reBonjour,

Je continue toujours dans le développement du module authentification.

Une fois que j'ai récupéré de la BD mon user, je cherche à envoyer a mon titleWindow que la connection a réussi/ ou non, j'ai procédé ainsi :

LoginForm.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
....
public var _user: User;
 
			private function onCreationComplete():void{
				_user = new User();
			}
			public function onClick(e:MouseEvent):void{
 
				_user.login(username.text, password.text);
 
				//si la connection a reussi
				if( _user.getLogged() == true ){
					Alert.show("oui");
				}else{
					Alert.show("non");
				}
 
			}
...

User.as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
	public class User extends EventDispatcher{
 
		private var isLogged : Boolean;
 
		public function User(){
			isLogged = false;
		}
		public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("resultat ok");
				isLogged = true;
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
		}
 
		public function getLogged():Boolean{
			return isLogged;
		}
               ....

et la sa marche a moitié :s

Je m'explique, si j'execute une premiere fois mon authentification, j'obtiens :
Alert.show("resultat ok");
Alert.show("non");

et uniquement, a partir de la seconde fois, j'obtiens :
Alert.show("resultat ok");
Alert.show("oui");

pour infos la structure c'est :

Home.mxml : appel -> LoginForm.mxml qui initialise -> User.as
et User.as envoie un Boolean a LoginForm.mxml pour lui indiquer la réussite de la connection.

**ellene** · 22/04/2009, 16h13

ReBonjour,

Les appels sont asynchrones. Tu ne peux pas vérifier immédiatement le résultat. Il faut attendre l'appel de endLoading pour savoir si tout s'est bien passé.

**miya** · 22/04/2009, 16h43

D'accord !!

Donc comment faire?
C'est a ce moment qu'intervient les dispatcher? (je n'ai pas encore assimilé correctement ce concept)

ma classe User.as :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public class User extends EventDispatcher{
 
		private var isLogged : Boolean;
 
		public function User(){
			isLogged = false;
		}
 
		public function login(name:String, password:String):void{
 
			var chargeur : URLLoader = new URLLoader ();
			//recupere les variables envoye par l url
			var vars : URLVariables = new URLVariables();
			vars.user = name;
			vars.pass = password;
 
			//definit le fichier php
			var url:URLRequest = new URLRequest("php/login.php");
			url.method = URLRequestMethod.POST;
			//envoie des variables au fichier php
			url.data = vars;
 
			chargeur.addEventListener(Event.COMPLETE, endLoading);
			chargeur.load(url);
 
		}
 
		public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("Connection ok");
				isLogged = true;
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
		}
 
		public function getLogged():Boolean{
			return isLogged;
		}
 
	}

**ellene** · 22/04/2009, 17h31

Alors
1 - Tu crées un évènement LogEvent qui étends flash.events.Event
2 - Tu déclares à User son évènement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
[Event(name="logged", type="myEvents.LogEvent")]
public class User extends EventDispatcher
{
    ...
}

3 - Tu t'abonnes à l'évènement dans creationComplete.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
_user.addEventListener("logged", traitement(event));

4 - Tu dispatch l'évènement une fois l'authentification effectuée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("Connection ok");
				isLogged = true;
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
                        dispatchEvent(new LogEvent());
		}

Voila... c'est à peu près comme ça :p je crois.
Je l'ai écrit un peu à la va vite mais sinon voici la doc officielle :
http://livedocs.adobe.com/flex/3/htm...eevents_3.html

**miya** · 23/04/2009, 14h35

Merci beaucoup ellene, j'ai compris le principe des dispatcher. En faite, une fois que mon action est terminé il faut que je diffuse un évènement.

J'ai repris ton idée, et je me suis meme permis de le couplé avec l'exemple de flex tutorial : http://www.flex-tutorial.fr/2009/01/...nt-evenements/

Ce qui me donne :

LoginForma.mxml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
private function onCreationComplete():void{
				_user = new User();
                              // je m abonne a mon evenement
				_user.addEventListener(UserEvent.SUCCESS_AUTH , closeWindow);
			}

Je créé mon évènement personnalisé :
UserEvent.as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
package actionscript.events{
 
	import flash.events.Event;
 
	public class UserEvent extends Event{
 
		public static const SUCCESS_AUTH:String = "success" ;
 
		public function UserEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
			super(type, bubbles,cancelable);
		}
 
     	public override function clone():Event {
			return new UserEvent(type, bubbles, cancelable);
		}
	}
}

et je le diffuse une fois que la connection est ok
User.as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("Connection ok");
				isLogged = true;
				dispatchEvent(new UserEvent(UserEvent.SUCCESS_AUTH));
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
		}

**miya** · 23/04/2009, 16h06

Je continue le développement de mon module. Une fois que j'ai terminé et fermé la fenetre authentification, je souhaite :
1/ modifier le comportement du bouton qui m'a permis d'ouvrir ma titleWindow, et
2/ ajouté un bouton a mon linkbar :

Home.mxml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<mx:Script>
		<![CDATA[
 
private function onCreationComplete():void{
				_user = new User();
				_user.addEventListener(UserEvent.SUCCESS_AUTH , closeWindow);	
			}
 
			private function closeWindow(e:UserEvent):void{
				PopUpManager.removePopUp(_loginForm);
				linkAdmin.label = "Déconnecter";
				linkAdmin.removeEventListener(MouseEvent.CLICK, showLogin);
				linkAdmin.addEventListener(MouseEvent.CLICK, logout);
			}
                        ....
		]]>
	</mx:Script>
 
<mx:LinkBar width="100%" horizontalAlign="center" styleName="myLinkBar" dataProvider="VSPrincipale"/>
 
		<mx:ViewStack id="VSPrincipale" resizeToContent="true"
			horizontalCenter="center" height="100%" width="100%"
			x="50" y="50" >
 
			<!-- ACCUEIL -->
			<views:Home width="100%" height="100%" label="HOME"/>
			<views:myGoogleMap width="100%" height="100%" label="WORLD MAP"
				paddingRight="50" paddingBottom="5"/>
		</mx:ViewStack>
 
....
 
        <mx:LinkButton id="linkAdmin" label="Administration" click="showLogin(event)" />

Je bloque au 1/ lorsque je veux supprimé et ajouté un nouveau listener :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
ArgumentError: Error #1063: Non-correspondance du nombre d'arguments sur myWorldMap/logout(). 0 prévu(s), 1 détecté(s).

**Jim_Nastiq** · 23/04/2009, 16h13

tout simplement il te manque un argument à ta méthode logout qui est le handler de ton listener du click souris sur ton composant linkAdmin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
private function logout(evt:MouseEvent):void{
...
}

PS: un petit effort de reflexion/recherche aurait solutionné ton problème, l'erreur étant suffisament explicite

**miya** · 23/04/2009, 16h22

Exact autant pour moi, je suis au taff et je développe en mm temps en php, et en parallele je suis sur mon projet perso flex, et je m'y perd vite, mais c'est pas une excuse, mea culpa c'était pourtant évident, merci Jim_Nastiq.

C'était aussi pour introduire la question sur le linkbar, à savoir comment faire pour insérer un nouvelle élément dans mon viewstack.

Je suppose que je devrais ajouter un état additionnel avec un addChild sur mon viewstack, mais je dois l'appeler lorsque la connection est ok

**miya** · 23/04/2009, 16h49

J'ai procédé ainsi :

est ce la bonne marche à suivre ?

Merci d'avance pour vos éclaircissement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
	<mx:Script>
		<![CDATA[
			private function closeWindow(e:UserEvent):void{
				//supprime le popup
				PopUpManager.removePopUp(_loginForm);
				//modifie le label admin
				linkAdmin.label = "Déconnecter";
				//supprime l evt
				linkAdmin.removeEventListener(MouseEvent.CLICK, showLogin);
				//ajout l evt de deconnection
				linkAdmin.addEventListener(MouseEvent.CLICK, logout);
				//j ajoute la page au linkbar
				currentState = 'addOnViewStack';
			}
 
	]]>
	</mx:Script>
 
	<mx:states>
		<mx:State name="addOnViewStack">        
			<mx:AddChild relativeTo="{VSPrincipale}" position="lastChild">
				<views:Admin width="100%" height="100%" label="ADMINISTRATION" />
		    </mx:AddChild>   
		</mx:State>
	</mx:states>

**Jim_Nastiq** · 23/04/2009, 17h41

si cela fonctionne comme tu le souhaite c'est à priori pas mauvais

sinon sur le code lui même, pourquoi utilise tu un state pour ajouter ton élément?

**miya** · 23/04/2009, 18h45

Car je ne sais pas s'il y a d'autre possibilité. Je me dis que pour une personnalisation de gestion droits, l'utilisation de nombreux <states> deviendrait vite fastidieux.

Une méthode est-il préconisé pour la personnalisation des vues en fonction des droits de l'utilisateur ?

**Jim_Nastiq** · 24/04/2009, 10h17

ok les States sont en effet une bonne solution dans ce cas d'utilisation.
Tu créé toutes tes différentes vues qui sont autant de states et ensuite il ne te suffit que de switcher entre ces states.

**miya** · 24/04/2009, 11h09

oki Merci Jim, et à ceux qui ont participé à la discussion

je créé un module authentification pas à pas [Fait]

Flex

Discussions similaires

Partager

Partager