如何使用 jquery 和 php 验证密码？

Question

我以前从未这样做过，而且我还没有在 Google 或 StackOverflow 上找到太多帮助。

这是我所拥有的：密码输入：

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

还有一些 jQuery 来检查密码：

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

还有一个密码分配的php页面（pass.php）：

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

现在，我可以让它提醒“图形”，但我不能让它将数据与输入值匹配以检查它是否是正确的密码。

我做错了什么，以这种方式验证密码的潜在危险是什么？

Answer 1

“AJAX”中的“A”代表异步。

调用$post 之后的代码将在$post 函数的内容之前执行。 finish 的值将始终是 jqXHR 对象，(input==data) ? true : false 的结果将被忽略。

更清楚：

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

您需要重新考虑密码检查的方法，或者通过在 $.post 调用之前添加以下内容来使用同步回发：

$.ajaxSetup({async:false});

或者通过使用$.ajax 并传递async: false：

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

Answer 2

首先要做的是清理代码，恐怕它太晦涩了。

我会这样写：

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

注意事项：

• AJAX POST 是异步的，您无法在回调中更改变量后立即检查变量，您需要在回调中处理内部的内容。
• 您必须在服务器上验证密码，而不是在 javascript 中验证！！
• 补充上一个项目符号，不要在 javascript 中写入您的密码！

在服务器上：

<?php

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

?>

注意事项：

• 您使用isset() 来检查变量是否存在，好调用。继续做。
• jQuery POST 需要来自服务器的 javascript 值（除非您另有说明）。
• 这就是我的代码打印'true' 或'false' 的原因，这在javascript 中转换为布尔值。

• 我建议返回一个带有错误详细信息的对象，如下所示：

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

您必须将输入字段序列化为脚本中的所有数据：

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

只要你在自己的服务器上，我看不到太多潜在的危险，因为它发送一个普通表单无论如何都会做的 POST 请求。

Answer 4

这样发送数据是非常不安全的，任何人都可以使用firebug或其他类似工具截取并读取您通过ajax发送的数据以及ajax返回的值。因此，您应该对字段进行序列化或清理，并在发送数据之前对其进行加密。

& 检查完成后发出警报的代码将在来自 ajax 的响应之前执行（注意它是异步的），因此您将获得一个存储在完成变量中的对象。