Система авторизации на php с капчей
Пример: example1581.rar
Шаг-1 HTML
main_page.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Система авторизации на php с капчей</title>
<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script src="http://yandex.st/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="example" id="main">
{login_form}
</div>
<div>
</div>
</body>
</html>Здесь всё просто, единственное тут присутствует ключ { login_form }, который мы будем использовать в дальнейшем.
login_form.html
<div class="bar">
<a href="#" id="my_userarea">Войдите</a>
</div>
<div style="display: none;" id="my_panel">
<div class="column">
<h3>Мое название сайта</h3>
<p>Мой сайт описание. Наш сайт был создан для всех. Здесь можно прочитать последние новости, учебные пособия и найти много полезной информации. Добро пожаловать!</p>
<p><a class="more" href="#about.php" rel="nofollow"><span>Подробнее</span></a></p>
</div>
<div class="column">
<form class="login_form" action="index.php" method="post">
<h3>Авторизация</h3>
<label>Логин:</label><input type="text" name="username">
<label>Пароль:</label><input type="password" name="password">
<label>{captcha}</label><input type="text" name="captcha">
<input type="submit" name="login" value="Войти">
<a class="more" href="#forgot.php" rel="nofollow"><span>Забыли пароль?</span></a>
</form>
</div>
<div class="column">
<h3>Вы ещё не зарегистрировались? Присоединяйтесь!</h3>
<p>Что дает вам регистрация? Это дает вам возможность стать полноправным членом нашего сайта.</p>
<p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Регистрация</span></a></p>
</div>
<div style="clear:both"></div>
<hr>
<div class="close"><a id="my_close" class="my_close">Скрыть эту панель</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>Воспользуйтесь логином "User1" или "User2" или "User3" и паролем "password" для входа</h3> Этот файл представляет собой шаблон формы входа, состоящей из трёх полей. В 3 поле присутствует новый ключ { captcha}, который будет заменит контрольный вопрос.
logout_form.html
<div class="bar">
<a href="/?logout=" id="my_userarea">Выход</a>
</div>Кнопка выхода.
Шаг 2. 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}Шаг 3. JS
Для нашего примера мы используем JQuery библиотеку (для эффекта скольжения)
js/jquery-1.4.4.min.js
Шаг 4. PHP
Наша самая важная часть проекта – php файл обработчик формы входа.
index.php
<?php
header('Content-type: text/html; charset=utf-8');
// установить уровень сообщений об ошибках
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
// вход в систему инициализации и генерации кода
$oAdvancedLoginSystem = new AdvancedLoginSystem();
$sLoginForm = $oAdvancedLoginSystem->getLoginBox();
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
// класс AdvancedLoginSystem
class AdvancedLoginSystem {
// переменные
var $aExistedMembers; // существующий член массива
var $aQuestions; // Логика вопросов
// конструктор
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' => 'Зима горячая или холодная?', 'a' => 'холодная'),
2 => array('q' => '4 - 1 = ?', 'a' => '3'),
3 => array('q' => 'Солнце жёлтое или синее?', 'a' => 'жёлтое'),
4 => array('q' => '4 + 3 = ', 'a' => '7'),
5 => array('q' => '10 > 5 ? (Да/Нет)', 'a' => 'Да')
);
}
// получить логин окно функции
function getLoginBox() {
ob_start(); // получить шаблон Выход форма
require_once('logout_form.html');
$sLogoutForm = ob_get_clean();
if (isset($_GET['logout'])) {
if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass']))
$this->performLogout();
}
if ($_POST['username'] && $_POST['password'] && $_POST['captcha']) { // выход обработки
if ($this->checkLogin($_POST['username'], $_POST['password'], false) && $this-
>aQuestions[$_SESSION['captcha']]['a'] == $_POST['captcha']) { // успешный вход в систему
unset($_SESSION['captcha']);
$this->performLogin($_POST['username'], $_POST['password']);
return $sLogoutForm . '<h2>Привет ' . $_SESSION['member_name'] . '!</h2>';
} else { // неправильный логин
ob_start(); // получить шаблон Форма входа
require_once('login_form.html');
$sLoginForm = ob_get_clean();
$sCaptcha = $this->getLogicCaptcha();
$sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm);
return $sLoginForm . '<h2>Логин или пароль, а может и Captcha неверны!</h2>';
}
} else { // В случае, если мы уже вошли (при обновлении страницы):
if ($_SESSION['member_name'] && $_SESSION['member_pass']) {
if ($this->checkLogin($_SESSION['member_name'], $_SESSION['member_pass'])) {
return $sLogoutForm . '<h2>Привет ' . $_SESSION['member_name'] . '!</h2>';
}
}
// в противном случае - сделать форму авторизации
ob_start();
require_once('login_form.html');
$sLoginForm = ob_get_clean();
$sCaptcha = $this->getLogicCaptcha();
$sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm);
return $sLoginForm;
}
}
// выполнить вход
function performLogin($sName, $sPass) {
$this->performLogout();
$sSalt = $this->aExistedMembers[$sName]['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
$_SESSION['member_name'] = $sName;
$_SESSION['member_pass'] = $sPass;
}
// выполнять выход
function performLogout() {
unset($_SESSION['member_name']);
unset($_SESSION['member_pass']);
}
// Проверяю вход
function checkLogin($sName, $sPass, $isHash = true) {
if (! $isHash) {
$sSalt = $this->aExistedMembers[$sName]['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
}
return ($sPass == $this->aExistedMembers[$sName]['hash']);
}
// получить логика капчи (вопрос)
function getLogicCaptcha() {
$i = array_rand($this->aQuestions);
$_SESSION['captcha'] = $i;
return $this->aQuestions[$i]['q'];
}
}
?>В начале мы просто создаём экземпляр нашего классы и вызываем метод для вывода формы входа. В конструкторе классы мы определяем массив пользователей имеющих доступ к системе. Обратите внимание что у нас имя пользователя и пароль находятся в хеше. Мы используем SHA1 + MD5 методы кодирования вместе для более сильного шифрованию. Конечно не обязательно хранить информацию о пользователях в конструкторе классы, это могут быть и другие места, база данных или файлы. В дополнение к пользователям в конструкторе класса мы видим ещё один массив, это логика капчи.
Теги:
Похожие новости:
Комментарии:
16 Октября 2022 21:22:09
Давайте поговорим на эту тему.
16 Октября 2022 21:22:09
Давайте поговорим на эту тему.