Инструкция: как написать идеальную регистрацию — Разработка на

Что будем ваять

Продолжаем начатую несколько материалов назад тему создания динамических ресурсов. Сегодня мы замахнемся на более глобальные вещи! Мы создадим полноценную систему авторизации и регистрации для сайта на основе PHP.

Почему их не стоит реализовывать по отдельности? Ну, прежде все потому, что они тесно взаимосвязаны между собой. Оба модуля (регистрации и авторизации) используют одну и ту же таблицу в БД ресурса, в которую заносятся все сведения о новых пользователях сайта. А затем извлекаются (проверяются на соответствие) при авторизации.

Описание веток

sozdanie-formy-registratsii-i-avtorizatsii-v-php – В этой ветке находятся исходники функционала, который был реализован в статье Создание формы регистрации и авторизации

Небольшое вступление

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

1. Задача

Реализовать схему регистрации, аутентификации и восстановления доступа посредством email и соцсетей.

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

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

2. Формат

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

Каждый экран, используемый в схемах, имеет своё название и состояние. Состояние может определять внешний вид или логические особенности (например, состояние «ValidationError» подразумевает сообщения об ошибках валидации формы).

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

Важное значение имеют соединительные линии (стрелки) на схемах. Они могут быть двух видов: пунктирные (переходы) и сплошные (обмен данными). На основании пунктирных линий можно, например, спроектировать API.

Регистрация через email

Регистрация пользователя через email осуществляется в два этапа:

Поля, заполняемые пользователем при регистрации, могут быть произвольными. Однако в их числе обязательно должны быть поля «email» и «пароль»: первое используется как универсальный идентификатор, второе косвенно определяет тип регистрации (при регистрации через соцсети пароль не создаётся).

1. Заполнение формы

Наличие аккаунта

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

Временный аккаунт

До того, как пользователь не подтвердил свой email, его аккаунт является временным. Это позволяет:

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

2. Подтверждение

Подтверждение email классическое: ссылка с GET-параметрами в письме.

Срок жизни подтверждающей ссылки

В случае, если в вашем сервисе работает «очистка» БД от неактивных аккаунтов, разумно установить срок жизни подтверждающей ссылки, который будет несколько меньше, чем период присутствия временных аккаунтов в базе. Это исключит ошибки, когда пользователь пытается подтвердить почту, а его временный аккаунт уже удалён.

Повторное подтверждение

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

The Logout script

Finally, Let’s create a logout.php file with the following code in it.

Восстановление доступа

Восстановление доступа к аккаунту осуществляется в два этапа:

1. Заполнение формы

Подстановка email

2. Подтверждение

Срок жизни подтверждающей ссылки

Крайне желательно, чтобы ссылка на смену пароля не была «вечной». Это позволит избежать множество неприятных ситуаций. Поэтому при проверке ссылки на сервере мы, в числе прочего, проверяем и её срок действия.

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

Деактивация подтверждающей ссылки

Ну и разумеется, мы не можем позволять пользователям несколько раз сбрасывать пароль по одной и той же ссылке (банальный перехват URL позволит вытворять непозволительные вещи). Поэтому после первого перехода из письма ссылка будет деактивироваться.

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

Общие функции

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

1. Клиент

Показ сообщений

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

Валидация

Тоже не сложно. Как правило, типов полей форм, которые надо валидировать, максимум 3-4, плюс один кастомный, по маске (RegExp). Логично вынести валидацию в отдельную функцию и применять к конкретным полям по необходимости. Благо, для любого фреймворка есть куча готовых решений на эту тему.

Отправка данных

Стандартный механизм асинхронной отправки с обработкой результата. Как правило, имеется в любом фреймворке «из коробки», но иногда имеет смысл расширить функциональность (например, за счёт URL’ов API, помещённых в константы).

Успешная аутентификация

2. Сервер

Очистка данных

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

Валидация

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

Отправка email

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

Запись успешного входа

Step 1: creating a login form in html

Below is the Login Form in HTML. Paste it in a file named login.php

Step 1: creating registration form in html

We will create a PHP file named register.php with the following code in it. This is a simple HTML form with some basic validation. If you are not familiar with HTML then you can get it from many online sites who give ready-made html5 login form templates.

Архив обновлен 24.02.2022г.

Внимание:
Если вы используете данный скрипт на локальном сервере типа
DENWER XAMPP
, то не
стоит ждать писем на свой почтовый ящик. Письма лежат в заглушке
sendmail
. В
Denwer
вы их можете
найти по пути
Z:tmp!sendmail
открыть данные файлы вы сможете в любом почтовом клиенте.

В завершение

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

Я много пишу про проектирование, разработку и продюсирование IT-проектов, и все свои материалы агрегирую в уютном телеграм-канале, велкам.

#инструкция#selectel_инструкция

Добавляем динамичности

Теперь настало время создать файлы проекта:

Начнем с последнего. Он поможет нам облегчить весь процесс создания формы авторизации на PHP. В него мы запишем используемую всеми тремя формами часть разметки HTML – раздел header:

Сохраните этот файл на сервере как header.php. Затем создайте все перечисленные выше файлы, но уже без раздела header. А вместо него вверху вставьте строку:

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

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

Настраиваем регистрацию

В файле reg.php располагается весь функционал для регистрации пользователей: форма и обработчик введенных в нее данных. При использовании связки PHP MySQL для создания и обработки форм значения всех полей, заполняемых пользователем и передаваемых на обработку, нужно предварительно «очистить».

На основе данного примера можно реализовать скрипт создания формы редактирования данных (update PHP). Но это уже немного из другой «оперы»

Сверху нее отображаются все системные сообщения. При успешной регистрации можно добавить переход на страницу приветствия (enter.php). Для этого замените строку PHP:

Код файла enter.php:

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

Остальная разметка

Так как создаваемые динамические формы PHP взаимосвязаны, то сразу «обнародую» и код следующей, предназначенной для авторизации:

Вот так эта форма выглядит в окне браузера.

Подключение к базы данных

В корневую папку сайта, создаем файл с названием “dbconnect.php”. В этом файле, добавляем следующий код:

  <?php
      // Указываем кодировку
      header('Content-Type: text/html; charset=utf-8');

      $server = "localhost"; /* имя хоста (уточняется у провайдера), если работаем на локальном сервере, то указываем localhost */
      $username = "имя_пользователя_бд"; /* Имя пользователя БД */
      $password = "пароль_пользователя_бд"; /* Пароль пользователя, если у пользователя нет пароля то, оставляем пустым */
      $database = "имя_базы_данных"; /* Имя базы данных, которую создали */

      // Подключение к базе данный через MySQLi
      $mysqli = new mysqli($server, $username, $password, $database);

      // Проверяем, успешность соединения. 
      if ($mysqli->connect_errno) {
              die("<p><strong>Ошибка подключения к БД</strong></p><p><strong>Код ошибки: </strong> ". $mysqli->connect_errno ." </p><p><strong>Описание ошибки:</strong> ".$mysqli->connect_error."</p>");
      }

      // Устанавливаем кодировку подключения
      $mysqli->set_charset('utf8');

      //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта
      $address_site = "http://testsite.local";
  ?>

Структура таблицы: bez_reg

--
-- Структура таблицы `bez_reg`
--

CREATE TABLE IF NOT EXISTS `bez_reg` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `login` varchar(200) NOT NULL,
  `pass` varchar(32) NOT NULL,
  `salt` varchar(32) NOT NULL,
  `active_hex` varchar(32) NOT NULL,
  `status` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Файл reg_form.html

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

Итоговая схема

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