Comment valider un mot de passe avec jquery et php ?

Question

Je n'ai jamais fait cela auparavant et je n'ai pas trouvé beaucoup d'aide sur Google ou StackOverflow.

Voici ce que j'ai : Une entrée de mot de passe :

<input type="text" placeholder="password" name="pass" id="password" />

et un peu de jQuery pour vérifier le mot de passe :

<script>
$('form').submit(function(){
input = $('#password').val();
var finish = $.post("pass.php", { request: "opensesame" }, function(data) {
   return (input==data) ? true : false;
});
if(finish){
alert('sent');
}else{
alert('not sent');
}
return false;
});
</script>

Et une page php de distribution de mot de passe (pass.php) :

<?php
if(isset($_POST['request'])&&$_POST['request']=="opensesame"){
echo 'graphics';
}
?>

Maintenant, je peux faire en sorte qu'il alerte "graphiques", mais je n'arrive pas à faire correspondre les données avec la valeur d'entrée pour vérifier s'il s'agit du bon mot de passe ou non.

Qu'est-ce que je fais de travers et quels sont les dangers potentiels de l'authentification d'un mot de passe de cette manière ?

Answer 1

Le "A" de "AJAX" signifie asynchrone .

Le code qui suit l'appel à $post s'exécutera avant le contenu du fichier $post fonction. La valeur de finish sera toujours un jqXHR le résultat de l'opération (input==data) ? true : false seront ignorées.

Plus clairement :

var finish = $.post("pass.php", { request: "opensesame" }, function(data) {
   // THIS EXECUTES SECOND, and the return value is discarded
   return (input==data) ? true : false;
});

// THIS EXECUTES FIRST, with finish set to a jqXHR object
if(finish){
...

Vous devez repenser vos méthodes de vérification des mots de passe, ou utiliser des postbacks synchrones en ajoutant ce qui suit avant votre $.post appels :

$.ajaxSetup({async:false});

Ou en utilisant $.ajax et en passant async: false :

jQuery.ajax({
  type: 'POST',
  url: "pass.php",
  data: { request: "opensesame" },
  success: function(result) { ... },
  async:   false
});

Answer 2

La première chose à faire serait de nettoyer le code, qui est trop obscur, je le crains.

Je l'écrirais comme suit :

<script>

$('form').submit(function(event){
    event.preventDefault(); // stop the form from submitting
    var passwd = $('#password').val();
    var finish = $.post("pass.php", { request: passwd }, function(data) {
        if(data){
            alert('Success!');
        }else{
            alert('Failure :(');
        }
    });
});

</script>

Il convient de noter ce qui suit :

• AJAX POST est asynchrone, vous ne pouvez pas vérifier la présence d'une variable juste après l'avoir modifiée dans le callback, vous avez besoin de traiter les choses en le rappel.
• Vous doit vérifier le mot de passe sur le serveur, pas en javascript !
• En complément du point précédent, n'écrivez pas votre mot de passe à l'intérieur du javascript !

Et sur le serveur :

<?php

    if(isset($_POST['request']) && $_POST['request']=="opensesame"){
        echo 'true';
    }else{
        echo 'false';
    }

?>

Il convient de noter ce qui suit :

• Vous avez utilisé isset() pour vérifier l'existence de la variable, bon appel . Continuez à le faire.
• jQuery POST attend une valeur javascript du serveur (sauf indication contraire de votre part).
• C'est pourquoi mon code imprime soit 'true' o 'false' ce qui se traduit par une valeur booléenne en javascript.

• Je conseillerais de renvoyer un objet contenant les détails de l'erreur, comme celui qui suit :

  <?php
      $result = array('success'=>false, 'reason'=>'Unknown error.');
      if(isset($_POST['request'])){
          if(trim($_POST['request'])!=''){
              if($_POST['request']=='opensesame'){
                  $result['success'] = true;
                  $result['reason'] = 'Welcome home!';
              }else $result['reason'] = 'Password is wrong';
          }else $result['reason'] = 'Password must not be empty';
      }else $result['reason'] = 'Expected parameter "request"';
      echo json_encode($result);
  ?>

Answer 3

Vous devez sérialiser vos champs de saisie et toutes les données dans votre script :

$.post("pass.php", { request: $('form').serialize() }, function(data) { 
// ...

Tant que vous êtes sur votre propre serveur, je ne vois pas beaucoup de dangers potentiels, car il envoie une demande POST, ce qu'un formulaire normal ferait de toute façon.

Answer 4

Il n'est pas du tout sûr d'envoyer des données de cette manière, n'importe qui peut intercepter et lire les données que vous envoyez par ajax et la valeur renvoyée par ajax en utilisant firebug ou d'autres outils de ce type. Vous devez donc sérialiser ou assainir les champs et crypter les données avant de les envoyer.

& le code d'alerte après vérification de l'arrivée sera exécuté avant que la réponse ne vienne d'ajax (notez qu'il est asynchrone) et vous obtiendrez donc un objet stocké dans la variable d'arrivée.