Скрипты

coincompare-v1-4-мониторинг-статистики-криптовалют CoinCompare - это веб-приложение PHP, которое отображает общую информацию, интерактивные исторические диаграммы для более чем 1700 криптовариантов. Он...
josh-шаблон-для-разработки-на-laravel Josh Admin - это шаблон для разработчика, основанный на Laravel 5. Создайте ваш следующий проект на Laravel. Используйте эту тему и сохраните свое...
social-network-система-социальных-сетей Социальная сеть - PHP Social Networking System - мощный PHP-скрипт, разработанный, чтобы позволить вам создать свою собственную социальную сеть! Он...

Для 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)

Комментарии отсутствуют

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

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

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

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

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

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