HotSpot external login page
From MikroTik Wiki
This is the login.html that is uploaded to the router in the hotspot directory. Replace xx.xx.xx.xx with your external php server ip.
<html> <title>...</title> <body> <form name="redirect" action="http://xx.xx.xx.xx/logintest.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="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)"> </form> <script language="JavaScript"> <!-- document.redirect.submit(); //--> </script> </body> </html>
This is logintest.php. Install this on the remote php server. This is a test that all is working ok.
<?php $mac=$_POST['mac']; $ip=$_POST['ip']; $username=$_POST['username']; $linklogin=$_POST['link-login']; $linkorig=$_POST['link-orig']; $error=$_POST['error']; ?> <html> <body> <h2>Logintest.php Test</h2> Mac: <?php echo $mac ?><br> IP: <?php echo $ip ?><br> Username: <?php echo $username ?><br> Link-login: <?php echo $linklogin ?><br> Link-orig: <?php echo $linkorig ?><br> Error: <?php echo $error ?><br> </body> </html>
Once you have that working, this is login.php for your remote php server. If you use http-chap, you must move the md5.js file to the same directory and insure it is readable by all. If you don't use chap, remove onSubmit="return doLogin()" from the form submission. If you use a background image, it should be moved to the external server into the appropriate directory (/img/background.gif as an example).
Change the login.html code in your router to use login.php rather than logintest.php. If you don't want trial users, remove the trial section of the html. The old $(trial) statement is just remarked out to make it easier to find. Remove code to the next $(endif).
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mikrotik 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>
<body>
<!-- $(if chap-id) -->
<form name="sendin" action="<?php echo $linkloginonly; ?>" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
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>
<!-- $(endif) -->
<div align="center">
<a href="<?php echo $linkloginonly; ?>?target=lv&dst=<?php echo $linkorigesc; ?>">Latviski</a>
</div>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div class="notice" style="color: #c1c1c1; font-size: 9px">Please log on to use the mikrotik hotspot service<br />
<!-- $(if trial == 'yes') -->
Free trial available, <a style="color: #FF8080"href="<?php echo $linkloginonly; ?>?dst=<?php echo $linkorigesc; ?>&username=T-<?php echo $macesc; ?>">click here</a>.
<!-- $(endif) -->
</div><br />
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<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="<?php echo $username; ?>"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td> </td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- $(if error) -->
<br /><div style="color: #FF8080; font-size: 9px"><?php echo $error; ?></div>
<!-- $(endif) -->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
