Creating a central Mikrotik login page Background
If you create a Hotspot with Mikrotik using the default values you will be redirected to a lo gin page on http://10.5.50.1/login http://10.5.50.1/login..
Mikrotik features the following URLs on the default gateway of the Hotspot server:
URL
Description
http://10.5.50.1/
Shows rstatus.html rstatus.html or status.html if not avail able
http://10.5.50.1/login
Used to show the login page or to log a user in
http://10.5.50.1/status Used to show the status of a user and their usage http://10.5.50.1/logout Used to log the user out Sub pages
The url http://10.5.50.1/logout seems to have sub pages.
There are the following:
URL
Description
http://10.5.50.1/logout/status shows status.html or fstatus.html http://10.5.50.1/logout/login
if logged in shows /status of logged out redirects to login page
http://10.5.50.1/logout/logout If logged in logs the user out and redirects to login page
How does the remote login page work?
To host the login page on a central server is quite simple since you will modify the login.html page on the Mikrotik Mikrotik to submi t itself to the remote server and include the variables which you require.
When using PHP for instance, you will be able to get the submitted POST variables through the $_POST? pattern.
To submit the login page hosted on the central server, you again will submit it to the login.html page on the Mikrotik box as target.
Any Page a Login Page?
Unfortunately the way Mikrotik use to host and submit login pages and requests is very old style when comparing for instance with Coova Chilli.
Coova Chilli makes use of JSONP which will allow you to make any o utside web page a login page.
If we also want this type of functionality using Mikrotik, the closest we can do is the foll owing (see diagram). diagram).
Some important points
We can authenticate a user by adding a query stri ng to the http://10.5.50.1/login URL. So if we want to authenticate a user dvdwalt@ri we can do the foll owing:
http://10.5.50.1/login/userna http:/ /10.5.50.1/login/username=dvdwa me=dvdwalt@ri&password=d lt@ri&password=dvdwalt@ri vdwalt@ri
We can also inform Mikrotik to redirect the user to a specific URL by adding a dst location to the query string:
http://10.5.50.1/login/userna http:/ /10.5.50.1/login/username=dvdwa me=dvdwalt@ri&password=d lt@ri&password=dvdwalt@ri&dst=http vdwalt@ri&dst=http://central.login.ser ://central.login.server/login.php ver/login.php
This means that after the authentication request went through fine; the user will be redirected to http://central.login.server/login.php
This page can then include code that call s the status page on the Miktorik at set intervals. Below is a prove of concept page that ca n be used as a sample:
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
// we will add our javascript code here
var count = 1;
$(document).ready(function() {
window.callback = function(data){
count++;
console.log(data,count );
};
//Loop every 2 seconds
var tid = setInterval(refresh, 2000);
function refresh(){
$.getScript("http://10.5.50.1/status", function(data) {
console.log("Fetching of script completed");
}
);
};
});
Status info from Mikrotik
The Mikrotik Hotspot only supplies the user's usage through the http://10.5.50.1/status URL. All other URLs does not i nclude the usage.
By default when the user is l ogged in; the content of status.html status.html is displayed.
By default when the user is NOT logged in; and the fstatus.html file is present it wi ll be displayed.
We need to change both of these fil es to serve a JSONP object.
Unfortunately Mikrotik Mikrotik decided that these pages can only be s erver ad type html (the header will specify these pages as:)
Response Headers
Cache-Control
Connection Keep-Alive
Content-Length
387
Content-Type
text/html
Date
no-cache
Fri, 02 Jan 1970 00:11:40 GMT
Expires
0
Request Headers
Accept
Accept-Encoding
gzip, deflate
Accept-Language
en-za,en-gb;q=0.8,en-us;q=0.5,en;q=0.3
Connection keep-alive
Host
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
10.5.50.1
Fortunately it seems that the main browsers except this (although not right) and will assume the content as an JSONP object.
So we can change for instance the status.html to the foll owing (take (take care to only have thi s text which will reflect a JSONP object, no headers, body or script tags!!!):
callback({
'link-logout' :"$(link-logout)",
'username': "$(username)",
'ip': "$(ip)",
'bytes-in': "$(bytes-in)",
'bytes-in-nice': "$(bytes-in-nice)",
'bytes-out': "$(bytes-out)",
'bytes-out-nice': "$(bytes-out-nice)",
'remain-bytes-in': "$(remain-bytes-in)",
'remain-bytes-out': "$(remain-bytes-out)",
'packets-out': "$(packets-out)",
'packets-in': "$(packets-in)",
$(if session-time-left)
'session-time-left': "$(session-time-left)"
$(else)
'connected':"$(uptime)"
//Link to log out
$(endif)
})
//The user's name
The Mikrotik device will then based on the content above serve the following:
callback({
'link-logout' :"http://10.5.50.1/logout",
//Link to log out
'username': "dvdwalt@ri",
//The user's name
'ip': "10.5.50.254",
'bytes-in': "340672",
'bytes-in-nice': "332.9 KiB",
'bytes-out': "980481",
'bytes-out-nice': "957.2 KiB",
'remain-bytes-in': "",
'remain-bytes-out': "",
'packets-out': "1609",
'packets-in': "($packets-in)",
'connected':"4m45s"
})
Although the content is served as Content-Type: text/html, the browsers seems to accept it as JSONP.
We can then, based on the feedback we get from the JSONP c all, show the usage of the user when they are connected; or we can redirect them to the login page if they were disconnected.
Modifying a standard Mikrotik Hotspot
This section will discuss the various changes that has to be done to Mikrotik in order to give the best experience.
Modify the following pages. We will assume that the external server has a DNS name of mt-external.co.za.
The login.html page
...
<meta http-equiv="refresh" content="0; url=http://mtexternal.co.za/mt_external/login_test/login.php?loginlink=$(link-login-only)">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
The status.html page:
'logged_in': '$(logged-in)', fstatus.html to deterime if the user is connected
'link_login_only': '$(link-login-only)',
'link_logout':
'$(link-logout)',
'username':
'$(username)',
'ip':
'bytes_in':
'bytes_in_nice':
'bytes_out':
'bytes_out_nice':
'remain_bytes_in': '$(remain-bytes-in)',
'remain_bytes_out':
'packets_out':
'$(packets-out)',
'packets_in':
'$(packets-in)',
'session_time_left':
'uptime':
//This is crucial in status.html and
//To know where the login page is
//Link to log out
//The user's name
'$(ip)',
'$(bytes-in)',
'$(bytes-in-nice)',
'$(bytes-out)',
'$(bytes-out-nice)',
'$(remain-bytes-out)',
'$(session-time-left)',
'$(uptime)'
})
The fstatus.html page. This page does not exists by defaul t and you have to create it:
Mikrotik.f_status({
'logged_in' : '$(logged-in)', fstatus.html to deterime if the user is connected
'link_login_only'
Mikrotik.f_status({
: '$(link-login-only)'
//This is crucial in status.html and
//To know where the login page is
})
The alogin.html page. This page i s displayed after login, we modify it to redirect immediately to the login page which will display the stats using JSONP
<meta http-equiv="refresh" content="0; url=http://mtexternal.co.za/mt_external/login_test/login.php?loginlink=$(link-login-only)">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
...
The logout.html page. We modify it to i mmediately redirect to the login page which will display the stats using JSONP
...
<meta http-equiv="refresh" content="0; url=http://mtexternal.co.za/mt_external/login_test/login.php?loginlink=$(link-login-only)">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
Attachments