java短信验证码验证逻辑
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).
带有逻辑验证码的高级登录系统。 很久以前，我们讨论了一个简单的简单登录系统 。 今天，我决定改进系统。 新版本将使用SHA1 + MD5(加盐)方法对密码进行编码。 我们也不使用cookie来存储信息，而是使用会话。 并且，在此版本中，我将实现一个有趣的逻辑验证码(在这里我们需要选择正确的答案以证明我们是人，而不是机器)。
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
我们的最终结果 (Our final result)
OK, download the example files and lets start coding !
好，下载示例文件，开始编码！
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML. This is main page code:
和往常一样，我们从HTML开始。 这是主页代码：
main_page.html (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://www.script-tutorials.com/creating-advance-level-login-system-with-logic-captcha/">back to original article page</a></h4>
</div>
</body>
</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://www.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}，我们将在以后使用。
login_form.html (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>
<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:
该文件是登录表单的模板(三列)。 我在这里添加了一个新的键：{captcha}。 我将把这个密钥替换为我们新的逻辑验证码的值(问题)。 上一个模板文件–注销：
logout_form.html (logout_form.html)
<div class="bar">
<a href="index.php?logout" id="my_userarea">Log Out</a>
</div>
<div class="bar">
<a href="index.php?logout" id="my_userarea">Log Out</a>
</div>
步骤2. CSS (Step 2. CSS)
Here are used CSS styles:
以下是使用CSS样式：
css / main.css (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}
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}
步骤3. JS (Step 3. JS)
For our example we only need jQuery library (for the effect of sliding)
对于我们的示例，我们只需要jQuery库(用于滑动效果)
js / jquery-1.4.4.min.js (js/jquery-1.4.4.min.js)
步骤4. PHP (Step 4. PHP)
Our most important part of project – login functionality with captcha.
我们项目中最重要的部分–使用验证码登录功能。
index.php (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'];
}
}
?>
<?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).
我们在这里可以看到的内容：在顶部，我们仅创建类的实例并调用该方法以呈现登录表单。 在类构造函数中，我们定义了一个有权访问系统的用户数组。 注意，现在我们不仅拥有用户名和哈希密码，还拥有Salt 。 都是因为我们将一起使用SHA1 + MD5编码方法来进行更强大的加密。 另外，我并没有强迫您像我这样在类构造函数中对用户进行硬编码，您始终可以将用户数据存储在其他任何地方(在数据库或其他缓存文件中)。
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).
我希望其余逻辑对您很清楚。 首先，我们绘制登录表单。 在此表格中，我们将绘制验证码(问题)，并在浏览器会话中保存问题ID。 假设用户登录到系统。 在这里，我们检查输入的数据，哈希(SHA1 + MD5 + Salt)输入密码(用于使用真实哈希码进行验证)，然后检查来自验证码的输入答案(您还记得–我们已经在会话中保存了其ID)。 如果一切正确，我们将允许登录。否则，我们将发出通知(用户名或密码或验证码不正确)。 登录期间–我们在会话中保存了一些参数(member_name，member_pass)–可能您将在其他地方使用这些参数。 最后一点-如果我们在会话中已经有一些信息(member_name，member_pass)并且这是正确的参数-我们认为该用户仍在系统中(也许他只是通过导航在您的网站上打开了另一个页面)。
实时登录演示
结论 (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!
我希望今天的文章对您来说很有趣。 谁知道，也许您决定将其用于自己的网站。 不要忘记感谢我们的工作。 祝您工作顺利！
翻译自: https://www.script-tutorials.com/creating-advance-level-login-system-with-logic-captcha/
java短信验证码验证逻辑
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
