Redirect to an application page Not on the same server after login

Question

I have a HTML5 app with a log in screen. When I enter the details, it goes out to an external server, runs a php file called login.php and check the details.

If the details are correct I need it to redirect back to the HTML5 app to the page with id #home on the index.html file.

If the index.html and login.php are both sitting together on the server, a header method going to work fine. But now, the html file is resting on a mobile phone as a HTML5 app, which reaches out to the server (which is possible - I have the server url). Checks for credentials and redirects. How is it going to redirect back to my app on the phone? There is no URL for the app on the phone.

Attempted with ajax too but nothing happens.

P.S: If you plan to flag this, read through and understand the issue first. Some text match doesn't mean its the same question.

First page on the app where you enter log in details:

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="scripts.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
    </head>
        <body>
            <div data-role="page" id="loginForm">
                <form id="form1" name="form1" method="POST" action="http://www.examplewebsite.com/login.php">
                    <input type="text" name="user" id="user" placeholder="Username"/>

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

                    <input type="submit" name="submit" value="Login" />
                </form>
            </div>
            <div data-role="page" id="home">
                <h1>Logged In</h1>
            </div>
        </body>
    </html>

Script to check Log in. This php file rests on the server side.

//DB Log in credentials
$hostName = 'localhost';
$dbUser = 'fakeuser';
$dbPass = 'fakepass';
$dbName = 'fakedb';
$userTable = "faketable";

//Connect to DB
$conn = mysql_connect($hostName, $dbUser, $dbPass) or die("not connecting");
$dbSelect = mysql_select_db($dbName) or die("no db found");

//Obtain input username and password from the client
$username = $_POST["user"];
$password = $_POST["pass"];

//Check for MySql Injections
if(ctype_alnum($username) && ctype_alnum($password)){
    $query1 = mysql_query("SELECT * FROM $userTable WHERE username='$username'");
    //query will return 1 if the username exists in the database
    $numrows = mysql_num_rows($query1);

    if($numrows == 1){
        //checking if the password matches the username now
        $query2 = "SELECT password FROM $userTable WHERE username='$username'";
        $result2 = mysql_query($query2);        
        $row = mysql_fetch_array($result2, MYSQL_ASSOC);
        $pass = $row['password'];

        if($password == $pass){
            //If successful, redirect to the #home page
            //anything I can do here to redirect back to #home on my app?
        }
        else
            echo "Password incorrect";
    }
    else
        echo "username incorrect" . $numrows;
}
else{
    echo "Not alpha Numeric Input!!";
}

Attempted Ajax portion

var isLogged = false;
/**
 * Method used to log into the application
 */
$(document).on("pageinit", "#loginForm", function () {
    $("#form1").on("submit", function (event) {
        event.preventDefault();
        $.ajax({
            type: "GET",
            url: "http://www.examplewebsite.com/login.php",
            data: $("#form1").serialize(),
            success: function (data) {
                console.log(data);
                if (data.loggedIn) {
                    isLogged = true;
                    $.mobile.changePage("#home");
                } else {
                    alert("You entered the wrong username or password. Please try again.");
                }
            }
        });
    });
});

score 1 · Answer 1 · edited May 23 '17 at 10:27

Where is loggedIn defined? You never get into this scope if (data.loggedIn) { }, or?

Have you tried to "return" a json encoded array and actually use that data?

As I see it you are not really using the different errors the user might run into, i.e. "Password incorrect", "username incorrect" and "Not alpha Numeric Input!!".

You might want to do something like:

if (data.loggedIn) { /* Went well */ }
else if (data.passIncorrect) { /* Password incorrect */ }
else if (data.userIncorrect) { /* User incorrect */ }
else if (data.passIncorrect) { /* NaN */ }

You might be able to find more info on the subject here or here.

I don't know if this is any help what so ever and I might even be off on a tangent here.

Tnks but I am perfectly able to log in. Question is how do I redirect after loggin in. The ajax portion is just an attempt. I am not sure. I am not retrieving any Json objects which those set of codes actually suggests. All I want is a redirect. Will take a look at your links thanks. — cubeb, Oct 18 '15 at 17:59

Redirect to an application page Not on the same server after login

1 Answers1