MODX Revo - Авторизация c помощью Login

Урок, в котором рассмотрим создание страниц "Авторизация" и "Восстановление пароля" с помощью компонента Login.

Страница "Авторизация"

Страница "Авторизация" предназначена для отображения пользователю формы входа на сайт, а также HTML-фрагмента с помощью которого он может выйти из системы. Всё логику работы по авторизации пользователя выполняет сниппет Login.

Содержимое ресурса "Авторизация" (сниппет Login):

[[!Login? 
  &tplType=`modChunk`
  &loginTpl=`myLoginChunk`
  &logoutTpl=`myLogoutChunk`
  &errTpl=`lgnErrTpl` 
  &redirectToPrior=`1`
]]
MODX Login - Процесс авторизации пользователя
MODX Login - Процесс авторизации пользователя

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

Имя параметра Описание
tplType Тип шаблона для loginTpl и logoutTpl. Значение: modChunk.
loginTpl Шаблон формы для авторизации (входа) пользователя.
logoutTpl Шаблон, который отображается авторизованному пользователю.
errTpl Шаблон, который отображается пользователю при возникновении ошибки.
redirectToPrior Если установлено значение 1, то перенаправляет пользователя на предыдущую страницу (HTTP_REFERER) после успешного входа.

Содержимое чанка myLoginChunk (шаблон формы входа):

<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> [[+actionMsg]]</div>
        <div class="panel-body">
          <p class="text-danger">[[+errors]]</p>
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.username]]</label>
              <div class="col-sm-8">
                <input type="text" name="username" class="form-control" id="username">
              </div>      
            </div>
            <div class="form-group">
              <label for="password" class="col-sm-4 control-label">[[%login.password]]</label>
              <div class="col-sm-8">
                <input type="password" name="password" class="form-control" id="password">
              </div>      
            </div>              
            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
            <input class="loginLoginValue" type="hidden" name="service" value="login">
            <input type="submit" value="[[+actionMsg]]" name="Login" id="Login" class="btn btn-primary pull-right">
          </form>
          <div class="clearfix"></div>
          <hr style="margin-top:10x;margin-bottom:5px;">
          <p><a href="[[~32]]" class="btn btn-link pull-right">Забыли пароль?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма входа
MODX Login - Форма входа

Содержимое чанка myLgnErrTpl (шаблон ошибки):

<p class="error">[[+msg]]</p>
MODX Login - Форма входа (ошибка)
MODX Login - Форма входа (ошибка)

Содержимое чанка myLogoutChunk (шаблон, которой отображается авторизированному пользователю; используется для выхода из системы):

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div class="panel panel-primary">
        <div class="panel-heading"><i class="glyphicon glyphicon-user"></i> Пользователь</div>
        <div class="panel-body">
          <div class="loginMessage">[[+errors]]</div>
          Имя пользователя: [[!+modx.user.username]]
          <hr style="margin-top:8px; margin-bottom:8px;">
          <div class="row">
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-off"></i> <a href="[[+logoutUrl]]" title="[[+actionMsg]]">[[+actionMsg]]</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-pencil"></i> <a href="[[~33]]" title="Изменение пароля">Изменение пароля</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-home"></i> <a href="[[~30]]" title="Личный кабинет">Личный кабинет</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-cog"></i> <a href="[[~34]]" title="Редактирование данных">Редактирование данных</a>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
MODX Login - Форма выхода
MODX Login - Форма выхода

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

Страница "Восстановления пароля" используется для тех случаев, когда пользователь забыл пароль и хочет его сбросить. Переход на данную страницу осуществляется с помощью ссылки "Забыли пароль?", которая расположена ниже формы авторизации.

Этот ресурс выполняет следующие действия:

  • отображает пользователю форму, с помощью которой он может потребовать выполнить сброс пароля;
  • отправляет письмо (после успешной обработки формы) на email. Письмо содержит ссылку, с помощью которой пользователь может выполнить сброс своего пароля. На этой странице вышеперечисленные действия выполняет сниппет ForgotPassword;
  • отображает сообщение (если пользователь перешёл на эту страницу с помощью ссылки из письма), с помощью которой пользователь сможет выполнить сброс пароля. Эти действия на странице (установку нового пароля и отображение результата сброса) выполняет сниппет ResetPassword.

Содержимое ресурса "Восстановления пароля" (сниппет ForgotPassword и ResetPassword):

[[!ResetPassword:empty=`
  [[!ForgotPassword?  
    &resetResourceId=`[[*id]]`
    &loginResourceId=`29`
    &tpl=`mylgnForgotPassTpl`
    &sentTpl=`mylgnForgotPassSentTpl`
    &emailTpl=`mylgnForgotPassEmail`
    &emailSubject=`Восстановление пароля`
  ]]`? &tpl=`mylgnResetPassTpl` 
       &loginResourceId=`29`
]]
MODX Login - Процесс восстановления пароля пользователя
MODX Login - Процесс восстановления пароля пользователя

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

Имя параметра Описание
tpl Шаблон формы для восстановления пароля. Значение: mylgnForgotPassTpl
emailTpl Шаблон письма с инструкцией по восстановлению пароля, отправляемый пользователю. Значение: mylgnForgotPassEmail.
emailSubject Тема письма. Значение: Восстановление пароля.
sentTpl Шаблон сообщения, которое необходимо показать пользователю при удачной отправки email. Значение: mylgnForgotPassSentTpl.
loginResourceId Ресурс, на который необходимо направить пользователя после успешного подтверждения. Значение: 29.
resetResourceId Идентификатор ресурса, в котором расположен сниппет ResetPassword. Значение: [[*id]].

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

Имя параметра Описание
tpl Шаблон сообщения, содержащий информацию о сбросе пароля. Значение: mylgnResetPassTpl.
tplType Тип шаблона tpl. Значение: modChunk.
loginResourceId Ресурс, на который необходимо направить пользователя после успешного выполнения сброса пароля. Значение: 29.

Содержимое чанка mylgnForgotPassTpl (шаблон, которой отображает пользователю форму для восстановления пароля):

<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-erase"></i> [[%login.forgot_password]]</div>
        <div class="panel-body">
          <div class="text-danger">[[+loginfp.errors]]</div>
          
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.username]]</label>
              <div class="col-sm-8">
                <input type="text" name="username" class="form-control" id="username" value="[[+loginfp.post.username]]">
              </div>      
            </div>
            <p>[[%login.or_forgot_username]]</p>
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.email]]</label>
              <div class="col-sm-8">
                <input type="text" name="email" class="form-control" id="email" value="[[+loginfp.post.email]]">
              </div>      
            </div>            
            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+loginfp.request_uri]]" />
            <input class="loginFPService" type="hidden" name="login_fp_service" value="forgotpassword" />
            <input type="submit" value="[[%login.reset_password]]" name="login_fp" id="login_fp" class="btn btn-primary pull-right">            
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма для восстановления пароля
MODX Login - Форма для восстановления пароля

Содержимое чанка mylgnForgotPassSentTpl (шаблон, которой отображает пользователю сообщение об успешной отправке почты):

<p>Инструкция по сбросу пароля была отправлена на Ваш почтовый адрес ([[+email]]).</p>
MODX Login - Сообщение об успешной отправке почты пользователю для восстановления пароля
MODX Login - Сообщение об успешной отправке почты пользователю для восстановления пароля

Содержимое чанка mylgnForgotPassEmail (шаблон письма для восстановления пароля):

<p>Здравствуйте.</p>
<p>Для активации нового пароля, пожалуйста, перейдите по следующей ссылке:</p>
<p><a href="[[+confirmUrl]]">[[+confirmUrl]]</a></p>
<p>В случае успеха, вы можете использовать следующий пароль для входа:</p>
<p><strong>Имя: </strong>[[+username]]</p>
<p><strong>Пароль: </strong> [[+password]]</p>
<p>Если Вы не запрашивали это сообщение, то просто проигнорируйте его.</p>

<p>Спасибо,<br>
<em>Администратор сайта</em></p>
MODX Login - Письмо содержащее имя и новый пароль пользователя, а также ссылку, активирующую данный пароль.
MODX Login - Письмо содержащее имя и новый пароль пользователя, а также ссылку, активирующую данный пароль

Содержимое чанка mylgnResetPassTpl (шаблон сообщения о результате сброса пароля):

<div class="loginResetPass">
<p class="loginResetPassHeader">[[+username]],</p>
<p class="loginResetPassText">Ваш пароль успешно сброшен. Пожалуйста перейдите на страницу <a href="[[+loginUrl]]">"Авторизация"</a> для входа.</p>  
</div>
MODX Login - Сообщение об успешном сбросе пароля.
MODX Login - Сообщение об успешном сбросе пароля

Содержимое чанка lgnExpiredTpl (шаблон сообщения о том, что пароль уже был сброшен или срок действия ссылки истёк):

<p><strong>Информация о сбросе пароля</strong></p>
<p>Ваш пароль уже сброшен или срок действия ссылки уже истёк. Если вам нужно сбросить пароль, то перейдите по следующей <a href="[[~32]]">ссылке</a>.</p>
MODX Login - Сообщение об успешном сбросе пароля.
MODX Login - Сообщение о том, что пароль уже был сброшен или срок действия ссылки истёк


   MODX Revo 0    3331 +1

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

  1. Александр П # 0
    Спасибо. Весьма своевременно, как раз делаю авторизацию. Все понятно и доступно.))))
    1. IgorM # 0
      Здравствуйте. Добавьте пожалуйста содержимое чанка mylgnResetPassTpl, а то пропустили.)
      1. Александр Мальцев # 0
        Поправил.
      2. IgorM # 0
        И на mylgnForgotPassTpl обратите внимание пожалуйста
        1. Александр Мальцев # 0
          А что с ним не так?
          1. Максим # 0
            не тот шаблон у вас в статье
            1. Александр Мальцев # 0
              Спасибо, действительно не тот. Изменил на правильный
        2. Андрей # 0
          Александр, подскажите, пожалуйста, где черпать информацию (перечень и описания) об устанавливаемых сниппетом дополнения (в данном случае — Login) плейсхолдерах. Вроде этих:
          [[+errors]]
          [[+actionMsg]]
          [[+confirmUrl]]
          [[+username]]
          [[+loginUrl]]
          [[+request_uri]]
          [[+error.email]]
          На официальном сайте в руководстве по Login, вроде бы нет упоминаний, во всяком случае, я найти не могу.
          1. Александр Мальцев # 0
            Здравствуйте.
            Информация не всегда представлена в документации. В большинстве случаев, кроме чтения документации, необходимо ещё смотреть php-код сниппетов, а также чанки, которые устанавливаются вместе со сниппетом. В большинстве случаев этой информации хватает для того, чтобы понять какие есть плейсхолдеры.
          2. Андрей # 0
            Здравствуйте.Мучаю авторизацию второй день.
            tplType — Тип шаблона для loginTpl и logoutTpl. Значение: modChunk.
            modChunk — его надо где то прописать или создать, не могу понять?
            Еще вопрос. Захожу на страницу с авторизацией, ввожу email и пароль и получаю сообщение
            Ваша учётная запись была заблокирована…
            Подскажите, пожалуйста где может быть ошибка?
            1. Андрей # 0
              Нашел ошибку.У меня учетная запись не активировалась.В панели управления активировал и
              ошибка пропала.Тогда почему она не активируется? У меня дома Open Server.При регистрации
              письмо отправляется.Захожу в папку Temp и прохожу по ссылке в письме.Ссылка ведет в подтверждение регистрации.Но активации не происходит
              1. Александр Мальцев # 0
                Необходимо проверить, что ссылка ведёт на ресурс, содержащий сниппет ConfirmRegister. Кроме этого необходимо обратить внимание на параметр activationttl вызова сниппета Register. Он устанавливает время жизни ссылки. По умолчанию данное значение составляет 180 минут. Может быть ссылка в письме уже не актуальна? Попробуйте проверить основные моменты, можеть что-то где-то забыли?
              2. Александр Мальцев # 0
                Параметр tplType имеет значение modChunk по умолчанию, поэтому его можно не указывать. Это означает, что в качестве шаблонов будут использоваться чанки.
                Если значение шаблона хранится в файле или непосредственного в параметре tpl, то тогда это необходимо сказать сниппету посредством этого параметра.
                1. Андрей # 0
                  Спасибо, с modChunk разобрался.
                  Параметр activationttl в порядке.
                  public function setCachePassword($password) {

                  $this->modx->getService('registry', 'registry.modRegistry');
                  $this->modx->registry->addRegister('login','registry.modFileRegister');
                  $this->modx->registry->login->connect();
                  $this->modx->registry->login->subscribe('/useractivation/');
                  $this->modx->registry->login->send('/useractivation/',array($this->user->get('username') => $password),array(
                  'ttl' => ($this->controller->getProperty('activationttl',180)*60),
                  ));
                  Сейчас создал еще одну регистрацию для проверки.ConfirmRegister перенаправляет пользователя на личный кабинет, но активации нет.
                  Наделал снимков с экрана. Посмотрите что не правильно делаю?
                  1. Андрей # 0
                    itchief.ru/assets/uploadify/c/b/c/cbca2c39a4e60b5b7b8391cfa9460516.jpg
                    itchief.ru/assets/uploadify/0/e/2/0e268f334cc62e6f315f7fa15cf52554.jpg
                    itchief.ru/assets/uploadify/f/7/d/f7dd8c0e12c2e0256e9f2c47dfc2eda3.jpg
                    itchief.ru/assets/uploadify/4/4/0/4409dd0c42d873c6d7019c035c5e959b.jpg
                    itchief.ru/assets/uploadify/c/7/d/c7d7700dab30aec3cabcf32cf990b597.jpg
                    itchief.ru/assets/uploadify/5/9/5/595ecc05fb42acccd087ec33e4094acb.jpg
                    itchief.ru/assets/uploadify/a/0/2/a0208869b5a5c124aeb040dd3fc31a8d.jpg
                    itchief.ru/assets/uploadify/7/5/6/756290b2de055ce6e34ba1d6c7463dd0.jpg
                    itchief.ru/assets/uploadify/0/d/5/0d51b3eb633839039e034b8c8a0508aa.jpg
                    itchief.ru/assets/uploadify/7/a/0/7a0134741b47323b3654ef77719014ec.jpg
                    itchief.ru/assets/uploadify/0/6/0/0600e187715f5d237c69316c8b0e9fa0.jpg
                    itchief.ru/assets/uploadify/5/a/6/5a6da6d5e0aee41255d994332bf7889b.jpg
                    itchief.ru/assets/uploadify/b/7/e/b7ec50fa6ad97d321d9804ef3d4a08c7.jpg
                    itchief.ru/assets/uploadify/9/7/a/97a6383f94f4f0456eada95b963c1934.jpg
                    itchief.ru/assets/uploadify/4/d/1/4d10c8824143e97a88ae4866ad567796.jpg
                    itchief.ru/assets/uploadify/0/8/0/08089d2332fc7fd5f9a350f00efc5863.jpg
                    itchief.ru/assets/uploadify/b/f/8/bf8253ee8a2e0ce11a36bd399c453a2e.jpg
                    itchief.ru/assets/uploadify/7/b/8/7b885453b6a4a685c6e2a329f56ea2f7.jpg
                    itchief.ru/assets/uploadify/1/e/c/1ece2a0981299898026c4549ff7bed1d.jpg
                    itchief.ru/assets/uploadify/1/b/9/1b9e89b106e397de2256442cc91b897c.jpg
                    itchief.ru/assets/uploadify/1/0/6/106e6d53b37387c7db69e7550dffe8bc.jpg
                    itchief.ru/assets/uploadify/0/7/6/0768dfcb6b8478b235859452439f62ff.jpg
                    itchief.ru/assets/uploadify/e/b/2/eb2eda422d71ee1a0d81062d7bdcae0a.jpg
                    itchief.ru/assets/uploadify/8/3/c/83c875d32e8670d97fc85f674bd4194e.jpg
                    itchief.ru/assets/uploadify/f/8/3/f835522928d0b5c6eda42766b04591b4.jpg
                    itchief.ru/assets/uploadify/b/2/4/b24db5db917473a605781ea5afaf4438.jpg
                    itchief.ru/assets/uploadify/3/c/d/3cdfa56bf99ef9f9c4ac76715c37f082.jpg
                    itchief.ru/assets/uploadify/7/6/f/76f254b1397628487c7667e19140c30c.jpg

                    1. Александр Мальцев # 0
                      Вроде бы всё верно. Для начала измени параметры сниппета ConfirmRegister redirectTo и errorPage чтобы они ввели на разные страницы. Это поможет понять произошла ошибка или был успешный редирект. Второе действие — это проверить журнал ошибок, там фиксируются ошибки сниппета ConfirmRegister.
                      1. Андрей # 0
                        Удалил старые ошибки из error.log.Потом изменил параметры в ConfirmRegister.При подтверждении регистрации срабатывает errorPage.Ошибки новые не появились.
                        Нашел ошибки в файле
                        \core\cache\logs\install.config.2016-07-13T17.48.38.log

                        Вот ошибка
                        [2016-07-13 17:48:45] (ERROR @ D:\op_server\OpenServer\domains\localhost\modxreg1\core\xpdo\transport\xpdoobjectvehicle.class.php: 227) Could not copy D:/op_server/OpenServer/domains/localhost/modxreg1/core/packages/core/modContext/f3b540208ce8847165ed470f565aa8e5/0/ to D:/op_server/OpenServer/domains/localhost/modxreg1/index.php
                        [2016-07-13 17:48:45] (ERROR @ D:\op_server\OpenServer\domains\localhost\modxreg1\core\xpdo\transport\xpdoobjectvehicle.class.php: 227) Could not copy

                        У меня три modx установлено и у всех эта ошибка
                        Завтра поищу другую версию modx.Может в ней дело
              3. Слава # 0
                У вас шаблон mylgnForgotPassTpl не тот. Поменяйте пожалуйста.
                1. Александр Мальцев # 0
                  Это чанк. Его заменил на правильный. Попробуй очистить кэш в MODX и перезагрузить страницу.
                2. Слава # 0
                  Да теперь все нормально спасибо, а там прям видно было по коду, в чанке был код для авторизации. Спасибо. Хорошая статья.
                  1. Питон # 0
                    Спасибо, все работает. Одна загвоздка — почему то не срабатывает выход авторизованного пользователя. Точнее после выхода и повтороного захода есть досуп к личному кабинету и т.п.
                    1. Александр Мальцев # 0
                      Авторизацию необходимо проверять в браузере, с помощью которого Вы не входите в админку. Т.к. авторизация в админке MODX влияет на авторизацию во фронтенде.
                      Кроме этого попробуйте очистить кэш сайта, кэш браузера и перезагрузить права доступа в менеджере MODX.
                      1. Питон # 0
                        Спасибо за ответ. Причина в этом.
                        — Подскажите, а как сделать ссылку на выход отдельно, например в на главной странице сайта?
                        1. Александр Мальцев # 0
                          Можно с помощью фильтра:
                          [[!+modx.user.id:isloggedin:is=`1`:then=`
                          <a href="[[~10]]?service=logout">Выход</a>
                          `:else=``]]
                          
                          где 10 — id ресурса «Авторизация»
                          1. Питон # 0
                            Спасибо за помощь еще раз. Однако с выходом все еще наблюдаются проблемы, описанные в первом вопросе. Даже после принудительного завершения (все пользователи выведены) выход не срабатывает. А будет ли пользователь сам чистить кеш? Это вопрос. Может в настройках ресурсов птички надо все проставить там где кеширование?
                            1. Александр Мальцев # 0
                              Не используйете его в содержимом ресурса. Установите его, например, в шаблоне.
                              1. Александр Мальцев # 0
                                Можно также это сделать с помощью сниппета (например, showExit):
                                <?php
                                if ($user=$modx->getAuthenticatedUser()) {
                                $output = $modx->getChunk('exit');
                                return $output;
                                }
                                
                                Чанк exit:
                                <a href="[[~10]]?service=logout">Выход</a>
                                
                                Вызов сниппета в необходимом месте:
                                [[!showExit]]
                                
                                1. Сергей Карпук # 0
                                  Также были проблемы с выходом.
                                  Чуть поправил чанк 'myLogoutChunk' и всё заработало:
                                  <div class="col-xs-6" style="margin-bottom:8px;">
                                      <i class="glyphicon glyphicon-off"></i> <a href="[[~29]][[+logoutUrl]]" title="[[+actionMsg]]">[[+actionMsg]]</a>
                                  </div>
                                  Где [[~29]] — ссылка на страницу авторизации.
                                2. Питон # 0
                                  И вот с этим кодом не все ясно:
                                  [[!ConfirmRegister? 
                                    &authenticate=`1`
                                    &redirectTo=`4`
                                    &errorPage=`4`
                                  ]]
                                  где он должен быть и что есть за ресурс с номером 4?
                                  4
                                  1. Александр Мальцев # 0
                                    Ресурс (id), на который необходимо редиректить пользователя:
                                    redirectTo — после успешного подтверждения регистрации
                                    errorPage — при возниковении ошибки
                                    Это может быть любой ресурс, например, страница авторизации.
                                    1. Питон # 0
                                      Спасибо, много полезной информации.

                          Вы должны авторизоваться, чтобы оставлять комментарии.