Partage

Mot de passe AJAX comment faire ?

Sujet résolu

21 janvier 2009 à 18:36:19

Yop all,
J'ai entendu dire que pour interagir avec la BDD via JS il fallait passer par AJAX, quelqu'un a de bons tutos ou un script que je pourrais décrypter afin de comprendre son fonctionnement svp ?

J'aimerais en fait que :

Si le mot de passe entré dans le champs d'id password, récupérable par getElementById('password'), est égal au mot de passe de la db 'inscription' champs 'mot_de_passe' (crypté en sha1) alors action x sinon y.

Merci d'avance =)

xavierm02

21 janvier 2009 à 18:40:00

t'as rien compris à AJAX...
AJAX, ça appele une page en lui envoyant des varialbe(ou pas) et ça récupère ce qui aurais du être affiché...
donc en gros si tu vérifie un mdp en envoyant ne variable (en GET ou en POST) à une page et que tu récupère le mot de passe par AJAX pour vérifier, bah si le gas va directement sur la page appelée et qu'il envoit la variable en POST/GET(il saura faire vu que c'est dans ton javascript), et bah il aura qu'a rentrer un pseudo pour obtenir le mdp... génial non?
bref inscription=rechargement de la page obligatoire
si tu tiens vraiment à ce qu'elle ne soit pas rechargée: iframe
vu que c'est en sha1 c'est pas si stupide...
et j'ai cru que tu voulais envoyer le pseudo et récupérer le mdp pour le comparer ('-_-)
sinon pour ce que tu veux faire, tu prends la focntion AJAX du tuto et tu lui dit d'envoyer une variable(le mdp entré) à la page de traitement... page sur laquelle tu écris OUI si les mdp une fois crypté== ce qui est dans la bdd ou NON si ce n'est pas le cas.
après tu regardes dans la variable obtenue.
si c'est oui, alors c'est bien rentré, sinon ... bah tan pis... tu l'envoi chier

LE tuto

PS:bien sûr, il serait plus intelligent d'afficher la page d'administration/de la zone membre sur la page de traitement si c'est bon... et sinon d'y afficher le formulaire...
et quand la fonction s'exécute, tu lui fais mettre le contenu trouvé sur la page de traitement dans la div contenant le formulaire...
comme ça si c'est pas bon: ça remet le formulaire, si c'est bon, ça affiche ce qui est protégé!

anerax

21 janvier 2009 à 19:15:24

Re, merci de ta réponse.
En fait ce que je veux faire c'est un changement de mot de passe.

1er champs : L'internaute entre son vrai mot de passe, AJAX fait appel à la page qui vérifie si le mot de passe entré est bon afin de mettre un OK par exemple à côté.

2eme champs : Nouveau mot de passe
3eme champs : Vérification

J'ai déjà codé les fonctions pour le 2nd et 3eme champs donc de ce côté pas de soucis.
Après c'est clair que je ne connais pas AJAX, j'ai commencé JavaScript aujourd'hui

Mais bon, faut bien commencer un jour

Si j'ai bien compris tes explications, les données sont envoyé au serveur via une page qui traite mais qui ne s'ouvre pas ?

Merci, je vais lire le tuto

SRL Killing

21 janvier 2009 à 20:57:59

En gros oui, la page sera exécuté par js mais ne sera pas visible de ton utilisateur.
En AJAX tu peut récupérer le contenu d'une page, donc tu écrit true si la condition php de verification est bonne ou false si non.
Et ensuite tu compare si le contenu de la page vaut true tu fait fonction x ou sinon y

anerax

21 janvier 2009 à 21:29:14

Re et thx.
J'ai tenté un truc mais vu la clarté du tuto j'aurais mis ma main à couper que ça ne marcherait pas.

Voici ma page qui traite :

<?php
session_start(); // On démarre la session AVANT toute chose
if (isset($_SESSION['pseudo']))
{
	$information = mysql_query('SELECT mot_de_passe FROM inscription WHERE BINARY pseudo="'.$_SESSION['pseudo'].'" ') or die(mysql_error());
	while ($donnees = mysql_fetch_array($information) )
	{
	$mdp = $donnees['mot_de_passe'];
	}

	if (sha1($GET('mot_de_passe')) == $mdp )
	{
	?><script type="text/JavaScript">
	var passOK;
	passOK = true;
	</script><?php
	}
	else
	{
	?><script type="text/JavaScript">
	var passOK;
	passOK = false;
	</script><?php
	}
}

ma fonction :

function MdpVerifXHR(mdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        
        xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                        alert(xhr.responseText);
                }
        }
        
        var mdp = encodeURIComponent(document.getElementById("password").value);
        xhr.open("GET", "VerifPass.php?mot_de_passe=" + mdp"", true);
        xhr.send(null);
        
		if (passOK == false)
		{
		mdp.style.cssText='border-style:solid;border-color:red;'
		}
}

et mon champs :

<label for="password">* Mot de passe actuel :</label><input name="password" type="password" id="password" onBlur="MdpVerifXHR(this)" /> (entre 3 et 15 caractères)<br />

Mci d'avance.

anerax

22 janvier 2009 à 18:37:06

up ? =)

SRL Killing

22 janvier 2009 à 20:11:37

Déjà vérifie que la page php que t'exécutes marche en l'appelant toi même

anerax

22 janvier 2009 à 20:41:53

Rolala j'ai fais des fautes de noob !!!! *j'ai pas relu mon code et ça faisait 4-5 jours que j'avais pas touché à php...je me mettais sur JS

Voilà le code corrigé =)

<?php
session_start(); // On démarre la session AVANT toute chose
mysql_connect("localhost", "root", "");
mysql_select_db("inscription");
if (isset($_SESSION['pseudo']))
{
	$information = mysql_query('SELECT mot_de_passe FROM inscription WHERE BINARY pseudo="'.$_SESSION['pseudo'].'" ') or die(mysql_error());
	while ($donnees = mysql_fetch_array($information) )
	{
	$mdp = $donnees['mot_de_passe'];
	}
	$mot_de_pass=$_GET['mot_de_passe'];
	if (sha1($mot_de_pass) == $mdp )
	{
	?><script type="text/JavaScript">
	var passOK;
	passOK = true;
	</script><?php
	}
	else
	{
	?><script type="text/JavaScript">
	var passOK;
	passOK = false;
	</script><?php
	}
}

Voici ma fonction (modifié quelque peut) :

function MdpVerifXHR(mdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (passOK == false)
					{
					mdp.style.cssText='border-style:solid;border-color:red;'
					}
					else
					{
					mdp.style.cssText='border-style:solid;border-color:green;'	
					}
                }
        }
        
        var mdp = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe=" + mdp"", true);
        xhr.send(null);
        
}

Qui ne marche toujours pas

.
Merci de ton aide =)

SRL Killing

22 janvier 2009 à 21:44:47

Maintenant, fait un alert au début de ta fonction pour vérifier qu'elle est appelée

anerax

22 janvier 2009 à 21:49:45

Merci.
Arf, rien ne se passe, pourtant je l'appelle bien 0_°

J'ai fais une erreur quelque part et vu que XHR et moi ça fais 2...pour le moment, j'ai beau lire tous les tutos que je peux je ne trouve pas ce qui cloche...

SRL Killing

22 janvier 2009 à 21:51:09

Peut tu nous montrer le code ou tu appelle la fonction ?
Et ça c'est faux :

if (passOK == false)
	{
	mdp.style.cssText='border-style:solid;border-color:red;'
	}
	else
	{
	mdp.style.cssText='border-style:solid;border-color:green;'	
	}

Utilise ça :

if (passOK == false) {
    mdp.style.borderStyle = "solid";
    mdp.style.borderColor = "red";	
}
else {
    mdp.style.borderStyle = "solid";
    mdp.style.borderColor = "green";	
}

anerax

22 janvier 2009 à 22:01:00

non
bam !
aie !
non
bam !!
aiee !!
ok ok tient :lol:

<label for="password">* Mot de passe actuel :</label><input name="password" type="password" id="password" onBlur="MdpVerifXHR(this)" />

Thx

SRL Killing

22 janvier 2009 à 22:08:04

A la place d'appeller ta fonction, dans le onblur met un alert pour verifier quil s'active.
Et puis, dans ton js, je sais pas d'où tu sort passOK

anerax

22 janvier 2009 à 22:15:57

Le onBlur s'active bien =)
le passOK je le sort de ma page php :-°

je sais pas trop comment m'y prendre xD

Mci.

guyguy333

22 janvier 2009 à 23:40:31

Il faut savoir que quand tu fais :

xhr.responseText

Tu vas récupérer tout le texte de ta page sous un string.
Donc là tu récupères pas ta variable PassOK
J'ai personnellement déjà eu ce problème et j'ai utilisé une autre méthode
Sur ma page php j'ai crée une div avec un id précis et unique ou je met dedans le résultat
Ensuite avec le string que je récupère, je le décompose comme ceci :

var response = xhr_object.responseText;
		//alert(response); //Si tu veux voir ce que vaut xhr_object.responseText
		var chaine = response.search('<div id="id_de_la_balise_qui_contient_passOK">');
		var debutchaine = chaine+=19; //Là il faut que tu remplaces par les bons chiffres en fonction du nom de l'id de ta balise div
		var finchaine = chaine+=1; //Là aussi il faut que tu remplaces par les bons chiffres en fonction du nom de l'id de ta balise div
		//alert(response);
		var passOK = response.slice(debutchaine,finchaine);

Je suis pas expert en javascript mais c'est ce que j'ai utilisé et ca marche.
Je suis pas sur que ca soit très bien de faire comme je fais mais bon...

anerax

23 janvier 2009 à 7:25:36

Heu merci,
J'ai tenté mais ça n'a pas plus marché...
J'ai fais :

Page PHP :

<?php
session_start(); // On démarre la session AVANT toute chose
mysql_connect("localhost", "root", "");
mysql_select_db("inscription");
if (isset($_SESSION['pseudo']))
{
	$information = mysql_query('SELECT mot_de_passe FROM inscription WHERE BINARY pseudo="'.$_SESSION['pseudo'].'" ') or die(mysql_error());
	while ($donnees = mysql_fetch_array($information) )
	{
	$mdp = $donnees['mot_de_passe'];
	}
	$mot_de_pass=$_GET['mot_de_passe'];
	if (sha1($mot_de_pass) == $mdp )
	{
	?>
	<div id="Recup"><script type="text/JavaScript">var passOK;passOK = true;</script></div>
	<?php
	}
	else
	{
	?>
	<div id="Recup"><script type="text/JavaScript">var passOK;passOK = false;</script></div>
	<?php
	}
}

Function JS :

function MdpVerifXHR(mdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() 
		{
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
				
					var response = xhr_object.responseText;
					var chaine = response.search('<div id="Recup">');
					var debutchaine = chaine+=97;
					var finchaine = chaine+=1;
					var passOK = response.slice(debutchaine,finchaine);

				
					if (passOK == false)
					{
					mdp.style.cssText='border-style:solid;border-color:red;'
					}
					else
					{
					mdp.style.cssText='border-style:solid;border-color:green;'	
					}
                }
        }
        
        var mdp = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe="+ mdp +"", true);
        xhr.send(null);
        
}

Mais ça ne marche toujours pas :s

Merci.

SRL Killing

23 janvier 2009 à 10:33:05

Dans ton ancien fichier php (au cas ou tu l'aurait modifier), à la fin tu rajoute echo passOK;
Et dans ton js tu recupère ce qu'il y a ecrit avec xhr.responseText.
Et étant donnée que tu n'écrit que passOK (à savoir true ou false) tu peut le comparer.

Attention : compare bien a la chaine "true" ou "false" car ce n'est pas un booléen mais un string

Tu aura donc un truc comme sa :

if (rxhr.responseText == "false") {
    mdp.style.borderStyle = "solid";
    mdp.style.borderColor = "red";	
}
else {
    mdp.style.borderStyle = "solid";
    mdp.style.borderColor = "green";	
}

anerax

23 janvier 2009 à 19:02:43

Ahhhhh je pense que j'y suis presque !

Voici mon code PHP :

<?php
session_start(); // On démarre la session AVANT toute chose
mysql_connect("localhost", "root", "");
mysql_select_db("inscription");
if (isset($_SESSION['pseudo']))
{
	$information = mysql_query('SELECT mot_de_passe FROM inscription WHERE BINARY pseudo="'.$_SESSION['pseudo'].'" ') or die(mysql_error());
	while ($donnees = mysql_fetch_array($information) )
	{
		$mdp = $donnees['mot_de_passe'];
	}
	
	$mot_de_pass=$_GET['mot_de_passe'];
	
	if (sha1($mot_de_pass) == $mdp )
	{
		echo 'true';
	}
	else
	{
		echo 'false';
	}
	
}

et mon bout de fonction :

if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
					alert(xhr.responseText);
						mdp.style.borderStyle = "solid";
						mdp.style.borderColor = "red";	
					}
					else 
					{
					alert(xhr.responseText);
						mdp.style.borderStyle = "solid";
						mdp.style.borderColor = "green";	
					}

                }

Il renvoie bien true ou false comme il faut, mais les bordures ne se colorent pas u_u" xD

Merci =)

xavierm02

23 janvier 2009 à 19:49:31

fais des echo/alert successivement à chaque endroit ou tu fais un test (dans un if()) et regarde... il doit y en avoir un où ça va t'afficher quelquechose qui n'était pas prévu donc ce qui est dans le if s'affiche pas donc tu te fais owned

anerax

23 janvier 2009 à 20:03:04

Bein j'ai mis des : alert(xhr.responseText);
dans la condition, ils s'affichent bien ! Le soucis vient après car si je met mon alert(xhr.responseText);en dessous de
mdp.style.borderStyle = "solid";
il ne s'exécute plus :s

Merci =)

xavierm02

23 janvier 2009 à 20:12:10

essaye

if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
					alert(mdp+' '+mdp.style.borderStyle);
						mdp.style.borderStyle = "solid";
						mdp.style.borderColor = "red";	
					}
					else 
					{
					alert(mdp+' '+mdp.style.borderStyle);
						mdp.style.borderStyle = "solid";
						mdp.style.borderColor = "green";	
					}

                }

si ça ne s'affiche pas, il y a des chances que ça soit parce que mdp est défini... mais après...

anerax

23 janvier 2009 à 20:16:36

ça ne s'affiche pas effectivement xD
Mais pourtant dans mon formulaire, j'ai mis this donc logiquement il est défini au début du script non ?

Le script entier est celui ci :

function MdpVerifXHR(mdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() 
		{
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
						mdp.style.borderStyle = 'solid';
						mdp.style.borderColor = 'red';
					}
					else 
					{
						mdp.style.borderStyle = 'solid';
						mdp.style.borderColor = 'green';	
					}

                }
        }
        
        var mdp = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe="+ mdp +"", true);
        xhr.send(null);
        
}

Merci =)

SRL Killing

23 janvier 2009 à 20:17:34

Met juste un alert dans le if et un autre dans le else et observe le comportement.
Je sais pourquoi :
En dehors de ta fonction tu créer aussi un variable mdp qui elle n'est pas un objet, il essai donc peut être de modifié le string eu lieu de l'objet, midifie et adapte une des deux variable

xavierm02

23 janvier 2009 à 20:19:08

logiquement il est surtout défini dans une fonction et appelé dans une autre...

function MdpVerifXHR(mdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() 
		{
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
						mdp.style.borderStyle = 'solid';
						mdp.style.borderColor = 'red';
					}
					else 
					{
						mdp.style.borderStyle = 'solid';
						mdp.style.borderColor = 'green';	
					}

                }
        }
	var mdp2 = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe="+ mdp2 +"", true);
        xhr.send(null);
        
}

non en fait ça devrait marcher...
et tu passes bien un objet HTML en argument dans la fonction?

SRL Killing

23 janvier 2009 à 20:21:31

Non xavierm02, je crois que ce sont bien deux variable differante il doit garder l'ancien code et changer un des nom de var :

function MdpVerifXHR(Amdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() 
		{
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
						Amdp.style.borderStyle = 'solid';
						Amdp.style.borderColor = 'red';
					}
					else 
					{
						Amdp.style.borderStyle = 'solid';
						Amdp.style.borderColor = 'green';	
					}

                }
        }
        
        var mdp = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe="+ mdp +"", true);
        xhr.send(null);
        
}

xavierm02

23 janvier 2009 à 20:26:19

Citation : Zoro-zerO

Non xavierm02, je crois que ce sont bien deux variable differante il doit garder l'ancien code et changer un des nom de var :

function MdpVerifXHR(Amdp)
{
	var xhr = new XMLHttpRequest();
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                } 
                else {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
        }
        xhr.onreadystatechange = function() 
		{
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					if (xhr.responseText == "false") 
					{
						Amdp.style.borderStyle = 'solid';
						Amdp.style.borderColor = 'red';
					}
					else 
					{
						Amdp.style.borderStyle = 'solid';
						Amdp.style.borderColor = 'green';	
					}

                }
        }
        
        var mdp = encodeURIComponent(mdp.value);
        xhr.open("GET", "VerifPass.php?mot_de_passe="+ mdp +"", true);
        xhr.send(null);
        
}

j'ai déjà édité

au passage:

deux variable differante

deux variables différentes

si je ne m'abuses
et

Chasseur de démon
Le chasseur de démon est un guerrier rapide, puissant et abile

Ces sorts :

Chasseur de démon(alias Illidan/demon hunter)
Le chasseur de démon est un gros bourrin super contre tout(mana burn contre casters, immolation contre mass melee, avoid contre hero-focus, ulti avec dégats ranged AOE contre tours, mass etc.)

Ses sorts :

SRL Killing

23 janvier 2009 à 20:28:40

Désolé j'avais pas vu l'édit, j'étais en train de poster.
Et sinon désolé pour les erreur mais moi et les accord sa fait 100.

anerax

23 janvier 2009 à 20:46:38

Ah merci beaucoup, ça fonctionne

L'erreur à la con quand même...xD