Programmatically Logging In to a Website with Flutter Part-1

Hello! My name is Utkarsh Sharma, and I am one of the three developers of the IPEC Student App (android & ios). IPEC Student App is an application we developed for mobile devices which attempts to make the most commonly used features of the IPEC Live website easily available for students.

In this post, we will analyze how to log in to a website using Google chrome. This is the very first step for programmatically logging in to a website.

Step-1 Analyze Http requests & form data

To log in to a website, you need to know the following values :

• Login page URL.
• Login form data.
• URL for authentication.
• HTTP request / response header.

We are going to use Google Chrome to get the above data. First, open the login page of the website. Then right-click anywhere and select "Inspect element" > select "Network" tab > Tick "Preserve log".

Just fill in the login details on the login page and press the login button. Now you have something like this...

Selecting the first request we get something like this...

If you are a beginner this might seem to be pretty confusing. So, let us just give some overview of what is happening. In the above image, we can see that It is a POST HTTP request. Also, we can see HTTP request/ response headers.

Selecting "Payload" Tab we can see the form data that is been submitted to server.

as we can note these are various form fields and the last two fields are txtUser and txtPassword these two fields contain username and password.

Now let us see what we have :

• Login page URL. ✅
• Login form data. 🟡
• URL for authentication.✅
• HTTP request / response header.✅

We have almost everything but we still need to figure out how to get the randomly generated Form data field value like for example __EVENTVALIDATION, etc.

Step-2 Getting form values

Let's go back to the login page and try to figure out where do we can find __EVENTVALIDATION & __VIEWSTATE value. In this case, we can get the values of these fields in the HTML of the webpage.

Now we have figured out what value to get and how to get it. It's now time figure to out which request to be made in what order.

Step-3 Http requests overview

1. GET request to the login page URL.
   • To get form field data from HTML
2. POST request with form data.
   • 
   • As we can see status code we get from the server is 302 which means redirect to a given location.
   • We also store cookies.
3. GET request to the redirect location with (Request headers with cookies and some other fields)

VOILA🎉🎉! If you have followed and understood the tutorial thus far, you have already cleared half of the steep learning curve of connecting to websites you do not own.
We are done with analyzing part. In the next post, we'll learn how to implement this in flutter using the dio package.