MAC Login Through Remote Form

RouterOS Wireless Networking
1

Hi guys,

Im currently setting up a new system where we need to use MAC login through a web form on a cloud server.

The form will ask for such things as email address and store it away in a database.

I have this side of things working by using simple PHP POST into a mysql database connector.

When I try to integrate this with the login.php from here : https://wiki.mikrotik.com/wiki/HotSpot_external_login_page I run into problems.

I understand that I dont need to bother with much of the detail in the form relating to the login but Im finding it difficult to modify the form so that it still collects some data through fields which are sent to the database and also at the same time takes care of MAC address login.

Ive set up my login.html on my routerboard as follows:

<html>
<head>

<meta http-equiv="refresh" content="0; url=login?username=myUsername&password=myPassword">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
	
	<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="https://x.x.x.x/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="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="submit" value="continue">
</form>
<script language="JavaScript">
<!--
   document.redirect.submit();
//-->
</script></center>
</body>
</html>

If anybody can offer any advice on how to get this done Id appreciate it.

thanks,

Paula

2

My current thinking is that I need to add a third form to login.php which takes care of the data storage. Ive done this and my latest attempt at a modified login.php is as follows:

<?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>Free Wifi</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>
	
	<form name="record" method="post" action="process.php">
		<input type="hidden" name="email_address" />
		<input type="hidden" name="postcode" />
	</form>
	
	<script type="text/javascript" src="./md5.js"></script>
	<script type="text/javascript">
	<!--
	    function doLogin() {
		document.record.submit();
		return false;
	    }
	//-->
	</script>
<!-- $(endif) -->

<table width="100%" style="margin-top: 10%;">
	<tr>
	<td align="center" valign="middle">
	<br />
	<table width="240" height="240" style="border: 1px solid #ffcccc; padding-top: 5px; padding-bottom: 5px;" cellpadding="0" cellspacing="0">
	<td align="center" valign="bottom" style="padding-top: 5px; padding-bottom: 5px;" height="175" colspan="2">

		<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" />
			<input type="hidden" name="email_address" />
			<input type="hidden" name="postcode" />
						
			<table width="100" style="padding-top: 5px; padding-bottom: 5px;"
				<tr align="center" valign="top" height="50" colspan="2" style="padding-top: 5px; padding-bottom: 5px;"><img src="wi.png" height="41" width="200" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<tr style="padding-top: 5px; padding-bottom: 5px;"><img src="home.jpg" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<div class="notice" style="color: #039bc3; font-size: 9px; padding-top: 5px; padding-bottom: 5px;">Free WiFi<br /><br />Please enter a few quick details</div>
				
				<tr><td align="right">Email</td>
				<td><input style="width: 140px" name="email_address" type="text" /></td>
				</tr>
				
				<tr><td align="right">Postcode</td>
				<td><input style="width: 140px" name="postcode" type="text"/></td>
				</tr>
				
				<tr><td> </td>
				
				<td><input type="submit" value="Enter" /></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>

When my test client connects and is redirected to this form on the server, they input data into the two areas and then are redirected to a blank page. A check of the database shows that a new line has been added to the table but it is all blank.

3

Hi guys,

Im still working on this and getting closer but still not quite there. The following code shows where Im up to so far:

<?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>802 Works Free Wifi</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>
	
<form name="record" method="post" action="process.php">
	<input type="hidden" name="email_address" />
	<input type="hidden" name="postcode" />
</form>
	
<script type="text/javascript">
<!--	
function doRecord() {
		document.record.email_address.value = document.login.email_address.value;
		document.record.postcode.value = document.login.postcode.value;
	    document.record.submit();
	}
//-->
</script>	
	
	
	
<!-- $(if chap-id) -->

	<form name="sendin" action="<?php echo $linkloginonly; ?>" method="post">
		<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.email_address.value = <?php echo $mac; ?>;
		document.sendin.postcode.value = <?php echo $mac; ?>;
		document.sendin.submit();
		return false;
	    }  
	//-->
	</script>
<!-- $(endif) -->

<table width="100%" style="margin-top: 10%;">
	<tr>
	<td align="center" valign="middle">
	<br />
	<table width="240" height="240" style="border: 1px solid #ffcccc; padding-top: 5px; padding-bottom: 5px;" cellpadding="0" cellspacing="0">
	<td align="center" valign="bottom" style="padding-top: 5px; padding-bottom: 5px;" height="175" colspan="2">

		<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="doRecord()" >
			<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
			<input type="hidden" name="popup" value="true" />
			<table width="100" style="padding-top: 5px; padding-bottom: 5px;"
				<tr align="center" valign="top" height="50" colspan="2" style="padding-top: 5px; padding-bottom: 5px;"><img src="wi.png" height="41" width="200" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<tr style="padding-top: 5px; padding-bottom: 5px;"><img src="home.jpg" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<div class="notice" style="color: #039bc3; font-size: 9px; padding-top: 5px; padding-bottom: 5px;">Free WiFi<br /><br />Please enter a few quick details</div>
				
				<tr><td align="right">Email</td>
				<td><input style="width: 140px" name="email_address" type="text" /></td>
				</tr>
				
				<tr><td align="right">Postcode</td>
				<td><input style="width: 140px" name="postcode" type="text"/></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>

I still cant get the main form called login to call the doRecord() function properly. If I make the action of the login form process.php then the details are added to the database just fine. Im looking at adding an event handler to the onSubmit of the login form but Im finding it difficult to bring the two parts together since one is a return and one is a straightforward function. If anybody has any suggestions Id welcome them.

4

Latest iteration is as follows. I still cant get this to work so any assistance would be gratefully appreciated.

<?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>802 Works Free Wifi</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() {
                <?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>
<!-- $(endif) -->



	<form name="record" method="post" action="process.php">
    <input type="hidden" name="email_address" />
    <input type="hidden" name="postcode" />
	</form>
	
	<script type="text/javascript">
	<!--
	    function doRecord()  {
        document.record.email_address.value = document.login.email_address.value;
        document.record.postcode.value = document.login.postcode.value;
        document.record.submit();
    }
	//-->
	</script>


	<script type="text/javascript">
	<!--
	    function mainfunction()  {
        doRecord();
        return doLogin();

    }
	//-->
	</script>



<table width="100%" style="margin-top: 10%;">
	<tr>
	<td align="center" valign="middle">
	<br />
	<table width="240" height="240" style="border: 1px solid #ffcccc; padding-top: 5px; padding-bottom: 5px;" cellpadding="0" cellspacing="0">
	<td align="center" valign="bottom" style="padding-top: 5px; padding-bottom: 5px;" height="175" colspan="2">

		<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="mainfunction()" >
			<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
			<input type="hidden" name="popup" value="true" />
			<input type="hidden" name="username" value="<?php echo $mac; ?>" />
			<input type="hidden" name="password" value="<?php echo $mac; ?>" />
			<table width="100" style="padding-top: 5px; padding-bottom: 5px;"
				<tr align="center" valign="top" height="50" colspan="2" style="padding-top: 5px; padding-bottom: 5px;"><img src="wi.png" height="41" width="200" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<tr style="padding-top: 5px; padding-bottom: 5px;"><img src="home.jpg" style="padding-top: 5px; padding-bottom: 5px;"></tr>
				<div class="notice" style="color: #039bc3; font-size: 9px; padding-top: 5px; padding-bottom: 5px;">Free WiFi<br /><br />Please enter a few quick details</div>
				
				<tr><td align="right">Email</td>
				<td><input style="width: 140px" name="email_address" type="text" /></td>
				</tr>
				
				<tr><td align="right">Postcode</td>
				<td><input style="width: 140px" name="postcode" type="text"/></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>
5

Im pleased to say I finally got this working and Im happy to share for the benefit of anybody else who is trying to do this. My code is as follows:

The following file login.php sits on the remote web server and is called by the login.php on the routerboard:

<?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']; if (isset($_POST['postcode'])) { $postcode = $_POST['postcode']; } if (isset($_POST['email'])) { $email = $_POST['email']; } ?> mikrotik hotspot > login 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; }

Please log on to use the mikrotik hotspot service

login
password
Postcode
Email


<?php echo $error; ?>
The next file shows the database interconnect which can be placed anywhere on the server since it contains sensitive information: <?php

if ((isset($_POST[‘postcode’])) && (isset($_POST[‘email’]))) {

$postcode = $_POST[‘postcode’];
$email = $_POST[‘email’];

//connect to mysql - I prefer prepared statements as the variables are prepared for safety when sent to MySQL

$connect = mysqli_connect(‘hostname’,‘db-user’,‘password’,‘database’);

mysqli_query( $connect, “INSERT INTO visitors(postcode,email) VALUES(‘$postcode’,‘$email’)”);

};
?>Ill be developing this over the coming weeks so I have created a repo on Github for this. If anybody wants to get involved or fork then Id be happy. Repo is at:

https://github.com/pau1a/Mikrotik

Hope this is useful to someone,

P