Advance Level Login system with Logic captcha. Long ago, we talked about a simple easy login system. And today, I decided to improve the system. The new version will use the methods SHA1 + MD5 (with salt) to encode passwords. We also do not use cookies to store information, and will use the sessions. And, in this version I will implement an interesting logic captcha (where we will need to choose the correct answer in order to prove that we are human, not machine).
Live Demo
[sociallocker]
download in package
[/sociallocker]
Our final result
OK, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is main page code:
main_page.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Advance Level Login system with Logic captcha</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div class="example" id="main">
{login_form}
</div>
<div>
<hr style="clear:both;" />
<h4><a href="https://script-tutorials.com/creating-advance-level-login-system-with-logic-captcha/">back to original article page</a></h4>
</div>
</body>
</html>
Here are all easy, isn’t it?. I just put one key {login_form} here, which we will use later.
login_form.html
<div class="bar">
<a href="#" id="my_userarea">Log In</a>
</div>
<div style="display: none;" id="my_panel">
<div class="column">
<h3>My website title</h3>
<p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p>
<p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p>
</div>
<div class="column">
<form class="login_form" action="index.php" method="post">
<h3>Log In</h3>
<label>Nickname:</label><input type="text" name="username">
<label>Password:</label><input type="password" name="password">
<label>{captcha}</label><input type="text" name="captcha">
<input type="submit" name="LogIn" value="Login">
<a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a>
</form>
</div>
<div class="column">
<h3>Still not our member? Join us!</h3>
<p>Which gives us a registration? This gives us opportunity to become full member of our website. You can communicate with another member etc..</p>
<p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p>
</div>
<div style="clear:both"></div>
<hr>
<div class="close"><a id="my_close" class="my_close">Hide this panel</a></div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#my_userarea').click(function(){
$('div#my_panel').slideToggle('slow');
return false;
});
$('#my_close').click(function(){
$('div#my_panel').slideUp('slow');
return false;
});
});
</script>
<h3>You can use username "User1" of "User2" or "User3" and password "password" to login in system</h3>
This file is a template of login form (with three columns). I added here new one key: {captcha}. I will replace this key to value (question) of our new Logic captcha. Last template file – logout:
logout_form.html
<div class="bar">
<a href="index.php?logout" id="my_userarea">Log Out</a>
</div>
Step 2. CSS
Here are used CSS styles:
css/main.css
body{background-color:#888;margin:0;padding:0}
.example{position:relative;width:980px;height:700px;background-image:url(../images/background.jpg);border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
.bar{background-color:#444;height:24px;padding:10px}
a#my_userarea{font-size:12px;position:relative;display:block;overflow:hidden;color:#909090;-webkit-border-radius:11px;-moz-border-radius:11px;text-decoration:none;border-radius:11px;background:url(../images/button-user-area.gif) repeat-x 0 0;text-shadow:#000 1px 1px;float:right;padding:4px 10px 3px}
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px}
#my_panel .column{float:left;width:30%;padding:15px}
#my_panel .column h3{color:#fff}
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block}
#my_panel input[type=text],#my_panel input[type=password]{width:200px}
#my_panel input[type=submit]{background:url(../images/button.png) no-repeat scroll right 0 transparent;width:72px;height:30px;color:#fff;border-width:0}
.more{background:url(../images/more-left.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;float:right;padding-left:11px;text-align:center;text-decoration:none}
.more span{background:url(../images/more-right.png) no-repeat scroll right 0 transparent;color:#fff;display:block;height:30px;line-height:29px;padding:0 19px 0 8px}
.more:hover{text-decoration:none;background-position:0 bottom}
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom}
#my_panel .close{text-align:center}
#my_panel .close a{color:#07BBE2;cursor:pointer}
Step 3. JS
For our example we only need jQuery library (for the effect of sliding)
js/jquery-1.4.4.min.js
Step 4. PHP
Our most important part of project – login functionality with captcha.
index.php
<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
// login system init and generation code
$oAdvancedLoginSystem = new AdvancedLoginSystem();
$sLoginForm = $oAdvancedLoginSystem->getLoginBox();
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
// class AdvancedLoginSystem
class AdvancedLoginSystem {
// variables
var $aExistedMembers; // Existed members array
var $aQuestions; // Logic questions
// constructor
function AdvancedLoginSystem() {
session_start();
$this->aExistedMembers = array(
'User1' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing'), // hash = sha1(md5('password') . 'testing');
'User2' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing'),
'User3' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing')
);
$this->aQuestions = array(
1 => array('q' => 'Winter hot or cold?', 'a' => 'cold'),
2 => array('q' => '4 - 1 = ?', 'a' => '3'),
3 => array('q' => 'Sun is blue or yellow?', 'a' => 'yellow'),
4 => array('q' => 'Type "god" to process', 'a' => 'god'),
5 => array('q' => '4 + 3 = ', 'a' => '7'),
6 => array('q' => '10 > 5 ? (yes/no)', 'a' => 'yes')
);
}
// get login box function
function getLoginBox() {
ob_start(); // get template of Logout form
require_once('logout_form.html');
$sLogoutForm = ob_get_clean();
if (isset($_GET['logout'])) { // logout processing
if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass']))
$this->performLogout();
}
if ($_POST['username'] && $_POST['password'] && $_POST['captcha']) { // login processing
if ($this->checkLogin($_POST['username'], $_POST['password'], false) && $this->aQuestions[$_SESSION['captcha']]['a'] == $_POST['captcha']) { // successful login
unset($_SESSION['captcha']);
$this->performLogin($_POST['username'], $_POST['password']);
return $sLogoutForm . '<h2>Hello ' . $_SESSION['member_name'] . '!</h2>';
} else { // wrong login
ob_start(); // get template of Login form
require_once('login_form.html');
$sLoginForm = ob_get_clean();
$sCaptcha = $this->getLogicCaptcha();
$sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm);
return $sLoginForm . '<h2>Username or Password or Captcha is incorrect</h2>';
}
} else { // in case if we already logged (on refresh page):
if ($_SESSION['member_name'] && $_SESSION['member_pass']) {
if ($this->checkLogin($_SESSION['member_name'], $_SESSION['member_pass'])) {
return $sLogoutForm . '<h2>Hello ' . $_SESSION['member_name'] . '!</h2>';
}
}
// otherwise - draw login form
ob_start();
require_once('login_form.html');
$sLoginForm = ob_get_clean();
$sCaptcha = $this->getLogicCaptcha();
$sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm);
return $sLoginForm;
}
}
// perform login
function performLogin($sName, $sPass) {
$this->performLogout();
$sSalt = $this->aExistedMembers[$sName]['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
$_SESSION['member_name'] = $sName;
$_SESSION['member_pass'] = $sPass;
}
// perform logout
function performLogout() {
unset($_SESSION['member_name']);
unset($_SESSION['member_pass']);
}
// check login
function checkLogin($sName, $sPass, $isHash = true) {
if (! $isHash) {
$sSalt = $this->aExistedMembers[$sName]['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
}
return ($sPass == $this->aExistedMembers[$sName]['hash']);
}
// get logic captcha (question)
function getLogicCaptcha() {
$i = array_rand($this->aQuestions);
$_SESSION['captcha'] = $i;
return $this->aQuestions[$i]['q'];
}
}
?>
What we can see here: At the top, we simply creating instance of our class and call the method to render the login form. In the class constructor, we define an array of users with access to the system. Notice that now we have not only user name and it hashed password, but also Salt. All because we’re going to use SHA1 + MD5 encoding methods together to make more strong encryption. Also, I’m not forcing you to hardcode your users in class constructor like me, you can always store the user data anywhere else (in the database, or other cache files).
In addition to users, in the class constructor we see another array – this is our innovation – the logic captcha. Here I wrote an array of questions and answers for our captcha.
I hope that the rest logic is pretty clear to you. In the beginning we draw the login form. In this form we will draw our captcha (the question), and saving question ID in browser sessions. Suppose a user logs into the system. Here we checking entered data, hashing (SHA1+MD5+Salt) entered password (for verification with real hash code), and we checking entered answer from our captcha (as you remember – we already saved its ID in sessions). If everything correct – we allow to log in. Otherwise – we will draw notification (Username or Password or Captcha is incorrect). During login – we saving few params in sessions (member_name, member_pass) – possible you will use these params somewhere else. And last point – in case if we already have some info in sessions (member_name, member_pass) and this is correct params – we believe that the user is still in the system (maybe he just opened another page at your website via navigation).
Live Login Demo
Conclusion
I hope today’s article was very interesting for you. Who knows, maybe you decide to use it for your own site. Do not forget to thank for our work. Good luck in your work!
Thanks and i appreciate your effort, but the code doesn’t work. It says ; incorrect password and username ‘ please fix it. Thanks.
Hello SImon,
Why? – Login process works find, I have just tested it. Please be more careful with register of letters, usernames starts with upper register, password – just ‘password’
very nice work and great. I would like only to know how can i check registration with function. I have already draw my form, but i don;t see your funtion to check inside “index.php”. May i have please.
Simon, all work great, please try to check you index.php where you see array for user and there is also formula to change password and ‘salt’ as you prefer.
Hello dragonflai,
If you want to validate form at client side, you can add your own validation JS and add ‘onsubmit’ for this form, but if you want to add your validation at server side, please review my code in index.php, lines 52 and after
where is sql code for this??
Hi Prince, there is no any SQL file for this tutorial, it doesn’t use database.