Community discussions

MikroTik App
 
PackElend
Member Candidate
Member Candidate
Topic Author
Posts: 268
Joined: Tue Sep 29, 2020 6:05 pm

customized Hotspot to either authorize client or grant instant guest access

Sun May 15, 2022 11:22 pm

Hi MTs,
I have customised the Hotspot to allow instant/anonymous guest access or user access at the same page.
The purpose is to have single/common guest access and user access with self-registration for MAC-based VLAN assignment.
If the user logs in with his own credentials, an ACL entry for this device is created which allows it to connect to a (the same) WiFi with an individual PPK. This device is assigned to the user's VLAN.

I modified the login page. If you connect as a guest you stay in the Guest VLAN. If you use your credentials you will connect to your own VLAN.
The details of this hotspot2wpa&VLAN are here: routeros-scripts/hotspot-to-wpa.md at main · eworm-de/routeros-scripts

The script part is working as well as the hotspot. I do have some questions to optimise it:
  1. How to redirect to the login page, after the user logged in. I'm not interested in status.html?
    Background: To avoid burden on the admin I want to allow the to switch VLANs the user her-/himself. A case could be that the device changes its owner or you just want to use the other user's Chromecast etc.
    Replacing
    alogin.html - page shown after client has logged in. It pops-up status page and redirects browser to originally requested page (before he/she was redirected to the HotSpot login page)
    by the modified login.html is not working.
  2. Does make the usage of mac based cookies still sense due to https://cujo.com/mac-address-randomization?
  3. How to use the different standard Timeout (Session, Idle, Keepalive) and Cookie Timeout (HTTP, MAC) properly?
    I'm a bit lost in the documentation and the different settings. I know what they mean but still don't get it, which should be the shortest Timeout, which the longest, and which should be the same...
  4. As a consequence of C how to ensure that a guest device has to log in again, when the device disconnects from WiFi (but still allow to roam between APs)
  5. In case of guest login, how to add a disclaimer to be confirmed before being allowed to go online?



Here are the modified files of the default hotspot login:
  1. preview:
    image_2022-05-01_14-51-03.png
  2. change in login.html
    script:
            function doLogin() {
              var btnClicked = event.submitter.getAttribute("class") ;
    
    
              if (btnClicked != "guest") {
                document.sendin.username.value = document.login.username.value;
                document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
                document.sendin.submit();
                } else {
                  document.sendin.username.value = "GuestUser";
                  document.sendin.password.value = hexMD5('$(chap-id)' + "GuestPassword" + '$(chap-challenge)');
                  document.sendin.submit();
                }
                return false;             
    
            }
    body:    
            Form Change:
                  <input value="Connect" type="submit" class="user"> 
                  <input value="Continue as Guest" type="submit" class="guest">
    
  3. change in style.css
    input[type=submit].user {
    	background: #3e4d59;
    	color: #fff;
    	border: 0;
    	cursor: pointer;
    	text-align: center;
    	width: 100%;
    	height: 44px;
    	border-radius: 6px;
    	margin-bottom: 20px;
    	-webkit-transition: background .3s ease-in-out;
    	transition: background .3s ease-in-out;
    }
    
    input[type=submit].user:focus,input[type=submit].user:hover {
    	background: #33404a;
    }
    
    input[type=submit].guest {
    	background: #3e4d59;
    	color: #fff;
    	border: 0;
    	cursor: pointer;
    	text-align: center;
    	width: 100%;
    	height: 44px;
    	border-radius: 6px;
    	margin-bottom: 10px;
    	-webkit-transition: background .3s ease-in-out;
    	transition: background .3s ease-in-out;
    }
    
    input[type=submit].guest:focus,input[type=submit].guest:hover {
    	background: #33404a;
    
  4. new login.html
     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="expires" content="-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Internet hotspot - Log in</title>
        <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
        <!-- two other colors
    <body class="lite"><body class="dark">--> $(if chap-id)
        <form name="sendin" action="$(link-login-only)" method="post" style="display:none">
          <input name="username" type="hidden"> <input name="password" type="hidden">
          <input name="dst" value="$(link-orig)" type="hidden"> <input name="popup"
    
            value="true" type="hidden"> </form>
        <script src="/md5.js"></script>
        
        <script>
            function doLogin() {
              var btnClicked = event.submitter.getAttribute("class") ;
    
    
              if (btnClicked != "guest") {
                document.sendin.username.value = document.login.username.value;
                document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
                document.sendin.submit();
                } else {
                  document.sendin.username.value = "GuestUser";
                  document.sendin.password.value = hexMD5('$(chap-id)' + "GuestPassword" + '$(chap-challenge)');
                  document.sendin.submit();
                }
                return false;             
    
            }
    
        </script> $(endif)
        <div class="ie-fixMinHeight">
          <div class="main">
            <div class="wrap animated fadeIn">
              <form name="login" action="$(link-login-only)" method="post" $(if="" chap-id)=""
                    onsubmit="return doLogin()" $(endif)="" style="height: 434px;"> 
                  
                  <input name="dst" value="$(link-orig)" type="hidden"> 
                  <input name="popup" value="true" type="hidden">
                  <input name="guestusername" value="test12" type="hidden">
                  <input name="guestpassword" value="test34" type="hidden">
                  
                  <svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 174 42" align="center">
                    <path d="M 101.2338 0.334 C 101.0647 0.5176 100.2229 0.9872 99.3637 1.378 C 96.5501 2.6568 93.961 6.6816 93.3843 10.6724 C 93.2193 11.8124 93.0531 18.5948 93.0152 25.7444 C 92.9475 38.3792 92.9637 38.756 93.5936 39.172 C 94.5325 39.7924 101.2448 39.7328 101.6641 39.1 C 101.8688 38.7916 102.0425 33.7692 102.118 26 C 102.2045 17.0728 102.3555 13.1456 102.6357 12.5272 C 103.4432 10.746 105.346 11.0452 105.9636 13.0504 C 106.1346 13.6056 106.272 19.53 106.272 26.346 C 106.272 35.3748 106.3754 38.7676 106.6608 39.12 C 107.2122 39.8008 114.0555 39.774 114.8152 39.088 C 115.3408 38.6136 115.3738 37.5236 115.2695 24.188 C 115.1392 7.5576 115.1029 7.3084 112.2965 3.778 C 110.1169 1.0364 107.9007 0 104.2185 0 C 102.7462 0 101.4029 0.1504 101.2338 0.334 M 0 2.7764 C 0 3.8636 0.1575 4.8728 0.3499 5.0196 C 0.7546 5.3284 5.7342 14.63 6.7603 16.994 C 7.4141 18.5012 7.452 19.1392 7.452 28.68 C 7.452 38.248 7.4844 38.7932 8.0786 39.186 C 8.4234 39.4136 10.3136 39.6 12.2793 39.6 C 15.481 39.6 15.888 39.5196 16.1887 38.8264 C 16.3934 38.3536 16.524 34.2648 16.524 28.3228 L 16.524 18.5928 L 17.901 15.676 C 18.6582 14.072 20.6132 10.1752 22.2449 7.0168 C 25.0044 1.6752 25.1631 1.2576 24.5129 1.0424 C 23.3756 0.6656 17.6065 0.768 16.7278 1.1804 C 16.2703 1.3952 15.2186 2.8388 14.315 4.492 C 13.4337 6.1044 12.4989 7.6424 12.2375 7.9104 C 11.6663 8.4956 11.2629 7.9984 9.8778 5 C 9.3694 3.9 8.5542 2.5052 8.066 1.9 C 7.2038 0.832 7.0729 0.8 3.5889 0.8 L 0 0.8 L 0 2.7764 M 127.0825 1.42 C 124.6661 2.2232 123.6734 2.942 122.3563 4.8416 C 120.632 7.3288 120.4541 8.9864 120.5802 21.4 L 120.69 32.2 L 121.5807 34.0708 C 123.467 38.032 125.92 39.26 132.4502 39.5116 C 138.4527 39.7428 138.348 39.8368 138.348 34.218 C 138.348 31.5952 138.2106 29.9904 137.9592 29.68 C 137.7091 29.3712 136.4089 29.198 134.3142 29.194 C 132.3488 29.1904 130.7369 28.9884 130.248 28.684 C 129.2595 28.0688 129.0489 26.6872 129.7445 25.3768 C 130.2386 24.446 130.4194 24.4 133.5927 24.4 C 135.7505 24.4 137.0591 24.2312 137.3112 23.92 C 137.8338 23.2748 137.8338 17.1252 137.3112 16.48 C 137.0692 16.1812 135.873 16 134.1435 16 C 131.0703 16 129.924 15.4168 129.924 13.8536 C 129.924 11.8112 130.5833 11.4108 134.1904 11.262 C 136.0317 11.186 137.7204 10.9388 137.943 10.7128 C 138.219 10.4332 138.348 8.9984 138.348 6.2132 C 138.348 0.7128 138.4267 0.792 132.9764 0.8264 C 130.4479 0.8424 128.1138 1.0772 127.0825 1.42 M 141.993 1.2124 C 141.3022 1.5552 141.264 1.7932 141.264 5.7544 C 141.264 8.0536 141.3525 10.2192 141.4607 10.5672 C 141.6194 11.078 142.2081 11.2 144.5157 11.2 C 146.7231 11.2 147.4935 11.348 147.9008 11.8508 C 148.3683 12.428 148.4212 13.9812 148.3696 25.6676 C 148.3379 32.9092 148.4144 38.9616 148.5401 39.1172 C 148.6655 39.2728 150.4439 39.4608 152.4922 39.5352 C 155.6778 39.6508 156.3063 39.5696 156.84 38.9732 C 157.4316 38.312 157.464 37.6004 157.464 25.218 C 157.464 15.5952 157.5664 12.0336 157.8528 11.68 C 158.0964 11.3792 159.3089 11.2 161.1009 11.2 C 163.8173 11.2 163.9748 11.1524 164.2544 10.244 C 164.7096 8.766 164.5094 2.2412 163.9848 1.4608 C 163.5879 0.8704 162.4296 0.8028 153.1315 0.8252 C 147.4061 0.8392 142.3941 1.0136 141.993 1.2124 M 33.1851 12.1208 C 29.588 13.8164 27.7111 15.7392 26.1649 19.3112 C 25.5396 20.756 25.434 21.6068 25.434 25.2 C 25.434 28.9692 25.5218 29.6052 26.2903 31.4 C 27.9155 35.1964 30.4547 37.6888 33.998 38.966 C 36.3142 39.8004 38.0629 39.7664 40.2346 38.844 C 42.8769 37.7216 43.8596 37.0028 45.5307 34.9684 C 47.7965 32.2108 48.7614 29.3508 48.7617 25.3916 C 48.762 22.5712 48.633 21.8596 47.6951 19.5076 C 45.0561 12.8892 38.5651 9.5848 33.1851 12.1208 M 83.7378 12.1652 C 81.3869 13.4856 79.9198 15.2464 78.9685 17.8892 C 78.1673 20.116 78.1332 20.5324 78.0344 29.3368 C 77.9376 37.974 77.9661 38.5044 78.5561 39.0368 C 79.3716 39.7732 84.8575 39.8224 85.607 39.1 C 86.0405 38.6824 86.1467 37.3828 86.2543 31.2 C 86.336 26.502 86.5248 23.48 86.7708 22.9232 C 87.0241 22.3504 87.6358 21.93 88.5343 21.7112 L 89.91 21.376 L 90.0023 16.7928 C 90.082 12.8308 90.0189 12.1412 89.5355 11.7048 C 88.6308 10.888 85.5801 11.1304 83.7378 12.1652 M 56.214 12.3792 L 52.65 12.6 L 52.65 21.8096 L 52.65 31.0192 L 53.7053 33.6644 C 54.7939 36.3928 55.6697 37.4396 58.4418 39.3256 C 60.7442 40.8916 63.922 40.8564 66.6335 39.2348 C 69.1225 37.7464 70.506 36.0228 71.6643 32.9664 L 72.5886 30.5276 L 72.5015 21.564 L 72.414 12.6 L 68.7343 12.4864 C 66.2988 12.4112 64.9021 12.5292 64.6033 12.8356 C 64.2463 13.2016 64.152 14.9024 64.152 20.9868 C 64.152 27.928 64.0943 28.7404 63.5594 29.338 C 62.8155 30.1692 62.0768 30.1808 61.421 29.3716 C 60.9933 28.8432 60.912 27.5056 60.912 21 C 60.912 14.4944 60.8307 13.1568 60.403 12.6284 C 60.1227 12.2828 59.8677 12.0356 59.836 12.0792 C 59.8039 12.1224 58.1742 12.2576 56.214 12.3792 M 39.4434 23.0752 C 40.2865 24.3752 40.3668 25.584 39.7143 27.142 C 38.2213 30.7064 33.696 29.1684 33.696 25.0964 C 33.696 21.9204 37.7671 20.4888 39.4434 23.0752"></path>
                  </svg>
                  
                  <p class="info $(if error)alert$(endif)">Welcome to Your's internet service.<br>
                  Please use the credentials provided to get access to you personal WiFi network.
                  </p>
                  
                  <label> 
                    <img class="ico" src="img/user.svg" alt="#"> 
                    <input name="username" value="$(username)" placeholder="Username" type="text"> 
                  </label>
                  <label> 
                    <img class="ico" src="img/password.svg" alt="#"> 
                    <input name="password" placeholder="Password" type="password"> 
                  </label> 
                  
                  <input value="Connect" type="submit" class="user"> 
                  <input value="Continue as Guest" type="submit" class="guest"> 
              </form>
              <p class="info bt">Powered by MikroTik RouterOS</p>
            </div>
          </div>
        </div>
      </body>
    </html>
    
  5. new style.css
    a,body,div,form,html,img,input,label,p,span {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-family: sans-serif,Arial;
    }
    
    body,html {
    	min-height: 100%;
    	overflow-x: hidden;
    }
    
    body {
    	background: #a2a09b;
    	background: -webkit-linear-gradient(315deg,hsla(236.6,0%,53.52%,1) 0,hsla(236.6,0%,53.52%,0) 70%),-webkit-linear-gradient(65deg,hsla(220.75,34.93%,26.52%,1) 10%,hsla(220.75,34.93%,26.52%,0) 80%),-webkit-linear-gradient(135deg,hsla(46.42,36.62%,83.92%,1) 15%,hsla(46.42,36.62%,83.92%,0) 80%),-webkit-linear-gradient(205deg,hsla(191.32,50.68%,56.45%,1) 100%,hsla(191.32,50.68%,56.45%,0) 70%);
    	background: linear-gradient(135deg,hsla(236.6,0%,53.52%,1) 0,hsla(236.6,0%,53.52%,0) 70%),linear-gradient(25deg,hsla(220.75,34.93%,26.52%,1) 10%,hsla(220.75,34.93%,26.52%,0) 80%),linear-gradient(315deg,hsla(46.42,36.62%,83.92%,1) 15%,hsla(46.42,36.62%,83.92%,0) 80%),linear-gradient(245deg,hsla(191.32,50.68%,56.45%,1) 100%,hsla(191.32,50.68%,56.45%,0) 70%);
    }
    
    a {
    	color: #486173;
    }
    
    input,label {
    	vertical-align: middle;
    	white-space: normal;
    	background: 0 0;
    	line-height: 1;
    }
    
    label {
    	position: relative;
    	display: block;
    }
    
    p::first-letter {
    	text-transform: uppercase;
    }
    
    .main {
    	min-height: calc(100vh - 90px);
    	width: 100%;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    }
    
    .ie-fixMinHeight {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .ico {
    	height: 16px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	margin-top: 13px;
    	margin-left: 14px;
    }
    
    .logo {
    	max-width: 200px;
    	display: block;
    	margin: 0 auto 30px auto;
    }
    
    .logo * {
    	fill: #fff;
    }
    
    .lite .logo * {
    	fill: #444;
    }
    
    h1 {
    	text-align: center;
    	color: #fff;
    	font-size: 24px!important;
    }
    
    * {
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	font-size: 16px;
    }
    
    .wrap {
    	margin: auto;
    	padding: 40px;
    	-webkit-transition: width .3s ease-in-out;
    	transition: width .3s ease-in-out;
    }
    
    @media only screen and (min-width:1px) and (max-width:575px) {
    	.wrap {
    		width: 100%;
    	}
    }
    
    form {
    	width: 100%;
    	margin-bottom: 20px;
    }
    
    @-webkit-keyframes fadeIn {
    	from {
    		opacity: 0;
    	}
    
    	to {
    		opacity: 1;
    	}
    }
    
    @keyframes fadeIn {
    	from {
    		opacity: 0;
    	}
    
    	to {
    		opacity: 1;
    	}
    }
    
    .fadeIn {
    	-webkit-animation-name: fadeIn;
    	animation-name: fadeIn;
    }
    
    .animated {
    	-webkit-animation-duration: 1s;
    	animation-duration: 1s;
    	-webkit-animation-fill-mode: both;
    	animation-fill-mode: both;
    }
    
    .info {
    	color: #fff;
    	text-align: center;
    	margin-bottom: 30px;
    }
    
    input {
    	outline: 0;
    	-webkit-appearance: none;
    	-moz-appearance: none;
    	appearance: none;
    }
    
    input:focus {
    	outline: 0;
    }
    
    input[type=password],input[type=text] {
    	width: 100%;
    	border: 1px solid background-color: rgba(255,255,255,.8);
    	height: 44px;
    	padding: 3px 20px 3px 40px;
    	margin-bottom: 20px;
    	border-radius: 6px;
    	background-color: rgba(255,255,255,.8);
    	-webkit-transition: -webkit-box-shadow .3s ease-in-out;
    	transition: -webkit-box-shadow .3s ease-in-out;
    	transition: box-shadow .3s ease-in-out;
    	transition: box-shadow .3s ease-in-out,-webkit-box-shadow .3s ease-in-out;
    }
    
    input[type=password]:focus,input[type=text]:focus {
    	-webkit-box-shadow: 0 0 5px 0 rgba(255,255,255,1);
    	box-shadow: 0 0 5px 0 rgba(255,255,255,1);
    }
    
    .bt {
    	opacity: .4;
    }
    
    input[type=submit].user {
    	background: #3e4d59;
    	color: #fff;
    	border: 0;
    	cursor: pointer;
    	text-align: center;
    	width: 100%;
    	height: 44px;
    	border-radius: 6px;
    	margin-bottom: 20px;
    	-webkit-transition: background .3s ease-in-out;
    	transition: background .3s ease-in-out;
    }
    
    input[type=submit].user:focus,input[type=submit].user:hover {
    	background: #33404a;
    }
    
    input[type=submit].guest {
    	background: #3e4d59;
    	color: #fff;
    	border: 0;
    	cursor: pointer;
    	text-align: center;
    	width: 100%;
    	height: 44px;
    	border-radius: 6px;
    	margin-bottom: 10px;
    	-webkit-transition: background .3s ease-in-out;
    	transition: background .3s ease-in-out;
    }
    
    input[type=submit].guest:focus,input[type=submit].guest:hover {
    	background: #33404a;
    }
    
    table {
    	border-collapse: collapse;
    	width: 100%;
    	margin-bottom: 20px;
    }
    
    table td {
    	color: #fff;
    	border-bottom: 1px solid #e6e6e6;
    	padding: 10px 4px 10px 0;
    }
    
    table td:first-child {
    	font-weight: 700;
    }
    
    .lite {
    	background: #fff;
    }
    
    .lite input[type=password],.lite input[type=text] {
    	border: 1px solid #c3c3c3;
    }
    
    .lite .info,.lite h1,.lite table td {
    	color: #444;
    }
    
    .lite input[type=password]:focus,.lite input[type=text]:focus {
    	-webkit-box-shadow: 0 0 5px 0 rgba(62,77,89,.2);
    	box-shadow: 0 0 5px 0 rgba(62,77,89,.2);
    }
    
    .dark {
    	background: #343434;
    }
    
    .dark input[type=submit] {
    	background: #dc3a41;
    }
    
    .dark input[type=submit]:focus,.dark input[type=submit]:hover {
    	background: #b92f35;
    }
    
    .dark input[type=password],.dark input[type=text] {
    	background-color: #fff;
    }
    
    .dark a {
    	color: #dc3a41;
    }
    
    .dark table td {
    	border-bottom: 1px solid #505050;
    }
    
    .info.alert {
    	color: #da3d41;
    }
    
    @media (min-width:576px) {
    	.wrap {
    		width: 410px;
    	}
    
    	* {
    		font-size: 14px!important;
    	}
    }
    
You do not have the required permissions to view the files attached to this post.
Last edited by PackElend on Sun Jul 03, 2022 9:43 am, edited 1 time in total.
 

Who is online

Users browsing this forum: rplant and 78 guests