Create a simple password authentication for HTML page

In this post, you can create a simple password authentication system using php using which you can protect you sensitive information. Basically the complete authentication system is based on a single php file. In this file, you need to store the username and the password, which you need to enter in order to login to view you secured data. The complete page is overlayed by a div which when entered the correct credentials, disappears so that you can see the secured content.

Demo


The Layout When The Page Is Opened.


The Layout When Incorrect Credentials are Entered.


The Secured Content Displayed When Correct Credentials Entered.


The Content of the PHP file
<html>
<head>
<style>
#mask{   
  background-color: aliceblue;
  overflow: overlay;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9000; 
  }
#mask_lay { 
position:absolute;
background-color: cornsilk; 
top:200px;
left:40%;
width :200px;
height:110px;
z-index:9999;
border: black;
border-style: groove;
border-radius: 30px;
padding: 10 10 10 10;
}
</style>
</head>
<body>
<title>This is a Sample Lock Page</title>
<?php
if(isset($_POST['add']))
{
	$pass='password'; // Your Password Goes here
	$user='username'; // Your Username Goes here
	if(! get_magic_quotes_gpc() )
	{
		$input_pas = addslashes ($_POST['input_pas']);
		$input_usr = addslashes ($_POST['input_usr']); 
	}
	else
	{
		$input_pas = $_POST['input_pas'];
		$input_usr = $_POST['input_usr'];
	}
	if($pass == $input_pas && $user == $input_usr)
	{
		?>
		// Your Content Goes Here
		<center><b>Hii i am the the Protected Page.<b></center>
		<?php
	}
	else
	{
	?>
		<div id="mask">
		<center style="
    width: 100%;
    background-color: bisque;
"><b>Incorrect Password.<b></center>
		<div id="mask_lay">
		<form  method="post" action="<?php $_PHP_SELF ?>" style="padding-left: 13px; padding-top: 20px;">
			<input name="input_usr" type="text" id="input_usr"  placeholder=<?php echo $input_usr; ?> required style="height: 30px;" /><br/>	
			<input name="input_pas" type="password" id="input_pas"  placeholder="Password" required style="height: 30px;" />
			<input name="add" type="submit" id="add" value="SUBMIT" style="
			background-color: #68b12f;    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));    background: -webkit-linear-gradient(top, #68b12f, #50911e);    background: -moz-linear-gradient(top, #68b12f, #50911e);    background: -ms-linear-gradient(top, #68b12f, #50911e);    background: -o-linear-gradient(top, #68b12f, #50911e);    background: linear-gradient(top, #68b12f, #50911e);    border: 1px solid #509111;    border-bottom: 1px solid #5b992b;    border-radius: 3px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    -ms-border-radius: 3px;    -o-border-radius: 3px;    box-shadow: inset 0 1px 0 0 #9fd574;    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;    -o-box-shadow: 0 1px 0 0 #9fd574 inset;    color: white;    font-weight: bold;    padding: 6px 20px;    text-align: center;    text-shadow: 0 -1px 0 #396715;
			height: 30px;">	
		</form>
		</div>
		</div>
	<?php
	}
}
else
{
?>
<div id="mask">
<div id="mask_lay">
<form  method="post" action="<?php $_PHP_SELF ?>" style="padding-left: 13px; padding-top: 20px;">
	<input name="user_name" type="text" id="user_name"  placeholder="Username" required style="height: 30px;" /><br/>	
    <input name="input_pas" type="password" id="input_pas"  placeholder="Password" required style="height: 30px;" />
	<input name="add" type="submit" id="add" value="SUBMIT" style="
    background-color: #68b12f;    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));    background: -webkit-linear-gradient(top, #68b12f, #50911e);    background: -moz-linear-gradient(top, #68b12f, #50911e);    background: -ms-linear-gradient(top, #68b12f, #50911e);    background: -o-linear-gradient(top, #68b12f, #50911e);    background: linear-gradient(top, #68b12f, #50911e);    border: 1px solid #509111;    border-bottom: 1px solid #5b992b;    border-radius: 3px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    -ms-border-radius: 3px;    -o-border-radius: 3px;    box-shadow: inset 0 1px 0 0 #9fd574;    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;    -o-box-shadow: 0 1px 0 0 #9fd574 inset;    color: white;    font-weight: bold;    padding: 6px 20px;    text-align: center;    text-shadow: 0 -1px 0 #396715;
    height: 30px;">	
</form>
</div>
</div> 
<?php
}
?>
</body>
</html> 

The Description Goes Here
Initially the file runs the else part, because the Submit button is not clicked, when clicked it takes the input_usr i.e. the username and the input_pas i.e. the password and checks with the credentials mentioned in the file. In this code, the username is username and the password is password, So when correctly given the credentials it shows the secured content.

Comments

Popular posts from this blog

Non Restoring Division Algorithm Implementation in C

Bit Stuffing Code Implementation in Java

Hackerrank Modified Kaprekar Numbers Solution