Скрипты

ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...
wowonder-v-1-3-социальная-сетевая-платформа WoWonder - это PHP-скрипт социальной сети, WoWonder это лучший способ чтобы начать создание собственного сайта социальной сети. Этот скрипт имеет все...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Система авторизации на php с капчей

Система авторизации на php с капчей

В этом примере мы разберём улучшенную систему авторизации пользователей на сайте, в которой будет применяться SHA1 + MD5 для шифрования и интересная логика капчи в которой нужно выбрать правильный ответ. Так же вместо сохранения информации в куки, мы воспользуемся сессиями.

Demo Архив с примером

Шаг-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 методы кодирования вместе для более сильного шифрованию. Конечно не обязательно хранить информацию о пользователях в конструкторе классы, это могут быть и другие места, база данных или файлы. В дополнение к пользователям в конструкторе класса мы видим ещё один массив, это логика капчи.


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...