Programmatic Login to CodeProject.com Website

bbirajdar

Rate me:

5.00/5 (1 vote)

11 Sep 2012CPOL2 min read

29.7K

745

How to login into a website programatically.

Download source code - 480 B

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.

HTML

<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.

HTML

<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.

HTML

<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

bbirajdar

Web Developer

India

Software developer by profession, working for a service and product based organisation in India.

Career graph:
Software Programmer since 2002.
Web Developer in ASP.NET since 2004.

Interests:
I love reading the blogs and articles of technology experts. I love codeproject and stackoverflow .

I love to share knowledge and help the programmers. I appreciate if some body corrects my code or my concepts which helps me learn.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><script type="text/javascript">var x_sy = {};</script><script type="text/javascript" src="/nonauth/getTranslations.js.php?v=4445"></script><script type="text/javascript" src="/nonauth/getLoginType.js.php?v=4445&dest=&internal=0"></script> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <script type="text/javascript"> var x_56s = true; var kerio = {lib:{}}; </script> <script type="text/javascript" src="defaults.js?v=4445"></script>  <script type="text/javascript"> var x_32x = x_sw.x_t3 ? x_sw.x_t3 + '/int/login/index.js?v=4445' : '/weblib/int/login/index.js?v=4445'; document.write('<script type="text/javascript" src="' + x_32x + '"><\/script>'); </script> <script type="text/javascript"> kerio.login.x_56t({ x_56u: undefined === kerio.engine ? ["en"] : kerio.engine.acceptedLanguages, x_38v: undefined === kerio.engine ? ["cs", "de", "en", "es", "fr", "hr", "hu", "it", "ja", "nl", "pl", "pt", "ru", "sk", "sv", "zh"] : x_sw.x_1dg }); </script> <link rel="stylesheet" href="../nonauth/style/pda.css" media="all" type="text/css" /></head> <body> <noscript><div id="upSpacer"></div><div class="contentDiv"><form style="margin: 0pt;" method="post" action="/internal/dologin.php?internal=0"><table width="230" cellpadding="4" align="center"><tr bgcolor="#e73a27"><td><img src="../nonauth/gfx/control-logo.gif" width="200" alt="" ></td></tr><tr><td class="label">Username</td></tr><tr><td><input type="text" name="kerio_username" size="30" ></td></tr><tr><td class="label">Password</td></tr><tr><td><input type="password" name="kerio_password" size="30" ></td></tr><tr><td><input type="submit" value="Login"></td></tr></table></form></div></noscript>  <div id="up-spacer"></div> <div id="upper-message-container"></div> <div id="main-container" style='visibility: hidden;'>  <div id="admin-icon"></div>  <div id="top"></div> <div id="body-container">  <div id="logo"><h1 id="product-name"></h1></div> <div id="error-message">  <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" width="32"><div id="warning-icon"></div></td> <td valign="middle"><div id="error-message-text"></div></td> </tr> </table> </div> <form name="container" action="/server/login" method="post" id="container">  <table align="center" width="248"> <tr> <td id="username-container"></td> </tr> <tr> <td id="password-container"></td> </tr> </table>  <div id="input-fields"></div>  <table align="center" border="0" cellpadding="0" cellspacing="0" style ="width:255px;"> <tr> <td align="left" valign="top" id="loginbutton-container"></td> <td align="right"> <table border="0" cellpadding="0" cellspacing="0" > <tr>  <td valign="bottom" id="remembercheckbox-container"></td> <td valign="bottom" style="white-space: nowrap;" align="left" id="rememberlabel-container"></td> </tr> </table> </td> </tr> </table>  <div id="hiddenfields-container"> </div> </form> </div>  <div id="bottom"></div> </div> <div id="lower-message-container"></div> <script type="text/javascript"> // Input elements cannot be created in onload event handler, // because password autocomplete is not working in FF. if (document.getElementById) { x_56s = false; kerio.login.x_56v.x_56w(); if (undefined === window.onload) { // Windows Mobile < 6.5 kerio.login.x_56v.x_x8(); } } </script> </body> <script type="text/javascript"> if (x_56s) { alert('Unsupported browser!'); // e.g. Windows Mobile 2003 } </script> </html>

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Programmatic Login to CodeProject.com Website

Introduction

Background

Using the code

History

License

Comments and Discussions