Graphic Web Design, Computer Network, Balinese Culture

Loading...
23 comments
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 :
  • Client request to login : request will be sent to login.html router, login.html will be redirected to login.php live server.
  • Client enter the data login: data login variables will be sent back to login.html, if it is true the process go to alogin.html, then alogin.html will be redirected to alogin.php, and the client see the alogin.php page on live server. While data login variables is false, request will be redirected back to login.php with the warning “login is wrong”.
  • Client request status : After successfully logged in, the client is on alogin.php then request the status. Request will be sent to status.html. And status.html will be sent the statistic data variables and redirect to the status.php to display statistic data variables of the client.
  • Client request logout : web interface pages will be sent the request to logout the client, status.html will be process it then will be redirecting  and send the last statistic data variables to logout.php, then the client now in logout state on logout.php page.
  • Client request re logout : request will be sent to login.html. then login.html will be redirecting to login.php. And the client see the login form again on login.php page.
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!

1. Change and Move the Internal hotspot web interface

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!

2. Bypass The URL Domain of the External Hotspot Web Interface

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.

3. Adjustment php files external hotspot and html files internal router

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
<form name="redirect" action="http://wiswaweb.com/hotspot/login.php" method="post">
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.
<?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'];
?>
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

Conversion Format

$(identity) --> <?php echo $identity; ?>
$(if error) --> <?php if($error) : ?>
$(endif) --> <?php endif; ?>
$(else) ---> <?php else: ?>
$(if login-by == 'trial') --> <?php if($loginby == 'trial') : ?>
$(elif login-by != 'mac') --> <?php elseif($loginby != 'mac') : ?>
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!



Share This Article :
Related Articles

23 comments :

  1. Thank you for sharing valuable information. Nice post. I enjoyed reading this post.
    Signature:
    download free descargar whatsapp plus and download baixar whatsapp plus online and descargar whatsapp , baixar whatsapp gratis

    ReplyDelete
  2. Wonderful job, so professional. Thanks for sharing this with us.

    ReplyDelete
  3. Is wiswaweb a free website by the way?

    ReplyDelete
  4. Hey we have to just insert the php code at the top only.Is there need of any other code to insert????

    ReplyDelete
  5. We have to add same php script login.html in all the router side files.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Hi, i add facebook button like, and open walled garden for FB, i don't know howto redirect similar to trial session, do you hace some idea. Thanks!!!

    ReplyDelete
  8. Hi, i add facebook button like, and open walled garden for FB, i don't know howto redirect similar to trial session, do you hace some idea. Thanks!!!

    ReplyDelete
  9. terima kasih mas sudah sangat membantu, saya sudah berhasil dengan edit ke website saya. Yang ingin saya tanyakan, Mas Kalo misal autentifikasi Eksternal Website kita menggunakan Username dan Password dari databases Mysql di Website itu bisa gak ya ?

    Misal dengan website Wordpress, dan username password Hotspot nya adalah Username dan Password User Website tersebut (member yang registrasi di website tersebut).

    ReplyDelete
  10. Thanks for sharing this valuable information to our vision.
    Signature:
    i like play games play happy wheels online and play happy wheels unblocked full and agario , agar , fireboy watergirl

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Hi there, Thanks, this example has solved part of my problem.
    One question, how I can add the facebook login in this example?
    I was looking for in google, but, I can't find the solution.


    Thanks!!!

    ReplyDelete
  13. Obrigado você entende demais
    meu nome é everton sou Brazilian
    gostei muito do tutorial.
    Thanks!!!

    ReplyDelete
  14. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us. Web Designing Bangalore | Web Design Company Bangalore

    ReplyDelete
  15. Hi sir,
    I tested the replacement of external location. It was working for Login. After successful login, it was redirect to alogin.php. After that I click the Status or Logout. But these two functions are not working. I can't logout by click. Please help me.

    ReplyDelete
  16. According to the script below:

    function doLogin() {

    document.sendin.username.value = document.login.username.value;
    document.sendin.password.value = hexMD5('' + document.login.password.value + '');
    document.sendin.submit();
    return false;
    }

    1. Where is 'document.login.username' and 'document.login.password' comes from? I'm so confuse!
    2. When a 'doLogin' function trigger?

    ReplyDelete
  17. I think i does nothing and there was no use of those codes. All form are submitted through normal form submit.

    ReplyDelete
  18. Bluehost is definitely one of the best website hosting company for any hosting services you might need.

    ReplyDelete
  19. For best and cheap manual Seo services, Web designings. Must check Web Design Bangalore

    ReplyDelete
  20. It was very useful for me. Keep sharing such ideas in the future as well.thank for your share.

    goldenslot casino
    บาคาร่าออนไลน์
    gclub casino


    ReplyDelete
  21. al logearme me lleva a esta sitio http://survey-winner.com/ como ,o cambio por la url que escribio

    ReplyDelete

Back to Top