Текущая реализация WNAM использует инструмент "конструктор страниц" для управления страницами, демонстрируемыми абоненту на различных стадиях его взаимодействия с системой WNAM.
Страница представляет собой блок HTML-текста (шаблон) плюс набор параметров, заданных в самом конструкторе в виде настроек цвета, стилей, возможности отображения дополнительных опций, плюс приложенные файлы (например, логотип).
В составе WNAM поставляется множество страниц различных типов (авторизация, приветствие, опросы и т.п.), каждая из которых содержит:
- Набор предустановленных полей шаблонизатора (если используется "упрощенный" режим)
- Набор полей для динамической подстановки.
Поясним на примере.
Шаблон страницы СМС авторизации самого распространенного типа, "Отправка СМС абоненту (по умолчанию)", содержит HTML-конструкции вида:
<!-- Logo -->
<p align="center"><img src="${template_logo_img}" class="img-responsive"/></p>
<!-- Main Text -->
<h2 class="form-signin-heading">${template_maintext_text}</h2>
<!-- Main Comment -->
<p class="comment">${template_maincomment_text1}</p>
<!-- Hidden Inputs -->
<input type="hidden" name="phone" value="$(phone)" id="hiddenPhone"/>
В момент, когда страница из шаблона отображается абоненту, происходит следующее:
- Из базы данных берется сам шаблон, а также все настроенные значения для свойств ${template_logo_img}, ${template_maintext_text}, ${template_maincomment_text1} и т.п. Например, вы можете настроить ссылку на изображение-логотип, заголовок страницы, текст страницы в конструкторе упрощенного режима. Если какое-то из полей вами не настроено, будет взято значение по умолчанию. Все конструкции вида ${...} будут подвергнуты замене, в результате чего сформируется полноценный блок HTML-кода. Этот блок кода в данный момент будет одинаков для всех абонентов. Описание всех конструкций вида ${...} доступно в виде подсказок в упрощенном режиме конструктора.
- Дополнительно, в зависмости от текущей фазы процесса авторизации, и от текущих введенных параметров, будет произведена динамическая подстановка значений во все конструкции типа $(...), например вместо $(phone) будет подставлен телефонный номер, указанный конкретным абонентом.
- Полученная страница отправляется в браузер абонента.
Необходимо иметь в виду, что страницы авторизации имеют несколько фаз (шагов), которые из себя представляют блоки HTML-кода со скрываемой видимостью. Выбор текущего отображаемого блока (фазы) зависит от того, введен ли номер телефона или код авторизации.
Ниже приводится список всех возможных конструкций типа $(...), и их описание.
Параметр | Описание и значение |
---|---|
$(phone) | Номер телефона абонента. Если пока не известен (на первом этапе СМС авторизации, то пустая строка) |
$(mac) | МАС-адрес устройства абонента |
$(dst) | Ссылка, на которую требуется перенаправить абонента |
$(dst-orig) | Оригинальная ссылка, к которой обратился абонент |
$(form) | Имя шаблона страницы (формы) |
$(error) | Сообщение об ошибке, если имеется |
$(size) | Длина ожидаемого СМС кода (4 или 6) |
$(size-format) | Формат ожидаемого СМС кода (1234 или 123456) |
$(soc_esia) | Ссылка на портал авторизации Госуслуг (ЕСИА) |
$(voucher-format) | Формат номера ваучера |
$(voucher-length) | Длина номера ваучера |
$(minibrowser) | Признак (true/false), что страница открыта в мини-браузере устройства |
$(smscode) | Код СМС авторизации (для шаблонов методов отправки кода абонентом) |
$(soc_fb), $(soc_ok) $(soc_vk), $(soc_in) | Ссылки на страницы авторизации через социальные сети, включая ключи доступа и ссылки возвратного перенаправления
|
WNAM поддерживает несколько различных типов авторизации (СМС, звонок (приём и передача), ваучеры, гостиничные сисстемы). Каждому из них соответствует определенная логика обработки формы, поступающей от абонента, следовательно тип страницы. Внутри каждой из страниц, помимо элементов оформления, находится HTML-форма, отправка которой в WNAM производится по методу POST с передачей набора параметров.
Ниже приведены некоторые варианты форм:
СМС авторизация
<form id="smsPhase1" class="form-signin" data-toggle="validator" role="form" name="sms" action="/cp/sms" method="post">
<input type="hidden" name="phone" value="$(phone)" id="hiddenPhone"/>
</form>
Вход через ваучер
<form id="voucherPhase" class="form-signin" data-toggle="validator" role="form" name="voucher" action="/cp/voucher" method="post">
<input id="code" type="text" name="code" class="form-control" placeholder="${template_codeplaceholder_text}"
size="$(voucher-length)" data-error="${template_codeerror_text}: $(voucher-format)" required>
</form>
Страница приветствия (перенаправление), получение доступа в сеть:
<form id="redirectForm" class="form-signin" data-toggle="validator" role="form" name="redirect" action="/cp/login" method="post">
<input type="hidden" name="dst" id=dstRef value="$(dst)"/>
</form>
Вы можете менять оформление страницы, но должны оставить формы с их параметрами, а также механизм переключения фаз в странице (если они есть) в неизменном виде.
Внимание! Все остальные параметры (МАС-адрес абонента, первоначальная ссылка, идентификатор плозадки и т.п.) начиная с версии WNAM 1.3 передаются не в параметрах формы, а хранятся на сервере WNAM во временной таблице (кэш CI). Длительность хранения записи в кэше по умолчанию 300 секунд, это время отводится абоненту для прохождения цикла авторизации и получения доступа.Отображение логотипа WNAM
Штатные страницы всех типов внизу содержат блок текста, в котором присутствует логотип, название, popup-блок и ссылка на сайт системы управления беспроводным доступом WNAM. По условиям лицензионного соглашения пользователя WNAM вы не имеете права модифицировать и удалять этот блок, если только у вас не была приобретена соответствующая лицензия (брендирование). В случае нарушения данного запрета может последовать юридическое преследование лицензиата, вплоть до отзыва лицензии.
Возможности по вводу номера телефона абонента
Для корректировки параметров ввода номера телефона на странице СМС-авторизации (и авторизации по звонку), возможна модификация исходного кода соответствующей страницы в экспертном режиме. за обработку введенного номера отвечает библиотека libphonenumber, обработчик действия которой расположен внизу страницы:
var mobileNumber = $('#mobile-number');
mobileNumber.intlTelInput({
autoFormat: !is_firefox_android,
nationalMode: false,
onlyCountries: ['ru', 'by', 'kz'],
preferredCountries: ['ru'],
utilsScript: '/lib/libphonenumber/build/utils.js'
});
Вы можете:
- Указать перечень допустимых стран (флажков) в окне ввода номера, изменив набор колов стран в параметре onlyCountries
- Разрешить выбор любой страны (флага) убрав всю строку с параметром onlyCountries
- Установить флаг (страну) по умолчанию в параметре preferredCountries
Основной интерфейс использует следующие шаблоны страниц:
Название страницы | Назначение и пояснения |
---|---|
sms | Основная страница авторизации через СМС (отправка СМС абоненту) |
sms_recv | Страница авторизации через СМС (ожидаем СМС от абонента). Вторая фаза обновляет страницу каждые 5 секунд, проверка дошла ли СМС. |
call_recv | Авторизация через запрос звонка от абонента |
voucher | Авторизация через ваучер |
soc_net_redir | Перенаправление на вход через социальную сеть |
quiz | Перенаправление на опрос |
quiz_finish | Страница, демонстрируемая после успешного прохождения опроса |
overlimit | Страница, демонстрируемая при превышении какого-либо ограничения |
bs_final | Страница последней стадии входа в сеть через контроллер Bluesocket |
redirect | Страница с перенаправлением (авторизация прошла успешно, войти в Интернет) |
redirect_video | Страница с показом видеоролика при входе в сеть (перенаправление) |
Страницы типа sms. sms_recv, call_recv имеют две фазы:
- ввод телефонного номера
- ввод кода из СМС, запрос совершения звонка либо отправки СМС с последующей проверкой
Каждая из фаз имеет соответствующую секцию в HTML-коде страницы, выбор той, которую показывать или скрывать, определяется наличием подставленного номера телефона вместо конструкции $(phone).
Дистрибутивные шаблоны страниц доступны по ссылке http://www.netams.com/files/wnam/portalpages/, также находятся на вашем сервере WNAM по адресу /var/lib/tomcat8/webapps/ROOT/WEB-INF/cp/
Если вы изменили текст страницы в интерфейсе администратора, и хотите вернуться к оригинальному виду страницы, существует возможность восстановить страницу "по умолчанию".
Страницы, используемые в расширенном механизме работы с рекламой
Механизм работы с рекламой использует:
- одну обязательную страницу advertisement_image.html, которая применяется при отображении рекламных блоков, состоящих исключительно из загруженного изображения. Если вы планируете использовать такую рекламу, вы должны загрузить шаблон такой страницы в общем административном разделе "загружаемые страницы портала".
- произвольные страницы, отображаемые вместо штатных страниц авторизации и перенаправления, в зависимости от настроек рекламных кампаний
Дистрибутивные страницы шаблонов, которые вы можете использовать в своей работе, вы можете загрузить здесь: http://www.netams.com/files/wnam/advpages/
Разработаны следующие образцы:
Название страницы | Назначение и пояснения |
---|---|
advertisement_example.html | Страница с рекламой, функционально равная странице redirect |
advertisement_example_sms.html | Страница СМС-авторизации, функционально равная странице sms |
advertisement_example_sms_recv.html | Страница СМС-авторизации, функционально равная странице sms_recv |
advertisement_example_video.html | Страница с видеороликом, функционально равная странице redirect |
advertisement_image.html | Страница с рекламой, функционально равная странице redirect, и предусматривает демонстрацию изображения на весь экран устройства, возможно с возможностью отслеживания поворота |
Обратите внимание, что вместе с вышеуказанными шаблонами поставляются изображения, которые также необходимо загружать в перечень страниц при создании рекламных блоков.
В дополнение к динамически заменяемым в страницах рекламы параметрам, перечисленным выше, используются:
Параметр | Описание и значение |
---|---|
$(banner) | Ссылка на изображение, показываемое на весь экран в странице advertisement_image.html |
$(companyId) | Идентификатор рекламной кампании |
$(blockId) | Идентификатор рекламного блока |
$(pageId) | Идентификатор страницы (файла) рекламного блока |
Единственным существенным отличием страниц рекламы от стандартных страниц портала является наличие конструкции, позволяющей учитывать показы и клики (переходы) по рекламе.
Для этого применяется конструкция вида:
<button type="submit" class="btn btn-primary" onclick="getAdv(true);">
...
function getAdv(clicked) {
var c = "$(companyId)";
if (c.substring(0,2) == "$(") return;
var c = "";
if (clicked == true) { c = "&clicked=yes"; }
var url = "/adv/advblockpages/display?companyId=$(companyId)"+c;
$.get(url);
}
getAdv(false);
Страницы, подготовленные для механизма рекламных кампаний, могут работать и в качестве обычных страниц авторизации и перенаправления (в таком случае учет показов и переходов не срабатывает).