×
Закрытие
9
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

    Cайт на практическом примере

    Текущее состояние создаваемого сайта

    Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

    Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

    Вы здесь: Главная → Сборник статей → Формы → Создание формы авторизации


    Автор: / Дата:

    Создаем форму авторизации

    Здравствуйте, уважаемый посетитель!

    Сегодня, после небольшого перерыва, снова вернемся к рассмотрению вопросов, связанных с формами HTML.

    Ранее мы создали форму регистрации, с помощью которой обеспечили запись в БД MySQL учетных данных пользователей. Где в качестве логина предусмотрели ввод комбинации символов в соответствии с установленным шаблоном. А пароль, в целях защиты от взлома, с сохранением в виде необратимых хешей.

    А теперь создадим форму авторизации, которая должна будет обеспечить проверку пользователя путем сравнения введенного в форму логина и пароля с ранее сохраненными в базе данных учетными записями имеющихся зарегистрированных пользователей.

    Следует отметить, что сама по себе форма авторизации не решает все вопросы разграничения прав доступа пользователей к ресурсам сайта. Она позволяет произвести лишь только аутентификацию, предусматривающую проверку подлинности пользователя, осуществляющего попытку входа в систему.

    Что касается механизма авторизации, то это более сложная задача, чем просто аутентификация. Здесь должен быть предусмотрен кроме проверки на правильность ввода данных аккаунта пользователя, еще и другой, необходимый функционал для предоставления конкретному лицу прав на выполнение определённых действий.

    А кроме того, система авторизации должна обеспечивать максимально простое для пользователей, но достаточно надежное с точки зрения безопасности, подтверждение предоставленных прав при повторных загрузках страниц.

    Поэтому в этой статье форма авторизации будет рассмотрена только в части создания ее HTML-элементов и проведения проверки на совпадение введенных в форму логина и пароля с ранее сохраненными в базе данных учетными записями.

    При этом для упрощения создания обработчика формы формировать PHP-код будем поэтапно с учетом следующих его основных функциональных узлов:

    • Получение данных.
    • Извлечение хеш-строки из базы данных.
    • Формирование хеша пароля.
    • Проверка на совпадение хеша пароля с хеш-строкой из базы данных.

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

    Содержание


    • Формируем элементы формы авторизации
    • Получение данных
    • Извлечение хеш-строки из базы данных
    • Формирование хеша пароля
    • Проверка на совпадение хеша пароля с хеш-строкой из базы данных
    • Исходные файлы сайта

    Формируем элементы формы авторизации


    Основные элементы формы авторизации были созданы ранее на этапе верстки и оформлены в соответствии с дизайном сайта.

    Однако, кроме обычно присутствующих в такой форме элементов, предназначенных для ввода логина и пароля, целесообразно также предусмотреть и возможность их восстановления.

    В связи с этим мы добавим еще два элемента, представляющие собой две дополнительные ссылки на страницы, предназначенные для выполнения процедуры восстановления утерянных данных аккаунта.

    В итоге, после выполненных дополнений, HTML-код формы авторизации принял следующий вид.

    1. class="subscribe">

    2. Панель пользователя

    3. name="auth" action="/auth.php" method="post">

    4. type="text" id="auth-login" name="auth-login" placeholder="Введите логин" required>

    5. type="password" id="auth-password" name="auth-password" placeholder="Введите пароль" required>

    6. type="submit" name="auth-button" value="Войти" >

    Рис.1 HTML-код формы авторизации

    Каких-либо дополнительных пояснений по данному фрагменту кода здесь не требуется. Так как все используемые HTML-элементы мы достаточно подробно рассматривали ранее при создании других форм. Например, при создании формы регистрации.

    Можно лишь отметить, что здесь в атрибуте action (поз.3) определяющем обработчик, к которому обращаются данные формы при отправке их на сервер, указан файл "auth.php" (имя auth взято от начальных букв англ. слова authentication). Поэтому этот файл необходимо будет создать в корневом каталоге для размещения PHP-скрипта обработчика.

    А кроме этого, для двух добавленных ссылок (поз.9,10), предназначенных для восстановления утерянных пользователями данных аккаунта, необходимо добавить в таблицу базы данных "url" две дополнительные записи.

    С помощью них можно будет в дальнейшем перенаправлять пользователей на страницы, на которых будет выполняться процедура восстановления забытого логина или пароля. Ниже показан скриншот таблицы "url" с соответствующими добавленными строками.

    Добавленные строки таблицы url для создания новых страниц

    Рис.2 Добавленные строки таблицы url для создания новых страниц

    Что касается оформления дополнительных ссылок, то для блоков

    , в которых они размещенных, с помощью свойств CSS следует назначить необходимые отступы и размер шрифта.

    В следующей таблицы показаны свойства для этих элементов, которые нужно добавить в файл "main.css" в общую таблицу стилей CSS.

    1. .subscribe div {

    2. margin: .375em 0 .375em 0.125em;

    3. font-size: .9375em;

    4. }

    Рис.3 Свойства CSS для вновь добавленных элементов

    В итоге, после обновления страницы мы должны увидеть окончательный вид формы авторизации, как показано на скриншоте.

    Форма авторизации с дополнительными элементами

    Рис.4 Форма авторизации с дополнительными элементами

    Получение данных


    После того, как с формированием формы мы закончили, теперь перейдем к аутентификации пользователей по введенным логину и паролю.

    В первую очередь необходимо получить отправленные формой значения. Для этого в созданный файл "auth.php" поместим следующий фрагмент PHP-кода обработчика.

    1. require_once "start.php";

    2. if (!empty($_POST["auth-button"])) {

    3. //----Получение введенных в форму данных логина и пароля-------------

    4. if (isset($_POST["auth-login"])) $auth_login = $_POST["auth-login"];

    5. else

    6. $auth_login = $_POST["auth-login"];

    7. $auth_login = check_symbol($auth_login, "Логин", "1", "0");

    8. if (isset($_POST["auth-password"])) $auth_password = $_POST["auth-password"];

    9. else

    10. $auth_password = $_POST["auth-password"];

    11. $auth_password = check_symbol($auth_password, "Пароль", "1", "0");

    12. echo nl2br("Введенный логин: ".$auth_login. "\n" . "Введенный пароль: ".$auth_password. "\n\n");

    13. }

    14. ?>

    Рис.5 PHP-код получения данных из формы авторизации

    Здесь, как и в предыдущих случаях при обработке форм, данные извлекаются из ассоциативного массива $_POST[] в виде переменных: $auth_login - для значений логина (поз.5) и $auth_password - для пароля (поз.9).

    При этом, значения переменных берутся из массива $_POST[] только в том случае, если переменные массива $_POST["auth-login"] и $_POST["auth-password"] существуют, и в них действительно были переданы данные. В противном случае им присваивается пустое значение (поз.7,11).

    А далее, с помощью пользовательской универсальной функции с именем check_symbol () выполняется проверка полученных переменных $auth_login (поз.8) и $auth_password (поз.12) на наличие запрещенных символов. И в случае необходимости производятся соответствующие преобразования.

    Более подробно с назначением пользовательской функции check_symbol () и описанием ее работы можно ознакомиться в разделе Получаем данные от элементов формы в PHP одной из статей, относящейся к созданию формы онлайн заказа.

    В данном случае в параметрах функции кроме значений переменных $auth_login и $auth_password и соответствующих им наименований полей ("Логин", "Пароль"), третьим параметром установлен флаг обязательного заполнения поля (значение "1"), а четвертым определено, что проверка на соответствие шаблону не производится (значение "0").

    Что касается последней строки с использованием функции echo nl2br() (поз.13), то она здесь включена временно. Это сделано для возможности контроля работы обработчика в части получения данных из формы. В нормальном режиме работы эту строку следует закомментировать.

    Теперь, можно попробовать оправить заполненную форму авторизации и проверить, какие в итоге данные мы получим.

    Для того, чтобы в дальнейшем мы смогли проверить работу обработчика на совпадение данных, полученных из формы с данными учетных записей, имеющимися в базе данных, сейчас заведомо введем в поля формы логин и пароль, которые мы ранее сохранили в базе данных при регистрации пользователя.

    Где в качестве логина будет использована комбинация символов Audi387357, пароля - Z5nC89.

    Если все было сделано правильно, после отправки формы, на экране браузера мы должны увидеть пустую страницу с выводом только двух строк с полученными в обработчике данными, как показано на скриншоте.

    Отображение полученных данных в обработчике

    Рис.6 Отображение полученных данных в обработчике

    Как видно, после оправки формы мы перешли на страницу, соответствующую файлу "auth.php" с размещенном в нем PHP-скрипом обработчика. Где мы видим, что полученные данные полностью соответствуют тем данным, которые были введены в поля формы.

    Следует отметить, что данная страница с результатами промежуточных преобразований отображается в браузере временно. Обусловлено это необходимостью контроля работы скрипта на разных стадиях создания обработчика формы авторизации.

    В дальнейшем, в рабочем режиме, с помощью соответствующих директив по завершению работы скрипта будет выполняться перенаправление на страницу сайта, с которой была отправлена форма.

    Таким образом данные логина и пароля мы получили, и теперь можно перейти к следующим этапам формирования обработчика.

    Извлечение хеш-строки из базы данных


    Для последующих преобразований и проверок нам необходимо получить из базы данных хеш пароля, который мы сохранили на этапе регистрации пользователя.

    Это можно сделать с помощью пользовательской функцией извлечения одиночной строки, которую мы ранее создали при рассмотрении вопросов, связанных с выводом данных из БД MySQL. При необходимости, с ее PHP-кодом и описанием работы можно ознакомиться здесь.

    В нашем случае поиск строки необходимо выполнять в таблице "orders" исходя из полученного логина. Поэтому в параметрах функции следует указать следующие значения:

    • имя таблицы - "orders";
    • имя поля, в котором будет происходить поиск - "client-login";
    • значение поля - полученный логин в виде переменной $auth_login.

    Ниже показан фрагмент кода, выполняющего поиск и извлечение из таблицы базы данных хеш-строки пароля учетной записи, в которой значение логина совпадает с логином, полученным из формы.

    1. //----Извлечение хеш-строки из базы данных по логину из формы----

    2. $table = "orders";

    3. $column = "client-login";

    4. $value = $auth_login;

    5. $data_bd = getLine($table, $column, $value);

    6. $password_hash = $data_bd["password-hash"];

    7. echo nl2br("Извлеченный из базы данных хеш пароля: ".$password_hash. "\n\n");

    8. ?>

    Рис.7 Фрагмент кода для получения хеша пароля из базы данных

    Здесь после вызова функции getLine() все данные найденной строки возвращаются в виде ассоциативного массива $data_bd (поз.6).

    После чего переменной $password_hash присваивается значение одного из элементов массива с индексом, соответствующем полю "client-login" (поз.7).

    Что касается строки 8, то в этом фрагменте также, как и в предыдущем случае, функция echo nl2br() временно добавлена для контроля работы обработчика. В дальнейшем, когда обработчик будет полностью сформирован, эту строку нужно будет закомментировать.

    Таким образом переменная $password_hash при нахождении в таблице базы данных строки с заданным логином получает значение хеша пароля учетной записи соответствующего пользователя.

    Для того, чтобы в этом убедиться снова отправим форму с введенными данными и посмотрим на результат, который с помощью функции echo nl2br() должен будет отобразиться в окне браузера.

    Вывод хеш-строки, извлеченной из базы данных

    Рис.8 Вывод хеш-строки, извлеченной из базы данных

    Как видно, хеш-строку из базы данных мы получили. После чего можно ей воспользоваться для дальнейших преобразований

    Формирование хеша пароля


    Очевидно, что необходимым условием для того, чтобы хеш пароля, полученного из формы, совпал с хешем пароля из базы данных, является идентичность преобразований как в первом, так и во втором случае. Естественно, что здесь речь идет о вариантах с одинаковыми паролями.

    Ниже приведен фрагмент кода, который мы использовали ранее при получении хеша на этапе регистрации и сохранении его в базе данных.

    1. $salt = substr(sha1(mt_rand()),6,22);

    2. $password_hash = crypt($client_password_1, '$2y$10$'.$salt.'$');

    3. ?>

    Рис.9 PHP-код, ранее используемый при получении хеша пароля при регистрации

    Здесь для вычисления хеша $password_hash использовалась функция crypt() (поз.3), одним из параметров которой являлась автоматически генерированная уникальная соль $salt. Которая в свою очередь была получена путем извлечения строки из хеша псевдослучайной последовательности длиной в 22 символа с помощью функций substr(), sha1(), mt_rand() (поз.2).

    Более подробно о том, как получить хеш при помощи функции crypt() можно посмотреть в разделе Использование функции crypt() статьи, в которой рассматривались практические примеры использования в PHP криптографических хеш-функций.

    Таким образом, теперь для получения хеша пароля, полученного из формы, мы должны сделать точно такое же преобразование, используя ту же самую функцию crypt() и ту же соль.

    Однако, как было отмечено, при вычислении хеша при регистрации мы использовали уникальную, автоматически генерированную соль. И очевидно, что повторно создать ее таким же образом не представляется возможным.

    Поэтому при авторизации, необходимую соль обычно извлекают из ранее сохраненной в базе данных хеш-строки (в предыдущем разделе для этой цели мы уже получили нужное ее значение).

    Это обусловлено тем, что хеш-строка, созданная с помощью определенных функций, какой является и функция crypt(), помимо самого хеша обычно включает и соль. В данном случае в хеш-строке содержится соль вместе с префиксом, определяющим вид шифрования, и весовым параметром, задающим количество проводимых итераций.

    Ниже на рисунке показано разбивка на составные части хеш-строки пароля, который ранее был сохранен в базе данных при регистрации.

    Составные части хеш-строки

    Рис.10 Составные части хеш-строки

    С особенностями работы функции crypt() и условиями ее использования можно ознакомиться здесь.

    скриншот 42

    Очевидно, что получить из такой хеш-строки нужную соль совсем несложно. Для этого достаточно использовать функцию substr(), с помощью которой можно извлечь нужное количество символов.

    В данном случае нас интересуют первые 29 знаков, которые включают в себя соль со всеми остальными служебными символами. Поэтому в параметрах функции нужно указать следующие значения: "0" - начало отсчета, "29" - длина подстроки

    А после этого можно будет вычислить и хеш пароля из формы, точно таким же образом, как это делалось ранее при регистрации пользователя (рис.9). А именно, использовать ту же самую функцию crypt() с той же самой солью.

    В следующем фрагменте кода с учетом вышеизложенного показано сначала получение соли в виде переменной $full_salt (поз.3), а затем хеша пароля $password_hash, полученного из формы (поз.4).

    1. //----Формирование хеша пароля из формы-----

    2. $full_salt = substr($password_hash, 0, 29);

    3. $new_hash = crypt($auth_password, $full_salt.'$');

    4. echo nl2br("Полученная соль: ".$full_salt. "\n" . "Полученный хеш пароля из формы: ".$new_hash. "\n\n");

    5. ?>

    Рис.11 Фрагмент кода для получения хеша полученного пароля

    После добавления данного кода в обработчик, снова повторим отправку формы и посмотрим на результат.

    Вывод полученного хеша пароля из формы

    Рис.12 Вывод полученного хеша пароля из формы

    Если посмотреть визуально на полученный хеш пароля и хеш-строку из базы данных, то можно обратить внимание на то, что их значения полностью совпадает. Что подтверждает правильность всех выполненных преобразований. (В форму авторизации мы заведомо ввели тот же самый пароль, который использовался при регистрации).

    Осталось только за малым - проверить хеш введенного в форму пароля и хеш-строку из базы данных на идентичность с помощью PHP.

    Проверка на совпадение хеша пароля с хеш-строкой из базы данных


    Данную проверку мы будем делать, как обычно в таких случаях, с помощью условного оператора if . Таким образом, чтобы в зависимости от результата сравнения выполнялся тот или иной исполнительный элемент в виде инструкций, определяющих дальнейшие действия скрипта.

    Следует отметить, что на данном этапе в качестве исполнительного элемента скрипта временно будет использоваться языковая конструкция echo, с помощью которой сейчас мы будем выводить на экран браузера результаты проверки: правильно ли введены логин и пароль или нет.

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

    Ниже показан простейший вариант PHP-кода с выводом результата проверки на экран браузера.

    1. //----Проверка на совпадение хеша пароля из формы с хеш-строкой из базы данных----

    2. if (!empty($password_hash) && $password_hash == $new_hash) {

    3. echo "Логин и пароль введены верно";

    4. }

    5. else {

    6. echo "Неверные Логин и/или Пароль!";

    7. }

    8. ?>

    Рис.13 Вариант PHP-кода с выводом результата проверки на экран браузера

    После добавления этого кода снова отправим форму с заведомо правильно введенными логином и паролем (логин - Audi387357, пароль - Z5nC89).

    Вариант проверки при правильно введенных данных в форму

    Рис.14 Вариант проверки при правильно введенных в форму данных

    Как видно при правильно введенных данных проверка прошла успешно.

    А теперь, убедимся в обратном, введем неправильные данные, например, изменим значение пароля добавив к нему еще какой-нибудь символ, скажем букву "s". И проверим, выявит ли обработчик отправку формы с неверно введенными данными.

    Вариант отправки неверных данных в форме

    Рис.15 Вариант отправки неверных данных в форме

    Как говорится, результат налицо. Даже при незначительном изменении пароля обработчик формы обнаружил его несоответствие с тем, который ранее использовался при регистрации и был сохранен в учетной записи пользователя. (На скриншоте видно, что при неправильном пароле его хеш не соответствует хеш-строке, извлеченной из базы данных).

    Естественно, что такой же результат будет и при неправильно введенном логине. Так как в этом случае обработчик просто не сможет в таблице базы данных найти несуществующую запись.


    Таким образом мы рассмотрели все основные моменты, связанные с формой авторизации, включая как создание HTML-элементов, так и обработчика, проверив их работу на возможность определения подлинности пользователя, осуществляющего попытку входа в систему.

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

    Исходные файлы сайта


    Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

    • Файлы каталога www
    • Таблицы базы данных MySQL

    Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

    Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

    Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

    С уважением,


    Комментарии


    Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

    Буду Вам за это очень признателен!