Авторизация пользователей на MODX Login

В этой статье рассмотрим, как с помощью Login создать форму входа, обрабатывать аутентификацию пользователей и организовать сброс пароля.

Перед тем, как переходит к изучению этой темы, рекомендуется выполнить действия, приведённые статье: Регистрация пользователей.

Форма авторизации и её обработка с помощью Login

Реализовывать страницу «Авторизация» будем с помощью компонента Login. Этот компонент будет отображать простую форму входа и выхода, а также обрабатывать аутентификацию пользователя.

1. Поместим в содержимое ресурса «Авторизация» вызов сниппета Login со следующими параметрами:

[[!Login?
  &tplType=`modChunk`
  &loginTpl=`myLoginTpl`
  &logoutTpl=`myLogoutTpl`
  &loginResourceId=`6`
]]

Описание некоторых параметров сниппета Login:

Содержимое чанка myLoginTpl (форма входа):

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">[[+actionMsg]]</div>
      <div class="card-body">
        [[+errors:notempty=`
          <div class="alert alert-danger" role="alert">[[+errors:striptags]]</div>
        `]]
        <form class="form mb-3" action="[[~[[*id]]]]" method="post">
          <div class="mb-3">
            <label for="username" class="form-label">[[%login.username]]</label>
            <input type="text" name="username" class="form-control" id="username">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">[[%login.password]]</label>
            <input type="password" name="password" class="form-control" id="password">
          </div>
          <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
          <input class="loginLoginValue" type="hidden" name="service" value="login">
          <input type="submit" name="login" class="btn btn-primary" value="[[+actionMsg]]">
        </form>
        <p><a href="[[~5]]">Забыли пароль?</a></p>
      </div>
    </div>
  </div>
</div>

Отображение ошибки при входе в систему:

Содержимое чанка myLogoutTpl:

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Пользователь: <b>[[!+modx.user.username]]</b></div>
    <div class="card-body">
      [[+errors:notempty=`<div class="alert alert-danger" role="alert">[[+errors:striptags]]</div>`]]
      <div class="list-group">
        <a class="list-group-item list-group-item-action" href="[[~6]]">Личный кабинет</a>
        <a class="list-group-item list-group-item-action" href="[[~7]]">Изменение пароля</a>
        <a class="list-group-item list-group-item-action" href="[[~8]]">Редактирование данных</a>
        <a class="list-group-item list-group-item-action" href="[[+logoutUrl]]">[[+actionMsg]]</a>
      </div>
    </div>
  </div>
</div>

Этот контент отображается авторизированному пользователю. В конце списка доступна кнопка для выхода из системы.

Сброс пароля. ForgotPassword и ResetPassword

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

На этом ресурсе выполняются следующие действия:

1. Отображение пользователю формы, с помощью которой он может запросить сброс пароля, указав в ней для этого свое имя или адрес электронной почты;
2. Если пользователь с указанными данными имеется в системе, то ему отправляется письмо на email; письмо содержит ссылку, перейдя по которой выполнится сброс пароля;
3. При успешном сбросе пользователю отображается сообщение.

Для выполнения этих действий на странице используются два сниппета: ForgotPassword и ResetPassword.

ForgotPassword отображает пользователю форму для сброса пароля, а также отправляет письмо со ссылкой для подтверждения сброса.ResetPassword выполняет действия при открытии страницы посредством ссылки из письма. Он получает данные из URL и проверяет их на соответствие. В случае успеха сбрасывает пароль и отображает сообщение, содержащее ссылку для перехода на страницу входа.

Использование сниппетов ForgotPassword и ResetPassword для восстановления пароля:

[[!ResetPassword:empty=`
  [[!ForgotPassword?
    &tpl=`myForgotPassTpl`
    &emailSubject=`Восстановление пароля`
    &sentTpl=`myForgotPassSentTpl`
    &loginResourceId=`4`
    &resetResourceId=`[[*id]]`
  ]]`?
  &tpl=`myResetPassTpl`
  &loginResourceId=`4`
  &expiredTpl=`myExpiredTpl`
]]

Этот код необходимо вставить в содержимое ресурса «Восстановления пароля».

Описание некоторых параметров сниппета ForgotPassword:

Описание некоторых параметров сниппета ResetPassword:

Содержимое чанка myForgotPassTpl (форма для для сброса пароля):

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">[[%login.forgot_password]]</div>
      <div class="card-body">
        [[+loginfp.errors:notempty=`<div class="alert alert-danger" role="alert">[[+loginfp.errors:striptags]]</div>`]]
        <form class="form" action="[[~[[*id]]]]" method="post">
          <div class="mb-3">
            <label for="username" class="form-label">[[%login.username]]</label>
            <input type="text" name="username" class="form-control" id="username" value="[[+loginfp.post.username]]">
          </div>
          <div class="mb-3">[[%login.or_forgot_username]]</div>
          <div class="mb-3">
            <label for="username" class="form-label">[[%login.email]]</label>
            <input type="text" name="email" class="form-control" id="email" value="[[+loginfp.post.email]]">
          </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" name="login_fp" class="btn btn-primary" value="[[%login.reset_password]]">
        </form>
      </div>
    </div>
  </div>
</div>

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

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Сброс пароля</div>
    <div class="card-body">
      Ссылка для сброса пароля отправлена на email <b>[[+email]]</b>.
    </div>
  </div>
</div>

Содержимое письма, которое будет отправлено на email находится в словаре login.forgot_password_email_text:

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

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

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Сброс пароля</div>
    <div class="card-body">
      <b>[[+username]]</b>, Ваш пароль был успешно сброшен. Пожалуйста, нажмите <a href="[[+loginUrl]]">сюда</a>, чтобы перейти на страницу входа.
    </div>
  </div>
</div>

Содержимое чанка myExpiredTpl (содержимое, которое будет показываться при ошибке сброса):

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Сброс пароля</div>
    <div class="card-body">
      Ваш пароль уже был сброшен или срок действия ссылки истек. Если вам нужно снова сбросить свой пароль, нажмите <a href="[[~[[*id]]]]">здесь</a>.
    </div>
  </div>
</div>

Следующая тема: Личный кабинет пользователя на MODX Login.