Captive portal errors on Mac's and iOS devices

[kabrutus]

Gear used for this
OPNsense 16.1.15-amd64   
FreeBSD 10.2-RELEASE-p17   
OpenSSL 1.0.2h 3 May 2016

iPad 3 OS 9.3.1
MacBook Pro OS 10.10.5

Hi, i am having issues with the captive portal log in page.  I am using the default template zip.  On iOS devices, i log on to the WiFi network, get an ip and then the CP assist page launches automatically.  All is good until i hit the "Sign in" button.  Once i click the "Sign in" button, it seems like nothing happens.  The only thing that happens is the button on the right that says Cancel, changes to Done.  If you press the "Sign on" button once more, you get an error below "unable to connect to the authentication server".  If you press Done, you are able to browse and surf.

On the Mac's you get a different error.
You log into the WiFi, get the CP landing page, hit the "Sign on" button but this time you get "the webpage could not be loaded"

On my Android it works fine, also on a windows 7 machine.  Am i missing anything i should enable?

I love the templates and would love to implement this CP on our network, but i cant as most of our users are Apple fans.

[AdSchellevis]

Hi kabrutus,

It looks like the post for "/api/captiveportal/access/logon/" fails the second time, likely because the redirect after login went wrong the first time (because you seem to have gained access).
Normally it should try to redirect to the page you where going to before the login page, but maybe it couldn't determine the right one here.
The Apple Cancel/Done buttons are part of ios, I don't think we should focus on those.

Can you do some debugging and place one additional line in your template?

replace this:

Code: [Select]

                   }).done(function(data) {
                        // redirect on successful login
                        if (data['clientState'] == 'AUTHORIZED') {

with

Code: [Select]

                   }).done(function(data) {
                        // redirect on successful login
                        console.log(data);
                        console.log(getURLparams()['redirurl']);
                        if (data['clientState'] == 'AUTHORIZED') {

Then try in osx again and open a javascript/develop console, it should return some data after login to your JS console.

Regards,

Ad

[kabrutus]

Sure, i will try it out when i get back in the office today. 

I am unclear on how to

open a javascript/develop console

Can i get some direction on how to do that?

[AdSchellevis]

I'm using firefox on my end, easiest way to show javascript output is to right-click on an element and choose "inspect"... it will open the inspector at the bottom of your screen. (then choose console for output).
 

[kabrutus]

I'm using firefox on my end, easiest way to show javascript output is to right-click on an element and choose "inspect"... it will open the inspector at the bottom of your screen. (then choose console for output).

Thats assuming i get the CP page on firefox?  On Macs we get the Captive Portal Assistant page, which is not quite a browser. 

Or will this still run on firefox?

[AdSchellevis]

I think you can cancel the assist, although I'm not 100% sure. easiest option is to use a cable in stead of wireless when testing, the assist only kicks in on wireless if I'm not mistaken.

[kabrutus]

When i did it on the mac with Firefox, it looked like it worked perfect.  As soon as i clicked submit, it pushed me to the page i wanted to go. 

Code: [Select]

DARLA notice: 405 g-r-min.js:3:20686
yui: NOT loaded: td-applet-stream-atomic-templates-item-featured combo:14:947
yui: NOT loaded: td-applet-activitylist-atomic-templates-list.tumblr combo:14:947
yui: NOT loaded: td-applet-stream-atomic-templates-item-featured combo:14:947
yui: NOT loaded: td-applet-activitylist-atomic-templates-list.tumblr combo:14:947
yui: NOT loaded: td-applet-stream-atomic-templates-item-featured

[AdSchellevis]

and in safari when not using the assist page?

[kabrutus]

So i went back and reset Firefox and cleared all the data.  I tried it again.  As soon as i clicked on sign on, it just hanged for a while and then timed out.  I had to click try again to get access to the internet.  I dont see anything appear in the console. 

[kabrutus]

here is a copy of my index.html

Code: [Select]

<!doctype html>
<html>
    <head>

        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="robots" content="index, follow, noodp, noydir" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="copyright" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <title></title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/signin.css" rel="stylesheet">

        <!-- static zone info -->
        <script type="text/javascript" src="js/zone.js"></script>

        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script>
            function getURLparams()
            {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

            $( document ).ready(function() {
                /**
                 * logon action
                 */
                $("#signin").click(function (event) {
                    event.preventDefault();
                    // hide alerts
                    $("#alertMSG").addClass("hidden");
                    // try to login
                    $.ajax({
                        type: "POST",
                        url: "/api/captiveportal/access/logon/" + zoneid + "/",
                        dataType:"json",
                        data:{ user: $("#inputUsername").val(), password: $("#inputPassword").val() }
                    }).done(function(data) {
                        // redirect on successful login
                        console.log(data);
                        console.log(getURLparams()['redirurl']);
                        if (data['clientState'] == 'AUTHORIZED') {
                            if (getURLparams()['redirurl'] != undefined) {
                                window.location = 'http://'+getURLparams()['redirurl']+'?refresh';
                            } else {
                                // no target, reload page
                                window.location.reload();
                            }
                        } else {
                            $("#inputUsername").val("");
                            $("#inputPassword").val("");
                            $("#errorMSGtext").html("authentication failed");
                            $("#alertMSG").removeClass("hidden");
                        }
                    }).fail(function(){
                        $("#errorMSGtext").html("unable to connect to authentication server");
                        $("#alertMSG").removeClass("hidden");
                    });
                });

                /**
                 * login anonymous, only applicable when server is configured without authentication
                 */
                $("#signin_anon").click(function (event) {
                    event.preventDefault();
                    // hide alerts
                    $("#alertMSG").addClass("hidden");
                    // try to login
                    $.ajax({
                        type: "POST",
                        url: "/api/captiveportal/access/logon/" + zoneid + "/",
                        dataType:"json",
                        data:{ user: '', password: '' }
                    }).done(function(data) {
                        // redirect on successful login
                        if (data['clientState'] == 'AUTHORIZED') {
                            if (getURLparams()['redirurl'] != undefined) {
                                window.location = 'http://'+getURLparams()['redirurl']+'?refresh';
                            } else {
                                window.location.reload();
                            }
                        } else {
                            $("#inputUsername").val("");
                            $("#inputPassword").val("");
                            $("#errorMSGtext").html("login failed");
                            $("#alertMSG").removeClass("hidden");
                        }
                    }).fail(function(){
                        $("#errorMSGtext").html("unable to connect to authentication server");
                        $("#alertMSG").removeClass("hidden");
                    });
                });

                /**
                 * logoff action
                 */
                $("#logoff").click(function (event) {
                    event.preventDefault();
                    // hide alerts
                    $("#alertMSG").addClass("hidden");
                    // try to login
                    $.ajax({
                        type: "POST",
                        url: "/api/captiveportal/access/logoff/" + zoneid + "/",
                        dataType:"json",
                        data:{ user: '', password: '' }
                    }).done(function(data) {
                        // refresh page
                        window.location.reload();
                    }).fail(function(){
                        $("#errorMSGtext").html("unable to connect to authentication server");
                        $("#alertMSG").removeClass("hidden");
                    });
                });

                /**
                 * close / hide error message
                 */
                $("#btnCloseError").click(function(){
                    $("#alertMSG").addClass("hidden");
                });

                /**
                 * execute after pageload
                 */
                 $.ajax({
                     type: "POST",
                     url: "/api/captiveportal/access/status/" + zoneid + "/",
                     dataType:"json",
                     data:{ user: $("#inputUsername").val(), password: $("#inputPassword").val() }
                 }).done(function(data) {
                    if (data['clientState'] == 'AUTHORIZED') {
                      $("#logout_frm").removeClass('hidden');
                    } else if (data['authType'] == 'none') {
                        $("#login_none").removeClass('hidden');
                    } else {
                        $("#login_password").removeClass('hidden');
                    }
                 }).fail(function(){
                     $("#errorMSGtext").html("unable to connect to authentication server");
                     $("#alertMSG").removeClass("hidden");
                 });

            });
        </script>
    </head>
    <body>
        <header class="page-head">
            <nav class="navbar navbar-default" >
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <img class="brand-logo" src="images/default-logo.png" height="30" width="150">
                        </a>
                    </div>
                </div>
            </nav>
        </header>
        <main class="page-content col-sm-6 col-sm-push-3">
          <!-- User option 1: login needed with name and password -->
          <div id="login_password" class="hidden">
              <form class="form-signin">
                  <h2 class="form-signin-heading">Please sign in</h2>
                  <label for="inputUsername" class="sr-only">Username</label>
                  <input type="text" id="inputUsername" class="form-control" placeholder="Username" required autofocus>
                  <label for="inputPassword" class="sr-only">Password</label>
                  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                  <button class="btn btn-primary btn-block" id="signin" type="button">Sign in</button>
              </form>
          </div>
          <!-- User option 2: login needed, without username, password -->
          <div id="login_none" class="hidden">
            <form class="form-signin">
                <button class="btn btn-primary btn-block" id="signin_anon" type="button">Sign in</button>
            </form>
          </div>
          <!-- User option 3: Already logged in, show logout button -->
          <div id="logout_frm" class="hidden">
            <form class="form-signin">
                <button class="btn btn-primary btn-block" id="logoff" type="button">Logout</button>
            </form>
          </div>
          <!-- Message dialog -->
          <div class="alert alert-danger alert-dismissible hidden" role="alert" id="alertMSG">
              <button type="button" class="close" id="btnCloseError" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <span id="errorMSGtext"></span>
          </div>
        </main>

        <!-- bootstrap script -->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </body>
</html>


[kabrutus]

I have done a little more testing. 

I noticed that on iOS devices, if i connect to the WiFi network and the CP Assist window opens, i let it sit for 14sec before i hit the submit button.  I will connect and send me to the success page.

Not sure if this helps.

[AdSchellevis]

Something probably isn't responding fast enough, so the first redirect fails and the next time you reload it seems to be working.

you could wrap the window.location  into a timeout for your template, something like this:

Code: [Select]

setTimeout(function(){
    if (getURLparams()['redirurl'] != undefined) {
        window.location = 'http://'+getURLparams()['redirurl']+'?refresh';
    } else {
        // no target, reload page
        window.location.reload();
    }
}, 3000);


(the inner block of code is the same as it was)