Login в MODX revolution.

Пакет Login в MODX revolution, на сегодняшний день, содержит в себе десять сниппетов — регистрация, авторизация, смена пароля, просмотр профиля, пользователи, и т.д. Попробуем разобраться со всем этим. Для правильной настройки и контроля всех этапов, необходима работа с email. Хорошо если установка будет проходить на реальном сервере. Создадим необходимые документы. Структура должна быть, примерно, как на картинке. Разберём что к чему:

• Регистрация  — страница, где пользователь сможет зарегистрироваться, содержит регистрационную форму.
• Спасибо за регистрацию — после отправки формы, попадаем на эту страницу с приветствием. Это говорит о том, что форма ушла на сервер и новый пользователь внесён в базу, но не активирован. Если email был указан верно, user должен получить письмо содержащую ссылку. На странице содержится приветствие и какие-то рекомендации. Страница не обязательная, но для чистоты эксперимента — пускай будет.
• Подтверждение email — нужна системе и служит в качестве редиректа на страницу авторизации. Другими словами, если пользователь получил письмо со ссылкой активации и перешёл по ней, система будет знать что всё в порядке — пользователя можно активировать. Сам пользователь эту страницу не увидит, а будет перенаправлен на страницу с формой авторизации, если попытается зайти по прямой ссылке — получит ошибку 404.
• Вход — сюда поместим форму авторизации.
• Восстановление пароля — форма для восстановления пароля.
• Сброс пароля — ещё одна системная, страница. Если пользователь попадает на неё по ссылке с почтового ящика — уничтожаем старый пароль и отправляем на страницу с формой авторизации.
• Успешный выход — если пользователь решил выйти, прощаемся.
• Домашняя страница — на эту страницу может попасть только зарегистрированный.
• Настройка профиля — место, где можно изменить информацию о себе. Кроме вас её никто не увидит.
• Настройка аккаунта — ещё одна личная страница, где можно поменять свой адрес электронной почты и пароль.
• Просмотр профиля — здесь, можно зайти в гости к другому пользователю.
• 404 — страница не найдена.
• 403 — доступ запрещён.

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

Создаём группу пользователей.

Так как у нас есть страницы которые рассчитаны только на зарегистрированных пользователей, создадим группу пользователей и присвоим им соответствующие права. Для этого перейдём на вкладку Безопасность/Контроль доступа. По умолчанию, уже есть две группы пользователей — это Аноним и Администратор. Добавим новую группу пользователей:

• Имя — Users (в этой статье будет так).
• Создать параллельную группу пользователей — отмечаем чекбокс.
• Политика бэкэнда — выбираем нет политики.

Сохраняем и открываем вновь созданную группу для редактирования (правая кнопка мыши — редактировать). Вкладка доступ к контексту — указываем роль: чем больше число, тем меньше прав, политика и разрешения в политике — load, list, view. Повторяем те же настройки в вкладке Доступ к группам ресурсов. Сохраняемся — готово! В конце топика небольшое видео.

Страница регистрации.

На странице регистрации ничего кроме формы не будет, поэтому обойдёмся без чанков:

<p>Поля, отмеченные (<span class="error">*</span>) - обязательны к заполнению!</p>
[[!Register?
    &submitVar=`registerbtn`
    &activationEmailTpl=`userLgnActivateEmailTpl`
    &activationEmailSubject=`Спасибо за регистрацию!`
    &usergroups=`Users::Member`
    &submittedResourceId=`9`
    &activationResourceId=`5`
]]
<div class="register">
    <div class="registerMessage">[[+error.message]]</div>
    <form class="form" action="[[~[[*id]]]]" method="post">
        <table cellpadding="0" cellspacing="3">
            <tr>
                <td><input type="hidden" name="nospam:blank" value="" /></td>
            </tr>
            <tr>
                <td><label for="username">[[%register.username? &namespace=`login` &topic=`register`]]</label> <span class="error">*</span></td>
                <td><input type="text" name="username:required:minLength=3" id="username" class="input-width-250" placeholder="Имя или логин" value="[[+username]]" required /></td>
                <td title="Имя может состоять только из букв и цифр (A-Z, a-z, А-Я, а-я, 0-9). Знак подчеркивания (_) лучше не использовать. Длина логина не может быть меньше 3 и больше 9 символов."><i class="icon icon-help"></i></td>
                <td><span class="error">[[+error.username]]</span></td>
            </tr>
            <tr>
                <td><label for="fullname">[[%register.fullname]]</label></td>
                <td><input type="text" name="fullname" id="fullname" class="input-width-250" placeholder="Полное имя" value="[[+fullname]]" /></td>
                <td title="Необязательное поле - можно оставить пустым."><i class="icon icon-help"></i></td>
                <td><span class="error">[[+error.fullname]]</span></td>
            </tr>
            <tr>
                <td><label for="password">[[%register.password]]</label> <span class="error">*</span></td>
                <td><input type="password" name="password:required:minLength=6" id="password" class="input-width-250" placeholder="Пароль" value="[[+password]]" required /></td>
                <td title="Минимальная длина пароля - 6 символов. Используйте сложные пароли."><i class="icon icon-help"></i></td>
                <td><span class="error">[[+error.password]]</span></td>
            </tr>
            <tr>
                <td><label for="password_confirm">[[%register.password_confirm]]</label> <span class="error">*</span></td>
                <td><input type="password" name="password_confirm:password_confirm=`password`" id="password_confirm" class="input-width-250" placeholder="Повторите пароль" value="[[+password_confirm]]" /></td>
                <td title="Подтвердите свой пароль."><i class="icon icon-help"></i></td>
                <td><span class="error">[[+error.password_confirm]]</span></td>
            </tr>
            <tr>
                <td><label for="email">[[%register.email]]</label> <span class="error">*</span></td>
                <td><input type="email" name="email:email" id="email" class="input-width-250" placeholder="email" value="[[+email]] required /></td>
                <td title="Сайт использует активацию аккаунта по ссылке, полученной на электронную почту. Необходим действующий email."><i class="icon icon-help"></i></td>
                <td><span class="error">[[+error.email]]</span></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="input-width-250 input-submit-backgroud" name="registerbtn" value="ЗАРЕГИСТРИРОВАТЬСЯ" /></td>
            </tr>
        </table>
    </form>
</div>

Что мы тут имеем — не кэшированный вызов сниппета с параметрами и саму форму регистрации.

• &submitVar=`registerbtn` — имя кнопки, при нажатии которой форма отправится на сервер.
• &activationEmailTpl=`userLgnActivateEmailTpl` — чанк содержит письмо с информацией, которое отправится пользователю. По умолчанию lgnActivateEmailTpl.
• &activationEmailSubject=`Спасибо за регистрацию!` — тема письма.
• &usergroups=`Users::Member` — в какую группу и с какими правами определяем пользователя.
• &submittedResourceId=`4` — ID ресурса с приветствием, сюда попадаем после нажатия кнопки «Зарегистрироваться». Если в параметрах указать &successMsg=`здесь сообщение...`, то эта страница не нужна.
• &activationResourceId=`5` — ID ресурса, ожидающий визита по ссылке из письма.

Форма может быть другой, но у меня такая. Сюда я добавил подсказки и валидацию браузером html5. Что у меня получилось смотрим. Теперь по содержанию письма, которое уходит пользователю, оно на английском языке — я его изменил на свой текст и конечно же переименовал чанк на случай обновления пакета Login. С регистрацией, вроде, разобрались… А вообще, для какой-то тонкой, своей, настройки лучше читать мануалы. Потому что параметров очень много, например: по умолчанию ссылка будет рабочей в течение 3 часов, можно добавить свои дополнительные условия, валидаторы, отказаться от подтверждения и т.д.После успешной отправки формы, пользователь появляется в числе зарегистрированных, но его учётная запись не активирована.

Спасибо за регистрацию.

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

Страница подтверждения регистрации.

Эта страница должна содержать примерно такой код:

[[!ConfirmRegister?
    &redirectTo=`11`
    &errorPage=`14`
]]

Здесь всё просто. Вызываем сниппет ConfirmRegister, который подтверждает переход по ссылке и отправляет в свой кабинет, где можно добавить информацию о себе. После этого user становится активным. Страницу ошибки можно не указывать.

Страница авторизации.

По большому счёту эта страница не обязательна. Потому что форма авторизации, как правило, находиться на каждой странице сайта и всегда видима для не авторизованных пользователей (гостей). Но раз нас будут редиректить по ссылке из письма, то логичней было бы создать такую страницу, где бы находилась только одна форма входа и ничего более. Это лучше, чем искать форму входа на странице где много информации. Форма простая и содержит поля: логин, пароль и кнопку <<войти>>. Сделаем так, чтобы эту форму могли видеть только гости сайта. Это на тот случай, если авторизованный пользователь попытается воспользоваться прямой ссылкой на эту страницу. Зачем авторизованному видеть форму на сайт?

<!-- Если user авторизован показываем сообщение, иначе показываем форму -->
[[!+modx.user.id:isloggedin:is=`1`:then=`<p>Вы уже авторизованы на сайте <strong>[[++site_name]]</strong>.</p>`:else=`
[[!Login?
    &loginTpl=`embedded`
    &errTpl=`lgnErrTpl`
    &loginResourceId=`11`
    &loginMsg=`ВОЙТИ`
]]
<div class="loginForm">
    <div class="loginMessage">[[+errors]]</div>
        <form class="loginLoginForm" action="[[~[[*id]]]]" method="post">
            <table cellpadding="0" cellspacing="3"> 
                <tr>
                    <td><label for="usernameLogin">[[%register.username? &namespace=`login` &topic=`register`]]</label></td>
                    <td><input id="usernameLogin" class="input-width-250" type="text" placeholder="Логин" name="username" required /></td>
                </tr>
                <tr>
                    <td><label for="loginPasswordLabel">[[%register.password]]</label></td>
                    <td><input id="loginPasswordLabel" class="input-width-250" type="password" placeholder="Пароль" name="password" required /></td>
                </tr>
                <tr>
                    <td><input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" /></td>
                    <td><input class="loginLoginValue" type="hidden" name="service" value="login" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input class="input-width-250 input-submit-backgroud" type="submit" name="Login" value="[[+actionMsg]]" /></td>
                </tr>
            </table>
        </form>
    </div>`]]

Также, весь код помещаем на страницу.

• &loginTpl=`embedded` — указываем, что форма встроена в страницу. По умолчанию — чанк lgnLoginTpl.
• &errTpl=`lgnErrTpl` — сообщения о ошибках.
• &loginResourceId=`11` — после авторизации отправляемся на страницу настроек профиля.
• &loginMsg=`ВОЙТИ` — надпись на кнопке будет такой.

После сброса пароля, попадаем на страницу авторизации — входим на сайт, отправляемся редактировать профиль. Вроде логично?!Такую же форму, или ссылки на вход и регистрацию нужно поместить в определённый блок на сайте. Пока пользователь не зарегистрирован или не авторизован — видим приглашение на вход, после входа на сайт — мини-бар с информацией о себе и ссылками в свой кабинет для настройки профиля, смены пароля, выхода из статуса авторизован и т. д. Можно разместить аватарку. В наш мини-бар (назовем его так) поместим вызов сниппета Login, примерно такого содержания:

[[!Login?
    &loginTpl=`userLgnLoginTpl`
    &logoutTpl=`userLgnLogoutTpl`
    &errTpl=`lgnErrTpl`
    &logoutResourceId=`9`
    &loginMsg=`войти`
]]

Добавились новые параметры:

• &logoutTpl=`userLgnLogoutTpl` — этот чанк будет заменять форму входа после успешной авторизации или регистрации, в этом чанке будет находиться всё, что мы хотим видеть в нашем мини-баре.
• &logoutResourceId=`9` — редирект на страницу прощания с пользователем, при его выходе.

Нам понадобится сниппет Personalize — этот сниппет, скажем так, фильтрует посетителей сайта на гостей и пользователей. Из пользователей — на группы, конкретных пользователей по ID. Другими словами, с помощью Personalize определяем, что могут просматривать те или иные посетители сайта. Подробнее здесь.

<div class="user-info-bar"><!-- вместо @CODE:..... - можно указать имя чанка. -->
    [[!Personalize?
         &yesChunk=`@CODE:<p>Привет, <a href="[[~13]]/?user=[[+name]]" class="user-name-hi" title="Посмотреть профиль [[+name]]" rel="nofollow">[[+name]]!</a></p>`
         &ph=`name`
    ]]
    <p>Настройки: <a href="[[~11]]" title="Настройка профиля" rel="nofollow">Профиля</a> | (<a href="[[~1? &service=`logout`]]">Выход</a>)</p>
</div>

Personalize содержит два основных параметра: &yesChunk — то, что показываем определённым лицам и &noChunk — показываем всем.

Страница восстановления пароля.

Помещаем весь код прямо на страницу.

[[!ForgotPassword?
     &tplType=`embedded`
     &emailTpl=`userLgnForgotPassEmail`
     &emailSubject=`Заказан сброс пароля`
     &sentTpl=`userLgnForgotPassSentTpl`
     &resetResourceId=`8`
]]
<p>Для восстановления пароля, нам нужен Ваш логин или адрес электронной почты, указанный при регистрации.</p>
<div class="loginFP">
    <form class="loginFPForm" action="[[~[[*id]]]]" method="post">
        <span>Одно из полей должно быть заполнено!</span>
        <span class="loginFPErrors">[[+loginfp.errors]]</span>
        <table cellpadding="0" cellspacing="3">
            <tbody>
                <tr>
                    <td><label for="usernameForgot">[[%register.username? &namespace=`login` &topic=`register`]]</label></td>
                    <td><input id="usernameForgot" class="input-width-250" type="text" name="username" placeholder="Логин" value="[[+loginfp.post.username]]" /></td>
                    <td title="Нужно ввести логин, указанный при регистрации. Если в нашей базе такой логин мы найдём, получите ссылку на свой email для сброса пароля."><i class="icon icon-help"></i></td>
                </tr>
                <tr>
                    <td><label for="useremailForgot">[[%register.email? &namespace=`email` &topic=`register`]]</label></td>
                    <td><input id="useremailForgot" class="input-width-250" type="text" name="email" placeholder="email" value="[[+loginfp.post.email]]" /></td>
                    <td title="Если не помните логин - укажите свой email, использованный при регистрации."><i class="icon icon-help"></i></td>
                </tr>
                <tr>
                    <td><input class="returnUrl" type="hidden" name="returnUrl" value="[[+loginfp.request_uri]]" /></td>
                    <td><input class="loginFPService" type="hidden" name="login_fp_service" value="forgotpassword" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" name="login_fp" class="input-width-250 input-submit-backgroud" value="ОТПРАВИТЬ" /></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

Вызываю сниппет ForgotPassword не кэшированным со следующими параметрами:

• &tplType=`embedded` — указываем что форма на странице.
• &emailTpl=`userLgnForgotPassEmail` — шаблон письма для отправки на email.
• &emailSubject=`Заказан сброс пароля` — тема письма
• &sentTpl=`userLgnForgotPassSentTpl` — шаблон с сообщением об отправке письма
• &resetResourceId=`8` — ID ресурса, при попадании на которую старый пароль будет уничтожен.

На почту придёт письмо со ссылкой на ресурс с ID = 8, там же будет и новый пароль сгенерированный системой автоматически. Новый пароль станет актуальным только после уничтожения старого. Старый пароль будет сброшен после перехода по ссылке.

Страница сброса пароля.

Опубликованная страница следующего содержания:

[[!ResetPassword?
    &tpl=`userLgnResetPassTpl`
]]

В чанке userLgnResetPassTpl, по умолчанию lgnResetPassTpl, сообщение об удачном сбросе старого пароля и ссылкой на страницу авторизации с ID = 6.

Успешный выход.

Ещё одна не обязательная страница, может содержать следующее:

<!-- показываем сообщение и через 3 сек. редиректим на главную. -->
<meta http-equiv="refresh" content="3;URL=[[~1]]">
<p class="font-size-25">Благодарим Вас за посещение, Приходите ещё!</p>

Домашняя страница.

Эта страница должна принадлежать к группе ресурсов Users и быть доступна только им. При редактировании документа, чекбокс в группе ресурсов должен быть отмечен.

Заключение.

Довольно таки обширная тема, много кода на странице… — всю работу за вас сделал)).

ajaxLogin — регистрация, авторизация, сброс пароля в модальном окне. Рекомендую!