HTML customizations

       Summary

        You can create a completely different set of servlet pages for each HotSpot server you have, specifying the directory it will be stored in html-directory property of a HotSpot server profile /ip HotSpot profile. The default servlet pages are copied in the directory of your choice right after you create the profile. This directory can be accessed by connecting to the router with an FTP client. You can modify the pages as you like using the information from this section of the manual. Note that it is suggested to edit the files manually, as automated HTML editing tools may corrupt the pages by removing variables or other vital parts.

        在服务器的Html目录下,建议采用手动编辑,自动工具可能会破坏页面结构,移除变量和其他的重要部分
       

           Available Pages 

           已经写好的页面

            Main HTML servlet pages, which are shown to user:

  •                    redirect.html - redirects user to another url (for example, to login page)

  •                    重定向的页面

  •                    login.html - login page shown to a user to ask for username and password. This page may take the following parameters:登陆页面,问用户要用户名和密码,包含了如下的一些字段

    •                        username - username

    •                        password - either plain-text password (in case of PAP authentication) or MD5 hash of chap-id variable, password and CHAP challenge (in case of CHAP authentication). This value is used as e-mail address for trial users

    •                        密码部分:如果采用PAP方式则采用明文的内容,如果是CHAP方式则采用Chap-id变量,密码和CHAP挑战序列。如果是实用的话,这个参数将会是 用户的邮件地址

    •                        dst - original URL requested before the redirect. This will be opened on successfull login 

    •                        目标地址,也就是在重定向前的页面,如果登录成功将会跳转到这个页面

    •                        popup - whether to pop-up a status window on successfull login

    •                        在登录成功后决定是否跳出一个状态页面

    •                        radius<id> - send the attribute identified with <id> in text string form to the RADIUS server (in case RADIUS authentication is used; lost otherwise)

    •                        发送表单中id选项的属性给RADIUS服务器,如果没有启用RADIUS则丢弃这些属性

    •                        radius<id>u - send the attribute identified with <id> in unsigned integer form to the RADIUS server (in case RADIUS authentication is used; lost otherwise)

    •                        和radius id 属性相同,只是发送的是无符号型的整数给radius服务器

    •                        radius<id>-<vnd-id> - send the attribute identified with <id> and vendor ID <vnd-id> in text string form to the RADIUS server (in case RADIUS authentication is used; lost otherwise)

    •                        以字符串形式发送<id>属性还有<vendor-id>到RADIUS服务器,如果没有启用RADIUS仍然是丢弃这些属性

    •                        radius<id>-<vnd-id>u - send the attribute identified with <id> and vendor ID <vnd-id> in unsigned integer form to the RADIUS server (in case RADIUS authentication is used; lost otherwise)

  •                    md5.js - JavaScript for MD5 password hashing. Used together with http-chap login method

  •                    这个是用JavaScript写的MD5密码哈希函数。和http-chap登录方式一起使用 调用可以使用  hexMD5(),作用和PHP的md5函数一样

  •                    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)

  •                    用户登录后显示的页面。它弹出状态页面并且重定向浏览器到原来的请求页面

  •                    status.html - status page, shows statistics for the client. It is also able to display advertisements automatically

  •                    状态页,为客户端显示状态信息。它也可以自动为用户显示广告

  •                    logout.html - logout page, shown after user is logged out. Shows final statistics about the finished session. This page may take the following additional parameters:

  •                    注销页面:当用户注销后显示的页面,显示最终的统计信息。可以包含如下的参数:

    •                        erase-cookie - whether to erase cookies from the HotSpot server on logout (makes impossible to log in with cookie next time from the same browser, might be useful in multiuser environments)

    •                        是否情况HotSpot服务器上的cookie,这样的话其他用户就不能使用cookie进行自动登录了,一般在多用户情况下有用

  •                    error.html - error page, shown on fatal errors only

  •                    错误页面,只显示致命错误信息

           
Some other pages are available as well, if more control is needed:

  •                    rlogin.html - page, which redirects client from some other URL to the login page, if authorization of the client is required to access that URL

  •                    不太明白,反正是从其他URL重定向到登陆页面

  •                    rstatus.html - similarly to rlogin.html, only in case if the client is already logged in and the original URL is not known

  •                    和rlogin很类似,比如用户已经登录了,但是还想登录,而且原来的URL根本不知道

  •                    radvert.html - redirects client to the scheduled advertisement link

  •                    重定向用户到计划好的广告页面上

  •                    flogin.html - shown instead of login.html, if some error has happened (invalid username or password, for example)

  •                    替代login.html的页面,如果发生一些错的时候(比如用户名或者密码不对)

  •                    fstatus.html - shown instead of redirect, if status page is requested, but client is not logged in

  •                    flogout.html - shown instead of redirect, if logout page is requested, but client is not logged in

  •                    都是代替重定向页面的,都是用户没有登录,去尝试要求查看自己的状态或者尝试登出的情况

       

           Serving Servlet Pages

            The HotSpot servlet recognizes 5 different request types:

  1.                    request for a remote host

    •                         if user is logged in and advertisement is due to be displayed, radvert.html is displayed. This page makes redirect to the scheduled advertisment page

    •                         if user is logged in and advertisement is not scheduled for this user, the requested page is served

    •                         if user is not logged in, but the destination host is allowed by walled garden, then the request is also served

    •                         if user is not logged in, and the destination host is disallowed by walled garden, rlogin.html is displayed; if rlogin.html is not found, redirect.html is used to redirect to the login page

    •                        能够识别的几种请求:

    •                        ①用户登录并且计划了广告页面,radvert.html显示;

    •                        ②用户登录,没有广告页,重定向到请求页。

    •                        ③用户没有登录,但是所请求的目标地址在walled garden区域

    •                        ④用户没有登录且请求位置没有被walled garden区域允许。如果rlogin.html找不到,redirect.html用于定向到登陆页

  2.                    request for "/" on the HotSpot host

    •                         if user is logged in, rstatus.html is displayed; if rstatus.html is not found, redirect.html is used to redirect to the status page

    •                         if user is not logged in, rlogin.html is displayed; if rlogin.html is not found, redirect.html is used to redirect to the login page

  3.                    request for "/login" page

    •                         if user has successfully logged in (or is already logged in), alogin.html is displayed; if alogin.html is not found, redirect.html is used to redirect to the originally requested page or the status page (in case, original destination page was not given)

    •                         if user is not logged in (username was not supplied, no error message appeared), login.html is showed

    •                         if login procedure has failed (error message is supplied), flogin.html is displayed; if flogin.html is not found, login.html is used

    •                         in case of fatal errors, error.html is showed

  4.                    request for "/status" page

    •                         if user is logged in, status.html is displayed

    •                         if user is not logged in, fstatus.html is displayed; if fstatus.html is not found, redirect.html is used to redirect to the login page

  5.                    request for '/logout' page

    •                         if user is logged in, logout.html is displayed

    •                         if user is not logged in, flogout.html is displayed; if flogout.html is not found, redirect.html is used to redirect to the login page

               Icon-note.png

               Note: If it is not possible to meet a request using the pages stored on the router's FTP server, Error 404 is displayed

           

            There are many possibilities to customize what the HotSpot authentication pages look like:

  •                     The pages are easily modifiable. They are stored on the router's FTP server in the directory you choose for the respective HotSpot server profile.

  •                    页面都是很容易修改的,而且都在路由器的FTP目录下,你可以为每个HotSpot服务器选择各自的服务器配置文件

  •                     By changing the variables, which client sends to the HotSpot servlet, it is possible to reduce keyword count to one (username or password; for example, the client's MAC address may be used as the other value) or even to zero (License Agreement; some predefined values general for all users or client's MAC address may be used as username and password)

  •                    通过修改客户端发送给服务器端程序的变量,可以把关键字减低到一个(比如在使用用户名或者密码的时候),也可以降到0(一些协议,比如使用客户端的MAC地址当做用户名和密码)

  •                     Registration may occur on a different server (for example, on a server that is able to charge Credit Cards). Client's MAC address may be passed to it, so that this information need not be written in manually. After the registration, the server should change RADIUS database enabling client to log in for some amount of time.

  •                    注册过程可能在另一台服务器上完成(比如能够对信用卡进行收取费用的服务器)。然后客户端的MAC可以传递给它,因此这些信息不需要手动来写。完成注册后,服务器应该能够改变RADIUS服务器,这样可以使客户能够登录一定的时间。

           
To insert variable in some place in HTML file, the $(var_name) syntax is used, where the "var_name" is the name of the variable (without quotes). This construction may be used in any HotSpot HTML file accessed as '/', '/login', '/status' or '/logout', as well as any text or HTML (.txt, .htm or .html) file stored on the HotSpot server (with the exception of traffic counters, which are available in status page only, and errorerror-origchap-idchap-challenge and popupvariables, which are available in login page only). For example, to show a link to the login page, following construction can be used:

           在HTML中插入变量,可以使用 $(var_name)的语法形式。这样的语法可以在任何的HotSpot HTML文件中使用,只要这些文件能够通过/,/login,/status,/logout以及存储在HotSpot服务器上就能这样用【注意哪些traffic counter 只能在状态页status.html使用,那些 error,error-orig,chap-id,chap-challenge,popup变量只在登陆页有效】,

           如果需要打登陆页的一个链接,可以这么写:

<a href="$(link-login)">login

           

           Variables

            All of the Servlet HTML pages use variables to show user specific values. Variable names appear only in the HTML source of the servlet pages - they are automatically replaced with the respective values by the HotSpot Servlet. For most variables there is an example of their possible value included in brackets. All the described variables are valid in all servlet pages, but some of them just might be empty at the time they are accesses (for example, there is no uptime before a user has logged in).

           所有的服务HTML页都是使用变量显示用户特定的值。这些变量值只在服务端显示--他们自动被HotSpot服务器程序替换成各自的值。这里列出了变量和他们可能的值。这些描述的变量在服务器上都是可以使用的,但是他们中的一些在被访问的时候就是控制(比如,如果一个用户刚登陆就没有uptime)

           

           List of available variables

           Common server variables:

  •                    hostname - DNS name or IP address (if DNS name is not given) of the HotSpot Servlet ("HotSpot.example.net")

  •                    identity - RouterOS identity name ("MikroTik")

  •                    login-by - authentication method used by user 认证的方式

  •                    plain-passwd - a "yes/no" representation of whether HTTP-PAP login method is allowed ("no") 

  •                    是否允许采用HTTP-PAP方式登录,默认不允许

  •                    server-address - HotSpot server address ("10.5.50.1:80") HotSpot服务器的地址,包含了端口号

  •                    ssl-login - a "yes/no" representation of whether HTTPS method was used to access that servlet page ("no")

  •                    server-name - HotSpot server name (set in the /ip HotSpot menu, as the name property)

           
Links:

           
General client information: 这些都是用户的信息变量

  •                    domain - domain name of the user ("example.com")

  •                    interface-name - physical HotSpot interface name (in case of bridged interfaces, this will return the actual bridge port name)

  •                    ip - IP address of the client ("10.5.50.2")

  •                    logged-in - "yes" if the user is logged in, otherwise - "no" ("yes")

  •                    MAC - MAC address of the user ("01:23:45:67:89:AB")

  •                    trial - a "yes/no" representation of whether the user has access to trial time. If users trial time has expired, the value is "no"

  •                    username - the name of the user ("John")

  •                    host-ip - client IP address from /ip HotSpot host table

           
User status information:

  •                    idle-timeout - idle timeout ("20m" or "" if none)

  •                    idle-timeout-secs - idle timeout in seconds ("88" or "0" if there is such timeout)

  •                    limit-bytes-in - byte limit for send ("1000000" or "---" if there is no limit)

  •                    limit-bytes-out - byte limit for receive ("1000000" or "---" if there is no limit)

  •                    refresh-timeout - status page refresh timeout ("1m30s" or "" if none)

  •                    refresh-timeout-secs - status page refresh timeout in seconds ("90s" or "0" if none)

  •                    session-timeout - session time left for the user ("5h" or "" if none)

  •                    session-timeout-secs - session time left for the user, in seconds ("3475" or "0" if there is such timeout)

  •                    session-time-left - session time left for the user ("5h" or "" if none)

  •                    session-time-left-secs - session time left for the user, in seconds ("3475" or "0" if there is such timeout)

  •                    uptime - current session uptime ("10h2m33s")

  •                    uptime-secs - current session uptime in seconds ("125")

           
Traffic counters, which are available only in the status page:

  •                    bytes-in - number of bytes received from the user ("15423")

  •                    bytes-in-nice - user-friendly form of number of bytes received from the user ("15423")

  •                    bytes-out - number of bytes sent to the user ("11352")

  •                    bytes-out-nice - user-friendly form of number of bytes sent to the user ("11352")

  •                    packets-in - number of packets received from the user ("251")

  •                    packets-out - number of packets sent to the user ("211")

  •                    remain-bytes-in - remaining bytes until limit-bytes-in will be reached ("337465" or "---" if there is no limit)

  •                    remain-bytes-out - remaining bytes until limit-bytes-out will be reached ("124455" or "---" if there is no limit)

           
Miscellaneous variables:

  •                    session-id - value of 'session-id' parameter in the last request

  •                    var - value of 'var' parameter in the last request // 未知的变量

  •                    error - error message, if something failed ("invalid username or password")

  •                    error-orig - original error message (without translations retrieved from errors.txt), if something failed ("invalid username or password")

  •                    chap-id - value of chap ID ("\371")

  •                    chap-challenge - value of chap challenge 

  •                    16位的挑战序列("\357\015\330\013\021\234\145\245\303\253\142\246\133\175\375\316")

  •                    popup - whether to pop-up checkbox ("true" or "false") popup 是否进行弹窗

  •                    advert-pending - whether an advertisement is pending to be displayed ("yes" or "no")

  •                    http-status - allows to set http status code and message

  •                    http-header - allows to add http header

           RADIUS-related variables:

  •                    radius<id> - show the attribute identified with <id> in text string form (in case RADIUS authentication was used; "" otherwise)

  •                    radius<id>u - show the attribute identified with <id> in unsigned integer form (in case RADIUS authentication was used; "0" otherwise)

  •                    radius<id>-<vnd-id> - show the attribute identified with <id> and vendor ID <vnd-id> in text string form (in case RADIUS authentication was used; "" otherwise)

  •                    radius<id>-<vnd-id>u - show the attribute identified with <id> and vendor ID <vnd-id> in unsigned integer form (in case RADIUS authentication was used; "0" otherwise)

           

           Working with variables

            $(if <var_name>) statements can be used in theses pages. Following content will be included, if value of <var_name> will not be an empty string. It is an equivalent to $(if <var_name> != "") It is possible to compare on equivalence as well: $(if <var_name> == <value>) These statements have effect until $(elif <var_name>), $(else) or $(endif). In general case it looks like this:

           if 语句可以这么使用

           $(if <var_name>)  如果变量不空的话就是真的,条件成立

           $(if <var_name> != "") 或者 $(if <var_name> == <value>) 

           $(else) or $(endif)

some content, which will always be displayed
$(if username == john)
Hey, your username is john
$(elif username == dizzy)
Hello, Dizzy! How are you? Your administrator.
$(elif ip == 10.1.2.3)
You are sitting at that crappy computer, which is damn slow...
$(elif mac == 00:01:02:03:04:05)
This is an ethernet card, which was stolen few months ago...
$(else)
I don't know who you are, so lets live in peace.
$(endif)
other content, which will always be displayed

            Only one of those expressions will be shown. Which one - depends on values of those variables for each client.

           

           Redirects and custom Headers

           新增加的重定向和自定义的头部

            Starting from RouterOS 5.12 there are 2 new HotSpot html page variables:

  •                    http-status - allows to set http status code and message

  •                    http-header - allows to add http header

           
Example:

	$(if http-status == 302)Hotspot login required $(endif)
	$(if http-header == "Location")$(link-redirect)$(endif)

            In case if $(link-redirect) will evaluate to "http://192.168.88.1/login", then HTTP response will look like:

HTTP/1.0 302 Hotspot login required
<regular HTTP headers>
Location: http://192.168.88.1/login

           
http-status syntax:

	$(if http-status == XYZ)HTTP_STATUS_MESSAGE$(endif)
  •                    XYZ - status code, should be 3 decimal digits, first one must not be 0

  •                    HTTP_STATUS_MESSAGE - any text, will follow status code in HTTP reply

            In HTTP response it will be on first line and will look like:

HTTP/1.0 XYZ HTTP_STATUS_MESSAGE

           
http-header syntax:

	$(if http-header == HTTP_HEADER_NAME)HTTP_HEADER_VALUE$(endif)
  •                    HTTP_HEADER_NAME - name of the HTTP header to add

  •                    HTTP_HEADER_VALUE - value of HTTP header with name HTTP_HEADER_NAME

            In HTTP response it will look like:

HTTP_HEADER_NAME: HTTP_HEADER_VALUE

           
All variables and conditional expressions within HTTP_HEADER_VALUE and HTTP_STATUS_MESSAGE are processed as usual.

            In case multiple headers with the same name are added, then only the last one will be used (previous ones will be discarded). It allows to override regular HTTP headers (for example, Content-Type and Cache-Control).

           如果多个具有相同名字的头部添加简历啊,只有最后一个添加的有效,前面的都会被丢弃,这样就可以覆盖常规的HTTP头部,比如Content-Type和Cache-Control

           Customizing Error Messages

            All error messages are stored in the errors.txt file within the respective HotSpot servlet directory. You can change and translate all these messages to your native language. To do so, edit the errors.txt file. You can also use variables in the messages. All instructions are given in that file.

           自定义错误信息,所有的错误信息全部在各自的热点服务器errors.txt文件中,你可以改变或者翻译成为你的本地语言。你可以编辑那个txt文本文件,也可以在文本文件中使用变量。

           

           Multiple Versions of HotSpot Pages

            Multiple HotSpot page sets for the same HotSpot server are supported. They can be chosen by user (to select language) or automatically by JavaScript (to select PDA/regular version of HTML pages).

           一个热点的HotSpot服务器可以有多个页面结合。他们可以被用户选择【比如语言】,或者被Javascript自动选择。

            To utilize this feature, create subdirectories in HotSpot HTML directory, and place those HTML files, which are different, in that subdirectory. 

           为了做到这一点,首先创建子目录把这些不同的文件放到那里面去。

            For example, to translate everything in Latvian, subdirectory "lv" can be created with login.html, logout.html, status.html, alogin.html, radvert.html and errors.txt files, which are translated into Latvian. 

           如果需要做一个拉脱维亚语的登录界面,那么就创建一个lv的子目录,然后将翻译好 的 login.html, logout.html, status.html, alogin.html, radvert.html and errors.txt 文件放到lv目录下面。

            If the requested HTML page can not be found in the requested subdirectory, the corresponding HTML file from the main directory will be used. Then main login.html file would contain link to "/lv/login?dst=$(link-orig-esc)", which then displays Latvian version of login page: <a href="/lv/login?dst=$(link-orig-esc)">Latviski . And Latvian version would contain link to English version: <a href="/login?dst=$(link-orig-esc)">English

            Another way of referencing directories is to specify 'target' variable:

        <a href="$(link-login-only)?dst=$(link-orig-esc)&target=lv">Latviski
        <a href="$(link-login-only)?dst=$(link-orig-esc)&target=%2F">English

            After preferred directory has been selected (for example, "lv"), all links to local HotSpot pages will contain that path (for example, $(link-status) = "http://HotSpot.mt.lv/lv/status"). So, if all HotSpot pages reference links using "$(link-xxx)" variables, then no more changes are to be made - each client will stay within the selected directory all the time.

           

           Misc

            If you want to use HTTP-CHAP authentication method it is supposed that you include the doLogin() function (which references to the md5.js which must be already loaded) before the Submit action of the login form. Otherwise, CHAP login will fail.

            The resulting password to be sent to the HotSpot gateway in case of HTTP-CHAP method, is formed MD5-hashing the concatenation of the following: chap-id, the password of the user and chap-challenge (in the given order)

            In case variables are to be used in link directly, then they must be escaped accordingly. For example, in login page,<a href="https://login.example.com/login?MAC=$(MAC)&user=$(username)">link will not work as intended, if username will be "123&456=1 2". In this case instead of $(user), its escaped version must be used: $(user-esc): <a href="https://login.server.serv/login?MAC=$(MAC-esc)&user=$(user-esc)">link. Now the same username will be converted to "123%26456%3D1+2", which is the valid representation of "123&456=1 2" in URL. This trick may be used with any variables, not only with $(username).

            There is a boolean parameter "erase-cookie" to the logout page, which may be either "on" or "true" to delete user cookie on logout (so that the user would not be automatically logged on when he/she opens a browser next time.

           Examples

            With basic HTML language knowledge and the examples below it should be easy to implement the ideas described above.

  •                     To provide predefined value as username, in login.html change:

<type="text" value="$(username)>

            to this line:

<input type="hidden" name="username" value="hsuser">

            (where hsuser is the username you are providing)

  •                     To provide predefined value as password, in login.html change:

<input type="password">

            to this line:

<input type="hidden" name="password" value="hspass">

            (where hspass is the password you are providing)

  •                     To send client's MAC address to a registration server in form of:

            https://www.example.com/register.html?MAC=XX:XX:XX:XX:XX:XX

            change the Login button link in login.html to:

https://www.example.com/register.html?mac=$(mac)

            (you should correct the link to point to your server)

  •                     To show a banner after user login, in alogin.html after

            $(if popup == 'true') add the following line:

open('http://www.example.com/your-banner-page.html', 'my-banner-name','');

            (you should correct the link to point to the page you want to show)

  •                     To choose different page shown after login, in login.html change:

<input type="hidden" name="dst" value="$(link-orig)">

            to this line:

<input type="hidden" name="dst" value="http://www.example.com">

            (you should correct the link to point to your server)

  •                     To erase the cookie on logoff, in the page containing link to the logout (for example, in status.html) change: