Introduction
In this article I will demonstrate to you how to login into a website programmatically using plain HTML
Background
While implementing a Single-Sign-On functionality, we need to login into other web applications without manually entering the credentials.
The real problem occurs when we need to login into third party websites where we do not have access to the website code and database.
In that case you need to simulate the login procedure programmatically on the client side itself so that all the client side cookies
and other authentication stuff is created on the client machine itself.
Using the code
Using this approach, you can login into any website programmatically. I am using codeproject.com website for the demonstration.
The first step is to get the HTML source for the login page from the source of the webpage. I am using the HTML for these three HTML elements 'Email',
'Password', and 'SignIn' button. Rightclick on the webpage > View Source and copy the HTML and
JavaScript (if any) related to Login functionality.
This is the HTML I picked from the page source.
<script type="text/javascript">
function doSubmit(secure) {
if (secure)
document.subForm.action = "https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2f"
else
document.subForm.action = "https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2f"
document.subForm.submit();
return true;
}
</script>
<a name="SignUp"></a>
<form name="subForm" id="subForm"
action="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2f"
method="post" class="tight">
<input id="FormName" name="FormName"
value="MenuBarForm" type="hidden" />
Email <input class="small-text" type="text"
name="Email" id="Text1" style="width:150px" />
Password <input class="small-text" type="password"
name="Password" id="Password1" style="width:60px" />
<input type="submit" value="Sign in" class="button"
onclick="return doSubmit(false);" />
We need to do a little clean-up of the HTML obtained. Here is the HTML I retained after cleaning the unwanted elements.
<input type="text" name="Email" id="Email" style="width: 150px" />
Password
<input type="password" name="Password" id="Password" style="width: 60px" />
<input type="submit" value="Sign in" class="button" />
In the JavaScript function doSubmit() above, you can see that the page is submitted to the URL
https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2f.
Now we need to simulate the POST action to be fired on the same URL from our code. For this, I will make the following change to my HTML form tag like this.
<form method="post" action="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2f">
<o:p>
This is a important step to note. With this change, my HTML page will not post to my server, but will post to the URL mentioned in the 'action'.
My login form will look like this in the browser
Enter your codeproject.com credentials in this form and click the Sign In button. You will be redirected to codeproject.com and will be logged into the website.
This approach can be used to login into any website which uses a username-password combination for authentication. What you need to login is the HTML source
of the login page of the website you need to login and fire the HTTP POST action on the login URL of the destination website. You need to find out where the POST action is fired since the URL of the login page is not necessarily the URL where the POST is fired similar to the one demonstrated here.
You can download the attached HTML page for a quick demonstration of programmatic logging into codeproject.com .
Note: I am a member of codeproject.com since the last 6 years and have been answering the quick questions and sometimes posting questions.
I am a regular reader of codeproject.com weekly newsletters. But this is my first article on codeproject.com. Please let me know your suggestions to improve my article.
History
11 Sep 2012- Article submitted to codeproject.com.
