SETTING UP THE WiFi HOTSPOT AND THE CAPTIVE

PORTAL
by GeekyCat21 geekycat21.blogspot.com

QUICK SETUP for WiFi Hotspot (VERY IMPORTANT To make your

WiFi Hotspot work)

Click QUICK SET to set up the wireless hotspot. Input necessary data like
LAN IP addresses, DHCP and etc. Like this,
Data inputted here are just examples. Blue checks means important.

Then Click Apply.

If only one wifi user that can connect to the internet, It's because you have
misconfigured your QUICK SETUP.

Restore the configuration you have backup earlier. Go to

Winbox > Click Files > Restore.
And then go back to QUICK SET. Make sure you have chosen AP, STATIC
for ADDRESS ACQUISITION, put the right WLAN IP ADDRESS, LAN
IP ADDRESS, CHECKED DHCP SERVER and NAT, put the right DHCP
CLIENT (Should be the range of your LAN IP ADDRESS like
LAN IP ADDRESS : 192.168.1.1
DHCP CLIENT: 192.168.1.100-192.168.1.200 )
If you still encounter the problem, Please make sure that all are enabled.
Like wlan1 is enabled.
If you still can't connect, comment or message to me your problem with
screenshots.
Now if it is working, we can now make a wifi hotspot profile.
As you can in the QUICK SETUP picture above, I didn't check the Security
because I want to make an open WiFi hotspot with captive portal.
HOW TO MAKE WiFi Hotspot Profile (VERY IMPORTANT in making
Captive Portal)
Continue to setting Hotspot. Click IP Hotspot

In the Hotspot dialog box, Click Hotspot Setup.

Then Mikrotik Hotspot Setup wizard, will be appear. This is easiest way to
setup Hotspot interface in Mikrotik. IP address for Ethernet, DHCP Server,
routing and firewall will be configured automatically. In the Mikrotik
Hotspot Setup wizard, select wlan1 as hotspot interface. If it turns red, it
means INVALID and you have to choose bridge1 as hotspot interface if you
have configure the bridge also. Then click Next.
This picture is just an example:

Example:

And then Set hotspot IP address. You can accept default values but choose
none for certificate. Leave the IP as it is (10.5.50.x). If you change this IP,
the LOGIN and LOGOUT links will not work on your splash page. Then
click Next.

Set Pool dhcp, then click Next

For SSL certificate, select none. Then Click Next.

Because we dont have SMTP server, enter 0.0.0.0. Click Next

In the wizard Setup DNS, input IP DNS, then click Next

For DNS name, leave blank if you want to, then click Next. But you can
name your local DNS hotspot for example: freewifi.com.(Anything you want
to name it). It serves as a purpose that the users wont have to memorize
the IP address of the hotspot to go the captive portal instead input the DNS
Name in URL which is easy to remember. Some browsers doesnt
automatically go to the captive portal. Thats why users have to input the IP
address or DNS name (ex. freewifi.com) to go to the captive portal.

Create users, and password, then click Next.

Done. Setup has completed successfully.

Back to the Mikrotik Hotspot dialog box. Click tab Server Profiles, then
click twice to hsprof1 (look at example picture below). New open dialog
box will appear about Hotspot Server Profile.

Another example:

TERMS TO REMEMBER Before proceeding:

For me, there are two types of captive portal. With Authentication and
Non-Authentication
With Authentication means users who are connected to the WiFi must log
in their username and password before they could use the internet.
Non-Authentication means users who are connected to Wifi and has to see
first a webpage before they could use the internet. I thinks it's called Splash
Page.
And then in tab Login, make sure in the section Login By, uncheck cookie,
then click OK. I didnt use RADIUS Server for my captive portal. Im not
familiar with the RADIUS Server.

Until here, Mikrotik has been successfully configured as a hotspot. For

testing of the client, create a voucher for the user / client. In the Mikrotik
Hotspot dialog box, select tab Users plus (+)

If you
want the landing page just for the hotspot user not the LAN user, you can
just simply choose the SERVER and choose hotspot or whatever server
name you use for your wifi if you want to implement the captive portal to
wifi users only. The username is important. But the password, you have the
choice whether you put a password for your captive portal or not. Users of
the wifi must input the correct username and password in the captive portal
to be able to use the wifi.
If you dont want users to input username or password in the landing page
and that you just want to that the users agree to your terms and conditions
or just click Connect button in your landing page/splash page, change the
data in input type=text to input type=hidden and change the value
based on the username in user profile you created: like input type=text
value=HotspotUser (depends on what you put for the username) so that
the value sent for authentication is the same as the one you have created
without the users altering the value. The same goes to the password: input
type=password, change to input type=hidden and then change the
value based on the password you created. Confused? Well, this is very
useful once we get to customizing our captive portal. Mikrotik has a default
captive portal but it is really plain and simple. And I know you dont want
that, right? Get back to this part after were done in making a WiFi Hotspot
profile and that we were doing on how to customize the Captive Portal.

In the new open dialog box,

input name & password. You
can customize
how
the
speed, duration of use, the
mac address, and so on. It
depends on your desire.
Idle-timeout is used to
detect, if client is not using
Router networks, reaching
timeout user will be logged
out, etc.
Keep-alive-timeout used to
detect, if is available and reachable, if check fails client will be dropped out,
etc.
In other words, idle timeout checks traffic, Keepalive timeout checks
availability. if user is online but is just not sending./receiving anything, he
may reach its idle timeout. Keepalive timeout may only be reached if
client is physically disconnected or turned off.
Shared Users default is 1. Unable it so that you can have many users under
the same username and password (Use for non-authenticated captive
portal). But if you want to make an authenticated captive portal, then the
Shared Users is one one user for one username and password.
Then click OK.

In the computer client, browsing to any site, If the login page appears, it
means mikrotik hotspot is working properly. Input username and password,
that have been created. If everything is normal, the browser will be redirect
to destination site. If it didnt redirect, input the IP Address or DNS name
you assigned to your WiFi profile in the URL and click Go. If it still doesnt
redirect, look back to the previous lessons. You might have missed a thing
or two. Remember what I told you before, one small configuration,
everything will be destroyed unless you got a backup on the FILES. I taught
you how to backup configuration in Mikrotik.

For security, dont forget to make new password for user admin. Click
system password, fill new password in dialog box, and then click change.

HOW TO CUSTOMIZE the Captive Portal

Terms to REMEMBER before proceeding:
The HTML Directory is where you keep you webpages use for the landing
page. Hotspot is the name of the folder inside those webpages. The hotspot
folder is the default folder with webpages that are provided by the Mikrotik
as a default landing page. You can customize the login.html or staus.html
inside the hotspot folder according to what you want. Just make sure that
your server uses that server profile you customize or it always use the
default.
Login.html this serves as the landing page. This is where captive portal
redirects users connected to the wifi. This is also where users input the
username and password to connect to the wifi.
Status.html after the users login successfully, the captive portal will
redirect to this webpage. By default, It will show your IP address, data rates
and connectivity status. It also has a button to log out from using the
internet.
Logout.html this is where users will be redirected to after they clicked
the logout button in the status page.
Redirect.html this is where the captive portal first to go. It redirects the
users to login.html after they connected to the wifi.
Alogin.html if it took a while to login to the captive portal, this page will
show and it will show you the necessary step to be able to log in to the
portal.
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="user" 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.server.serv/register.html?mac=XX:XX:XX:XX:XX:XX
change the Login button link in login.html to:
https://www.server.serv/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://your.web.server/your-banner-page.html', 'mybanner-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://your.web.server">
(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:

open('$(link-logout)', 'hotspot_logout', ...

to this:
open('$(link-logout)?erase-cookie=on', 'hotspot_logout', ...
or alternatively add this line:
<input type="hidden" name="erase-cookie" value="on">
before this one:
<input type="submit" value="log off">
Note: Dont copy and paste everything without understanding the codes.
Then make the following login.html:
Code: Select all
<html>
<head>
<meta http-equiv="refresh" content="0; url=login?
username=username&password=password">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
</head>
<body>
</body>
</html>
That login.html is loaded for unauthorized users and usually has the login
form, the above instead after 0 seconds causes an automatic redirect (HTTP
code 302) to the login servlet of the Hotspot, passing on the correct user
credentials and effectively logging the user in.
To cover all possible redirect conditions, create the following redirect.html
and logout.html (they both get the same HTML) to in turn redirect to the
above login.html:
Code: Select all
<html>
<head>
<meta http-equiv="refresh" content="0; url=login.html">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
</head>

<body>
</body>
</html>
After a successful login, alogin.html is loaded for the user. The below
assumes that the page you want to show after login resides on an external
server. If you want to host it on the router itself, just replace it with the
HTML for the final landing screen.
Code: Select all
<html>
<head>
<meta http-equiv="refresh" content="0;
url=http://my.external.server.com/landingpage.html">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
</head>
<body>
</body>
</html>