Создание регистрации в MODX с использованием процессоров

Создание регистрации в MODX с использованием процессоров
Содержание:
  1. Исходные коды
  2. Этапы разработки
  3. Шаг 1. Создание шаблона
  4. Шаг 2. Создание ресурса и формы регистрации
  5. Шаг 3. Создание группы пользователей
  6. Шаг 4. Обработка формы на сервере
  7. Шаг 5. Создание процессора
  8. Шаг 6. Подтверждение email
  9. Комментарии

В этой статье разберём как на сайте, работающим под управлением CMS MODX, создать систему регистрации пользователей без каких-либо компонентов.

Исходные коды

Исходные коды к статье расположены на Github: creating-registration-on-processors.

Этапы разработки

Основные этапы разработки системы регистрации пользователей в CMS MODX с использованием процессоров:

  • создание базового шаблона (определяет макет страницы для ресурсов, которые будут использовать его в качестве шаблона);
  • создание ресурса (для вывода формы регистрации);
  • создание группы «Users» (для помещения в неё новых пользователей);
  • написание PHP скрипта для обработки формы (основное назначение: запустить процессор, выполняющий создание пользователя);
  • расширение стандартного процессора «security/user/create» (создает учётную запись для пользователя и отправляет на почту ссылку для её активации);
  • написание PHP скрипта для активации пользователя (при переходе по ссылке, содержащейся в письме).

Шаг 1. Создание шаблона

Создадим шаблон, к которому подключим фреймворк Bootstrap 5.

Шаблон, к которому подключён фреймворк Bootstrap 5

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

Шаг 2. Создание ресурса и формы регистрации

Создадим новый ресурс:

Создание ресурса в CMS MODX, в котором поместим форму для создания учётной записи

Форма регистрации сверстана под Bootstrap 5 и состоит из следующих полей:

  • email – адрес электронной почты, который также будет использоваться в качестве username пользователя;
  • specifiedpassword – пароль;
  • confirmpassword – подтверждение пароля;
  • fullname – имя или псевдоним пользователя, который будет отображаться на сайте;
  • captcha – код капчи для защиты от ботов.

HTML-код формы:

<form id="form" action="/assets/php/create-user.php" method="post">
  <div class="mb-3">
    <label for="email" class="form-label">Email*</label>
    <input type="email" class="form-control" name="email" id="email" aria-describedby="validation-email" required value="">
    <div id="validation-email" class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Пароль*</label>
    <input type="password" class="form-control" name="specifiedpassword" id="specifiedpassword" aria-describedby="validation-specifiedpassword" required value="">
    <div id="validation-specifiedpassword" class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Введите пароль ещё раз*</label>
    <input type="password" class="form-control" name="confirmpassword" id="confirmpassword" aria-describedby="validation-confirmpassword" required value="">
    <div id="validation-confirmpassword" class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="fullname" class="form-label">Ваше имя или псевдоним</label>
    <input type="text" class="form-control" name="fullname" id="fullname" aria-describedby="validation-fullname" required value="">
    <div id="validation-fullname" class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <div class="mb-2 d-flex align-items-center">
      <img src="/assets/php/captcha.php" id="captcha-image" width="132" alt="captcha">
      <div id="captcha-refresh" class="btn btn-link ml-2">Обновить</div>
    </div>
    <label for="captcha" class="form-label">Код, изображенный на картинке*</label>
    <input type="text" class="form-control" name="captcha" id="captcha" aria-describedby="validation-captcha" required>
    <div id="validation-captcha" class="invalid-feedback"></div>
  </div>
  <div class="alert alert-success d-flex align-items-center d-none" role="alert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
    <div>
      Ссылка для входа на сайт отправлена на ваш email. Проверьте вашу почту.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Зарегистрироваться</button>
</form>
Форма для регистрации на Bootstrap 5

Кроме самой формы в «create-account» ещё помещён, как было уже отмечено выше, сценарий JavaScript. Он выполняет отправку формы на сервер в фоновом режиме используя метод fetch(). После отправки он ждёт ответа и как только его получает, разбирает его и выводит определённым образом на страницу.

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

Код для обновления капчи при нажатии на кнопку:

const captchaRefresh = document.querySelector('#captcha-refresh');
captchaRefresh.addEventListener('click', (e) => {
  const captchaImage = document.querySelector('#captcha-image');
  captchaImage.src = '/assets/php/captcha.php?r=' + new Date().getUTCMilliseconds();
});

Получать данные от сервера будем в формате JSON.

В случае, когда данные не прошли валидацию, в success будет находиться значение false, а в errors – ошибки.

Пример ответа при неудачном создании пользователя:

{
  success: false,
  errors: [
    0: {id: "fullname", msg: "Это имя уже занято!"},
    1: {id: "confirmpassword", msg: "Пароли не совпадают."}
  ]
}
Отображение сообщений при неудачном создании пользователя в CMS MODX

Пример ответа при успешном добавлении пользователя в систему:

{success: true}

Таким образом, когда success: true, то все данные корректны и пользователь создан в MODX. В противном случае данные не прошли валидацию или произошла ошибка при создании пользователя.

JavaScript при получении ответа success: false отобразит ошибки находящиеся в errors в соответствующих полях.

При success: true JavaScript удалит класс d-none у .alert и тем самым покажет пользователю сообщение: «Ссылка для входа на сайт отправлена на email. Проверьте вашу почту».

Вывод сообщения при успешном добавлении пользователя в CMS MODX

Шаг 3. Создание группы пользователей

При создании пользователей будем их добавлять в группу «Users» и устанавливать им роль «Member». Пользователи, принадлежащие к этой группе, будут иметь доступ к ресурсам, расположенным в группе «Users». В следующих темах мы поместим в эту группу ресурсы: «Личный кабинет», «Изменение пароля», «Редактирование данных».

Создание группы пользователей в CMS MODX

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

Шаг 4. Обработка формы на сервере

Обработку формы выполним в файле: «/assets/php/create-user.php».

Создание файла для обработки формы регистрации в CMS MODX

Начинается код этого файла с загрузки MODX:

<?php
require_once '/absolute/path/to/modx/config.core.php';
require_once MODX_CORE_PATH.'model/modx/modx.class.php';
$modx = new modX();
$modx->initialize('web');
$modx->getService('error', 'error.modError', '', '');

Эти строчки инициализируют объект MODX в контексте «web» и обработчик ошибок. После них нам становятся доступны любые методы, функции и классы MODX.

Создание нового пользователя выполняется через процессор MODX.

Процессор MODX – это PHP скрипт, который запускается AJAX коннектором. Предназначены процессоры для выполнения определенных действий. Находятся они в папке «/core/model/modx/processors». В качестве результата возвращают ответ в виде JSON.

Для создания пользователей в MODX имеется стандартный процессор: «security/user/create».

Но в чистом виде он нам не подходит. Для реализации этой задачи нам потребуется его расширить. Выполним это в файле «/ext/user/create.class.php». Как это сделать детально рассмотрим в следующем шаге.

А сейчас представим, что процессор «/ext/user/create» уже готов. Для создания пользователя ему необходимо передать данные. В коде они записываются в переменную $params.

Запуск процессора выполняется через специальный метод runProcessor:

$response = $modx->runProcessor('ext/user/create', $params);

В результате выполнения процессор вернёт ответ (объект modProcessorResponse). Поместим его в $response.

С помощью isError() проверим был ли ответ неудачным, и, если это так, то присвоим $result['success'] значение false, а $result['errors']$response->response['errors']. В противном случае в $result['success'] останется значение true, установленное выше.

После чего переведём значение переменной $result в JSON и выведем её.

Шаг 5. Создание процессора

Откроем созданный ранее файл:

/core/model/modx/processors/ext/user/create.class.php

Вставим в него этот код.

Процессор MODX для создания пользователей

Этот код начинается с загрузки базового класса (процессора для создания пользователя):

require MODX_CORE_PATH . 'model/modx/processors/security/user/create.class.php';

После этого выполняется создание нового класса extUserCreateProcessor, который расширяет стандартный класс modUserCreateProcessor:

class extUserCreateProcessor extends modUserCreateProcessor {
  // ...
}
return 'extUserCreateProcessor';

В своём классе переопределим следующие свойства и методы modUserCreateProcessor:

  • $permission = '' – необходимо для того, чтобы создание пользователя было доступно любому посетителю сайта;
  • beforeSave() – для добавления к проверки полей captcha и fullname;
  • sendNotificationEmail() – для того, чтобы сконфигурировать письмо так как это необходимо.

В качестве шаблона письма будем использовать этот контент. Его необходимо скопировать и поместить в файл:

/core/elements/chunks/_websignupemail_message.html

Файл предварительно нужно создать.

Шаг 6. Подтверждение email

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

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

Ссылка в письме будет ввести на файл, который будет сравнивать данные в URL с данными пользователя. Если они совпадают, то скрипт активирует пользователя и выполнит редирект на указанную страницу.

Подтверждение email выполняется в файле «/assets/php/confirm-email.php». Данный файл необходимо создать и добавить в него этот код.

Комментарии: 5

Андрей1
Андрей1

Добрый день!

Поставил MODX 3.0, а в нем переделали работу с процессорами.. папки processors теперь нет..

Как переделать код чтобы работал?

Александр Мальцев
Александр Мальцев

Привет! Да, тут нужно немного переделать, а именно:

  • взять для MODX 3 соответствующее содержимое файлов из папки, расположенной на GitHub;
  • процессоры в MODX 3 расположены в директории \core\src\Revolution\Processors\, здесь нужно создать папку Custom, а в ней User, после этого создать файл Create.php со следующим содержимым.
Описание картинки

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

Dreu
Dreu
Здравствуйте! Выполнил всё в строгом соответствии со статьёй и использовал файлы из гита, но так и не завелось ((
Dreu
Dreu
Не отображается капча, если быть точным.
снтэврика.рф/create-account.html
Александр Мальцев
Александр Мальцев
Добрый день!
Попробуйте без pdoTools или добавьте {ignore}{/ignore}, потому что этот инструмент что-то лишнее обрабатывает.
Ещё для формирования капчи нужно скопировать файлы «bg.png» и «oswald.ttf».