Syed Jahanzaib Personal Blog to Share Knowledge !

March 10, 2014

Mikrotik Hotspot: Different login page for Mobile Users

Filed under: Mikrotik Related — Tags: — Syed Jahanzaib / Pinochio~:) @ 1:27 PM

Recently a Nigerian friend asked about how we can configure different login page for Mobile users , which could be a light weight and customized for mobile/pda screen size with customized welcome message. Following is a quick method on how you can display different login page if user is login from mobile or device, & default login page for desktop users.

This is quick method, but if you want more sophisticated method like detect client by device, then you can use variable functions and act accordingly.

First the logic: You have to create 3 html pages,

1-     login.html
2-    mobilelogin.html
3-    otherlogin.html

1- login.html [Re directer which check user device/screen size]

login.html page is a kind of re directer which will actually check the screen size of client device/screen. If it found it less then 800/600 , it will assume its a mobile device and will redirect to mobilelogin.html,
otherwise it will display another login page otherlogin.html which could be default login page for all.

First create login.html

<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
document.location="mobilelogin.html";
}
else {
document.location="otherlogin.html";
}
</script>

♦♦♦

2- mobilelogin.html [lightweight login page for mobile users]

mobilelogin.html is displayed if the client device/screen size is under 800/600. You can modify it as per requirements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>internet hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}

textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>

</head>

<html>
<body>

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>
<div align="center">
<b><font size="4">mobile user</font></b></div>

<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div style="color: #c1c1c1; font-size: 9px">Please log on to use the internet hotspot service<br />$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>.$(endif)</div><br />
<table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />

<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td>&nbsp;</td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr>
</table>

<br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>

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

♦♦♦

3- otherlogin.html [standard login page for ALL]

otherlogin.html /  This is standard login.html page which is default mikrotik login page. You can use your old default login.html and rename it as to otherlogin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>internet hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}

textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>

</head>

<html>
<body>

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>
<div align="center">
<font size="4"><b>DESKTOP </b></font><b><font size="4">&nbsp;user</font></b></div>

<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div style="color: #c1c1c1; font-size: 9px">Please log on to use the internet hotspot service<br />$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>.$(endif)</div><br />
<table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />

<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td>&nbsp;</td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr>
</table>

<br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS/zaib</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>

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

After three files have been created, Upload them to MIKROTIK / Files > Hotspot folders.

TEST DRIVE

First, From your mobile device try to connect to web and you should see yout mobilelogin.html page ,
Something like below …

Mikrotik HOTSPOT Mobile User Login Page

Mikrotik HOTSPOT Mobile User Login Page

Now, try to login from DESKTOP PC, and you should see otherlogin.html page.

Mikrotik HOTSPOT Desktop User Login Page

Mikrotik HOTSPOT Desktop User Login Page

TIPS:

If  user is unable to login, and you are seeing following error in LOG window

login failed: password is not chap encrypted

Then Go to IP > Hotspot > Server Profiles and edit the relevant profile, go to the Login tab and uncheck HTTP CHAP and check HTTP PAP. Then try again.

Regard’s
Syed Jahanzaib

Display Maintenance Message To Users

Filed under: Mikrotik Related — Tags: , — Syed Jahanzaib / Pinochio~:) @ 8:57 AM

This is just a simple reference guide on howto display maintenance notice page for client when the the main internet link is down. You can add many advance functions in it, but I shared this method just to give you an idea that how it an be done. The result is that It can greatly help in reducing clients calls to help line in event of internet downtime.

As someone asked from the FB, I decided to make it public so those who don’t know about it should get a idea on how simple it is to achieve. I implemented this technique at a local network which had a fewer number of clients with an unstable PTCL DSL connectivity. It helped the operator to keep informed about the connectivity status via sms status (GSM modem was attached with mirkotik and the netwatch script also sends sms to the operator about the link status)

The theory is simple, First create a NAT rule that redirects http port 80 requests to your local/external proxy service which deny all requests and redirect to local web server page which shows the MAINTENANCE PAGE. make sure to disable this rule after its creation.

Now create a NETWATCH rule that can keep monitoring any reliable HOST on internet , probably your ISP DNS or GOOGLE DNS , if the link is down, then DOWN script should be triggered which enables the NAT Rule, so in case of any link down all users will be routed to maintenance page, and when the link gets UP, the up script will disable the NAT rule, and internet will start work at user end normally.

Example:

First the NAT rule which actually redirects port 80 requests to internet/external proxy server.
[Make sure the comments remains same in all rules of nat / netwatch, otherwise script will not work.

/ip firewall nat
add action=redirect chain=dstnat comment="Redirect to Proxy" disabled=yes dst-port=80 protocol=tcp to-ports=8080
Now ENABLE web proxy which will deny requests of all users port 80 requests and redirect them to local web server page showing the reason why internet is not working.
/ip proxy
set always-from-cache=no cache-administrator=webmaster cache-hit-dscp=4 cache-on-disk=yes enabled=yes max-cache-size=unlimited max-client-connections=600 \
max-fresh-time=3d max-server-connections=600 parent-proxy=0.0.0.0 parent-proxy-port=0 port=8080 serialize-connections=no src-address=0.0.0.0

/ip proxy access
add action=deny disabled=no dst-port="" redirect-to=10.0.0.1/netdown.html

Now the Netwatch script which will keep monitoring the internet, and act accordingly

/tool netwatch
add disabled=no down-script=":log error \"ISP Link seems to be DOWN  , ENABLING  redirection to proxy so users will see mainteneace page / zaib\"\r\
\n/ip firewall nat enable [find comment=\"Redirect to Proxy\"]" host=8.8.8.8 interval=5s timeout=1s up-script=":log error \"ISP Link seems to be UP again , Disa\
bling redirection to proxy so users internet will start work again. / zaib\"\r\
\n/ip firewall nat disable [find comment=\"Redirect to Proxy\"]\r\
\n"

Result [when the internet link is down]:

Attachment:
rule.png

linkdown-cleint

 

You can achieve the same task with more elegance , more controlled way by using SCRIPTS to do various functions like frequency control , ping multiple hosts instead of single destination, Act according to latency load results, email / sms function, and much much more,
as someone said

Quote:

” SKY  IS  THE  ONLY  LIMIT “

.
.
Regard’s
Syed Jahanzaib

%d bloggers like this: