Login в MODX revolution

Опубликовано: 01 Сен 2014

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

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

Вот такой структуры и будем придерживаться.

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

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

  • Имя - 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"></div>
    <form class="form" action="blog/modx-revo/login-v-modx-revolution/" 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</label> <span class="error">*</span></td>
                <td><input type="text" name="username:required:minLength=3" id="username" class="input-width-250" placeholder="Имя или логин" value="" required /></td>
                <td title="Имя может состоять только из букв и цифр (A-Z, a-z, А-Я, а-я, 0-9). Знак подчеркивания (_) лучше не использовать. Длина логина не может быть меньше 3 и больше 9 символов."><i class="icon icon-help"></i></td>
                <td><span class="error"></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="" /></td>
                <td title="Необязательное поле - можно оставить пустым."><i class="icon icon-help"></i></td>
                <td><span class="error"></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="" required /></td>
                <td title="Минимальная длина пароля - 6 символов. Используйте сложные пароли."><i class="icon icon-help"></i></td>
                <td><span class="error"></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="" /></td>
                <td title="Подтвердите свой пароль."><i class="icon icon-help"></i></td>
                <td><span class="error"></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=" required /></td>
                <td title="Сайт использует активацию аккаунта по ссылке, полученной на электронную почту. Необходим действующий email."><i class="icon icon-help"></i></td>
                <td><span class="error"></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 ресурса, ожидающий визита по ссылке из письма.

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

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

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

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

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

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

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

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

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

<!-- Если user авторизован показываем сообщение, иначе показываем форму -->
   
    <div class="loginForm">
        <div class="loginMessage"></div>
        <form class="loginLoginForm" action="blog/modx-revo/login-v-modx-revolution/" method="post">
            <table cellpadding="0" cellspacing="3">
                <tr>
                    <td><label for="usernameLogin">register.username</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="" /></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="" /></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:..... - можно указать имя чанка. -->
   
    <p>Настройки: <a href="blog/modx-evo/" title="Настройка профиля" rel="nofollow">Профиля</a> | (<a href="?service=logout">Выход</a>)</p>
</div>

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

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

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


    <p>Для восстановления пароля, нам нужен Ваш логин или адрес электронной почты, указанный при регистрации.</p>
    <div class="loginFP">
        <form class="loginFPForm" action="blog/modx-revo/login-v-modx-revolution/" method="post">
            <span>Одно из полей должно быть заполнено!</span>
            <span class="loginFPErrors"></span>
            <table cellpadding="0" cellspacing="3">
                <tbody>
                    <tr>
                        <td><label for="usernameForgot">register.username</label></td>
                        <td><input id="usernameForgot" class="input-width-250" type="text" name="username" placeholder="Логин" value="" /></td>
                        <td title="Нужно ввести логин, указанный при регистрации. Если в нашей базе такой логин мы найдём, получите ссылку на свой email для сброса пароля."><i class="icon icon-help"></i></td>
                    </tr>
                    <tr>
                        <td><label for="useremailForgot">register.email</label></td>
                        <td><input id="useremailForgot" class="input-width-250" type="text" name="email" placeholder="email" value="" /></td>
                        <td title="Если не помните логин - укажите свой email, использованный при регистрации."><i class="icon icon-help"></i></td>
                    </tr>
                    <tr>
                        <td><input class="returnUrl" type="hidden" name="returnUrl" value="" /></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=http://natalibabenko.top/">
<p class="font-size-25">Благодарим Вас за посещение, Приходите ещё!</p>

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

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

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: