Vérifier une identification à la volée.

Version imprimable

Bonjour à tous, je me décide enfin à demander de l'aide car ça fait un moment que je galère.
Je souhaite vérifier à la voler une identification.
C-a-d si l'utilisateur saisis un mot de pass ou password pas bon un message rouge s'affiche automatiquement à coté signalant l'erreur.
J'arrive à faire ceci, le problème c'est que mon formulaire est quand même envoyé.
voici mon code
le formulaire ressemble à ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <form method="post" action="index.php?p=verifLogin" onsubmit="return check_login_inline()" > <table border="0" align="center" > <tr> <td id="result_login" style="width:250px; text-align:right;" ></td> <td style="text-align:left; width:80px;" > <input size="10" type="text" id="login" name="login" value="login" onFocus="if(this.value=='login')this.value=''" onBlur="if(this.value=='')this.value='login'"> </td> <td style=" text-align:left; width:80px;" > <input size="10" type="password" id="password" name="password" value="pass" onFocus="if(this.value=='pass')this.value=''" onBlur="if(this.value=='')this.value='pass'"> </td> <td style=" text-align:left; width:30px;" > <input type="submit" name="submit" value="Ok"> </td> </tr> </table> </form>
Ma fonction check login la voila:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function check_login_inline() { if($F("password").length != 0 && $F("login").length != 0 ) { //Verification du mot de pass et password var url = "./ajax_verifLogin.php"; var params = {login: $F("login") , pass:$F("password")}; // --- APPEL DE LA PAGE ASYNCHRONE --- new Ajax.Request( url, {parameters: params,onComplete:verif_retour}); return false; } }
Et ma fonction verif_retour qui affiche bien le message d'erreur en rouge
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function verif_retour(reponsejson) { var data=reponsejson.responseText.evalJSON(); if(data.res=="ok") { return true; } if(data.res=="login") { $("result_login").innerHTML="<span class='red'>Ce pseudo est inexistant</span>"; } else { $("result_login").innerHTML='<span class="red">Ce mot de pass est erroné</span>'; } return false; }
Donc là les messages d'erreurs s'affichent bien, par contre quand le login+pass est OK le formulaire n'est pas envoyé à ma page index.php?p=verifLogin qui doit se charger de mettre à jour les variables de session puis de faire une redirection...

Auriez vous des conseils à me donner ?
merci d'avance

Salut,

Citation:

J'arrive à faire ceci, le problème c'est que mon formulaire est quand même envoyé.

Ce ne serait pas putôt l'inverse ?

Je crois que ton erreur est écrite dans ton code
Code:

1 2 3 4 5 6 7 8 9 10 function check_login_inline() { if($F("password").length != 0 && $F("login").length != 0 ) { ... // --- APPEL DE LA PAGE ASYNCHRONE --- new Ajax.Request( url, {parameters: params,onComplete:verif_retour}); return false; } }
Ta requête Ajax est asynchrone donc n'attend pas d'avoir le résultat pour continuer. A chaque fois tu fais un return false :aie:.
Parmi les solutions possibles, tu peux faire une requête synchrone, ou encore en cas de succès tu peux armer un flag pour prévenir que tout est ok et tu génères un nouveau submit, en utilisant le flag pour court-circuiter check_login_inline.

ERE

19/01/2010, 00h50
rockt13

Bonsoir merci pour ta réponse.
En rendant ma requête syncrhone mon return false sera exécuté uniquement après le retour d' Ajax ?car le pb si je mettais pas de return false le formulaire était tout le temps soumis même dans le cas ou il y avait un pb didentifiant.
Par rapport a la 2ème solution que tu me proposes tu aurais pas un petit exemple pour illustrer? car je n'ai pas bien compris.
Merci bye

Re,

Perso, je pense qu'il vaut mieux rester asynchrone. Cela doit donner à peu près ça (commentaires dans le code,ne pas oublier d'ajouter des attributs name et id au formulaire)

Code:

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
//<form method="post" 
//     name="frm" id="frm"
//     action="index.php?p=verifLogin" 
//     onsubmit="return check_login_inline()" >
 
//est on authentifié ? Par défaut, non !
var isLoginAuthentifie=false;
 
function check_login_inline()
{
  //si on est authentifié, on accepte le submit
  if(isLoginAuthentifie) {
    isLoginAuthentifie = false; //précaution
    return true;
  }  
 
	if($F("password").length != 0 && $F("login").length != 0 )
	{
				//Verification du mot de pass et password					
				var url = "./ajax_verifLogin.php";
				var params = {login: $F("login") , pass:$F("password")};
				// --- APPEL DE LA PAGE ASYNCHRONE ---
				new Ajax.Request( url, {parameters: params,onComplete:verif_retour});
	}
	//dans tous les cas on refuse le submit
	return false;
}
 
function verif_retour(reponsejson)
{
 
var data=reponsejson.responseText.evalJSON();
	if(data.res=="ok")
	{
		 //cool on peut réellement envoyer
     isLoginAuthentifie = true;
		 document.getElementById("frm").submit();
		 return;
	}
 
	if(data.res=="login")
	{
		$("result_login").innerHTML="<span class='red'>Ce pseudo est inexistant</span>";
	}
	else
	{
		$("result_login").innerHTML='<span class="red">Ce mot de pass est erron&eacute;</span>';
	}
}

Bon dev,

ERE

19/01/2010, 09h25
rockt13

Bonjour
Cette solution semble fonctionner parfaitement :ccool:
En plus l'avantage, c'est que si JAVA est désactivé, la personne pourra être logé en passant par la page verifLogin classique il me semble ?

Merci beaucoup, je ne savais pas renvoyer submit d'un form à partir de javascript , ca me servira à l'avenir !

bye et encore merci
19/01/2010, 14h13
rockt13

J'ai crié victoire trop vite lol.
Alors j'ai 2 pb du coup.
---> le premier ; un problème de header, qui est déjà envoyé, donc ma page verifLogin.php qui à pour rôle de mettre les variables de SESSION a jour et de rediriger vers Acceuil ne le fais pas .

---> Le 2eme plus ennuyeux, lorsque je me connecte/Deconnecte si je veux me reconnecter ensuite, il ne se passe rien.
Si je supprime le cache,historique etc.. je peux à nouveau me connecter une fois.
19/01/2010, 14h45
emmanuel.remy

Citation:

Envoyé par rockt13

J'ai crié victoire trop vite lol.
Alors j'ai 2 pb du coup.
---> le premier ; un problème de header, qui est déjà envoyé, donc ma page verifLogin.php qui à pour rôle de mettre les variables de SESSION a jour et de rediriger vers Acceuil ne le fais pas .

C'est de l'ajax pas une requête standard ! Tu ne peux pas renvoyer une header de redirection !

Citation:

---> Le 2eme plus ennuyeux, lorsque je me connecte/Deconnecte si je veux me reconnecter ensuite, il ne se passe rien.
Si je supprime le cache,historique etc.. je peux à nouveau me connecter une fois.

Gère la variable isLoginAuthentifie = false; //précaution

ERE
19/01/2010, 14h50
rockt13

lorsque je submit avec return = true, ca devrais se faire normalement comme si je l'avais pas appelé par ajax pourtant non?

Pour la variable isLoginAuthentifie , je l'affiche à chaque fois, j'ai l'impression que c'est le getElement..("frm").submit, qui s'execute pas tout le temps..

Code:

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
function check_login_inline()
{
	

  //si on est authentifié, on accepte le submit
  alert("check_login_inline "+isLoginAuthentifie);
  if(isLoginAuthentifie)
  {
    isLoginAuthentifie = false; //précaution
    return true;
  }  

	if($F("password").length != 0 && $F("login").length != 0 )
	{

				//Verification du mot de pass et password					
				//$("loader").show();

				var url = "./ajax_verifLogin.php";
				var params = {login: $F("login") , pass:$F("password")};
				// --- APPEL DE LA PAGE ASYNCHRONE ---
				new Ajax.Request( url, {parameters: params,onComplete:verif_retour});				
	}
	return false;
}

Code:

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
function verif_retour(reponsejson)
{

var data=reponsejson.responseText.evalJSON();
				//$("loader").hide();
				
	if(data.res=="ok")
	{
		alert("Verif_retour : data.res= "+data.res);
		 //cool on peut réellement envoyer
    	 isLoginAuthentifie = true;
		 alert("Submit du formulaire avec isLoginAuthentifie ="+isLoginAuthentifie);
		 document.getElementById("formlog").submit();

		 return;

	}
	if(data.res=="login")
	{
		$("result_login").innerHTML='<img src="./img/ico/error_log.png" alt="error log"/><span class="red">Ce pseudo est inexistant</span>';
	}
	else
	{
		$("result_login").innerHTML='<img src="./img/ico/error_log.png" alt="error log"/><span class="red">Ce mot de pass est erron&eacute;</span>';
	}

}

J'ai rajouté des "traceurs" en vert pour voir.
Donc lorsque j'appuie sur login, j'ai ceci en popup
alert = check_login_inline false
alert = Verif_retour : data.res= ok
alert = Submit du formulaire avec isLoginAuthentifie = true

Puis rien ne se passe.Alors que je devrais avoir un nouveau alert = check_login_inline true
Si je rappuie dessuite après les 3 premiers alert sur le bouton LOGIN, cette fois-ci j'ai:
alert = check_login_inline true
et le login fonctionne..

19/01/2010, 15h56
emmanuel.remy

Re,

T'as bien mis un id="formlog" au formulaire (pas simplement un name="formlog" ?

ERE

Re,
oui oui

Code:

1
2
 
<form method="post" action="index.php?p=verifLogin" onsubmit="return check_login_inline()" name="formlog" id="formlog" >

19/01/2010, 16h23
emmanuel.remy

Envoie le code complet de la page stp.

ERE

Alors voici login.js

Code:

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
 
var isLoginAuthentifie=false;
 
 
function check_login_inline()
{
 
 
  //si on est authentifié, on accepte le submit
  alert("check_login_inline "+isLoginAuthentifie);
  if(isLoginAuthentifie)
  {
    isLoginAuthentifie = false; //précaution
    return true;
  }  
 
	if($F("password").length != 0 && $F("login").length != 0 )
	{
 
				//Verification du mot de pass et password					
				//$("loader").show();
 
				var url = "./ajax_verifLogin.php";
				var params = {login: $F("login") , pass:$F("password")};
				// --- APPEL DE LA PAGE ASYNCHRONE ---
				new Ajax.Request( url, {parameters: params,onComplete:verif_retour});				
	}
	return false;
}
 
function verif_retour(reponsejson)
{
 
var data=reponsejson.responseText.evalJSON();
				//$("loader").hide();
 
	if(data.res=="ok")
	{
		alert("Verif_retour : data.res= "+data.res);
		 //cool on peut réellement envoyer
    	 isLoginAuthentifie = true;
		 alert("Submit du formulaire avec isLoginAuthentifie ="+isLoginAuthentifie);
		 document.getElementById("formlog").submit();
 
		 return;
 
	}
	if(data.res=="login")
	{
		$("result_login").innerHTML='<img src="./img/ico/error_log.png" alt="error log"/><span class="red">Ce pseudo est inexistant</span>';
	}
	else
	{
		$("result_login").innerHTML='<img src="./img/ico/error_log.png" alt="error log"/><span class="red">Ce mot de pass est erron&eacute;</span>';
	}
 
}

Voici le formulaire : inlogin.php

Code:

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
 
<form method="post" action="index.php?p=verifLogin" onsubmit="return check_login_inline()" name="formlog" id="formlog" >
   <table border="0"  align="center" >
   <?php
   //action="index.php?p=verifLogin" onsubmit="return check_login_inline()"
   if(isset($_GET['p']) && !empty($_GET['p']))
   {
   
        $c=$_GET['p'];
        if($c!='fun' && $c!='art' && $c!='string' && $c!='exib' && $c!='annonce' && $c!='formulaire')
        {
                $c='editer_profile';
        }
        
   echo '<input type="hidden" value='.$c.' name="mapage" />';
   }
   else
   {
    echo '<input type="hidden" value="editer_profile" name="mapage" />';
   }
   ?>
 
    <tr>
     <td id="result_login" style="width:250px; text-align:right;" >
     <div id="loader" style="display:none"><img src="./img/ico/loader.gif" alt="loader" /></div>
     </td>
     <td style="text-align:left;  width:80px;" >
      <input size="10" type="text" id="login" name="login" value="login" onFocus="if(this.value=='login')this.value=''" onBlur="if(this.value=='')this.value='login'">
     </td>
      <td style=" text-align:left;  width:80px;" >
      <input size="10" type="password" id="password" name="password" value="pass" onFocus="if(this.value=='pass')this.value=''" onBlur="if(this.value=='')this.value='pass'">
     </td>
     <td  style=" text-align:left; width:30px;" >
      <input type="submit" name="submit" value="Ok" >
     </td>
    </tr>
 
 
 
   </table>
 
</form>

Et voici veriFlogin.php

Code:

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
 
<?php
// On démarre la session
@session_start();
include("connect.php");
 
$loginOK = false;  // cf Astuce
 
// On n'effectue les traitement qu'à la condition que 
// les informations aient été effectivement postées
if ( isset($_POST) && (!empty($_POST['login'])) && (!empty($_POST['password'])) ) {
 
  extract($_POST);  // je vous renvoie à la doc de cette fonction
 
        $login=addslashes($login);
        $login=addcslashes($login, '%_');
  // On va chercher le mot de passe afférent à ce login
  $sql = "SELECT * FROM membre WHERE pseudo = '".$login."'";
  $req = mysql_query($sql) or die('Erreur SQL : <br />'.$sql);
  
  // On vérifie que l'utilisateur existe bien
  if (mysql_num_rows($req) > 0) 
  {
     $data = mysql_fetch_assoc($req);
    
    // On vérifie que son mot de passe est correct
    if (md5($password) == $data['pass'])
        {
      $loginOK = true;
    }
  }
}
 
// Si le login a été validé on met les données en sessions
if ($loginOK) 
{
 
  $_SESSION['connect'] = "on";
  $_SESSION['id'] = $data['id_mb'];
  $_SESSION['id_membre'] = $data['id_mb'];
  $_SESSION['pseudo'] = nl2br(htmlspecialchars(stripslashes($data["pseudo"])));
  $_SESSION['age'] = $data['age'];
  $_SESSION['sexe'] = $data['sexe'];
  $_SESSION['_sexe_'] = $data['sexe'];
  $_SESSION['ville'] = $data['ville'];
  $_SESSION['rang'] = $data['rang'];
    $_SESSION['mail'] = $data['email'];
  $timestamp_last_cnx = mktime(date('H'), date('i'), date('s'), date('n'), date('j'), date('y')); 
  $id=$_SESSION['id'];
                $update="UPDATE `membre` SET `timestamp_cnx` = $timestamp_last_cnx  WHERE `id_mb` =$id";    
                $result = mysql_query($update);
                if(!$result)
                {
                        echo "{'error':'erreur_tbl_vote'}";
                }
  if(!empty($mapage))
  {
        header ("Location: index.php?p=$mapage"); 
 
  }
  else
  {
        header ("Location: index.php?p=editer_profile"); 
  }
}
else
{
  echo 'Vous avez indiqu&eacute; un pseudo et/ou mot de passe incorrect. V&eacute;rifiez votre pseudo et mot de passe et r&eacute;essayez. <br/> Si vous continuez &agrave; rencontrer des probl&egrave;mes, contactez l\'administrateur du site'; 
}
?>

Je précise, quand je passe par le login "traditionnelle" en appelant ma page verifLogin comme action du form ça fonctionne ( mis à part le Warning du Header, qui marchait trés bien avant, mais c'est pas grave )

19/01/2010, 19h35
emmanuel.remy

Re,

Attention: quand tu appelles la méthode submit (document.getElementById("formlog").submit()) l'événement onsubmit n'est pas généré par JS ;) . C'est une petite subtilité. Mais cela n'empêche, le submit DOIT se faire.

Ensuite concernant ton header je n'ai pas tout suivi mais vérifie bien: tu ne dois avoir aucun espace ou caractère ou autre texte envoyé au navigateur avant de faire le header Location. Donc un simple espace avant la 1ere balise PHP suffit à générer une warning.

ERE
19/01/2010, 19h37
rockt13

Ok je vais vérifier , j'ai du rajouter un espace, car ça marchais bien avant j'avais pas cette erreur de Header.
Par contre du coup pour le submit , je dois faire comment ?
19/01/2010, 20h06
emmanuel.remy

Normalement tu n'as rien à faire cela fonctionne :?
Et j'ai testé chez moi je n'ai pas de souci particulier, le formulaire est bien envoyé.

ERE
19/01/2010, 20h44
rockt13

Mince , je suis donc bloqué, je peux peut-être te fournir l'adresse de mon site en MP pour que tu en juge par toi même du bug ?
19/01/2010, 20h53
rockt13
Pour mon problème de l'envoi du header, est ce que je peux utiliser du javascript
pour faire un truc du genre remplacer dans mon php ça:

Code:

header ("Location: index.php?p=editer_profile");

Par un truc du genre
Code:

1 2 3 <script type="text/javascript" > document.location.href="index.php?p=editer_profile"; </script>
C'est correcte ?
19/01/2010, 21h16
rockt13

Je viens de découvrir avec firebug ceci:

document.getElementById("formlog").submit(); < document.getE.. it is not a function
19/01/2010, 21h34
rockt13
Je viens de résoudre les 2 problèmes
Pour le submit, le bug venez de mon bouton

Code:

<input type="submit" name="submit" value="Ok" >

remplacer par
Code:

1 2 <input type="submit" name="bouton" value="Ok" >
en effet j'ai lu sur des forums anglais que document.form.submit() pouvais rentrer en conflit avec le bouton dont le name="submit" du formulaire.
J'ia changé et ça fonctionne.

Pour le les header j'ai remplacé
header ("Location: index.php?p=editer_profile");
par ceci:
Code:

1 2 3 4 5 <script type="text/javascript"> charger_page("index.php?p=editer_profile"); </script>
avec
Code:

1 2 3 4 5 function charger_page(url) { document.location.href=url; }
Je sais pas si c'est très "propre" et "robuste" de faire comme ça mais à priori ça fonctionne sous FF, Chrome et IE8.

J'attends quand même vos avis.
merci
20/01/2010, 02h12
emmanuel.remy

L'histoire du header qui vient certainement d'un espace avant ta première balise PHP.
Je ne connaissais pas du tout ce conflit possible entre nom du submit et submit du formulaire ! Merci pour l'info ! :ccool:

ERE
20/01/2010, 21h21
rockt13

Merci à toi pour ton aide.
j'ai d'autre pb maintenant... j'ouvre un autre sujet
20/01/2010, 21h51
gwyohm

Citation:

Envoyé par rockt13

...
en effet j'ai lu sur des forums anglais que document.form.submit() pouvais rentrer en conflit avec le bouton dont le name="submit" du formulaire.
J'ia changé et ça fonctionne.

C'est à cause des navigateurs qui sont trop permissifs : quand on écrit
document.form.submit, si on a un input nommé submit, on ne sait pas si on référence la méthode ou le champ. J'avais eu le même genre de gag avec un champ dont le nom était action :aie: et c'est assez pénible à debugger.