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

Установка приложения Login

Открываем страницу "Управление пакетами" (Приложения -> Установщик). Выполняем загрузку и установку компонента Login.

Приложение Login

Создание группы пользователей и ресурсов "Users"

Открываем страницу "Контроль доступа" (Шестерёнка -> Контроль доступа). Нажимаем на кнопку "Новая группа пользователей".

MODX - Контроль доступа

В диалоговом окне "Создать группу пользователей" заполняем следующие поля:

  • Имя: Users;
  • Описание: Зарегистрированные пользователи;
  • Создать параллельную группу ресурсов: Да;
  • Политики бэкэнда: (нет политики).

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

Нажимаем на кнопку "Сохранить". В окне "Контроль доступа" должна появиться только что созданная группа пользователей ("Users").

MODX - Созданная группа Users

Проверяем, появилась ли новая группа ресурсов "Users". Эта группа ресурсов была создана во время создания группы пользователей "Users" (включенная опция "Создать параллельную группу ресурсов"). Группа ресурсов "Users" необходима для помещения в неё ресурсов, доступ к которым будут иметь пользователи, расположенные в группе "Users". Это будут ресурсы "Личный кабинет", "Смена пароля" и "Редактирование данных". Анонимные пользователи не смогут получить доступ к этим ресурсам.

MODX - Созданная группа ресурсов Users

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

MODX - Редактирование группы пользователей Users

На странице "Группа пользователя: Users" нажимаем правой кнопкой мыши на поле "web" и выбираем пункт "Редактировать доступ к контексту".

MODX - Редактировать доступ к контексту

В диалоговом окне "Доступ групп пользователей к контексту" устанавливаем политику доступа на значение "Load, List and View" и нажимаем на кнопку "Сохранить".

MODX - Настройка политики доступа к контексту

Создание страниц (ресурсов) для Login. Настройка доступа к этим страницам

Создадим следующие страницы (ресурсы):

  • Регистрация (28) и Подтверждение регистрации (31);
  • Авторизация (29) и Восстановление пароля (32);
  • Личный кабинет (30), Изменение пароля (33) и Редактирование данных (34).

MODX Login - Создание необходимых страниц (ресурсов)

Настроим доступ к страницам "Личный кабинет", "Изменение пароля", "Редактирование данных". Они должны быть доступны только зарегистрированным пользователям (Users).

Откроем страницу "Группы ресурсов" (Сайт->Группы ресурсов) и перенесём из правого дерева в группу «Users» вышеперечисленные ресурсы.

MODX Login - Настройка доступа к страницам

Кроме этого, группе пользователей (аноним) необходимо установить доступ "Load only". Это необходимо сделать для того чтобы они могли загружать страницы из группых ресурсов Users, проверять права доступа и получать ошибку 403 "Доступ запрещен". Если не дать (аноним) Load only, то для них эти страницы не будут существовать, и они получат ошибку 404 "Не найдено".

Порядок действий: Шестерёнка -> Контроль Доступа -> (аноним) -> Редактировать группу пользователей (правой кнопкой мыши) -> Доступ к группам ресурсов -> Добавить группу ресурсов.

В диалогово окне "Добавить группу ресурсов":

  • Группа ресурсов : Users;
  • Контекст: website (web);
  • Минимальная роль: member (9999);
  • Политика доступа: Load only.

MODX Login - Настройка доступа к группе ресурсов Users анонимным пользователям

Последнее что необходимо ещё сделать, это указать в качестве страницы ошибки 403 "Доступ запрещён" ресурс "Авторизация" (id=29). Осуществляется это в настройках системы с помощью параметра unauthorized_page. Теперь если анонимный пользователь захочет попасть на закрытые страницы, ему выведится страница "Авторизация".

MODX - Настройка страницы ошибки 403

Страница (ресурс) "Регистрация"

Страница "Регистрация" будет выполнять следующие действия:

  • выводить пользователю регистрационную форму;
  • обрабатывать отправленную пользователем форму (данные) на сервере с помощью сниппета Register.

MODX Login - Регистрация пользователя

Обработку формы сниппетом Register настроим так, чтобы он выполнял следующее:

  1. Переходил к обработке регистрационной формы только в том случае, если она была отправлена с помощью кнопки, у которой значение атрибута name равно submitbtn.
  2. Выполнял проверку (валидацию) полей формы на соответствие указанным требованиям. При обнаружении ошибок, выводил их в соотвествующие места ([[!+reg.error.имяПоля]]) формы.
  3. Если форма, заполненная пользователем, ошибок не имеет (прошла валидацию):
    • отображал сообщение об успехе;
    • отправлял пользователю email, в котором содержалась бы сообщение и ссылка. Данное действие необходимо для того, чтобы пользователь подтвердил email, т.е. активировал с помощью неё (ссылки) свою учётную запись.
MODX Login - Процесс регистрации пользователя
MODX Login - Процесс регистрации пользователя

Содержимое ресурса "Регистрация" (форма и сниппет Register):

<!-- doctype, html, head (bootstrap), шапка страницы и т.д. -->  
  
[[!Register?
    &submitVar=`submitbtn`
    &activation=`1`
    &activationEmailSubject=`Подтверждение регистрации`
    &activationResourceId=`31`
    &successMsg=`<p>Спасибо за регистрацию. На вашу электронную почту [[!+reg.email]] отправлено письмо, содержащее ссылку, необходимую для активацию аккаунта. Перейдите по этой ссылке, чтобы завершить процедуру регистрации.</p>`
    &usergroups=`Users`
    &usernameField=`email`
    &passwordField=`passwd`    
    &validate=`nospam:blank,
      passwd:required:minLength=^8^,
      passwdAgain:passwdAgain=^passwd^,
      fullname:required,
      email:required:email`
    &placeholderPrefix=`reg.`
]]

<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-6">
      <div class="panel panel-primary">
        <div class="panel-heading"><i class="glyphicon glyphicon-edit"></i> Регистрация</div>
        <div class="panel-body">
          [[!+error.message:eq=``:then=`
            <form action="[[~[[*id]]]]" method="post" class="form-horizontal">
              <input type="hidden" name="nospam" id="nospam" value="[[!+reg.nospam]]">
              <div class="form-group">
                <label for="fullname" class="col-sm-4 control-label">Имя и фамилия:</label>
                <div class="col-sm-8">
                  <input type="text" name="fullname" class="form-control" id="fullname" placeholder="Как Вас зовут" value="[[!+reg.fullname]]">
                  <span class="help-block text-error">
                    [[!+reg.error.fullname]]
                  </span>        
                </div>      
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-4 control-label">Email:</label>
                <div class="col-sm-8">
                  <input type="email" name="email" class="form-control" id="email" placeholder="Введите Email" value="[[!+reg.email]]">
                  <span class="help-block text-error">
                    [[!+reg.error.email]]
                  </span>        
                </div>      
              </div>
              <div class="form-group">
                <label for="passwd" class="col-sm-4 control-label">Пароль:</label>
                <div class="col-sm-8">
                  <input type="password" name="passwd" class="form-control" id="passwd" placeholder="Введите пароль" value="[[!+reg.passwd]]">
                  <span class="help-block text-error">
                    [[!+reg.error.passwd]]
                  </span>        
                </div>      
              </div>
              <div class="form-group">
                <label for="passwdAgain" class="col-sm-4 control-label">Подтвердите пароль:</label>
                <div class="col-sm-8">
                  <input type="password" name="passwdAgain" class="form-control" id="passwdAgain" placeholder="Введите пароль ещё раз" value="[[!+reg.passwdAgain]]">
                  <span class="help-block text-error">
                    [[!+reg.error.passwdAgain]]
                  </span>        
                </div>      
              </div>
              <input type="submit" value="Далее" name="submitbtn" id="submitbtn" class="btn btn-primary pull-right">
            </form>  
          `:else=`<div class="alert alert-success">[[!+error.message]]</div>`]]
        </div>
      </div>
    </div>
  </div>
</div>

<!-- футер страницы --> 

Описание используемых параметров сниппета Register:

Имя параметра Описание
submitVar Ключ, значение которого проверяется перед тем как сниппет Register начнёт обрабатывать форму. Если в качестве значения этого параметра указать пустую строку или false, то сниппет Register будет обрабатывать форму при получении любого Post запроса.
activation Определяет стоит ли подтверждать email, указанный в регистрационной форме, или нет. Т.е. пользователь не будет активированным до тех пор, пока он не подтвердит свой email. Значение: 1 (да, необходимо).
activationEmailSubject Тема письма, в котором приходит ссылка для активирования учётной записи.
activationEmailTpl Шаблон письма, содержащий информацию и ссылку для активирования учётной записи. Будем использовать шаблон по умолчаию: lgnActivateEmailTpl.
activationResourceId Идентификатор ресурса, в котором находится сниппет с помощью которого осуществляется активирование учётной записи пользователя. Значение: 31 (id ресурса "Подтверждение регистрации").
successMsg Отображает указанное сообщение после успешной отправки регистрационной формы. Этот параметр работает тогда, когда не используется параметр submittedResourceId.
submittedResourceId Перенаправляет пользователя на указанный ресурс после успешной отправки регистрационной формы.
usergroups Список (через запятую) названий групп пользователей или идентификаторов этих групп, в которые необходимо добавить только что зарегистрированного пользователя. Значение: Users.
usernameField Имя поля формы, содержащее в качестве значения имя пользователя. Значение: email.
passwordField Имя поля формы, содержащее пароль пользователя. Значение: passwd.
validate Список (через запятую) полей для валидации (проверки). Указывается так: имя:валидатор (например, username: required, email:required). Валидаторы можно соединять. Например, email:email:required.
placeholderPrefix Префикс для плейсхолдеров. Например, значения плейсхолдеров для поля email с учётом префикса reg.: [[!+reg.email]] (значения поля), [[!+reg.error.email]] (значение ошибки).

Как работает активация аккаунта

Происходит это так: после успешной валидации формы, сниппет Register создаёт объект modUser и устанавливает полю active значение 0. Далее он отправляет письмо пользователю по указанному в регистрационной форме email. Данное письмо содержит URL (ссылку для активации). Как только пользователь перейдёт по этому URL, сниппет ConfirmRegister изменит значение поля active на 1. Теперь пользователь сможет авторизироваться на сайте, т.е. войти под своей учётной записью.

Ресурс "Подтверждение регистрации"

Страница "Подтверждение регистрации" предназначена для активирования аккаунта пользователя. Активирование выполняет сниппет ConfirmRegister на основании URL. Принцип работы его заключается в том, чтобы изменить значение поля active пользователя на 1. После этого пользователь может авторизоваться на сайте, т.е. войти под своей учётной записью.

MODX Login - Результат работы сниппета ConfirmRegister
MODX Login - Результат работы сниппета ConfirmRegister

Содержимое ресурса "Подтверждение регистрации" (сниппет ConfirmRegister):

[[!ConfirmRegister? 
  &authenticate=`1`
  &redirectTo=`4`
  &errorPage=`4`
]]

Описание используемых параметров сниппета ConfirmRegister:

Имя параметра Описание
authenticate Проверка подлинности и авторизация пользователя в текущем контексте (после подтверждения регистрации). Значение: 1 (да, выполнить).
redirectTo После успешного подтверждения, перенаправляет пользователя на ресурс, имеющий id=30 (личный кабинет).
errorPage Перенаправляет пользователя на страницу (id=30 - личный кабинет), если он попытается получить доступ к ней уже после ативирования своего аккаунта.