如何使jQuery / Ajax日志返回“错误的凭据”错误？

Question

I'm making a dynamic PHP page with MySQL that has users log in. I recently changed the login, to jQuery/AJAX to make it more smooth and not lose the current page users are in. The thing is that when I miss my log in credentials it doesn't how any message and I want it to do so.

Here is my form :

<form id="ajax-login-form" action="session/login.php" method="post" role="form" autocomplete="off">
                <div class="form-group">
                    <label for="username">Login</label>
                    <input type="text" name="u" id="username" tabindex="1" class="form-control" placeholder="Log in" value="" autocomplete="off">
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="p" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-5 pull-right">
                            <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
                        </div>
                    </div>
                </div>
            </form>

My jQuery/Ajax :

$(document).ready(function () {
//From insert
$("#login-submit").click(function () {
    var $form = $('#ajax-login-form');
    $form.submit(false);
    $.post($form.attr("action"), $form.serializeArray(), function (info) {
        $("#result").html(info)
    })
    location.reload();
});
});

And finally my php code

<?php
session_start();
$lig = mysql_connect("localhost", "root","") or
die ("Problema na ligação ao servidor MYSQL");
mysql_select_db("demo", $lig);

$u=$_REQUEST['u'];
$p=$_REQUEST['p'];

$sql="select numuti,nome,nomeutilizador,codtipo,reset from utilizadores where nomeutilizador='$u' and password=md5('$p')";
$res=mysql_query($sql);
if (mysql_num_rows($res) == 1)
{
    $lin = mysql_fetch_array($res, MYSQL_ASSOC);
        $_SESSION['user'] = $lin['nomeutilizador'];
        $_SESSION['nivel'] = $lin['codtipo'];
        $_SESSION['reset'] = $lin['reset'];
        //$_SESSION['foto']  = $lin['imagem'];
        $_SESSION['nome']  = $lin['nome'];
        $_SESSION['cod']= $lin['numuti'];
}else{
echo "<div class='alert alert-danger'>
            <strong><center>Login Inválido, Tente Novamente</center></strong>
            </div>";
}
?>

This is probably a duplicate question, but I couldn't find a reliable answer to my issue, I tried making the errors with divs as you can see in my login.php page.

Answer 1

Basics

If you are using old mysql_connect function vulnerable to SQL injections you do not need any other security .. your system will be permeable.

First you need to do is switch to better methods like PDO.

jQuery

I recommend to use submit() function instead of click() and ajax() instead of post() to better manipulation with data.

$(document).ready(function () {

  $('#ajax-login-form').submit(function(e) {
      var form = this;

      e.preventDefault();
      var username = $("#username").val();
      var password = $("#password").val();

      $.ajax({
          type: 'POST',
          url: 'Your-login-url',
          data: {
              username: username,
              password: password
          },
          success: function(data) {
              // do your PHP login and echo 1 if authentication was successfull
              if(data === 1) {
                  form.submit();
              } else {
              // show alert or something that user has wrong credentials ...
                  $("#error_notif").show();
              }
          }
      });
  });

});

HTML

Another thing is error notification. I like to add error div right into the form or form container but set it as hidden. You can show it after jQuery Ajax ends with 0.

<div id="error_notif">You used wrong credentials.</div>

<style>
#error_notif {
   display:none;
}
</style>