Ajax login issues

Question

I'm having issues with an Ajax login function. There was another question similar to mine that I was able to find but it proved no use.

I have no idea what is the issue, this works on another program as well with no issues, hopefully someone can see my mistake

From testing I think the issue is in the "checkLogIn" function because when I run the application the alert within the function shows

Ajax:

$("#checkLogIn").click(function()
{

    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: rootURL + '/logIn/',
        dataType: "json",
        data: checkLogIn(),
    })
        .done(function(data)
        {
            if(data == false)
            {
                alert("failure");
            }
            else
            {
                alert("Success");
                $.mobile.changePage("#page");
            }
        })
        .always(function(){})
        .fail(function(){alert("Error");});
});

function checkLogIn()
{       
    alert();
    return JSON.stringify({
        "userName": $("#enterUser").val(),
        "password": $("#enterPass").val(),
    });
}

I'll also include the PHP but the PHP works 100% after testing it.

PHP:

$app->post('/logIn/', 'logIn');
function logIn()
{
    //global $hashedPassword;

    $request = \Slim\Slim::getInstance()->request();
    $q = json_decode($request->getBody());
    //$hashedPassword = password_hash($q->password, PASSWORD_BCRYPT);


    $sql = "SELECT * FROM users where userName=:userName AND password=:password";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);         
        $stmt->bindParam("userName", $q->userName);
        $stmt->bindParam("password", $q->password);
        $stmt->execute();
        //$row=$stmt->fetch(PDO::FETCH_ASSOC);
        //$verify = password_verify($q->password, $row['password']);

        $db = null;
        //if($verify == true)
        //{
        //  echo "Password is correct";
        //}
        //else
        //  echo "Password is incorrect";

    echo "Success";

    } catch (PDOException $e) {
        echo $e->getMessage();
    }
}

I have commented out any and all hashing until I can get this working properly

Answer 1

There is no problem with the ajax script. From my assumption you always get Error alert. That is because you added dataType: "json", which means you are requesting the response from the rootURL + '/logIn/' as json Object. But in the php you simply echoing Success as a plain text. That makes the ajax to get into fail function. So, You need to send the response as json. For more details about contentType and datatype in ajax refer this link.

So you need to change echo "Success"; to echo json_encode(array('success'=>true)); in the php file. Now you'll get Success alert. Below I added a good way to handle the json_encoded response in the php file.

$app->post ( '/logIn/', 'logIn' );
function logIn() {
    global $hashedPassword;
    $request = \Slim\Slim::getInstance ()->request ();
    $q = json_decode ( $request->getBody () );
    $hashedPassword = password_hash($q->password, PASSWORD_BCRYPT);

    $sql = "SELECT * FROM users where userName=:userName";
    try {
        $db = getConnection ();
        $stmt = $db->prepare ( $sql );
        $stmt->bindParam ( "userName", $q->userName );
        $stmt->execute ();
        $row=$stmt->fetch(PDO::FETCH_ASSOC);
        $verify = false;
        if(isset($row['password']) && !empty($row['password']))
            $verify = password_verify($hashedPassword, $row['password']);

        $db = null;
        $response = array();
        $success = false;
        if($verify == true)
        {
            $success = true;
            $response[] = "Password is correct";
        }
        else
        {
            $success = false;
            $response[] = "Password is incorect";
        }

        echo json_encode(array("success"=>$success,"response"=>$response));
    } catch ( PDOException $e ) {
        echo $e->getMessage ();
    }
}

And I modified the ajax code. There I showed you how to get the response from the json_encoded Object.

$("document").ready(function(){
    $("#checkLogIn").click(function()
    {
        var post_data = JSON.stringify({
            "userName": $("#enterUser").val(),
            "password": $("#enterPass").val(),
        });
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: rootURL + '/logIn/',
            dataType: "json",
            data: post_data,
        })
        .done(function(data)
        {
            // data will contain the echoed json_encoded Object. To access that you need to use data.success.
            // So it will contain true or false. Based on that you'll write your rest of the code.
            if(data.success == false)
            {
                var response = "";
                $.each(data.response, function(index, value){
                    response += value;
                });
                alert("Success:"+response);
            }
            else
            {
                var response = "";
                $.each(data.response, function(index, value){
                    response += value;
                });
                alert("Failed:"+response);
                $.mobile.changePage("#page");
            }
        })
        .always(function(){})
        .fail(function(){alert("Error");});
    });
});

Hope it helps.