Hotspot для самых маленьких, часть 2: своя страница входа + социальные сети

Итак, Hotspot мы настроили. Но просто hotspot – это неинтересно. Например, мы хотим, чтобы наша стартовая страничка была красивой. А заодно лежала где-нибудь на отдельном сервере – тогда мы сможем поставить несколько микротиков в разные кафе и всем посетителям этих кафе показывать одну страницу. И редактировать ее в одном месте. Удобно? не то слово.

А еще мы немного затронем подключение social login – чтобы наши посетители могли подключаться к нашему хотспоту, используя популярные соцсети.
Поехали!

Предположим, у нас есть веб-сервер. На нем нужно будет настроить openvpn-сервер и apache. На микротике мы настроим openvpn-клиент и поменяем страничку login, чтобы она сразу нас отправляла на наш сервер.

Кастомный login page

Создаем на mikrotik hotspot. В папку хотспота вместо штатного login.html кладем следующий файл:
[su_spoiler title=”Пример страниы login.html” style=”fancy” icon=”plus-circle”]


...

$(if chap-id)

JavaScript required. Enable JavaScript to continue.


$(endif)
If you are not redirected in a few seconds, click 'continue' below

















[/su_spoiler]

Как можно понять из кода, страница welcome page будет располагаться по адресу oauth.sitename.ru/login.php. Ее содержимое может быть уже абсолютно произвольным. единственное, что нужно сделать обязательно сделать – это вернуть на микротик форму с логином и паролем пользователя через submit form. Например. вот так:

[su_spoiler title=”Пример страницы login.php” style=”fancy” icon=”plus-circle”]





mikrotik hotspot > login










Please log on to use the mikrotik hotspot service


Free trial available, click here.



login
password






[/su_spoiler]

Теперь мы можем спокойно пользоваться всей мощью PHP, JavaScript и прочих штук, которые помогут нам сделать действительно красивую и полезную welcome page.

Social login

Одной из самых модных “фишек” хотспота на сегодня стал т.н. Social Login, т.е. вход с использованием социальных сетей. Но, т.к. вход осуществляется через виджеты самих сетей, нам нужно дать доступ к “точкам входа” даже незарегистрированным пользователям. В mikrotik это делается с помощью специального инструмента walled-garden, о котором мы уже как-то рассказывали.

Walled Garden

Что вообще из себя представляет walled-garden? Это инструмент, который открывает (или запрещает) доступ к определенным ресурсам для пользователей, не прошедших аутентификацию.
Правила, прописанные в /ip hotspot walled-garden ip появляются в динамических правилах фаервола, которые можно посмотреть командой /ip firewall filter print dynamic


9 D ;;; vk
chain=hs-unauth action=return protocol=tcp dst-address=87.240.128.0/18 dst-port=443 log=no log-prefix=""

В /ip hotspot walled-garden прописываются url (это удобно для http-трафика), целиком или с помощью регулярных выражений. Эта часть не попадает в фаервол явно и обрабатывается самим hotspot.

Итак, для работы social login прописываем следующее:

Facebook


/ip hotspot walled-garden
add comment=fb dst-host=*fbcdn*
add comment=fb dst-host=*facebook*
add comment=fb dst-host=*akamai*

/ip hotspot walled-garden ip
add action=accept comment=Facebook disabled=no dst-address=5.178.32.0/20 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=195.27.154.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=80.150.192.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=77.67.96.0/22 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=212.119.27.0/25 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=2.16.0.0/13 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=66.171.231.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=31.13.24.0/21 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=31.13.64.0/18 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=212.245.45.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=213.254.17.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=46.33.70.0/24 dst-port=443 protocol=tcp
add action=accept comment=Facebook disabled=no dst-address=185.8.148.0/24 dst-port=443 protocol=tcp

Если с ограничением по URL все более или менее понятно, то ограничение по IP требует, на мой взгляд, пояснения.
Т.к. протокол HTTPS, на который перешли уже все соцсети, не позволяет “на лету” перехватить URL из браузера, который запросил пользователь, то нам ничего не остается, как открывать доступ по IP. Ну а если учитывать балансировку нагрузки и “размазанные” по фермам серверов сервисы, то мы получим необходимость открытия всех сетей, которые закреплены за той или иной соцсетью. Многочисленные тесты показывают, что это чуть ли не единственный работающий способ.
Если у вас есть свой метод, буду очень рад, если вы поделитесь им в комментарии или пришлете мне на почту.

Odnoklassniki


/ip hotspot walled-garden
add comment=ok dst-host=api.odnoklassniki.ru path="/oauth/token.do*"
add comment=ok dst-host=api.odnoklassniki.ru path="/fb.do*
add comment=ok dst-host=*odnoklassniki.ru path="/oauth/authorize*"
add comment=ok dst-host=connect.ok.ru
add comment=ok dst-host=*.mycdn.me

/ip hotspot walled-garden ip
add action=accept comment=OK disabled=no dst-address=5.61.16.0/21 dst-port=443 protocol=tcp
add action=accept comment=OK disabled=no dst-address=185.16.244.0/23 dst-port=443 protocol=tcp
add action=accept comment=OK disabled=no dst-address=185.16.246.0/24 dst-port=443 protocol=tcp
add action=accept comment=OK disabled=no dst-address=185.16.247.0/24 dst-port=443 protocol=tcp
add action=accept comment=OK disabled=no dst-address=195.218.169.0/24 dst-port=443 protocol=tcp
add action=accept comment=OK disabled=no dst-address=217.20.144.0/20 dst-port=443 protocol=tcp

Добавлю, что адреса могут периодически меняться, так что советую время от времени проверять их актуальность.

VK


/ip hotspot walled-garden
add comment=vk dst-host=oauth.vk.com
add comment=vk dst-host=api.vk.com
add comment=vk dst-host=:^vk.com path=/js/api/openapi.js
add comment=vk dst-host=:^vk.com path=/al_apps.php*
add comment=vk dst-host=*.vk.com path=/js/api/openapi.js
add comment=vk dst-host=*.vk.com path=/al_apps.php*
add comment=vk dst-host=*.vk.me

/ip hotspot walled-garden ip
add action=accept comment=vk disabled=no dst-address=87.240.128.0/18 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=93.186.224.0/21 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=93.186.232.0/21 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=95.142.192.0/21 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=95.142.206.0/21 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=185.32.248.0/22 dst-port=443 protocol=tcp
add action=accept comment=vk disabled=no dst-address=95.213.0.0/18 dst-port=443 protocol=tcp

Twitter


/ip hotspot walled-garden
add comment=twitter dst-host=api.twitter.com
add comment=twitter dst-host=*.twimg.com

/ip hotspot walled-garden ip
add action=accept comment=Twitter disabled=no dst-address=199.16.156.0/22 dst-port=443 protocol=tcp
add action=accept comment=Twitter disabled=no dst-address=199.59.148.0/22 dst-port=443 protocol=tcp
add action=accept comment=Twitter disabled=no dst-address=199.96.56.0/21 dst-port=443 protocol=tcp
add action=accept comment=Twitter disabled=no dst-address=192.133.76.0/22 dst-port=443 protocol=tcp

Instagram

На закуску приведу настройки WG для инстаграма. К сожалению, как элемент social login он бесполезен (т.к. не дает размещать рекламные посты), а в добавок еще и использует инфраструктуру Amazon AWS, так что открывать приходится о-о-очень много.

/ip hotspot walled-garden ip
add action=accept comment=insta disabled=no dst-address=52.0.0.0/11 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.64.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.72.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.80.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.144.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.160.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.176.0.0/12 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.200.0.0/14 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.208.0.0/13 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.216.0.0/14 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.220.0.0/15 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=54.236.0.0/15 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=107.20.0.0/14 dst-port=443 protocol=tcp
add action=accept comment=insta disabled=no dst-address=173.252.88.113 dst-port=443 protocol=tcp

Впрочем, есть один способ обойтись без разрешения всего диапазона IP, и таки научить Mikrotik перехватывать HTTPS URL. Но об этом в следущей серии 😉

51 Comments

  1. Супер! Спасибо за столь достоверную, структурированную и полезную информацию.

  2. Попробовали… только второй скрипт “Пример страницы login.php” не захотел работать, Он же поидее должен уже в таком виде пускать, если введен логин и пароль которые есть в базе микротика?

    1. А на сервере, куда вы его поместили, apache+php установлены-настроены? Если просто открыть эту страницу из браузера, она нормально открывается?
      Да, должен пускать по тем логину и паролю, которые заведены как hotspot users в mikrotik.

      1. упс, работает на другом телефоне, а на моём почему-то не захотело, хотя вход без логина и пароля отрабатывает и там и там… будем разбираться. Спасибо за статью.

  3. Кстати а для foursquare случайно настройки исключений walled garden не завалялись? 😉

  4. Кстати, случайно заметил баг такой:
    Проверял только для vk, поэтому речь пойдет именно о нем.
    Если пытаться открыть напрямую через https, то редирект на хотспот не происходит.
    Т.е. если открыть http://vk.com то открывается хотспот как и задуманно, а если открыть https://vk,com, то откроется собственно сайт vk со всем функционалом. Отсюда весь смысл хотспота пропадает.
    Еще не успел найти причину.

    Кстати еще чтобы начали работать виджеты для vk понадобится дописать к vk строчку:
    add comment=vk dst-host=vk.com path=/widget_community.php*

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

    1. 1. Статья по HTTPS в хотспоте еще не готова, но могу сказать, что https-урлы не перехватываются. Это связано с тем, что https-урл нельзя перехватить и прочитать без подкладывания сертификата. Hotspot умеет работать в режиме HTTPS, но при этом, даже при наличии сертификата от валидного CA возможно возникновение Security Exception в браузере пользователя, что доверия к хотспоту не повышает. Так что в общем случае пользователь получит плашку “не могу соединиться с сервером”. но т.к. сети социалок у нас открыты в WG, то и сайты их, соответственно, работать будут.
      2. за информацию спасибо, а о каких именно виджетах идет речь?

      1. 1) Да не самый лучший расклад получается. Но если, например открыть https для соц.сеток, но закрыть http и попробовать открыть приложение, например Вконтакте, то основная часть его будет работать нормально, но иногда вместо некоторых его функций будет показываться страница хотспота внутри оболочки приложения. Это может завести пользователя в тупик или напугать не хуже небезопасного сертификата 🙂 .
        Думаю нужно какие-то https ip закрывать (который юзает приложение), какие-то открыть (для api), но боюсь что это могут быть одни и те же адреса.

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

        Кстати еще сегодня заметил интересную штуку:
        Если подключатся к wi-fi с хотспотом с андроида (в частности 5-го), то андроид уведомляет о том что необходима регистрация в сети и при клике на уведомление открывает хотспот в своем дефолтном приложении (на 4-х дроидах это делается через браузер), так вот все бы хорошо, но при попытки авторизации через соц. сеть (вконтакте или фейсбуке) должно открываться модальное окно (ввод логина и пароля или разрешить приложению…. и.т.д.), но в этом дефолтном приложении оно не открыватся а просто игнорируется. Поэтому получается, что приходится лезть в браузер чтобы там открыть хотспот и все остальное сделать.
        Можно конечно дать доступ для гугловских ip с адресом в конце generate_204 и тогда дроид не узнает о том что нужно авторизоваться в сети, но тогда если пытаться открыть приложение которое работает по разрешенным нами https адресам – оно будет работать спокойно без каких либо уведомлений а если приложение работает по http то оно просто скажет о том, что коннекта нету и все. А так хоть андроид пытается сказать что нужно в хотспот пойти, на у меня на 5-м вообще сразу по верх окон ведет на хотспот. Вот как-то так.

        1. Думаю нужно какие-то https ip закрывать (который юзает приложение), какие-то открыть (для api), но боюсь что это могут быть одни и те же адреса.

          У вас есть конкретные адреса, которые пользует только приложение? с радостью проверю

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

          проверим, спасибо

          Если подключатся к wi-fi с хотспотом с андроида (в частности 5-го)

          что за аппарат? у меня все прекрасно открывается в мозилле

          1. 1) По поводу адресов, попробую узнать
            2) По поводу аппарата, да, все-таки эне не в андроиде дело а в прошивке asus, у меня zenfone 2. Но я там покапался, дело даже не в модале. Проблема в том, что js не корректно работает, а именно не отрабатыват колбэк и не рендерится виджет (заметил после тго, как авторизацию на серверную переписал). Кстати на ipad похожая проблема, там регистрация в сети происходит тоже через нативное приложение и там у виджета не прогружаются стили. Получается ужас а не виджет.

        2. 2) На андроиде я с таким не встречался, а эппловский CNA попил нам много крови. Как только мы его окончательзо заборем, я напишу об этом в очередной части.
          Собственно, могу сказать, что проблема с подгрузкой стилей решается изменением DNS на что-нибудь вроде 8.8.8.8.
          А с JS и куками там действительно проблема

          1. А как там DNS то поможет?
            Ну на роутере у меня так и стоял 8.8.8.8.
            Да самое интересное что если через браузер пытаться авторизоваться, то там все отлично работает и все подгружается. Тут именно проблема в приложении авторизации на моем asus и на apple-ах.
            Мне кажется нужно искать альтернативный пусть предложения людям вступить в группу. Хотя может я что-то не замечаю в этом баге.

          2. Я пробовал на микроте и лечил именно так. Если по DHCP роутер в качестве DNS выдает себя – то будут проблемы. Если 8.8.8.8 – то все гуд

  5. С социалками разобрался, вот ещё бы смс авторизацию прикрутить к этому делу 🙂

    1. С apple-устройствами проверяли? там свои “особенности” есть, это ж apple…
      А смс прикрутить, в общем-то. совсем несложно по сравнению с.

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

        1. Доступ мобильных приложений фильтровать пробовали?
          Со шлюзом все просто: smsc.ru, самый надежный и удобный сервис. smpp-присоединение с оператором (операторами) может обойтись уж слишком дорого.

          1. Доступ с мобильных приложений в любом случае частично работает, без авторизации…
            Как это обойти непонятно.

      1. С смс-авторизацией вообще все просто 🙂 как в плане программинга, так и в плане ограничений в walled-garden

      2. Расскажите, пожалуйста, как легко и непринужденно победить смс-авторизацию?
        Из-за нового закона нам в гостинице надо сделать такую авторизацию на хотспоте. В наличии 6 точек, подключенных к mikrotik 750.

        1. А в чем проблема с смс-авторизацией? Прикрутить её достаточно просто, нужна будет только виртуалка (хостинг) для размещения внешней страницы авторизации.
          Ну и соответственно вам потребуется учетная запись на одном из смс-агрегаторов (например smsc.ru)

  6. А для чайников будет как виджет поставить с размещением рекламной ссылке на стене соц сети?

  7. Спасибо за статьи.
    Как ограничить количество сессий в хотспоте под одним логином не разбирались?
    У меня вот в связке с радиусом пользователь залогинился с одного устройства, потом с этими же данными с другого и оба работают в сети Интернет. Возможно сделать так чтобы, если проходила повторная авторизация с другого девайса активную сессию выбивало?

  8. Извиняюсь, походу shared-users параметр мне нужен.
    Просто на микротике, который мне доверили на тестирование прошивка старая)

    1. Да, именно он вам и нужен. Правда работает он по-другому – не коннектятся новые юзеры, а старые работают по-прежнему

  9. Кто-нибудь разобрался как страничку status убрать, чтобы после удачного логина не показывало её? Просто удалить её с микротика не прокатило, тогда ошибка авторизации идёт.

    1. А у меня после удачного логина и не показывает… вот после логаута – показывает, да.
      Убрать можно немного ее поправив, например и редиректить с нее куда-нибудь.

      1. хм может в настройках самого микротика есть где-то галочка “показывать/не показывать” этот status.html?
        просто с ходу ничего не нашли…

  10. Все просмотрел но так и нашел код касательно самого oauth взаимодействия с социалками, например с FB

  11. Большинство Android устройств не могут корректно перейти на страницу авторизации.
    Удалось ли вам решить эту проблему редиректа?

    1. Что вы имеете в виду под “большинством”? И что за проблема с редиректом? На Galaxy страница хотспота открывается автоматом при подключении к wifi-сети. С lenovo тоже проблем не было.

  12. Заметил на нескольких андроид устройствах, что аренда DHCP не продлевается по прошествии половины срока.
    Никто не разбирался? это баг андроида или просто с микротиком не дружит… айфоны и виндафоны норм работают.
    При включенном Add ARP For Leases и arp reply-only на влане достаточно критично – аренда заканчивается, и юзер отсасывает 😀

  13. У нас раньше была авторизация в хотспоте через одноразовые пароли. Клиенты на ресепшене просили подключения и девчонки генерировали им логин/пароль. Потом это отключили. Потом человек, который это делал, уехал.
    Осталось оборудование mikrotik и вайфай точки.
    Как я понял, систему с одноразовыми паролями запускает микротик. Где про это почитать? Заранее спасибо.

    1. У вас, вероятно, подключен RADIUS, в котором и генерируются пароли. В настройках микротика можно посмотреть его адрес.

      1. Радиус – это отдельный сервер, а не сам микротик? У нас сейчас остался только микротик и точки доступа (3 unifi AP и три старых д-линка).

        1. В настройках хотспота ip hotspot есть ссылка на радиус. плюс в конфиге (не помню сейчас где конкретно) указывается радиус-сервер (если такой есть).
          Вообще, если хотите, можете сделать export compact и дать мне ссылку, я посмотрю.

      2. Нет, сейчас ваучеры не работают. Их отключили давно уже другие люди. Сейчас просто wpa2 пароль и все.
        Значит без стороннего сервера генерацию ваучеров не настроить? Я думал в Микротике есть такой функционал.

  14. Здравствуйте, у меня тут возникла проблема. При подключении на новом андроиде к сети, появляется страчка авторизации, всё хорошо. Но после авторизации должно перебрасывать на success_login, и с новым андроидом эта страничка просто пропадает, тем временем как на остальных всё хорошо. Можно ли решить эту проблему?

    1. Я что-то не помню в принципе такой страниы. (и на вики она не описана). После успешной авторизации (на login.html) клиент или попадает на запрошенный ранее (до редиректа) сайт, либо на сайт. который вы указали в настройках редиректа

Leave a Reply