Vérifier une identification à la volée.

**rockt13** · 18/01/2010, 22h43

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 :

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
 
<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 :

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
 
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 :

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
 
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&eacute;</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

**emmanuel.remy** · 19/01/2010, 00h35

Salut,

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 :

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

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

.
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

**rockt13** · 19/01/2010, 00h50

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

**emmanuel.remy** · 19/01/2010, 01h26

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 :

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
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

**rockt13** · 19/01/2010, 09h25

Bonjour
Cette solution semble fonctionner parfaitement

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

**rockt13** · 19/01/2010, 14h13

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.

**emmanuel.remy** · 19/01/2010, 14h45

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 !

---> 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

**rockt13** · 19/01/2010, 14h50

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..

**rockt13** · 19/01/2010, 15h50

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
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 :

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
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..

**emmanuel.remy** · 19/01/2010, 15h56

Re,

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

ERE

**rockt13** · 19/01/2010, 15h57

Re,
oui oui

Code :

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

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

**emmanuel.remy** · 19/01/2010, 16h23

Envoie le code complet de la page stp.

ERE

**rockt13** · 19/01/2010, 18h32

Alors voici login.js

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
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 :

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
 
<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 :

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
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 )

**emmanuel.remy** · 19/01/2010, 19h35

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

**rockt13** · 19/01/2010, 19h37

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 ?

**emmanuel.remy** · 19/01/2010, 20h06

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

**rockt13** · 19/01/2010, 20h44

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 ?

**rockt13** · 19/01/2010, 20h53

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 :

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

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

Par un truc du genre

Code :

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

1
2
3
<script type="text/javascript"  >
document.location.href="index.php?p=editer_profile";
</script>

C'est correcte ?

**rockt13** · 19/01/2010, 21h16

Je viens de découvrir avec firebug ceci:

document.getElementById("formlog").submit(); < document.getE.. it is not a function

**rockt13** · 19/01/2010, 21h34

Je viens de résoudre les 2 problèmes
Pour le submit, le bug venez de mon bouton

Code :

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

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

remplacer par

Code :

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

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 :

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

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

avec

Code :

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

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

Vérifier une identification à la volée.

JavaScript

Discussions similaires

Partager

Partager