Copyright © https://mongoose-os.com

Mongoose OS Forum

frame
ATTENTION! This forum has moved to:

https://community.mongoose-os.com

Do not post any new messages.

[Library] - WiFi Captive Portal - Web UI, List SSIDs, Test, Configure, RPC, GZIP Support

tripflextripflex Orlando, FL
edited August 2018 in Mongoose OS

I'm proud to say that today I have officially released the dev version of my new Wifi Captive Portal library.

Screenshot

Here's an excerpt from the README, check out the GitHub page for full details:

Features

  • Provides web UI for testing and configuring WiFi
  • Custom setting and helper functions to enable/disable Captive Portal
  • Completely vanilla JavaScript, no jQuery, Zepto, or other libraries required (because we all know space is limited)
  • Unminified and non-gzipped files are only 14.2kb total in size ( wifi_portal.css - 3kb, wifi_portal.html - 1.45kb, wifi_portal.js - 9.67kb )
  • Minified and gzipped files are only 3.26kb total in size ( wifi_portal.min.css.gz - 735b, wifi_portal.html.gz - 561b, wifi_portal.min.js.gz - 2kb )
  • Displays a dropdown of available networks to connect to
  • Validates user provided SSID and Password
  • Mobile and desktop devices prompt the "Login to network" window/notification
  • Uses gzipped data for small filesize and fast loading (see dev below for using/customizing files)
  • Save/Copy SSID and Password to STA 1 (wifi.sta) configuration after succesful test
  • Reboot after sucesful SSID/Password test (after saving files)

Please make sure to open an issue on GitHub if you find any bugs, or have suggestions about the implementation. You can also mention me on Gitter chat @tripflex

You can find it at the link below:
https://github.com/tripflex/wifi-captive-portal

Thanked by 2ulso Loïc

Comments

  • Tested with iOS 11.4.1.
    Create the application:

    mkdir captive-portal
    cd captive-portal
    mos init
    rm fs/index.html
    mos build --local --platform esp32
    mos flash
    mos console
    ...
    [Aug 24 20:17:06.785] I (15171) tcpip_adapter: softAP assign IP to station,IP is: 192.168.4.2
    [Aug 24 20:17:06.791] event_handler        event: 17
    [Aug 24 20:17:06.796] mongoose_poll        New heap free LWM: 216112
    [Aug 24 20:17:06.944] dns_ev_handler       DNS A Query for captive.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:06.953] mongoose_poll        New heap free LWM: 210524
    [Aug 24 20:17:07.145] mgos_http_ev         0x3ffba7ec HTTP connection from 192.168.4.2:65426
    [Aug 24 20:17:07.153] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    [Aug 24 20:17:07.354] dns_ev_handler       DNS A Query for setup.device.local sending IP 192.168.4.1
    [Aug 24 20:17:07.521] dns_ev_handler       DNS A Query for www.icloud.com sending IP 192.168.4.1
    [Aug 24 20:17:07.529] mgos_http_ev         0x3ffb9ae8 HTTP connection from 192.168.4.2:65427
    [Aug 24 20:17:07.536] root_handler         Root Handler -- Checking for CaptivePortal UserAgent
    [Aug 24 20:17:07.543] http_msg_print             method: "GET"
    [Aug 24 20:17:07.549] http_msg_print                uri: "/"
    [Aug 24 20:17:07.552] root_handler         Root Handler -- Host matches Captive Portal Host 
    [Aug 24 20:17:07.568] 
    [Aug 24 20:17:07.568] dns_ev_handler       DNS A Query for www.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:07.577] dns_ev_handler       DNS A Query for apple.com sending IP 192.168.4.1
    [Aug 24 20:17:07.594] dns_ev_handler       DNS A Query for 32-courier.push.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:07.636] dns_ev_handler       DNS A Query for api.leanplum.com sending IP 192.168.4.1
    [Aug 24 20:17:08.177] dns_ev_handler       DNS A Query for captive.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:08.220] mgos_http_ev         0x3ffba874 HTTP connection from 192.168.4.2:61096
    [Aug 24 20:17:08.228] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    [Aug 24 20:17:18.387] mgos_http_ev         0x3ffb9a28 HTTP connection from 192.168.4.2:65429
    [Aug 24 20:17:18.395] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    [Aug 24 20:17:40.524] I (48911) wifi: station: 40:83:1d:45:74:6f leave, AID = 1
    [Aug 24 20:17:40.527] I (48911) wifi: n:6 0, o:6 0, ap:6 1, sta:255 255, prof:6
    [Aug 24 20:17:43.900] I (52281) wifi: n:6 0, o:6 0, ap:6 1, sta:255 255, prof:6
    [Aug 24 20:17:43.903] I (52291) wifi: station: 40:83:1d:45:74:6f join, AID=1, bg, 20
    [Aug 24 20:17:43.993] I (52381) tcpip_adapter: softAP assign IP to station,IP is: 192.168.4.2
    [Aug 24 20:17:43.999] event_handler        event: 17
    [Aug 24 20:17:44.189] dns_ev_handler       DNS A Query for captive.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:44.214] mgos_http_ev         0x3ffba2d8 HTTP connection from 192.168.4.2:65431
    [Aug 24 20:17:44.222] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    [Aug 24 20:17:44.254] dns_ev_handler       DNS A Query for setup.device.local sending IP 192.168.4.1
    [Aug 24 20:17:44.278] mgos_http_ev         0x3ffba43c HTTP connection from 192.168.4.2:65432
    [Aug 24 20:17:44.285] root_handler         Root Handler -- Checking for CaptivePortal UserAgent
    [Aug 24 20:17:44.294] http_msg_print             method: "GET"
    [Aug 24 20:17:44.298] http_msg_print                uri: "/"
    [Aug 24 20:17:44.301] root_handler         Root Handler -- Host matches Captive Portal Host 
    [Aug 24 20:17:44.328] 
    [Aug 24 20:17:44.905] dns_ev_handler       DNS A Query for captive.apple.com sending IP 192.168.4.1
    [Aug 24 20:17:44.931] mgos_http_ev         0x3ffba4a8 HTTP connection from 192.168.4.2:61097
    [Aug 24 20:17:44.939] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    [Aug 24 20:17:55.161] mgos_http_ev         0x3ffb9af4 HTTP connection from 192.168.4.2:65433
    [Aug 24 20:17:55.169] redirect_ev_handler  Redirecting to http://setup.device.local for Captive Portal
    

    Connected the phone to the ESP32's AP and got
    this

  • After changing portal.wifi.hostname to setup.device.portal as you suggested it works like a charm :smiley:

  • mamuespmamuesp Germany/Northern coast
    edited August 2018

    @tripflex - Well. I already wrote this in Gitter, but perhaps it will be better "parked" here as well:

    • Is it on purpose that after a succecssfully WiFi configuration with your library the web server shows the file system content when accessed via the IP address?
    • And it’s the same behaviour when the AP started, the first try was not successfull. The you open a browser and try to reach another URL - the file system is displayed again.
    • And a last one: when trying to configure the WiFi credentials I had a typo so an error occured - but I could not correct it, because the „Save …“ button stayed disabled even after changing the PW …

    Tried this on my Mac, not with a mobile device. Just for info.

    And one more thing: the lib is very heap consuming ... :wink:

    Anyway I only will use the captive functions, but these findings might be helpful. A split of the library into two, where one is the captive base and brings only the captive protal functions and might be configured with the own HTML stuff would be nice. In the end, I will deliver the same configuration page form AP or STA mode, when in AP mode I hie everything but the WiFi settings, in STA mode I show all settings (which are slso fee by some RPC calls). As I don't want to have to maintain two differend pages for AP and STA mode, it's mandatory for me that I may use the captive mode as "plug-in" when in AP mode and then lose this functionality when in STA mode. If you aren't planning to adapt you code in that way, I will do it, but not very near in the future, will be end of September then.

  • tripflextripflex Orlando, FL

    @nliviu yeah took me a minute to figure that out as well then realized it was due to the hostname, i changed it in the lib to now use setup.device.portal by default now

    @mamuesp

    1.) Yes, the way I designed it since I couldn't use rewrites to handle it, was to add a root handler for / and then check the Host header, for our custom defined header, and then serve the captive portal. That way, if you use a custom index.html file, it will still serve it from any other "hostname" .. which includes using the IP address. I could look at adding a setting or something to serve captive portal no matter what is accessed, as long as it's just trying to access the root /

    2.) This may be due to issue reported above by @nliviu about the captive portal URL .. my concern like mentioned was that I didn't want the captive portal to affect any existing web server index files that a user may have

    3.) My guess is there must have been a javascript error, as the buttons should re-enable after fail or success ... i think this was something I originally forgot to add to the JS code, but should be fixed now (I had that same issue last night) https://github.com/tripflex/wifi-captive-portal/blob/dev/fs/wifi_portal.js#L127

    Basically I wanted to get this lib out to implement what I initially needed it for, to start discussions just like this, so we have some code to base off of, discuss, and then make improvements or changes as needed for the community. I figure having something that gives users basic functionality will spur convos just like this one :)

    Moving forward now though, I think the best idea is to actually separate the lib I have now, into two separate libraries, both for easier maintainability, as well as integration in other projects as needed. One specifically for the captive portal handling (that does not include any HTML/JS/CSS files), one for integrating wifi captive portal, and then just add the captive portal lib as a dep. Could even port out of the RPC handling as well, to its own lib, as i've had numerous people ask about using just the RPC ... that way it follows the "modular" aspect that I love the most about mos, and also then decreasing the amount of bloat included in a project when specific things may not be needed.

    Thanked by 1Generator
  • When compile with t --platform esp8266 , an error occurs.

  • @Generator unused parameter is treated as an error by the ESP8266 compiler.

    @tripflex If the password is incorrect, a timeout error is displayed and it keeps retrying indefinitely:

    [Aug 27 14:02:38.814] esp32_wifi_ev        Disconnected from xxx, reason: 2
    [Aug 27 14:02:38.822] maybe_reconnect      Wifi Captive Portal - Retrying Connection... Attempt 13
    [Aug 27 14:02:38.828] I (98942) wifi: Set ps type: 0
    [Aug 27 14:02:38.831]
    [Aug 27 14:02:38.835] mgos_net_on_change_c WiFi STA: disconnected
    [Aug 27 14:02:38.839] mgos_net_on_change_c WiFi STA: connecting
    [Aug 27 14:02:38.884] I (98992) wifi: n:1 1, o:1 0, ap:1 1, sta:1 0, prof:1
    [Aug 27 14:02:38.890] I (99002) wifi: state: auth -> auth (b0)
    [Aug 27 14:02:38.898] I (99012) wifi: state: auth -> assoc (0)
    [Aug 27 14:02:38.905] I (99022) wifi: state: assoc -> run (10)
    [Aug 27 14:02:42.912] I (103022) wifi: state: run -> auth (2c0)
    [Aug 27 14:02:42.915] I (103032) wifi: n:1 0, o:1 1, ap:1 1, sta:1 0, prof:1
    [Aug 27 14:02:42.925] esp32_wifi_ev        Disconnected from xxx, reason: 2
    [Aug 27 14:02:42.932] maybe_reconnect      Wifi Captive Portal - Retrying Connection... Attempt 14
    
  • Actually it tries to connect 16 times and ends with all the buttons disabled. See the screenshot from my previous post.

  • mamuespmamuesp Germany/Northern coast
    edited August 2018

    :wink: Now we run on two tracks ... The disabled buttons had been already posted in another posting ... but @tripflex response was, that this behaviour should be gone ... seems this isn't the case.

  • The buttons are re-enabled for about 5 seconds after the timeout occurs, but they are disabled afterwards.

  • tripflextripflex Orlando, FL

    @Generator i'll work on adding the void for unused parameters ... i'm using esp32 so those are just treated as warning with esp32, didn't know they would be treated as errors by esp8266, will work on fixing today.

    @nliviu @mamuesp thanks for letting me know, are you using the gzipped version by chance? I will do some testing myself again today and make sure that is no longer an issue, might have forgot to run grunt to generate gzip files after updating main JS but will check on that today

    Thanked by 1Generator
  • I used the gzipped version.

  • tripflextripflex Orlando, FL

    @nliviu @mamuesp i've updated the repo it should be fixed now, let me know if you still have issues

  • @tripflex I've tested earlier today and it was ok. I still have to test the rpc service in the case where there is a typo in the ssid or password.

Sign In or Register to comment.