You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Текущая реализация 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"/>

В момент, когда страница из шаблона отображается абоненту, происходит следующее:

  1. Из базы данных берется сам шаблон, а также все настроенные значения для свойств ${template_logo_img}, ${template_maintext_text}, ${template_maincomment_text1} и т.п. Например, вы можете настроить ссылку на изображение-логотип, заголовок страницы, текст страницы в конструкторе упрощенного режима. Если какое-то из полей вами не настроено, будет взято значение по умолчанию. Все конструкции вида ${...} будут подвергнуты замене, в результате чего сформируется полноценный блок HTML-кода. Этот блок кода в данный момент будет одинаков для всех абонентов. Описание всех конструкций вида ${...} доступно в виде подсказок в упрощенном режиме конструктора.
  2. Дополнительно, в зависмости от текущей фазы процесса авторизации, и от текущих введенных параметров, будет произведена динамическая подстановка значений во все конструкции типа $(...), например вместо $(phone) будет подставлен телефонный номер, указанный конкретным абонентом.
  3. Полученная страница отправляется в браузер абонента.

Необходимо иметь в виду, что страницы авторизации имеют несколько фаз (шагов), которые из себя представляют блоки 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);

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

В любом случае действие на стадии авторизации вызывает запрос ссылки /cp/sms по методу POST, а перенаправления (после опроса, рекламы и т.п.) инициирует вход в сеть через устройство доступа по ссылке /сp/login (также метод POST)

 

  • No labels