MikroTik Hotspot страница авторизации, CSS и HTML файлы

Продолжая разговор о бесшовном Wi-Fi на основе MikroTik CAPsMAN и Hotspot с разделением сетей расскажу о странице авторизации Hotspot. А если быть точнее, то о страницах, коих там не одна. В данной статье приведу пример кастомных HTML файлов Hotspot и вкратце расскажу о каждом из них.

Содержание

Для начала рассмотрим весь перечень файлов Hotspot.

MikroTik Hotspot файлы
MikroTik Hotspot файлы
  • img/logo.png — Ваш кастомный логотип, который лежит в директории изображний;
  • xml/… — WISP XML;
  • md5.js — JavaScript для генерирования MD5 из пароля;
  • style.css — таблица стилей;
  • favicon.ico — иконка для адресной строки;
  • alogin.html — страница отображаемая после успешного входа;
  • error.html — отображается в случае ошибки;
  • login.html — страничка логина;
  • logout.html — отображается после выхода пользователя;
  • radvert.html — выполняет переадресацию на рекламный материал;
  • redirect.html — выполняет переадресацию пользователя (к примеру на страницу авторизации);
  • rlogin.html — выполняет переадресацию пользователя с другого URL на страницу логина в, если для доступа к этому URL требуется авторизация;
  • status.html — отображает статус для конкретного пользователя.

Вот так выглядят login.html и status.html в браузере.

MikroTik Hotspot страница авторизации
MikroTik Hotspot страница авторизации
MikroTik Hotspot страница статуса
MikroTik Hotspot страница статуса

Теперь о каждом файле чуточку подробнее, за исключением стандартных файлов не претерпевших изменений.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
body,td{font:14px 'Helvetica',Arial;color:#000;margin:0px;padding:0px;}
 
textarea,input,select {
background-color:#FDFBFB;
border:1px solid #BBB;
padding:2px;
margin:1px;
font-size:14px;
color:#808080;
}
 
table{border-spacing:0px;}
 
input[placeholder]{text-overflow:ellipsis;}
input::-moz-placeholder{text-overflow:ellipsis;}
input:-moz-placeholder{text-overflow:ellipsis;}
input:-ms-input-placeholder{text-overflow:ellipsis;}
input:-o-input-placeholder{text-overflow:ellipsis;}
 
.inputSlide::-webkit-input-placeholder{text-indent:10px;transition:text-indent 0.4s ease;}
.inputSlide::-moz-placeholder{text-indent:10px;transition:text-indent 0.4s ease;}
.inputSlide:-moz-placeholder{text-indent:10px;transition:text-indent 0.4s ease;}
.inputSlide:-ms-input-placeholder{text-indent:10px;transition:text-indent 0.4s ease;}
.inputSlide:focus::-webkit-input-placeholder{text-indent:100%;transition:text-indent 0.4s ease;}
.inputSlide:focus::-moz-placeholder{text-indent:100%;transition:text-indent 0.4s ease;}
.inputSlide:focus:-moz-placeholder{text-indent:100%;transition:text-indent 0.4s ease;}
.inputSlide:focus:-ms-input-placeholder{text-indent:100%;transition:text-indent 0.4s ease;}
 
a,a:link,a:visited,a:active{text-decoration:none;}
 
.alignCenter{text-align:center;}
.main,.logo,.statusBox{width:360px;}
.main{margin:4% auto;}
.bTable{margin:auto;}
.message{min-height:38px;overflow:hidden;line-height:38px;vertical-align:middle;}
 
.btn{
color:#FFF;
cursor:pointer;
text-indent:0px;
line-height:24px;
text-align:center;
text-shadow:-1px -1px 0px rgba(160,170,220,0.2);
box-shadow:0px 0px 2px 1px rgba(30,80,60,0.2),0px 0px 10px 4px rgba(60,120,120,0.1) inset;
}
 
.btn:hover{text-shadow:0px 0px 10px rgba(160,170,220,0.2);box-shadow:0px 0px 4px 2px rgba(30,80,60,0.2),0px 0px 10px 0px rgba(160,220,170,0.6) inset;}
 
.notice{margin:20px;width:320px;font-size:17px;display:inline-block;}
 
.logo{
border:none;
margin:auto;
height:240px;
display:block;
cursor:pointer;
background:#FFF url('img/logo.png') 50% 50% no-repeat;
background-size:300px;
}
 
.loginBox{color:#000;width:360px;margin:30px 0px;}
 
.uNameIn,.uPassIn,.btn{border-radius:4px;}
 
.uNameIn,.uPassIn{width:280px;height:24px;border:1px solid #CCC;background-color:#F0F4F2;text-indent:5px;line-height:24px;margin:5px 36px;}
.uSubmit,.uGuest{margin:20px 5px;height:30px;display:inline-table;line-height:24px;}
.uSubmit{float:none;width:140px;margin-right:34px;margin-left:34px;border:1px solid #EEE;background-color:rgba(133,189,72,0.9);}
.uGuest{float:left;width:90px;margin-right:20px;margin-left:37px;border:1px solid #EEE;background-color:rgba(36,56,124,0.9);}
.uLogout{float:none;width:140px;border:1px solid #EEE;background-color:rgba(220,70,70,0.9);}
 
.ifError{color:#FF8080;}
 
.statusBox{margin:20px auto;}
.statusBox td{padding:4px 6px;border-bottom:1px dotted rgba(200,200,200,0.5);}
.statusBox tr td:first-of-type{text-align:right;background-color:rgba(200,200,200,0.12);}
.statusBox tr td:last-of-type{text-align:left;background-color:rgba(200,200,200,0.2);}
 
.logout{margin:16px 0px;}


Правильный CSS!

.inputSlide — анимация полей ввода;
.main — основная таблица;
.bTable — вложенная таблица;
.message — текстовые поля;
.btn — описывает кнопки;
.notice — основной текст;
.logo — стили логотипа;
.loginBox — таблица полей ввода;
.uNameIn — поле ввода логина;
.uPassIn — поле ввода пароля;
.uSubmit — кнопка входа;
.uGuest — кнопка гостевого доступа;
.uLogout — кнопка выхода;
.ifError — текст ошибки;
.statusBox — таблица статусов;
.logout — блок кнопки выхода.

alogin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>redirect.hotspot.wi.fi</title>
		<meta http-equiv="refresh" content="2; url=$(link-redirect)">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<script>
			//<!--
		    function startClock() {
		        $(if popup == 'true')
		        open('$(link-status)', 'hotspot_status', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=480,height=640');
				$(endif)
				location.href = '$(link-redirect)';
		    }
			//-->
		</script>
	</head>
	<body onLoad="startClock()">
		<table class="main">
			<tr>
				<td>
					<table>
 
						<tr>
							<td class="notice alignCenter">Вы вошли!</td>
						</tr>
						<tr>
							<td>
								<a class="logo" href="https://www.your.site" target="_blank"></a>
							</td>
						</tr>
						<tr>
							<td>
								<div class="message">Если ничего не происходит, нажмите кнопку "Войти"</div>
								<input class="uSubmit btn" type="button" value="Войти" onclick="javascript:location.replace('$(link-redirect)')" />
							</td>
						</tr>
					</table>
					$(if error)
					<div class="message ifError">$(error)</div>
					$(endif)
					<div class="message">Описание вашей компании или слоган</div>
					<div class="message">ООО "Ваша компания"</div>
				</td>
			</tr>
		</table>
	</body>
</html>


HTML5 Powered

error.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>error.hotspot.wi.fi</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<table class="main alignCenter">
			<tr>
				<td>
					<table class="bTable">
						<tr>
							<td class="notice ifError alignCenter">Ошибка</td>
						</tr>
						<tr>
							<td>
								<a class="logo" href="https://www.your.site" target="_blank" style="border: none;"></a>
							</td>
						</tr>
						<tr>
							<td>
								<div class="message">Ошибка системы, нажмите кнопку "Вход"</div>
								<input class="uSubmit btn" type="button" value="Вход" onclick="javascript:location.replace('$(link-login)')">
							</td>
						</tr>
					</table>
					$(if error)
					<div class="message ifError">$(error)</div>
					$(endif)
					<div class="message">Описание вашей компании или слоган</div>
					<div class="message">ООО "Ваша компания"</div>
				</td>
			</tr>
		</table>
	</body>
</html>


HTML5 Powered

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>login.hotspot.wi.fi</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<script src="md5.js"></script>
		<script>
			//<!--
		    function doLogin() {
				document.sendin.username.value = document.login.username.value;
				document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
				document.sendin.submit();
				return false;
		    }
			//-->
		</script>
	</head>
 
	<body>
	$(if chap-id)
		<form name="sendin" action="$(link-login-only)" method="post">
			<input type="hidden" name="username">
			<input type="hidden" name="password">
			<input type="hidden" name="dst" value="$(link-orig)">
			<input type="hidden" name="popup" value="true">
		</form>
	$(endif)
 
		<table class="main alignCenter">
			<tr>
				<td>
					<table class="bTable">
						<tr>
							<td class="notice alignCenter">Авторизируйтесь или воспользуйтесь гостевым доступом</td>
						</tr>
						<tr>
							<td>
								<a class="logo" href="https://www.your.site" target="_blank"></a>
							</td>
						</tr>
						<tr>
							<td>
								<form id="login" 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 class="loginBox">
											<tr>
												<td>
													<input class="uNameIn inputSlide" name="username" type="text" placeholder="Имя" value="$(username)">
												</td>
											</tr>
											<tr>
												<td>
													<input class="uPassIn inputSlide" name="password" type="password" placeholder="Пароль">
												</td>
											</tr>
											<tr>
												<td class="alignCenter">
													<!--$(if trial == 'yes')-->
													<input class="uGuest btn" type="button" value="Гость" onclick="javascript:location.replace('$(link-login-only)?dst=https://www.your.site&amp;username=T-$(mac-esc)')">
													<!--$(endif)-->
													<input class="uSubmit btn" type="submit" form="login" value="Войти">
												</td>
											</tr>
										</table>
								</form>
							</td>
						</tr>
					</table>
					$(if error)
					<div class="message ifError">$(error)</div>
					$(endif)
					<div class="message">Описание вашей компании или слоган</div>
					<div class="message">ООО "Ваша компания"</div>
				</td>
			</tr>
		</table>
 
		<script>
			//<!--
			document.login.username.focus();
			//-->
		</script>
	</body>
</html>


HTML5 Powered

logout.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>logout.hotspot.wi.fi</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<script src="md5.js"></script>
		<script>
			//<!--
		    function openLogin() {
				if (window.name != 'hotspot_logout') return true;
				open('$(link-login)', '_blank', '');
				window.close();
				return false;
		    }
			//-->
		</script>
	</head>
 
	<body>
		<table class="main alignCenter">
			<tr>
				<td>
					<table class="bTable">
						<tr>
							<td class="notice alignCenter">Вы вышли!</td>
						</tr>
						<tr>
							<td>
								<a class="logo" href="https://www.your.site" target="_blank"></a>
							</td>
						</tr>
						<tr>
							<td>
								<table class="statusBox">
									<tr>
										<td>Имя:</td>
										<td>$(username)</td>
									</tr>
 
									<tr>
										<td>IP:</td>
										<td>$(ip)</td>
									</tr>
 
									<tr>
										<td>MAC:</td>
										<td>$(mac)</td>
									</tr>
 
									<tr>
										<td>Длительность:</td>
										<td>$(uptime)</td>
									</tr>
 
								$(if session-time-left)
									<tr>
										<td>Осталось:</td>
										<td>$(session-time-left)</td>
									</tr>
								$(endif)
 
									<tr>
										<td>Исходящий / Входящий:</td>
										<td>$(bytes-in-nice) / $(bytes-out-nice)</td>
									</tr>
								</table>
								<div class="logout alignCenter">
									<form action="$(link-login)" name="login" id="login" onSubmit="return openLogin()">
										<input class="uSubmit btn" type="submit" form="login" value="Войти" />
									</form>
								</div>
							</td>
						</tr>
					</table>
					$(if error)
					<div class="message ifError">$(error)</div>
					$(endif)
					<div class="message">Описание вашей компании или слоган</div>
					<div class="message">ООО "Ваша компания"</div>
				</td>
			</tr>
		</table>
	</body>
</html>


HTML5 Powered

radvert.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>advertisement.hotspot.wi.fi</title>
		<meta http-equiv="refresh" content="2; url=$(link-orig)">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<script>
			//<!--
		    var popup = '';
		    function openOrig() {
			if (window.focus) popup.focus();
			location.href = '$(link-orig)';
		    }
		    function openAd() {
			location.href = '$(link-redirect)';
		    }
		    function openAdvert() {
			if (window.name != 'hotspot_advert') {
				popup = open('$(link-redirect)', 'hotspot_advert', '');
				setTimeout("openOrig()", 1000);
				return;
			}
			setTimeout("openAd()", 1000);
		    }
			//-->
		</script>
	</head>
	<body onLoad="openAdvert()">
		<table class="main alignCenter">
			<tr>
				<td>
					<table class="bTable">
						<tr>
							<td class="notice alignCenter">Реклама</td>
						</tr>
						<tr>
							<td>
								<a class="logo" href="https://www.your.site" target="_blank"></a>
							</td>
						</tr>
						<tr>
							<td>
								<div class="message">Если ничего не происходит, нажмите кнопку "Просмотреть"</div>
								<input class="uSubmit btn" type="button" value="Просмотреть" onclick="javascript:location.replace('$(link-redirect)')">
							</td>
						</tr>
					</table>
					$(if error)
					<div class="message ifError">$(error)</div>
					$(endif)
					<div class="message">Описание вашей компании или слоган</div>
					<div class="message">ООО "Ваша компания"</div>
				</td>
			</tr>
		</table>
	</body>
</html>


HTML5 Powered

redirect.html

1
2
3
4
5
6
7
8
9
10
11
12
13
$(if http-status == 302)Hotspot redirect$(endif)
$(if http-header == "Location")$(link-redirect)$(endif)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>...</title>
		<meta http-equiv="refresh" content="0; url=$(link-redirect)">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
	</head>
	<body>
	</body>
</html>


HTML5 Powered

rlogin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(if http-status == 302)Hotspot login required$(endif)
$(if http-header == "Location")$(link-redirect)$(endif)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
<!--
<?xml version="1.0" encoding="UTF-8"?>
  <WISPAccessGatewayParam
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://$(hostname)/xml/WISPAccessGatewayParam.xsd">
    <Redirect>
	<AccessProcedure>1.0</AccessProcedure>
	<AccessLocation>$(location-id)</AccessLocation>
	<LocationName>$(location-name)</LocationName>
	<LoginURL>$(link-login-only)?target=xml</LoginURL>
	<MessageType>100</MessageType>
	<ResponseCode>0</ResponseCode>
    </Redirect>
  </WISPAccessGatewayParam>
-->
	<head>
		<title>...</title>
		<meta http-equiv="refresh" content="0; url=$(link-redirect)">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
	</head>
	<body>
	</body>
</html>


HTML5 Powered

status.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" class="hotspot">
	<head>
		<title>status.hotspot.wi.fi</title>
		$(if refresh-timeout)
		<meta http-equiv="refresh" content="$(refresh-timeout-secs)">
		$(endif)
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="pragma" content="no-cache">
		<meta name="expires" content="-1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
		<script>
		//<!--
			$(if advert-pending == 'yes')
		    var popup = '';
		    function focusAdvert() {
				if (window.focus) popup.focus();
		    }
		    function openAdvert() {
				popup = open('$(link-advert)', 'hotspot_advert', '');
				setTimeout("focusAdvert()", 1000);
		    }
			$(endif)
		    function openLogout() {
				if (window.name != 'hotspot_status') return true;
		        open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=480,height=640');
				window.close();
				return false;
		    }
		//-->
		</script>
	</head>
	<body $(if advert-pending == 'yes') onLoad="openAdvert()" $(endif)>
		<table class="main alignCenter">
			<tr>
			<td>
				<table class="bTable">
					<tr>
						<td class="notice alignCenter">Статус</td>
					</tr>
					<tr>
						<td>
							<a class="logo" href="https://www.your.site" target="_blank"></a>
						</td>
					</tr>
					<tr>
						<td class="alignCenter">
							$(if login-by == 'trial')
							<div class="message">Добро пожаловать Гость!</div>
							$(elif login-by != 'mac')
							<div  class="message">Добро пожаловать $(username)!</div>
							$(endif)
						</td>
					</tr>
					<tr>
						<td>
							<table class="statusBox">
								<tr>
									<td>IP:</td>
									<td>$(ip)</td>
								</tr>
								<tr>
									<td>Исходящий / Входящий:</td>
									<td>$(bytes-in-nice) / $(bytes-out-nice)</td>
								</tr>
								$(if session-time-left)
								<tr>
									<td>Длительность / Осталось:</td>
									<td>$(uptime) / $(session-time-left)</td>
								</tr>
								$(else)
								<tr>
									<td>Длительность:</td>
									<td>$(uptime)</td>
								</tr>
								$(endif)
								$(if blocked == 'yes')
								<tr>
									<td>Статус:</td>
									<td>
										<div>
											<a href="$(link-advert)" class="ifError" target="hotspot_advert">Требуется подтверждение</a>
										</div>
									</td>
								</tr>
								$(elif refresh-timeout)
								<tr>
									<td>Обновление:</td>
									<td>$(refresh-timeout)</td>
								</tr>
								$(endif)
							</table>
 
							<div class="logout alignCenter">
							$(if login-by-mac != 'yes')
								<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address -->
								<!-- <button onclick="document.location='http://$(hostname)/user?subs='; return false;">Статус</button> -->
								<!-- end of user manager link -->
								<form action="$(link-logout)" name="logout" id="logout" onSubmit="return openLogout()">
									<input class="uLogout btn" type="submit" form="logout" value="Выйти">
								</form>
							$(endif)
							</div>
						</td>
					</tr>
				</table>
				$(if error)
				<div class="message ifError">$(error)</div>
				$(endif)
				<div class="message">Описание вашей компании или слоган</div>
				<div class="message">ООО "Ваша компания"</div>
			</td>
			</tr>
		</table>
	</body>
</html>


HTML5 Powered

Скачать MikroTik Hotspot HTML файлы.

Все тонкости настройки Hotspot на базе MikroTik можно найти в русскоязычном онлайн-курсе для самостоятельного изучения от Дмитрия Скромнова. Основанный на официальной программе MTCNA, зтот курс по MikroTik и RouterOS , содержит много полезной информации не вошедшей в MTCNA. Целых 162 видеоурока и большое практическое задание, разбитое на 45 лабораторных работ. Время на изучение неограниченно – все материалы передаются бессрочно и их можно пересматривать сколько нужно. Первые 25 уроков можно посмотреть бесплатно, оставив заявку на странице курса.

MikroTik Hotspot страница авторизации, CSS и HTML файлы: 25 комментариев

  1. Подскажите пожалуйста, а где найти файл style.css ? У меня в Микротике такого нет(

    1. Здравствуйте. В стандартном наборе его действительно нет, здесь кастомный стиль и поэтому такой файл есть.

  2. А какой файл в каком случае запускать Микротик сам решает или это можно где-то самому прописать?

    1. Есть стандартный перечень файлов, которые основываясь на названии ROS отдаёт пользователю.

      1. Я уже понял о стандартном перечне файлов, интересовало другое — этот перечень можно где-то поменять?

          1. Чтоб понимать на сколько можно сам микротик подстроить под имеющий сайт с авторизацией. Видимо нельзя, надо действовать наоборот и разбираться с микротиком)

          2. И да и нет. Если нужно производить авторизацию через внешний сервис, то это делается совершенно иначе, через переадресацию. А вообще, вы можете обратиться в наш офис в Вашем городе и получить готовое решение для hotspot с sms авторизацией и интеграцией с системой единой учётной записи для вашей компании.

  3. У меня две точки wAP и RB951Ui-2Hnd , почему в одной /flash/hotspot , а во второй просто /hotspot ? Я могу их как-то одинаково сделать?

    1. Нужно хранить файлы в /flash/ваша_папка если у вас есть директория /flash. Для ряда продуктов MikroTik корневая директория является временной. Проще говоря, всё что не в директории /flash после перезагрузки исчезнет.

      1. У меня две точки:
        1. RB951Ui-2Hnd, в ней нет директории flash/ вообще, сразу в корне расположена hotspot/.
        2. wAP2nD, в ней папка hotspot/ расположена flash/ , т.е. получается так /flash/hotspot и от перезагрузки ничего не меняется.
        Почему они у меня по разному настроены, можно как-то одинаково сделать?
        Может как-то переименовать flash/ в hotspot/ ?

        1. Там где flash, там все файлы в flash и она не переименовывается. Можно пойти от обратного, там где нет директории flash «из коробки» просто создать её. Тогда на двух машинках будут файлы hotspot лежать в /flash/hotspot/

          1. А при перезагрузке, там где папки flash/ изначально не было, при перезагрузке все её содержимое уничтожится? Или Вы не перезагрузку имели ввиду, а сброс к заводским настройкам?

  4. К сожалению, у нас не компания, а средняя школа. Но, к счастью, система авторизации досталась нам бесплатно. Вот теперь хотим с преподавателем по физике разобраться что к чему и как-то сделать пошире зону покрытия и немного переделать странички под свои нужды.
    Благодаря Вам нашли описание, как сделать бесшовную сеть. И, надеемся, что нам это позволит не сломать то, что было изначально настроено на RB951Ui-2Hnd. Хотя не уверены. Поэтому задаем глупые вопросы, пытаясь найти реальную помощь. Так что извините если что. Не подскажите, где можно почитать с более подробным описанием, как можно переделать login.html ?

    1. Ну почему к сожалению?) Страницу авторизации можно переделать как душе угодно, всё что нужно это знания в html, css и JavaScript. По сути, у вас отправляется всего одна форма. Если вы опишите задачу конкретней, то решение задачи упроститься.
      У вас эта сеть для внутреннего пользования, или учащиеся и гости могут её использовать? Если первый вариант, то всё просто, если второй, то там ряд требований в части авторизации пользователей, хранения этих данных и фильтрации трафика.
      Вопросы задавайте, концепция блога как раз и подразумевает обратную связь с читателями.
      Про платно ни кто не говорил.

      1. «К сожалению» — потому что будь мы НЕ бюджетной организацией, с возможностью свободно тратить деньги на нужды, то у нас бы все работало нормально, т.к. желающих заработать много. Но, с учетом того, что это не так, и нам эта система регистрации пользователей досталась бесплатно, то и отвечать за работоспособность системы никто не хочет. Когда случайно произошел сброс всех данных на роутере — потратили две недели, прежде чем нам помогли её настроить обратно. А теперь пытаемся разобраться с тем, что и до сброса работало не особо…

  5. В общем, за пару дней мы разобрались с тем, что за подключение к Wi-Fi отвечает файл login.html , но абсолютно не понимаем то, что в этом файле написано. И уж тем более не понимаем зачем там нужны все остальные файлы и как они между собой связаны.
    У нас Wi-Fi с названием «FREE-ZONE» работает для всех желающих в пределах примерно 50 метров от метод.кабинета (учительской). Человек подключается к сети и ему открывается экран на котором нужно ввести его номер телефона. Потом ниже нажать кнопку позвонить и тогда открывается другое окно, на котором надпись «Ожидаем звона на номер …..». Теперь нужно этот номер скопировать или запомнить и самостоятельно ввести в номеронабиратель телефона и нажать «Вызов». В общем не всем понятно и не у всех получается….(
    Но вот удача, если сначала самостоятельно открыть браузер в телефоне и выбрать какую-то закладку, то тоже открывается эта страничка! Но все работает намного легче! После ввода телефона и нажатия кнопки «Позвонить», дальше все автоматически происходит — система перебрасывает в номеронабиратель телефона и там уже введен тот номер, который нам нужно! Остается просто нажать «Вызов».
    Мы уже примерно поняли, что это из-за того, что самостоятельно страничка открывается в каком-то «минибраузере» зашитом в самом телефоне. И этот «минибраузер» работает не совсем корректно. Или может не совсем работает, т.к. выполняет не все что нужно автоматически…
    Вот, теперь ищем помощи среди специалистов, которые знают как сделать так чтоб эта страничка сразу открывалась в нормальном браузере (например, у меня Google).

  6. Админ расскажи где нужно поменять значение переменной отвечающей за веб адрес на который происходит редирект (в моём случае это ссылка на группу в ВК), и что делают скрытые скрипты, и в каком случае их нужно оставлять НЕ скрытыми?

    1. Добрый день!
      Вообще, это $(link-redirect), но я обычно не использую переадресацию, а не выполняю логин до просмотра рекламы. Про скрытые скрипты вопрос не понял…

      1. Добрый день. Поковырял ваш шаблон, в целом все желаемое получилось. Остался только один момент. После нажатия на кнопку гость нужный сайт открывается мельком, и вход в сеть на мобильном уже выполнена. Не подскажите как реализовать задержку к примеру 30 секунд?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.