Вход в личный кабинет Что делать дальше?
И вот мы подбираемся к самому интересному: а где хранить пароли и в каком виде? Давайте сначала подумаем, где их хранить.
Что такое сессии?
Попробую рассказать в паре абзацев.
Сессии — это механизм, который позволяет однозначно идентифицировать пользователя.
По-человечески это значит, что для каждого посетителя сайта можно создать уникальное «хранилище», к которому будет доступ только у этого самого посетителя.
Хранилище это хранится в файле на сервере.
На самом деле сессии хранятся не обязательно в файлах. Например, cms Modx хранит их базе данных.
Но сейчас нам это не важно, главное, что сессии предоставляют удобный способ работать с данными, уникальными для пользователя.
Для нас сессия выглядит как обычный ассоциативный массив под названием $_SESSION, в разные поля которого можно записать хоть число, хоть строку, хоть сериализованный объект.
Выбираем правильное хэширование
Идею хранения паролей нашли, то есть хранения не паролей, а их хэшей. А вот какой алгоритм хэширования выбрать?
Давайте посмотрим на то, что пробовали выше — простая функция md5. Алгоритма его расшифровки нет, но тем не менее md5 не рекомендуется для использования. Почему?
Помимо сложности самого алгоритма, есть и другой момент. Да, расшифровать пароль по хэшу нельзя, но его можно подобрать. Простым брутфорсом.
К тому же существуют многочисленные базы паролей md5, где всевозможные варианты хранятся тупо списком.
И подбор вашего пароля по известному хэшу займет столько времени, сколько понадобится для выполнения sql-запроса
select password from passwords where hash='e10adc3949ba59abbe56e057f20f883e';
Конечно, вы сами не будете использовать пароль 123456, но как насчет ваших пользователей? Да, 123456 можно подобрать и руками, но в таком случае никакие алгоритмы не помогут.
Наша же задача максимально позаботиться о юзерах, которые выбирают пароли сложнее qwerty. Думаем дальше, гуглим.
Помимо md5 есть множество алгоритмов хэширования, sha256, sha512 и еще целая толпа. Их сложность выше, но это не отменяет опять-таки существования таблиц с готовыми паролями.
Нужно что-то хитрее.
Заглушка для авторизации
Функции, связанные с авторизацией, будут лежать в отдельном файле и своем пространстве имен. Создадим файл auth.php в api/v1/common — там, где уже лежит helpers.php.
Если вы разбирали уроки админки, особенно третий, про серверную часть, то эти пути вам будут знакомы. Если у вас свой проект, то кладите auth.php куда удобно.
Главное, потом правильно указать пути.
Содержимое auth.php
Как обойтись без шифрования. хэширование
Фокус в том, что не нужно хранить пароли в открытом виде, но и не нужно шифровать их с возможностью расшифровки. Пароли нужно хэшировать и в базе хранить не пароль, а его хэш.
Хитрым образом закодированную строку, которую нельзя расшифровать. Например, не password, а 5f4dcc3b5aa765d61d8327deb882cf99
Вы можете спросить, что это за хрень и как же сравнить пароль, введенный пользователем, с паролем, лежащим в базе. А нам и не нужно сравнивать пароли — достаточно сравнить их хэши.
Например, есть простая функция хэширования md5. Вот так она работает
Как с помощью php и mysql создать систему регистрации и авторизации пользователей
Безопасная система авторизации и регистрации является одним из важнейших элементов при создании проекта с нуля. Один из возможных способов — это создание системы регистрации с помощью PHP и MySQL.
Хотя в Интернете есть много пособий на эту тему, большинство из них предназначено для продвинутых пользователей.
Эта статья расскажет о том, как создать простую версию системы авторизации и регистрации пользователей с использованием PHP и MySQL для начинающих. Давайте начнем!
Скачать ZIP-архив
Вы можете использовать любой хостинг с поддержкой PHP и MySQL (только убедитесь, что он поддерживает PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней).
Но в этой статье в качестве сервера будет использоваться Xampp. Если до этого не работали с Xampp, эта статья может помочь вам разобраться, как его должным образом установить на вашем компьютере.
Во-первых, создайте базу данных и таблицу, которая будет содержать все регистрационные данные. Вы можете сделать это вручную с помощью графического интерфейса пользователя PhpMyAdmin или использовать для вставки этой информации SQL.
Взгляните на приведенный ниже код SQL:
Обратите внимание, что все данные представляют собой varchar, и даже пароль позже будет преобразован в символ md5, чтобы обеспечить его безопасность.
Кроме того, используйте auto_increment для автоматического назначения идентификаторов или номеров пользователям, которые будут регистрироваться в системе.
Теперь, когда таблица создана, нужно задать разметку и стили CSS, а затем PHP-код.
Для разметки, нам нужно включить три файла, и все они должны быть сохранены в формате «.php«, так как мы создаем программу сценариев на стороне сервера.
Сначала создайте файл login.php. Скопируйте в него приведенный ниже код:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href= 'http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container mlogin">
<div id="login">
<h1>Вход</h1>
<form action="" id="loginform" method="post"name="loginform">
<p><label for="user_login">Имя опльзователя<br>
<input class="input" id="username" name="username"size="20"
type="text" value=""></label></p>
<p><label for="user_pass">Пароль<br> <input class="input" id="password" name="password"size="20" type="password" value=""></label></p> <p class="submit"><input class="button" name="login"type= "submit" value="Log In"></p> <p class="regtext">Еще не зарегистрированы?<a href= "register.php">Регистрация</a>!</p> </form> </div> </div>
<footer>
© 2022 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.
</footer>
</body>
</html>С помощью этого кода вы получите результат, который показан на рисунке ниже:
Далее, создаем файл register.php. Скопируйте и вставьте в него приведенный ниже код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'> </head> <body>
<div class="container mregister">
<div id="login"> <h1>Регистрация</h1>
<form action="register.php" id="registerform" method="post"name="registerform"> <p><label for="user_login">Полное имя<br> <input class="input" id="full_name" name="full_name"size="32" type="text" value=""></label></p>
<p><label for="user_pass">E-mail<br>
<input class="input" id="email" name="email" size="32"type="email" value=""></label></p>
<p><label for="user_pass">Имя пользователя<br>
<input class="input" id="username" name="username"size="20" type="text" value=""></label></p>
<p><label for="user_pass">Пароль<br>
<input class="input" id="password" name="password"size="32" type="password" value=""></label></p>
<p class="submit"><input class="button" id="register" name= "register" type="submit" value="Зарегистрироваться"></p> <p class="regtext">Уже зарегистрированы? <a href= "login.php">Введите имя пользователя</a>!</p> </form>
</div>
</div>
<footer>
© 2022 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены. </footer>
</body>
</html>С помощью этого кода вы получите следующий результат:
Далее, создаем файл intropage.php. Он будет служить в качестве страницы приветствия после того, как пользователь успешно авторизовался в системе:
Этот код даст нам следующий результат:
Теперь, когда разметка готова, нужно добавить CSS-код. В основном, он будет содержать стили для класса страниц container, а также для кнопок и некоторых других элементов, таких как текстовые поля и лайки:
/*= ОБЩИЕ СТИЛИ --------------------------------------------------------*/ body { background: #efefef; font-family: 'Open Sans', sans-serif; color: #777; } a { color: #f58220; font-weight: 400; } span { font-weight: 300; color: #f58220; } .mlogin { margin: 170px auto 0; } .mregister { margin: 80px auto 0; } .error { margin: 40px auto 0; border: 1px solid #777; padding: 3px; color: #fff; text-align: center; width: 650px; background: #f58220; } .regtext { font-size: 13px; margin-top: 26px; color: #777; } /*= КОНТЕЙНЕРЫ --------------------------------------------------------*/ .container { padding: 25px 16px 25px 10px; font-weight: 400; overflow: hidden; width: 350px; height: auto; background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); } #welcome { width: 500px; padding: 30px; background: #fff; margin: 160px auto 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); } .container h1 { color: #777; text-align: center; font-weight: 300; border: 1px dashed #777; margin-top: 13px; } .container label { color: #777; font-size: 14px; } #login { width: 320px; margin: auto; padding-bottom: 15px; } .container form .input,.container input[type=text],.container input[type=password],.container input[type=e] { background: #fbfbfb; font-size: 24px; line-height: 1; width: 100%; padding: 3px; margin: 0 6px 5px 0; outline: none; border: 1px solid #d9d9d9; } .container form .input:focus { border: 1px solid #f58220; -webkit-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
-moz-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); } /*= КНОПКИ --------------------------------------------------------*/ .button{ border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, leftbottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); color: #fff; padding: 7px 12px; -webkit-border-radius:4px;
moz-border-radius:4px; border-radius:4px; float: right; cursor: pointer; } .button:hover{ background: #f47c20; background: -webkit-gradient(linear, left top, leftbottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } /*= ПОДВАЛ --------------------------------------------------------*/ footer {
color: #777;
font-size: 12px;
text-align: center;
margin-top: 20px; }К этому времени, вы уже должны получить тот же результат, что и на изображении, приведенном в начале статьи.
Теперь, когда у вас готовы разметка и стили CSS, попробуйте задействовать такие многоразово используемые элементы, как раздел заголовка и раздел подвала. В корневой папке создайте новую папку и назовите ее “includes“.
В ней будут содержаться все включаемые файлы. Затем в папке includes создайте новый файл и назовите его header.php. Скопируйте часть раздела заголовка в каждый из трех PHP-файлов, созданных нами ранее. Таким образом, у вас получится:
<!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей </title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'> </head> <body>Следующее, что вам нужно сделать, это удалить разметку, скопированную из файла header.php во всех трех PHP-файлах и заменить ее следующим PHP-кодом:
Теперь, сделайте то же самое с подвалом. Скопируйте приведенный ниже код и вставьте его в новый файл footer.php. Он будет включать в себя раздел подвала:
Затем снова удалите эту часть во всех трех файлах PHP и замените ее следующим кодом:
Теперь, когда вы включили файлы разделов заголовка и подвала, пора создать новый включаемый файл. Назовите его constants.php и скопируйте в него следующий код:
В приведенном выше коде, мы создали константы информации базы данных. Теперь мы можем легко изменять информацию всякий раз, когда это необходимо.
Далее, в папке includes создайте новый файл и назовите ее connection.php. В нем будут храниться коды подключения к базе данных. Скопируйте и вставьте в него код, приведенный ниже:
Обратите внимание, что вам обязательно требуется файл constants.php. Если при подключении возникнет ошибка, с его помощью будет остановлено выполнение скрипта и выдано сообщение об ошибке.
Включите файл connection.php в файлах login.php и register.php, так как эти два файла необходимы для кода управления подключением. Скопируйте приведенный ниже код и вставьте его перед включением файла header.php:
Теперь необходимо преобразовать форму регистрации в полноценную систему регистрации. Чтобы сделать это, нужно добавить включение еще нескольких файлов PHP после включения header.php. Скопируйте и вставьте приведенный ниже код в файл register.php:
В приведенном выше коде, обратите внимание, что перед добавлением данных в базу производится их валидация. Переменная message используется для хранения сообщения об ошибках или об успешном выполнении действия.
Теперь, когда пользователи могут регистрироваться на сайте, необходимо создать систему авторизации. С помощью этого очень простого PHP-кода, вы можете включить систему авторизации. Скопируйте код и вставьте его перед разметкой в файл login.php:
В приведенном выше коде, перед перенаправлением пользователя на страницу intropage.php, которую мы добавим чуть позже, вы в первую очередь должны проверить, была ли установлена сессия.
В противном случае, если сессия не была установлена, пользователю с помощью переменной message будет выдаваться сообщение об ошибке или он будет перенаправляться на страницу login.php.
Мы установили все, что нужно для файлов register.php и login.php. Теперь вы просто должны обеспечить, чтобы пользователь оставался в системе при перенаправлении на страницу intropage.php. Скопируйте и вставьте приведенный ниже код в файл intropage.php:
Обратите внимание, что оператор if был создан для проверки, установлена ли сессия, и в зависимости от этого должен ли пользователь перенаправляться на страницу login.php или остаться на странице intropage.php.
Наконец, чтобы пользователь мог выйти из системы, нужно удалить сессию с помощью session_destroy.
Скопируйте данный код в файл logout.php:
Сегодня мы узнали, как создать простую систему авторизации, используя PHP и MySQL. Конечно, существует много аспектов, которые нужно учитывать, когда речь идет о безопасности, но это уже неплохое начало.
Вы можете изменять приведенные в этой статье коды по своему усмотрению. Если у вас есть идеи по их улучшению, буду рад услышать об этом в комментариях.
Надеюсь, вам понравилась эта статья. Увидимся в следующий раз!
Проверяем работоспособность vue
Вроде бы, чего там может сломаться? Нам же практически не пришлось лезть в код vue, за исключением добавления кнопки Выйти в шапке админки.
Но попробуем пересобрать админку, чтобы убедиться, что все хорошо. Сначала в production режиме
npm run build
Работа с формами через ajax
Для обработки Ajax-запросов создадим класс AjaxRequest. Сохраним его в файле classes/AjaxRequest.class.php.
Создание базы данных
Создадим новую базу данных с названием testdb, выполнив следующий запрос от привилегированного пользователя.
-- Создание базы данных testdb с кодировкой utf8
CREATE DATABASE testdb CHARACTER SET utf8 COLLATE utf8_general_ci;Для работы с базой, добавим отдельного пользователя testdb и предоставим ему необходимые права.
Структура файлов и директорий
Создадим директорию «php-auth» для нашего проекта. Добавим в нее следующие файлы и папки:
Полный архив с исходниками (обновленная версия).
Формат json-ответа
На клиентской стороне, мы должны иметь возможность показать результат операции в понятном для человека виде. Для этого мы возвращаем JSON ответ в таком формате:
{ "status": "статус операции", // err или ok "code": "имя поля с ошибкой", "message": "сообщение об ошибке", "data": "другие произвольные данные"
}Создадим файл js/ajax-form.js. Он будет перехватывать событие отправки всех форм с классом ajax и отправлять асинхронный запрос серверу. Исходный код ajax-form.js.
Для работы скрипта нужен jQuery версии 2.0.3 (лежит в архиве с исходниками).
Обработка ответов происходит в методах объекта script.ajaxForm.callbacks. Пример обработчика ответа для авторизации на сайте:
login: function ($form, data) { if (data.status === 'ok') { // если авторизация успешна, делаем редирект на // нужную страницу if (data.data && data.data.redirect) { window.location.href = data.data.redirect; } }
}Эти коллбеки вызываются только, если валидация ответа прошла успешно. Метод script.ajaxForm.validate проверяет наличие в ответе имени поля с ошибкой. Если такое поле существует, подствечивает его и отображает текст самой ошибки.
Если нашли ошибку в коде или тексте статьи — обязательно напишите о ней в комментариях.
UPDATE: Исправлены ошибки, связанные с хешированием пароля, нормально заработала функция «Запомнить меня». Спасибо пользователю santas156 за найденные баги.
Вместо заключения
Проблемы с dev режимом во vue — это неприятный момент. Мы хотим и апишечку подергать, и все удобства vue-cli использовать. И на елку влезть, и ничего не ободрать.
Возможно, есть более изящный способ обойти эти проблемы в dev режиме, но я их пока не нашел. Поэтому приходится подпирать код лишними условиями.