Пакет 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 — регистрация, авторизация, сброс пароля в модальном окне. Рекомендую!
Ваш сниппет должен обработать фото и записать путь в колонку photo таблицы.
Не понимаю куда вставлять вызов сниппета Personalize?
Почему у вас используются шаблоны с приставкой user (userLgnForgotPassEmail), это то есть ваш собственный шаблон?
Если стандартные чанки редактируются, то имеет смысл поменять название. Иначе, при обновлении компонента, они могут переписаться.
С этим разобрался.
Только почему-то на главной странице после авторизации такое вот:
Привет, Demdem!
Настройки: Профиля | (Выход)
Выход
Два раза кнопка Выход.
И еще можно сделать так чтобы на главной странице появлялась, к примеру, картинка… то есть когда пользователь авторизовался он мог увидеть картинку… а не только те страницы, которые доступны авторизованным пользователям?
Картинку авторизованным можно показывать так:
Заранее благодарен
Если, даже, помещаете, то отключайте редактор у этого ресурса.
+30.04.2015 12:04:23 SMTPSERV 0003 Подключился SMTP-клиент [192.168.1.159]
<30.04.2015 12:04:23 SMTPSERV 0003 220 domain.local Courier Mail Server 1.59 ESMTP service ready
>30.04.2015 12:04:24 SMTPSERV 0003 EHLO Noutbook
<30.04.2015 12:04:24 SMTPSERV 0003 250-domain.local greets Noutbook
<30.04.2015 12:04:24 SMTPSERV 0003 250 8BITMIME
>30.04.2015 12:04:24 SMTPSERV 0003 MAIL FROM: <Gaara2046@bk.ru>
<30.04.2015 12:04:24 SMTPSERV 0003 250 OK — mail from <Gaara2046@bk.ru>
>30.04.2015 12:04:24 SMTPSERV 0003 RCPT TO: <Gaara2046@bk.ru>
<30.04.2015 12:04:24 SMTPSERV 0003 250 OK — Recipient <Gaara2046@bk.ru>
>30.04.2015 12:04:24 SMTPSERV 0003 DATA
<30.04.2015 12:04:24 SMTPSERV 0003 354 Send data. End with CRLF.CRLF
<30.04.2015 12:04:24 SMTPSERV 0003 250 OK
>30.04.2015 12:04:24 SMTPSERV 0003 QUIT
<30.04.2015 12:04:24 SMTPSERV 0003 221 Service closing transmission channel
-30.04.2015 12:04:24 SMTPSERV 0003 Отключился SMTP-клиент [192.168.1.159]
@30.04.2015 12:04:28 ROUTER Письмо от Gaara2046@bk.ru помещено в «Исходящие»
Как я понимаю письмо отправлено, вот только ничего не пришло мне на почту
Помогите разобраться пожалуйста
Вот что получается, не заметил сразу