ESPAsyncWebServer captive portal

[zekageri]

Hey guys! I wonder if it would be possible to add support for ESPAsyncWebServer captive portal.
In the example: CaptivePortal example we can setup a handler but this creates another page. We want to use the same handlers on ap as on any other mode ( sta or eth ) but we need to pop up the web-app as soon as the user connects to the esp32's wifi.

Should this behaviour remain the user's choice instead of svelteesp32 responsibility or could this be integrated seamlessly?

[BCsabaEngine]

Good question, thank you!

In my solution (private repo, sorry) the next method works:

void WebserverInit(const String &localIPURL) // http://4.3.2.1
{
    DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");

    initSvelteStaticFiles(&webServer); //svelteesp32 method
    initCaptiveHandlers(&webServer, localIPURL);

    webServer.onNotFound([&](AsyncWebServerRequest *request)
                         {
                             if (request->method() == HTTP_OPTIONS)
                                 request->send(200);
                             else
                             {
                                 if (configWifi.isSTA)
                                     request->send(404);
                                 else
                                     request->redirect(localIPURL);
                             }
                             //
                         });

    webServer.addHandler(&events);
    webServer.begin();
}

My captivehandler:

#ifndef CAPTIVEHANDLERS_H
#define CAPTIVEHANDLERS_H

#include <ESPAsyncWebServer.h>

// Captive portal route configuration
enum CaptiveAction
{
    REDIRECT_LOGOUT,
    REDIRECT_LOCAL,
    SEND_200,
    SEND_404
};

struct CaptiveRoute
{
    const char *path;
    CaptiveAction action;
};

static const CaptiveRoute CAPTIVE_ROUTES[] = {
    {"/connecttest.txt", REDIRECT_LOGOUT},
    {"/wpad.dat", SEND_404},
    {"/generate_204", REDIRECT_LOCAL},
    {"/redirect", REDIRECT_LOCAL},
    {"/hotspot-detect.html", REDIRECT_LOCAL},
    {"/canonical.html", REDIRECT_LOCAL},
    {"/success.txt", SEND_200},
    {"/ncsi.txt", REDIRECT_LOCAL},
    {"/favicon.ico", SEND_404}};

void initCaptiveHandlers(AsyncWebServer *server, const String &localIPURL)
{
    for (const auto &route : CAPTIVE_ROUTES)
    {
        server->on(route.path, [&route, &localIPURL](AsyncWebServerRequest *request)
                   {
            switch (route.action)
            {
                case REDIRECT_LOGOUT:
                    request->redirect("http://logout.net");
                    break;
                case REDIRECT_LOCAL:
                    request->redirect(localIPURL);
                    break;
                case SEND_200:
                    request->send(200);
                    break;
                case SEND_404:
                    request->send(404);
                    break;
            } })
            .setFilter(ON_AP_FILTER);
    }
}
#endif

[BCsabaEngine]

In your example server.addHandler(new CaptiveRequestHandler())... used, but I use server->on instead of a complete handlerClass. But as you can see in my code, you can add handler with .addHandler later (see webServer.addHandler(&events))

[zekageri]

Oh I see. I have a similar approach in my project but it does not always working. I got a popup window on Android once but never again. And mine is much more overcomplicated. I will try your solution! Do you think it would be worth adding to the svelteesp32 lib as a toggle able config flag?

[BCsabaEngine]

I don't plan to implement other handlers than static pages from rich client apps. This is the border of this project. You can use 1-4 handler (one of these is svelteesp32) in you app, but svelteesp32 would not like to be framework, just a tool.

[zekageri]

Totally understandable

[zekageri]

Also you are registering an "onNotFound" handler for the captive portal but the svelteesp32 also uses that handler in spa mode. Isn't it conflicting?

[zekageri]

Yeah, I'm thinking abou this but I don't seem to come up with a good solution for detecting if we are in ap mode or not at runtime. The esp async filter method is not enough for the on nothound handler, we need to redirect to the ap ip address and it needs runtime detection. But I assume we don't want to involve the WiFi library in an auto generated code.

[BCsabaEngine]

I think the solution can be: dismiss --spa switch in your SPA app, but implement this manually in the only one onNotFound handler (when request->redirect(localIPURL) is used) for both functionality. In this case you can use configWifi.isSTA what is not compiled in svelteesp32 context.

Is it suitable for you?

[zekageri]

Yes I think I will do it that way. Thank you

[BCsabaEngine]

Please give me a feedback if this solution works. I would like to sleep peacefully :)

[zekageri]

I will try tomorrow but I hope you will sleep peacefully regardless :D

[BCsabaEngine]

Thank ou for your discussion! I fancy your ESP libs, repos, I like it! And welcome hungary! 🇭🇺

[zekageri]

Thanks. ESPToolKit is an ongoing project. I made those libs mostly for myself but I'm all for open source!

[zekageri]

Meanwhile I have integrated your solution to my project and it seems to work fine on a xiaomi android but not on my samsung s22. The s22 only popped up the captive portal once and never again :D Maybe I miss clicked something on the phone. Anyway, your solution is more minimal then mine and still working so I will continue using it. Thank you very much. The only problem I'm still facing is that in captive softap mode I want to redirect the user to the local ip of the esp32 no matter what they type in the url bar. But that will require the onNotFound handler change.