[AJAX] Authentification Ajax Php

Version imprimable

17/10/2010, 09h38
toulousain3117

[AJAX] Authentification Ajax Php

Bonjour, j'ai pas mal fait de recherche sur google et même sur ce forum et bien d'autres, mais je n'arrive pas a trouver la solution adéquate pour le script que je desire réalisé .

J'ai un formulaire avec les champs email et mot de passe , et un fichier php qui me permet de recuperer les informations de mon formulaire pour ensuite connecter une session en php

Jusqu'a la pas de probleme etand donnée que en PHP la connection se realise correctement !

Mais je souhaiterai que ma connection en php se fasse via javascript sur une seul div

que avant ça me mette le formulaire avec les champs et a la validation un petit text Connection en cours .... et ensuite se realise la requete sur mon fichier php pour realisé l'authentification !

Comment puis je faire pour que la connection de fasse avec Javascripts sans que toute la page se charge

Cordialement
18/10/2010, 12h59
Invité

Bonjour,
Tu as eu raison de poster ici, car c'est 100% le rôle d'Ajax.
En fait il te suffis de passer par ton XMLHttpRequest les deux données en methode POST.
XMLHttpRequest va donc appeler un PHP de controle/validation du login,
il répondra par un simple echo "tout ce que tu veux en html";
cette réponse tu l'envoie dans ton DIV ;)
18/10/2010, 22h35
toulousain3117
mais je doit presenter le code comment avec XMLHttpRequest car déjà que j'ai mit 2 ans pour reussir a faire un refresh d'une div en ajax lol

c'est dans le même genre que ce code ?
Code:

1 2 3 4 5 6 7 function chargeFichier() { var XHR = new XHRConnection(); XHR.setRefreshArea('nomdudiv'); XHR.sendAndLoad("nomdufichierarefrresh", "GET"); return true; }
Merci tout de même de ta réponse ;)

OK alors un exemple basique qui peut te servir a tout !
deux PHP
ajax_apprendre.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
 
<SCRIPT language=JavaScript>
function maFonctionAjax(lindex, pseudo)
{
  var MonAjax;
  if (window.XMLHttpRequest) MonAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  MonAjax.open('POST',"ajax_apprendre_sql.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText =='true') { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
              }else{                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('lindex='+lindex+'&pseudo='+pseudo);                  
}
</SCRIPT>
<div class='centre0'>
<br /><br /><br /><br /><br /><br />
<form method="post" onsubmit="maFonctionAjax(this.lindex.value,this.pseudo.value);return false" action="">
L' index    <input name="lindex" id="lindex" type="text"><br />
Le pseudo:  <input name="pseudo" id="pseudo" type="text"><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

ajax_apprendre_sql.php qui est celui qui travail et fait
tout ce que tu veux, requete sql etc ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?PHP
$lindex = (isset($_POST['lindex'])) ? (int) $_POST['lindex'] : 9999;
$pseudo = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : '';
if($pseudo!="" && $lindex!=9999){
    echo "true";
    //===== toute action echo html SQL etc...
}
else
{
    echo "le data ".$pseudo."n est pas valide";
}
?>

A toi de jouer ;)

JE REEDITES, car je voulais te mettre en garde contre le risque d'incompatibilitée. Mon exemple est un bon model, mais il te faut quand tu l'auras compris, y ajouter les deux contrôles entre IE et FF puis sur Ajax lui même.
Regardes la réponse sur ce sujet d' Audry.aime
Controle Ajax

19/10/2010, 16h48
toulousain3117

merci beaucoup de ton aide, je vais tester et je te tiens au courant

mais lindex cela signifie quoi ?
19/10/2010, 17h28
andry.aime
Bonsoir,

Citation:

mais lindex cela signifie quoi ?
Code:

1 2 3 var lindex= document.getElementById('lindex').value; var pseudo= document.getElementById('pseudo').value; MonAjax.send('lindex='+lindex+'&pseudo='+pseudo);
Code:

L' index <input name="lindex" id="lindex" type="text"/><br />

Il faut fermer la balise input.

A+.

j'ai un petit soucis, j'ai adapté ton code mauriser la conection se fait bien, pas de refresh mais sa me met le text en rouge alors que je recupere bien toute les infos et tout , cela peut etre du a quoi ?

c'est mon nouveau code

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
<SCRIPT language=JavaScript>
function maFonctionAjax(email, mdp)
{
  var MonAjax;
  if (window.XMLHttpRequest) MonAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  MonAjax.open('POST',"connect.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText =='true') { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
              }else{                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('email='+email+'&mdp='+mdp);                  
}
</SCRIPT>
<div class='centre0'>
 
<form method="post" onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

19/10/2010, 18h48
toulousain3117

je verifie d'essaye le code d'origine mais cela ne marche pas non plus
19/10/2010, 19h28
Invité
Oui c'est parceque mon exemple est enfantin alors c'est vert si

Code:

if (MonAjax.responseText =='true')

Et dans le PHP je renvoie bien true !
Code:

1 2 3 4 5 if($pseudo!="" && $lindex!=9999){ echo "true"; //===== toute action echo html SQL etc... }
Il est évident que le but est de comprendre la base aprés tu va compliquer de plus en plus mais dominer :ccool:
19/10/2010, 19h30
toulousain3117

j'dite pour mieux expliqué lol

comment je peux faire pour que sa envoie true si la connection se fait et false si la connection ne reussi pas a cause d'un mauvais mot de passe par exemple ?

Je ne peux et ne veux pas te faire tout, mais regardes ce que j'avais posté
je completes avec commentaires
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?PHP $lindex = (isset($_POST['lindex'])) ? (int) $_POST['lindex'] : 9999; $pseudo = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : ''; if($pseudo!="" && $lindex!=9999){ //===== toute action echo html SQL etc... // ======== ici je vais me connecté a SQL //========== chercher $pseudo par select if ($sql==$psedo) echo "true"; if ($sql!=$psedo) echo "false"; } else { echo "le data ".$pseudo."n est pas valide"; } ?>
Je te laisses imaginer tout ce que tu veux ! y compris envoyer en un seul echo l'équivalent dune liste de 500 articles avec prix etc ...

voila mon 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<SCRIPT language=JavaScript>
 
function getXhr(){
                                var xhr = null; 
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
                                return xhr
            }
 
 
 
 
function maFonctionAjax(email, mdp)
{
  var MonAjax = getXhr()
 
 
  MonAjax.open('POST',"connect.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText == "true") { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
document.getElementById("test").style.visibility = "hidden";
              }elseif (MonAjax.responseText != "true") {                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>ff'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var email= document.getElementById('email').value;
var mdp= document.getElementById('mdp').value;
 
  MonAjax.send('email='+email+'&mdp='+mdp);                  
}
</SCRIPT>
<div class='centre0' id="test">
 
<form method="POST" onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

et ma page connect :

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
71
72
73
74
75
76
77
<?
session_start();
//Si la variable $_SESSION['logged'] n'existe pas, on la créée.
if (!isset($_SESSION['logged'])) $_SESSION['logged'] = false;
 
//On oublie pas d'inclure le fichier contenant les identifiants mysql.
require("mysqlcon.php");
 
//Ensuite on vérifie que les variables existent et contiennent quelque chose :)
 
$email = (isset($_POST['email'])) ? (int) $_POST['email'] : 9999;
$mdp = (isset($_POST['mdp'])) ? $_POST['mdp'] : '';
if($mdp!="" && $email!=9999){
   //Mesure de sécurité, notamment pour éviter les injections sql.
   $email = htmlentities(addslashes($_POST["email"]));
   $mdp = htmlentities(addslashes($_POST["mdp"]));
 
 
 
 
      //Sélection des informations.
      $sql_info = mysql_query("SELECT * FROM wemboo_user WHERE email='$email'")or die(mysql_error());
      $donnees_info = mysql_fetch_array($sql_info);
 
      //Si le mot de passe est le même.
      if ($donnees_info["pass"] == $mdp)
      {
 
 
            //On modifie la variable qui nous indique que le membre est connecté.
            $_SESSION["logged"] = "true";
 
            //On créé les variables contenant des informations sur le membre.
            $_SESSION['id'] = $donnees_info['id'];
            $_SESSION['email'] = $email;
 
            $id = $_SESSION['id'];
            $ip = $_SERVER['REMOTE_ADDR'];
 
            $conect = time();
 
                     echo "true";
 
 
 
 
         }
 
      else
      {
 
 
 
         $erreur = "le mot de passe est incorrecte !";
echo "false";
 
 
 
 
      }
   }
 
else
{
 
  $erreur = 'Erreur : vous avez oublié de remplir un ou plusieurs champs !<br />
 
<form method="post" action="index.php">
                        <label><input type="text" name="email" value="pseudo" /></label><br />
                        <label><input type="password" name="mdp" value="" /></label><br />
                        <input type="submit" name="connexion" value="Se connecter" />
                </form>
                <a href="modules.php?page=inscription">S\'inscrire</a>';
 
                }
echo("$erreur");
                ?>

et cela ne marche toujorus pas, la requete est bien effectué , mais quand c'est true je voudrais que sa passe au vert, et rouge au false

19/10/2010, 22h49
toulousain3117

sayé c'est resolu c'etait juste des espaces a la fin de mon script php merci beaucoup a tous de votre aide