RADIUSdesk WiFi Hotspot Manager and GUI for FreeRADIUS
MESHdesk Streamlined Mesh Controller

Table of Contents

Changing the Mikrotik Hotspot login pages into a JSONP web service

Introduction

  • Mikrotik has very basic login pages which are stored under the hotspot folder on the Mikrotik device itslef by default.
  • These are HTML pages and not very modern by today's standards.
  • Fortunately the pages allow for some intelligence and coding which gives us leverage to turn them from boring HTML pages into JavaScript pages that makes things much more interesting.
  • The following URL list some of the variables which we can use to our advantage:
  • The particulat one we are very much interested in is the $(var) variable since this will contain the value of the var item in the query string.
    • If we for instance call the status page: http://10.5.50.1/status?var=callback we can build some JavaScript code and include the callback (value of the var item) that will be called when the code finished loading.
    • This will be the foundation for implementing the JSONP web service on the Mikrotik hotspot.

More about JSONP: http://en.wikipedia.org/wiki/JSONP

Replacement pages

The following pages will be replaced. Use these sample replacement pages as a guideline. You may want to make use of extra variables which are available to include more information in the JSONP feedback.

login.html

  • This page is using JavaScript POST to redirect to the external page.
  • This page is also used to serve JSONP in case there was an error, e.g. wrong credentials.
  • Remember to replace the redirect destination with your server serving the central pages.
  • In this sample page we added an input called ssid = Struisbaai. You can replace this with something specific to your deployment.
login.html
$(if error == '')
<html>
    <head><title>...</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://198.27.111.78/cake2/rd_cake/dynamic_details/mikrotik_browser_detect" method="post">
            <input type="hidden" name="loginlink" value="$(link-login-only)">
            <input type="hidden" name="nasid" value="$(identity)">
            <input type="hidden" name="link_status" value="$(link-status)">
            <input type="hidden" name="link_login_only" value="$(link-login-only)">
            <input type="hidden" name="link_logout" value="$(link-logout)">
            <input type="hidden" name="mac" value="$(mac-esc)">
            <input type="hidden" name="type" value="mikrotik">
            <input type="hidden" name="ssid" value="Struisbaai">
            <input type="submit" value="continue">
        </form>
        <script language="JavaScript">
        <!--
           document.redirect.submit();
        //-->
        </script>
        </center>
    </body>
</html>
$(else)
$(var)({
	'logged_in' 	    : '$(logged-in)', 	
	'link_login_only' 	: '$(link-login-only)',
	'error_orig'		: '$(error-orig)',
	'error'			: '$(error)'
})
$(endif)

status.html

  • This page will give feedback on the connected user's status. (usually served through 10.5.50.1/status?var=callback AND user is connected.)
status.html
$(var)({
	'logged_in': 		'$(logged-in)', 
	'link_login_only': 	'$(link-login-only)',	 
	'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)',
	'session_time_left':    '$(session-time-left)',
	'uptime':	        '$(uptime)'
})

fstatus.html

  • This page will give feedback on the connected user's status. (usually served through 10.5.50.1/status?var=callback AND user is NOT connected.)
  • This page does not exist by default and has to be added instead of replaced.
fstatus.html
$(var)({
	'logged_in' 		: '$(logged-in)', 	
	'link_login_only' 	: '$(link-login-only)'
})

alogin.html

  • This page is dispalyed after successful login
alogin.html
$(var)({
	'logged_in' 		: '$(logged-in)', 	
	'link_login_only' 	: '$(link-login-only)'
})

logout.html

  • This page is dispalyed after successful logout
logout.html
$(var)({
	'logged_in' 		: '$(logged-in)', 	
	'link_login_only' 	: '$(link-login-only)'
})

Other technical considerations

  • To authenticate the user you can call the following URL (adapt to fit your configuration)
  • The page which will be served upon successful login or if someone is already logged in is the alogin.html page.
  • For the above to work you have to enable PAP authentication on the hotspot setup of the Mikrotik.
  • If you do not want to make use of PAP authentication and use CHAP instead, things become more complex and you will have to resort to cross site scripting techniques as stipulated here: