Skip to content

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

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

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

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

Кастомный login page

Создаем на mikrotik hotspot. В папку хотспота вместо штатного login.html кладем следующий файл:

Пример страниы login.html

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

Пример страницы login.php

Теперь мы можем спокойно пользоваться всей мощью 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

1
2
 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/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

1
2
3
4
5
6
7
8
9
/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, так что открывать приходится о-о-очень много.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/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 комментарий

  1. А продолжение будет?

    • Разумеется 🙂

  2. Владимир Владимир

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

    • Вам спасибо за то, что читаете 😉

  3. Аааа Аааа

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

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

      • Аааа Аааа

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

  4. Владимир Владимир

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

    • К сожалению, нет 🙂

  5. Владимир Владимир

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

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

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

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

      • Владимир Владимир

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

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

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

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

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

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

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

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

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

      • Владимир Владимир

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

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

      • Владимир Владимир

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

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

  6. Аааа Аааа

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

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

      • Аааа Аааа

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

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

      • Аааа Аааа

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

    • а вот я наоборот, СМС-авторизацию победил легко и непринужденно, а вот с авторизацией через соцсети залип.

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

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

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

  7. Дмитрий Дмитрий

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

    • Для чайников это делается исключительно за плату, т.к. там сложнее простого виджета.

  8. Andrey Andrey

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

  9. Andrey Andrey

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

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

  10. Аааа Аааа

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

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

      • Аааа Аааа

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

  11. Алексей Алексей

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

    • И не найдете 🙂 Бесплатно такие решения не распространяются.

      • Алексей Алексей

        Продаете?)

      • Пишем под заказ.

      • Алексей Алексей

        Как связаться с вами?

  12. Виктор Виктор

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

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

  13. Andrey Andrey

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

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

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

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

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

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

      • Так точно, нужен отдельный сервер.
        Могу помочь с организацией такого решения, если интересно — пишите на snake@nixman.info

  15. Семён Семён

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

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

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

%d такие блоггеры, как: