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

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

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

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

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

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

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

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

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

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

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

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

• заголовок – «Создание учётной записи»;
• псевдоним – «create-account»;
• шаблон – «MainTemplate»;
• содержимое – этот контент (включает форму регистрации на Bootstrap 5 и код JavaScript для взаимодействия с сервером через AJAX).

Форма регистрации сверстана под 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>

Кроме самой формы в «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: "Пароли не совпадают."}
  ]
}

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

{success: true}

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

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

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

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

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

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

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

Начинается код этого файла с загрузки 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

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

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

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». Данный файл необходимо создать и добавить в него этот код.