Нам понадобятся следующие страницы:

• Страница регистрации с формой для регистрации
• Страница активации аккаунта
• Страница восстановления пароля
• Страница сброса пароля

Форма входа на сайт будет размещаться на всех страницах сайта (например, в хедере).

Вот такую страницу регистрации мы хотим получить:

Здесь тип учетной записи будет определять, в какую группу мы зарегистрируем пользователя. Так же полем для идентификации (username) будет электронная почта.

Добавим на страницу вызов сниппета Register :

[[!Register? &submitVar=`register-btn` &activationResourceId=`27` &activationEmailTpl=`Email.Activation` &activationEmailSubject=`Вы зарегистрированы на сайте example.com` &placeholderPrefix=`reg.` &successMsg=`Спасибо за регистрацию. На вашу электронную почту [[!+reg.email]] отправлено письмо со ссылкой на активацию аккаунта. Пройдите по этой ссылке, чтобы завершить регистрацию. ` &usernameField=`email` &usergroupsField=`reg_type` &customValidators=`valueIn` &validate=`username:blank, reg_type:valueIn=^Readers;Writers;Idlers ^, fullname:required:minLength=^6^, password:required:minLength=^6^, password_confirm:password_confirm=^password^, email:required:email` ]] [[!+error.message:default=`[[!$Register.Form]]`]]

Обратите внимание, что все теги, касающиеся регистрации нужно обязательно вызывать некешированными. Такие же правила действуют при обработке форм сниппетом FormIt.

Разберем параметры вызова:

&submitVar=`register-btn` - указывает атрибут name тега input . То есть сниппет сработает, только если отправлена форма кнопкой с определенным именем.

&activationResourceId=`42` - забегая вперед, 42 – это идентификатор страницы, на которой мы будет активировать пользователя.

&activationEmailTpl=`Email.Activation` - чанк с письмом активации, о нем позже.

&placeholderPrefix=`reg.` - указывает, что все плейсхолдеры, за редким исключением (об этом дальше), которые создаются в данном сниппете, должны начинаться с «reg.».

&successMsg – сообщение, которое выведется при успешной отправке формы. Заметьте, что в нем можно указывать значения из формы и любые другие теги. Данное сообщение запишется в плейсхолдер [[!+error.message]]. Довольно странное название, да и в документации на данный момент ошибка. Там написано [[!+reg.error.message]], но из кода компонента следует, что это не так.

&usernameField=`email` - указывает, что в качестве имени пользователя будет использоваться поле email.

&usergroupsField=`reg_type` - определяет поле, устанавливающее группу, в которую будет добавлен новый пользователь.

&customValidators=`valueIn` - указывает дополнительные валидаторы, которые нужно создать вручную.

&validate – валидаторы задаются через запятую для каждого поля, а если требуется несколько валидаторов для одного поля, то они еще разделяются двоеточием. Разберем их отдельно:

username:blank – нехитрая ловушка для спама, означает, что поле username должно остаться пустое.

reg_type:valueIn=^Readers;Writers;Idlers^ - ограничиваем возможные группы тремя указанными. В изначальной поставке такого нет и злые хацкеры могут зарегиться, например, под группой Administrator (если вы ее не переименовали).

fullname:required:minLength=^6^ - поле fullname должно быть не пусто и содержать хотя бы 6 символов.

password:required:minLength=^6^ - аналогично для пароля.

password_confirm:password_confirm=^password^ - пароли должны совпадать.

email:required:email – электронная почта должна быть не пуста и являться собственно почтой.

Конструкция [[!+error.message:default=`[[!$Register.Form]]`]] выводит сообщение об успешной отправке формы или чанк формы, если вы только зашли на страницу или заполнили ее неправильно.

Создадим вышеупомянутый валидатор valueIn . Для этого создаем сниппет с названием valueIn и следующим кодом:

$valueIn = explode(";", $param); return in_array($value, $valueIn);

Теперь требуется создать чанк Register.Form . В данном случае он будет следующим (используется Bootstrap 3):

Выберите тип учетной записи Чукча-Читатель Пейсатель Бездельник Представьтесь: [[!+reg.error.fullname:notempty=`[[!+reg.error.fullname]]`]] Электронная почта: [[!+reg.error.email:notempty=`[[!+reg.error.email]]`]] Пароль: [[!+reg.error.password:notempty=`[[!+reg.error.password]]`]] Повторите пароль: [[!+reg.error.password_confirm:notempty=`[[!+reg.error.password_confirm]]`]]

Все поля обязательны для заполнения

В этой форме замечу несколько вещей, касающихся MODX:

email; echo "Message: " . $data->message; // sned an email $to = $data->email; $subject = "Тестовое письмо сайт для тестирования angularjs контактной формы"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функция PHP mail для отправки электронной почты на адрес электронной почты mail($to, $subject, $message, $headers); ?>

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

Общее правило безопасности - не доверять никому, так что нельзя надеяться на то, что пользователи всегда будут вводить в формы правильные значения. Например, вместо ввода в поле правильного email-адреса, пользователь может ввести неверный адрес, или вообще какие-нибудь вредоносные данные.

Когда дело доходит до валидации пользовательских данных, ее можно проводить как на стороне клиента (в веб-браузере), так и на серверной стороне.

Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript.

Валидация форм с помощью HTML5

HTML5 предоставляет довольно надежный механизм, основанный на следующих атрибутах тега : type , pattern и require . Благодаря этим новым атрибутам вы можете переложить некоторые функции проверки данных на плечи браузера.

Давайте рассмотрим эти атрибуты, чтобы понять, как они могут помочь в валидации форм.

Атрибут type

Этот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа

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

Попробуйте поиграться со значениями поля email в нижеприведенной демонстрации .

Также существуют другие стандартные типы полей, вроде , и для валидации чисел, URL’ов и телефонных номеров соотвествено.

Замечание: формат телефонного номера различается для разных стран из-за несоответствия количества цифр в телефонных номерах и разности форматов. Как результат, спецификация не определяет алгоритм проверки телефонных номеров, так что на время написания статьи данная возможность слабо поддерживается браузерами.

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

Атрибут pattern

Атрибут pattern , скорее всего, заставит многих фронтенд-разработчиков прыгать от радости. Этот атрибут принимает регулярное выражение (аналогичное формату регулярных выражений JavaScript), по которому будет проверяться корректность введенных в поле данных.

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

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

Регулярные выражения (RegEX) являются мощным, кратким и гибким инструментом для сопоставления строки текста, вроде отдельных символов, слов или шаблонов символов.

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

Давайте посмотрим на пару примеров использования регулярных выражений для валидации значения полей ввода.

Телефонные номера

Как упоминалось ранее, тип поля tel не полностью поддерживается браузерами из-за несоответствия форматов номеров телефонов в разных странах.

Например, в некоторых странах формат телефонных номеров представляется в виде xxxx-xxx-xxxx , и сам телефонный номер будет что-то вроде этого: 0803-555-8205 .

Регулярное выражение, которому соответствует данный шаблон, такое: ^\d{4}-\d{3}-\d{4}$ . В коде это можно записатьтак :

Phone Number:

Буквенно-цифровые значения Атрибут required

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

Это избавляет нас от реализации проверки полей с помощью JavaScript, что может сохранить немного времени разработчикам.

Например: или (для совместимости с XHTML)

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

Заключение

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

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

Не все браузеры поддерживают HTML5, и не все данные, посланные вашему скрипту, придут с вашей формы. Это значит, что перед тем, как окончательно принять данные от пользователя, необходимо проверить их корректность на стороне сервера.

Почему мне установили эту форму

В настоящий момент на ваш сайт проводится Brute-force атака. Brute-force атака — это атака по подбору паролей. В данном случае происходит подбор пароля к административной панели вашего сайта.

Чтобы не допустить взлома вашего сайта и повысить его безопасность, нами была установлена дополнительная защита.

Как я теперь могу получить доступ к админ-панели сайта

Теперь при доступе к административной панели вашего сайта (на Joomla или WordPress) будет появляться дополнительное окно ввода логина и пароля с надписью «please use your control panel password». В качестве логина необходимо ввести логин вашей услуги хостинга, он имеет вид «u1234567» . В качестве пароля — текущий пароль к вашей услуге хостинга.

После прохождения базовой HTTP-аутентификации перед вами откроется стандартное поле для авторизация в админ-панели вашего сайта. Теперь уже вам нужно будет ввести логин и пароль администратора сайта.

Как работает базовая HTTP-аутентификация

При вводе логина-пароля в окно базовой аутентификации значение логина и хеша пароля будут сравниваться со значениями в специальном файле ~/etc/users , доступным в панели управления хостингом. Содержимое файла выглядит примерно так: «u1234567:dm48bspxIO3rg» . Где «u1234567» — логин, а «dm48bspxIO3rg» — хеш пароля (обратите внимание: только хеш, а не сам пароль!). Хеш пароля — это результат преобразование пароля по определенному алгоритму.

Таким образом, когда вы вводите логин и пароль в окно базовой аутентификации, от введённого пароля берётся хеш и сравнивается со значением хеша в файле ~/etc/users . Если значения совпадают, вы проходите аутентификацию.

У меня не получается пройти базовую аутентификацию

Вероятно, вы вводите неверный пароль. Установите новый пароль для базовой аутентификации:

Если вы прошли базовую аутентификацию но не можете войти непосредственно в админ-панель сайта Joomla или WordPress, воспользуйтесь справкой:

Как повысить защиту сайта от Brute-force атак?

Для повышения защиты сайта:

• измените логин суперпользователя на более уникальный. Не используйте короткие имена, лучше если вы будете использовать имя вместе с фамилией. В сети Интернет есть множество ресурсов где собраны наиболее популярные логины. Ознакомьтесь с ними и никогда не используйте их;
• установите сложный пароль администратора сайта. Сложный пароль должен содержать буквы верхнего и нижнего регистра, цифры и дополнительные символы, такие как «* — _ # :» и т.д. Длина пароля — никак не меньше 6 символов. Желательно от 10 и выше.

Как убрать форму базовой HTTP-аутентификации?

Чтобы убрать форму базовой HTTP-аутентификации:

AuthType Basic AuthName "please use your control panel password" AuthUserFile .../users Require valid-user

Для комментирования строки поставьте символ решётки («#») в начало строки, вот так.