javascript - Login into a website and get html from a page

Question

I'm a little bit confused, I've read about a lot about my problem but without finding an answer. I have to login into a website and fetch some HTML from a page reachable only after logging in. I did this in the past with Visual Basic, using the IE Object and acting like a script, but this gave me a lot of problems, mostly because it's so slow.

My website it's easy accessible just using a POST request like <url>/j_security_check?j_username=username&j_password=pass what I don't know is how to check whether or not I'm logged in, how to reach the page using the created session, and how to fetch the HTML (mostly generated by JavaScript)

I never created a login form before, and I don't know how sessions work. I'm also confused about what the header is needed for, and what a Request and Response represents given by the server.

If someone could point me in the right direction to learn these concepts I would highly appreciate that.

Answer 1

Think of SESSIONS as variables in the server's memory. They persist as cookies stored on the user's computer. Here are two brief but helpful explanations: here and here

Here is a simplified code example of a login system in PHP. When a login succeeds or fails, you either (a) redirect the user to a secured page or (b) return them to a public page to try again. In PHP code, you can redirect them using the headers() method, or in javascript with window.location.href="webpage.html";. The above example uses the js method, and it also demonstrates how to secure web pages to make some pages inside and some public.

Whether you choose the PHP method or the javascript method (to redirect to a different page) depends on how you process the login/password from the user. If you use HTML forms, they work by POSTing the data to a secondary page -- actually navigating to that other page -- processing the data, and doing something with it. This can all happen in PHP.

The most common method these days involves remaining on the same page (not navigating away from it) and sending only the data to a secondary PHP page. That page receives the user data (id/pw), compares these credentials to what you have stored in a database (or even just to a variable inside that very PHP file), and ECHOs a response back to the login page. The response is received inside a success: function, and you then use the javascript code to redirect the user to an inside page.

Sending / receiving data to a secondary PHP page while remaining on the original page is called AJAX. It's pretty simple. Here is a brief overview with some simple examples. I urge you to copy the code to your server and make the examples work - change a few things to see how each one works.

---

Note that there are two ways to send data from one web page to another: GET and POST. The most obvious difference is that the GET method works by appending variables/values to the URL, as you displayed in your question:

<url>/j_security_check?j_username=username&j_password=pass

The POST method is more hidden -- you need to use developer tools to see the data -- so it is preferred.

GET and POST originated with HTML forms, and most people immediately associate the two. In these modern days of AJAX, there is no need for <form> tags at all. In fact, if you use a <form></form> structure with AJAX you must suppress their default action of navigating to the secondary page:

<form id="myForm" action="anotherpage.php" method="GET">
</form>

$('#myForm').submit(function(event){
    event.preventDefault(); //suppress default form action
    //Do some stuff
    $.ajax({
        type: 'post', //this is where you now do the GET or POST
         url: 'my_secondary_file.php',
        data: 'varname=' + field_value_variable + '&nuthervar=' +nutherval,
        success: function(d){
            if (d == 'whatever you echo from php') window.location.href = 'my_secret_page.php'
        }
    });
});