Conversion Internal to External Hotspot Web Interface Login Page Mikrotik

After understanding the process to create internal hotspot web interface login page, we are going to go one step further to create external hotspot web interface login page using internal hotspot web interface that we have just created. In other word we are going to place the hotspot web login page files to the live server or website hosting file. So that when the hotspot client want to login to use internet hotspot, they will directed to the external hotspot web interface. Of course you must have the hosting account to put hotspot files to the live server.

If you already have any website whether it be personal or business website, you can include it into the part of your  website pages and menu navigation links. It's very free where you want to place it as you like, and you do not have to worry how much the images that you want to use, This will not limit the creativity when you create the style of the hotspot login page. Without being limited by capability of the mikrotik router that you have.

To make it easier understood, look at the scheme of client request login flow at first! this is how the external hotspot web interface works :

So that how does the external hotspot interface works, when the first time the process redirecting to each external page, the client will see the warning to continue the javascript from the browser. Ok let’s get started how we implement it!

Take Internal hotspot interface on your router to the folder of your local computer, we only use such as login.html, alogin.html, status.html, and logout.html.  of course included with the file links that related to those files. That is css, img, fonts and js folder that containing the related file links. I think would be nice if we collect md5.js to the js folder, so outside of folder we just only have the main html of the hotspot files by removing  the others html file that we do not require.

Change the html extension files (.html)  to the php extension files (.php), then you can create the zip file from those files including the folder, so that it can be uploaded faster using FTP connection. Next, open the FTP application in this case I am using the add-on Mozilla Firefox, that is fireFTP.

Login with your website files or hosting files with your account to the fireFTP and you can access and manage the hosting files on live server. Create a new folder inside the hosting files or your website files just named with “hotspot”, and drag the zip hotspot  file into the folder to upload the zip file.

We are now on live server files, then extract the zip file on the hotspot folder. To extract the zip file, I must go to the cpanel and login with the account hosting. As usual go the file manager and find the hotspot directory on public_html of the hosting files and then you can extract the zip file. After the extraction successfully, we can remove the zip file. So that in the hotspot directory on live server will looked like the picture below!

Because External Hotspot Web Interface files is located to the url domain pages, you need to give free or bypassed access to the domain name that used in walled garden. For the automatic configuration, just paste this rule to the new teminal window on winbox!

/ip hotspot walled-garden ip
add action=accept disabled=no dst-host=wiswaweb.com

Go to IP > Hotspot on winbox,  you can see the rule on the tab walled garden and walled-garden IP list has a new configuration to accept/allow the domain name with the IP public even the domain using dynamic public IP. So make sure that client can access the all domain pages included with the external hotpot pages without login.

External hotspot web interface on live server can work by the scripts itself or just from live server. Actually It is the proses to access the internal hotspot server that will be redirected to the external pages on live server including the variables hotspot that used. The client will send the input variables and see the data variables of the internal hotspot server through external hotspot pages or interface on live server.

The script Login.html on the hotspot router files

<html>
<head><title>login</title></head>
<body>
$(if chap-id)
<noscript>
<center><b>JavaScript required. Enable JavaScript to continue.</b></center>
</noscript>
$(endif)
<center>If you are not redirected in a few seconds, click 'continue' below<br>
<form name="redirect" action="http://wiswaweb.com/hotspot/login.php" method="post">
<input type="hidden" name="mac" value="$(mac)">
<input type="hidden" name="ip" value="$(ip)">
<input type="hidden" name="username" value="$(username)">
<input type="hidden" name="link-login" value="$(link-login)">
<input type="hidden" name="link-orig" value="$(link-orig)">
<input type="hidden" name="error" value="$(error)">
<input type="hidden" name="trial" value="$(trial)">
<input type="hidden" name="chap-id" value="$(chap-id)">
<input type="hidden" name="chap-challenge" value="$(chap-challenge)">
<input type="hidden" name="link-login-only" value="$(link-login-only)">
<input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
<input type="hidden" name="mac-esc" value="$(mac-esc)">
<input type="hidden" name="identity" value="$(identity)">
<input type="hidden" name="bytes-in-nice" value="$(bytes-in-nice)">
<input type="hidden" name="bytes-out-nice" value="$(bytes-out-nice)">
<input type="hidden" name="session-time-left" value="$(session-time-left)">
<input type="hidden" name="uptime" value="$(uptime)">
<input type="hidden" name="refresh-timeout" value="$(refresh-timeout)">
<input type="hidden" name="link-status" value="$(link-status)">
<input type="submit" value="continue">
</form>
<script language="JavaScript">
   document.redirect.submit();
</script></center>
</body>
</html>

Login.html no longer used for displaying the data hotspot variable, but only send/insert the data variables hotspot that will be redirected to the form of the external login.php
So the data variables will be send with type “hidden” to the external url http://wiswaweb.com/hotspot/login.php  which is the login page of the external interface. Input data variables that I used is the same for alogin.html, status.html, and logout.html, it’s no problem because this is the hidden varibles.

The script Login.php on live server / hosting server

<?php
    $mac=$_POST['mac'];
    $ip=$_POST['ip'];
    $username=$_POST['username'];
    $linklogin=$_POST['link-login'];
    $linkorig=$_POST['link-orig'];
    $error=$_POST['error'];
    $trial=$_POST['trial'];
    $loginby=$_POST['login-by'];
    $chapid=$_POST['chap-id'];
    $chapchallenge=$_POST['chap-challenge'];
    $linkloginonly=$_POST['link-login-only'];
    $linkorigesc=$_POST['link-orig-esc'];
    $macesc=$_POST['mac-esc'];
    $identity=$_POST['identity'];
    $bytesinnice=$_POST['bytes-in-nice'];
    $bytesoutnice=$_POST['bytes-out-nice'];
    $sessiontimeleft=$_POST['session-time-left'];
    $uptime=$_POST['uptime'];
    $refreshtimeout=$_POST['refresh-timeout'];   
    $linkstatus=$_POST['link-status'];  
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mikrotik Hotspot | Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><?php echo $identity; ?></a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="http://hotspot.wiswaweb.com">Login</a></li>
                    <li><a href="http://hotspot.wiswaweb.com/status">Status</a></li>
                    <li><a href="http://hotspot.wiswaweb.com/logout?erase-cookie=true">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="bottom-menu">
        <div class="container">
            <div class="row">
                <div class="col-md-2 mylogo">
                    <a href="http://agratitudesign.blogspot.com/" ref="index.html"><img src="img/agratitudesignlogo2.png" alt="logo"></a>
                </div> 
                <div class="col-xs-10 textlogo">
                    <h1>Agratitudesign Hotspot</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="col-md-6 col-sm-12">
        
            <div class="row">
                <?php if($error) : ?>
                    <div class="alert alert-danger"><?php echo $error; ?></div>
                <?php endif; ?>

                <div class="alert alert-info">Please log on to use the hotspot service.</div>
                <?php if($trial == 'yes') : ?> 
                    <div class="alert alert-info">
                        Free trial available, <a href="<?php echo $linkloginonly; ?>?dst=<?php echo $linkorigesc; ?>&amp;username=T-<?php echo $macesc; ?>">click here</a>.
                    </div>
                <?php endif; ?>
            </div>
            <div class="row">            
                <div class="panel panel-default">                    
                    <div class="panel-body">

                        <form id="loginForm" class="form-horizontal" role="form" action="<?php echo $linkloginonly; ?>" method="post">
                            <input type="hidden" name="dst" value="<?php echo $linkorig; ?>"/>
                            <input type="hidden" name="popup" value="true"/>

                            <div class="form-group">
                                <label for="inputLogin" class="col-sm-2 control-label">Login</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-lg" id="inputLogin" name="username"
                                           placeholder="Login" autofocus required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword" class="col-sm-2 control-label">Password</label>

                                <div class="col-sm-10">
                                    <input type="password" class="form-control input-lg" id="inputPassword" name="password"
                                           placeholder="Password" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-primary btn-block btn-lg">OK</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="card hovercard">
                        <div class="cardheader">
                        </div>
                        <div class="avatar">
                        <img alt="" src="img/agratitudesignlogo.png">
                        </div>
                        <div class="info">
                        <div class="title">
                        <a href="http://agratitudesign.blogspot.com/">Agratitudesign HighSpeed Hotspot</a>
                        </div>
                        <div class="desc">Website Hotspot Interface For Free</div>
                        <div class="desc">created by <a target="_blank" href="http://agratitudesign.blogspot.com/" title="Agratitudesign Hotspot Templates">agratitudesign.blogspot.com</a></div>
                        <div class="desc">supported by <a target="_blank" href="http://wiswaweb.com/" title="Agratitudesign Hotspot Templates">wiswaweb.com</a></div>
                        </div>
                        <div class="bottom">
                        <a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/agratitudesign"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/+KetutAgusSuardika"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-primary btn-sm" rel="publisher" href="https://www.facebook.com/pages/Agratitudesign/451131721572773"><i class="fa fa-facebook"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div class="container">
        <p class="text-muted">Powered by <a href="http://agratitudesign.blogspot.com/">Agratitudesign</a></p>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<?php if($chapid) : ?> 
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
<!--
    function doLogin() {
    <?php if(strlen($chapid) < 1) echo "return true;n"; ?>
    document.sendin.username.value = document.login.username.value;
    document.sendin.password.value = hexMD5('<?php echo $chapid; ?>' + document.login.password.value + '<?php echo $chapchallenge; ?>');
    document.sendin.submit();
    return false;
    }
//-->
</script>
<?php endif; ?>

<script type="text/javascript">
  document.login.username.focus();
</script>

</body>
</html>

At the top of this script is inserted with the php scripts, this script will collect the data variable hotspot that will be sent by login.html.
After the client entered the data login, it will sent back to hotspot server to be processed by md5.js. If it is true will be redirected to the alogin.html, then alogin.html will redirect to alogin.php includes with the hidden hotspot data variables, and so it goes.

Get Variables Hotspot on the Content login.php

It is different at the time when we get the data hotspot variables login.html that using the format code like this "$(endif)", in login.php will be changed to <?php endif; ?>.So you must change the format in php funtion.

For the complete process you can see on this video article. The complete scripts you can download below as the example. One the important thing that you have to do is to change the url links, such http://wiswaweb.com/hotspot/login.php on each router html files depending on the path url where you put the external hotspot pages. ok...have a try and good luck!