Категория: PHP.
В этом примере мы разберём улучшенную систему авторизации пользователей на сайте, в которой будет применяться SHA1 + MD5 для шифрования и интересная логика капчи в которой нужно выбрать правильный ответ. Так же вместо сохранения информации в куки, мы воспользуемся сессиями.
Demo Архив с примером
Шаг-1 HTML
main_page.html
Система авторизации на php с капчей
{login_form}
Здесь всё просто, единственное тут присутствует ключ { login_form }, который мы будем использовать в дальнейшем.
login_form.html
Войдите
Мое название сайта
Мой сайт описание. Наш сайт был создан для всех. Здесь можно прочитать последние новости, учебные пособия и найти много полезной информации. Добро пожаловать!
Подробнее
Авторизация
Логин:
Пароль:
{captcha}
Забыли пароль?
Вы ещё не зарегистрировались? Присоединяйтесь!
Что дает вам регистрация? Это дает вам возможность стать полноправным членом нашего сайта.
Регистрация
Скрыть эту панель
$(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;
});
});
Воспользуйтесь логином «User1» или «User2» или «User3» и паролем «password» для входа
Этот файл представляет собой шаблон формы входа, состоящей из трёх полей. В 3 поле присутствует новый ключ { captcha}, который будет заменит контрольный вопрос.
logout_form.html
Выход
Кнопка выхода.
Шаг 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
В начале мы просто создаём экземпляр нашего классы и вызываем метод для вывода формы входа. В конструкторе классы мы определяем массив пользователей имеющих доступ к системе. Обратите внимание что у нас имя пользователя и пароль находятся в хеше. Мы используем SHA1 + MD5 методы кодирования вместе для более сильного шифрованию. Конечно не обязательно хранить информацию о пользователях в конструкторе классы, это могут быть и другие места, база данных или файлы. В дополнение к пользователям в конструкторе класса мы видим ещё один массив, это логика капчи.