Ajax регистрация modx – [ajaxLogin] Регистрация, Авторизация, Сброс пароля / Русскоязычное сообщество MODX

Leave a Comment / Разное / By /

ajaxLogin / Пользователи / Дополнения MODX / modstore.pro

Внимание, этот компонент требует версию PHP 5.4 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.

Внимание, этот компонент требует версию MODX не ниже 2.3 !

Компонент ajaxLogin для MODX revolution реализует регистрацию, авторизацию и сброс пароля на сайте через AJAX, содержит в себе один сниппет и кучу чанков. Обязательно должен быть установлен пакет Login, автоматическая загрузка, пока, не реализована. Из пакета Login работает только с тремя сниппетами, это: Login, Register и ForgotPassword.

Все действия происходят в модальном окне, по умолчанию bootstrap3
Должна быть подключена библиотека jQuery.

Сниппет ajaxLogin
Как я выше писал, ajaxLogin содержит в себе кучу чанков, которые все служат для переопределения чанков по умолчанию сниппетов пакета Login, кроме одного — ajaxLoginTpl.
Этот чанк разделён на две части сепаратором , и служит для вывода кнопки «Войти» или имени пользователя (fullname), в зависимости от состояния юзера: авторизован/не авторизован, с выпадающим меню-дропдаун (bootstrap), в котором находится ссылка выхода. Можно добавить любые другие ссылки.
Параметры
  • &activationEmailTpl — Чанк письма для подтверждения Email, сниппета Register. По умолчанию: ajaxLoginActivateEmailTpl
  • &activationResourceId — ID ресурса, куда будет перенаправлен пользователь для подтверждения и активации своей почты при регистрации, сниппета Register. По умолчанию: Пусто
  • &emailTpl — Чанк письма с информацией о дальнейших действиях при сбросе пароля, сниппет ForgotPassword. По умолчанию: ajaxLoginForgotPassEmailTpl
  • &errTpl — Шаблон вывода ошибки для сниппетов Login и ForgotPassword. По умолчанию: ajaxLoginErrTpl
  • &frontendCss — Путь до файла со стилями.
  • &frontendJs — Путь до файла со скриптом.
  • &loginTpl — Чанк с формой авторизации для сниппета Login. По умолчанию: ajaxLoginFormTpl
  • &logoutResourceId — ID ресурса, куда пользователь будет перенаправлен при выходе. Если пусто, то текущий ресурс. По умолчанию: Пусто
  • ®isterTpl — Чанк с формой регистрации для сниппета Register. По умолчанию: ajaxLoginRegisterFormTpl
  • &resetResourceId — ID ресурса, куда будет перенаправлен пользователь для сброса пароля по ссылке из почты. По умолчанию: Пусто
  • &sentTpl — Чанк с сообщением, после заказа сброса пароля. По умолчанию: ajaxLoginForgotPassSentTpl
  • &tpl — Чанк с формой восстановления пароля для сниппета ForgotPassword. По умолчанию: ajaxLoginForgotFormTpl
  • &tplAjax — Чанк, разделённый на две части сепаратором. Та или иная часть выводится согласно статуса пользователя — авторизован или нет. По умолчанию: ajaxLoginTpl
  • &tplModal — Чанк оформления модального окна. По умолчанию: ajaxLoginModalTpl
  • &tplType — Значение указывает сниппетам Login и ForgotPassword где находится форма. По умолчанию: embedded. Не рекомендую менять этот параметр.
  • &submittedResourceId — Перенаправит пользователя после регистрации на указанный ресурс. По умолчанию: пусто

Примеры

Вот пример кода, которого вполне достаточно для работы этого компонента:
[[!ajaxLogin?
	&resetResourceId = `87`
        &emailSubject = `Заказан сброс пароля`
        &usergroups = `Users::Member`
        &activationEmailSubject = `Спасибо за регистрацию!`
        &activationResourceId = `84`
        &successMsg = `На указанный Email мы отправили ссылку, по которой нужно перейти для подтверждения почты.`
]]

Как вы понимаете, должны быть созданы ресурсы для сброса пароля и подтверждения Email, с соответствующими вызовами сниппетов: ResetPassword и ConfirmRegister

Обсуждение компонента в сообществе MODX.PRO.

[ajaxLogin] Регистрация, Авторизация, Сброс пароля / Русскоязычное сообщество MODX

Компонент ajaxLogin для MODX revolution реализует регистрацию, авторизацию и сброс пароля на сайте через AJAX, содержит в себе один сниппет и кучу чанков. Обязательно должен быть установлен пакет Login, автоматическая загрузка, пока, не реализована. Из пакета Login работает только с тремя сниппетами, это: Login, Register и ForgotPassword.

Все действия происходят в модальном окне, по умолчанию bootstrap3


Должна быть подключена библиотека jQuery.

Сниппет ajaxLogin
Как я выше писал, ajaxLogin содержит в себе кучу чанков, которые все служат для переопределения чанков по умолчанию сниппетов пакета Login, кроме двух — ajaxLoginTpl и ajaxLoginModalTpl.
Чанк ajaxLoginTpl разделён на две части сепаратором , и служит для вывода кнопки «Войти» или имени пользователя (fullname), в зависимости от состояния юзера: авторизован/не авторизован, с выпадающим меню-дропдаун (bootstrap), в котором находится ссылка выхода. Можно добавить любые другие ссылки.
Параметры
  • &activationEmailTpl — Чанк письма для подтверждения Email, сниппета Register. По умолчанию: ajaxLoginActivateEmailTpl
  • &activationResourceId — ID ресурса, куда будет перенаправлен пользователь для подтверждения и активации своей почты при регистрации, сниппета Register. По умолчанию: Пусто
  • &emailTpl — Чанк письма с информацией о дальнейших действиях при сбросе пароля, сниппет ForgotPassword. По умолчанию: ajaxLoginForgotPassEmailTpl
  • &errTpl — Шаблон вывода ошибки для сниппетов Login и ForgotPassword. По умолчанию: ajaxLoginErrTpl
  • &frontendCss — Путь до файла со стилями.
  • &frontendJs — Путь до файла со скриптом.
  • &loginTpl — Чанк с формой авторизации для сниппета Login. По умолчанию: ajaxLoginFormTpl
  • &logoutResourceId — ID ресурса, куда пользователь будет перенаправлен при выходе. Если пусто, то текущий ресурс. По умолчанию: Пусто
  • &registerTpl — Чанк с формой регистрации для сниппета Register. По умолчанию: ajaxLoginRegisterFormTpl
  • &resetResourceId — ID ресурса, куда будет перенаправлен пользователь для сброса пароля по ссылке из почты. По умолчанию: Пусто
  • &sentTpl — Чанк с сообщением, после заказа сброса пароля. По умолчанию: ajaxLoginForgotPassSentTpl
  • &tpl — Чанк с формой восстановления пароля для сниппета ForgotPassword. По умолчанию: ajaxLoginForgotFormTpl
  • &tplAjax — Чанк, разделённый на две части сепаратором. Та или иная часть выводится согласно статуса пользователя — авторизован или нет. По умолчанию: ajaxLoginTpl
  • &tplModal — Чанк оформления модального окна. По умолчанию: ajaxLoginModalTpl
  • &tplType — Значение указывает сниппетам Login и ForgotPassword где находится форма. По умолчанию: embedded. Не рекомендую менять этот параметр.
Примеры
Вот пример кода, которого вполне достаточно для работы этого компонента:
[[!ajaxLogin?
	&resetResourceId = `87`
        &emailSubject = `Заказан сброс пароля`
        &usergroups = `Users::Member`
        &activationEmailSubject = `Спасибо за регистрацию!`
        &activationResourceId = `84`
        &successMsg = `На указанный Email мы отправили ссылку, по которой нужно перейти для подтверждения почты.`
]]
Как вы понимаете, должны быть созданы ресурсы для сброса пароля и подтверждения Email, с соответствующими вызовами сниппетов: ResetPassword и ConfirmRegister

Компонент в modstore.

MODX REVO AJAX Form + FormIt как добавить поле ТЕЛЕФОН? — Хабр Q&A

Друзья подскажите, как добавить в форму AJAX FORM + FORM IT поле телефон?

Имя и Email работают, а по аналогии добавляю телефон не работает нихера, что не так? 

<form action="" method="post">

    <div>
        <label for="af_name">[[%af_label_name]]</label>
        <div>
            <input type="text" name="name" value="[[+fi.name]]" placeholder=""/>
            <span>[[+fi.error.name]]</span>
        </div>
    </div>

    <div>
        <label for="af_email">[[%af_label_email]]</label>
        <div>
            <input type="email" name="email" value="[[+fi.email]]" placeholder=""/>
            <span>[[+fi.error.email]]</span>
        </div>
    </div>

 <div>
        <label for="af_phone">Телефон</label>
        <div>
            <input type="text" name="email" value="[[+fi.phone]]" placeholder=""/>
            <span>[[+fi.error.phone]]</span>
        </div>
    </div>

    <div>
        <div>
            <button type="submit">отправить</button>
        </div>
    </div>

    [[+fi.success:is=`1`:then=`
    <div>[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div>[[+fi.validation_error_message]]</div>
    `]]
</form>

Вызываю так

[[!AjaxForm?
    &emailFrom=`[email protected]`
    &snippet=`FormIt`
    &form=`form-test`
    &hooks=`email`
    &emailSubject=`Тестовое сообщение`
    &emailTo=`[email protected]`
    &emailTpl=`emailTpl`
    &validate=`name:required,email:required,phone:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Сообщение успешно отправлено`
]]

Email tpl такой

<b>Email</b>: [[+email]]<br />
<b>Имя</b>: [[+name]]<br />
<b>Тел</b>: [[+phone]]

Урок 26. Создание AJAX формы отправки сообщений MODX

Для создания AJAX формы нам понадобится:

Алгоритм работы:

  1. пользователь заполняет поля и нажимает «Отправить»
  2. форма обращается по адресу к ресурсу, где лежит сниппет sendMail
  3. этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender

Создание формы отправки сообщения

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

В моём случае эти поля:

  • Имя
  • Email
  • Телефон
  • Сообщение

Напротив полей, обязательных для заполнения, выставим атрибут required=»required», чтобы форма не отправлялась, пока не будут заполнены данные поля.

Создание скрипта обработки формы

Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:

Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 — это ИД ресурса, где содержиться наш обработчик AJAX вызова.

Создание обработчика AJAX запроса

Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:

Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле «Содержимое» новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.

Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа.

Полный код шаблона, который используется в демо, можно просмотреть по этой ссылке

Источники, которые помогли мне в создании урока и дополнительные материалы для изучения:

Форма в Демо не отправляет сообщения А лишь демонстрирует работу скриптов.

Демо AJAX формы

личный кабинет веб пользователя / Готовые дополнения для MODX / MODX.im

Сниппет для регистрации, входа, напоминания пароля и личного кабинета пользователя.

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

Dmi3yy порекомендовал обратить внимание на класс modUsers от Agel_Nash. Из этого класса и позаимствовал некоторые методы, для упрощения работы.

Что может modxAccount.
Регистрация пользователя, с использованием всех доступных полей юзера, плюс, можно создавать свои настройки юзера в таблице web_user_settings, добавление аватарки, капча.
Восстановление пароля.
Личный кабинет.
Форма входа.

Регистрация
Например поле Адрес, вместо того чтобы предложить юзеру записать весь адрес одной строчкой, можно поставить поля для каждого значения.


<label>Город</label>
<input type="text" name="custom_field[address][city]" />

<label>Улица</label>
<input type="text" name="custom_field[address][street]" />

<label>Дом</label>
<input type="text" name="custom_field[address][house]" />

<label>Квартира</label>
<input type="text" name="custom_field[address][flat]" />

далее эти данные запишутся в базу в виде сериализованного массива json строки.

Уровень вложенности можно использовать любой, но разумнее дальше 3-4 ого не залезать.

<input type="text" name="custom_field[1][2][3][4]" />

Все новые данные будут перезаписываться в уже существующие поля, либо добавляться новые, как с адресом.
Название address, стоит в исключениях, для того чтобы юзер мог добавить несколько адресов для последующего использования, как например адреса доставки в интернет магазине.

Добавление и ресайз фотографии (аватарки).
Как динамически так и при отправке данных пользователя.

Так же есть возможность подключения капчи

Восстановление пароля
Пользователю высылается новый сгенерированный пароль, если он не менял его, то можно авторизоваться по старому паролю, а новый удалится.

Личный кабинет
Достаточно гибкий для добавления своих возможностей.

Форма входа
Стандартные два поля.

Шаблоны
Шаблоны для формы в html со вставками php кода, можно использовать php сразу в шаблоне, либо все теги modx.


<input type="text" name="email" value="<?= $email ?>" placeholder="[email protected]">
<? if($error_email) { ?>
<div>
	<?= $error_email ?>
</div>
<? } ?>

либо использовать чанки, подключив их в &tpl=`ваш чанк`
<input type="text" name="email" value="[+email+]" placeholder="[email protected]">
<@IF:[+error_email+]>
<div>
	[+error_email+]
</div>
<@ENDIF>

<input type="text" name="custom_field[address][street]" value="[+custom_field.address.street+]">
<@IF:[+error_custom_field.address.street+]>
	<div>
		[+error_custom_field.address.street+]
	</div>
<@ENDIF>
Установка
Создаёте документ
Личный кабинет с псевдонимом account
в нём создаёте дочерние
Регистрация — register
Профиль — profile
Восстановление пароля — forgot
псевдонимы страниц, будут определять выбор контроллера для каждой страницы.
Далее ставим вызов сниппета на каждой странице.

Личный кабинет — account

[!account?
&controller=`account`
&controllerRegister=`account/register`
&controllerLogin=`account`
&controllerForgot=`account/forgot`
&controllerProfile=`account/profile`
&success=``
&userGroupId=``
!]

Регистрация — register

[!account?
&controller=`account/register`
&controllerRegister=`account/register`
&controllerLogin=`account`
&controllerForgot=`account/forgot`
&controllerProfile=`account/profile`
&success=``
&userGroupId=``
!]

Профиль — profile

[!account?
&controller=`account/profile`
&controllerRegister=`account/register`
&controllerLogin=`account`
&controllerForgot=`account/forgot`
&controllerProfile=`account/profile`
&success=``
&userGroupId=``
!]

Восстановление пароля — forgot

[!account?
&controller=`account/forgot`
&controllerRegister=`account/register`
&controllerLogin=`account`
&controllerForgot=`account/forgot`
&controllerProfile=`account/profile`
&success=``
&userGroupId=``
!]

Вместо псевдонимов контроллеров &controller…, можно поставить id страниц на которых расположен тот или иной вызов сниппета.

&success — перенаправление после удачного действия сниппета.

&userGroupId — id групп, через запятую для нового зарегистрированного пользователя.

В одну строку
При создании вложенности документов, как указанно выше и используя вложенные URL,
вызов сниппета можно сократить до одной строчки

[!account?&userGroupId=``!]

Так же можно использовать свои шаблоны в чанках либо в файлах
[!account?
&tpl=`@FILE:assets/snippets/account/view/register.tpl.txt`
&userGroupId=``
!]
Сниппет
Затем создаёте сниппет account с кодом
<?php
require MODX_BASE_PATH.'assets/snippets/account/snippet.account.php';
?>

и копируете папку со сниппетом (ссылка ниже)

Капча для форм использована своя, поскольку стандартная капча перестаёт работать, если закрывать папку manager через .htaccess (ссылка на гит), либо использовать другую которая пишет значение в сессию $_SESSION[‘veriword’]

Ajax
Для работы через ajax используется modxLoader, статья на modx.im и код гите
Скачать
Скачать сниппет на гите — modxAccount

В создании сниппета использованы функции из класса modUsers, за последнее исправление в SessionHandler, большое спасибо Pathologic

Свежим взглядом посмотрел DrMorro, после статьи об уязвимостях WebloginPE.

Спасибо Agel_Nash за AJAX финальный метод №4 и подсказки в работе контроллера через ajax и вопросах его безопасности и так же методы из MODxApi и modUsers.

И спасибо Dmi3yy за направления, где и что посмотреть да почитать на данную тему.

Жду ваших комментариев и вопросов по работе сниппета.


UPD: добавлен вывод многомерных массивов в плейсхолдерах чанка шаблона. [+custom_field.address.street+]

UPD: добавлена возможность использования своих шаблонов в чанках или файлах

UPD: замена serialize на json

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *