OPNsense Forum

Archive => 16.1 Legacy Series => Topic started by: kabrutus on May 26, 2016, 09:49:49 pm

Title: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 26, 2016, 09:49:49 pm
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.
(http://i.imgur.com/VJAFmKy.png)
(http://i.imgur.com/Jfqxo22.png)
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: AdSchellevis on May 27, 2016, 10:19:36 am
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
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 03:15:34 pm
Sure, i will try it out when i get back in the office today. 

I am unclear on how to
Quote
open a javascript/develop console

Can i get some direction on how to do that?
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: AdSchellevis on May 27, 2016, 03:19:10 pm
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).
 
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 03:44:29 pm
Quote
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?
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: AdSchellevis on May 27, 2016, 03:47:39 pm
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.
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 07:52:12 pm
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
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: AdSchellevis on May 27, 2016, 08:23:28 pm
and in safari when not using the assist page?
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 08:35:08 pm
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. 
(http://i.imgur.com/eNVjRWN.png)
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 08:39:15 pm
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>
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: kabrutus on May 27, 2016, 09:12:09 pm
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.
Title: Re: Captive portal errors on Mac's and iOS devices
Post by: AdSchellevis on May 28, 2016, 09:54:53 am
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)