Branding your Wi-Fi Network with Captive Portals
How to create custom-branded captive portal pages that users see as they log into your network.
Log into SputnikNet, then select Captive Portals under the CONFIG menu.
Add a new captive portal.
Name your captive portal.
Give your captive portal a name, which will appear in the Sputniknet control panel.
The other settings are optional:
- Use (insecure) HTTP: this option is hardly ever used, because it isn't secure. Select it if you are running your own server (SputnikNet On Site), and don't have an SSL certificate installed (though we highly recommend you use SSL). Selecting this option means that user login credentials could be intercepted by a hacker on the wireless network.
- Redirect UR: if supplied, the user will be redirected to this web site after logging in.
- Append session information: this is used in conjunction with the redirect URL. If selected, session information is appended to the redirect URL. This is used if the site being redirected to is logging session information.
Click "Add New Portal" to apply your settings.
Select your captive portal.
View default captive portal HTML.
Click on "Text/Images" to view and edit your captive portal page.
- [login] is where the authentication system(s) applied to the captive portal will place a login form (e.g. the username/password fields, or )
- [style] and [/style] are required to include CSS definitions
The default portal content field illustrates basic HTML, contains an image and login form. All of these can be modified as needed.
To see how the captive portal displays click "View Saved".
Preview default captive portal.
Specify the path to the local image for upload.
Select the image in your file system.
Add as many images as you like to SputnikNet.
Add an image to your captive portal.
To add an image to your captive portal, select the place in the HTML where you want the image reference to appear.
Click the thumbnail of the image you want to add. A reference to the image (i.e. an <img> tag) will be added at the insertion point. Any selected text will be replaced with the image reference.
Review and save captive portal content.
Preview your captive portal.
Review your captive portal.
Assign authentication systems to your captive portal.
Once you're happy with the design of the captive portal page, click "Walled Garden and Authentication" to assign authentication systems and walled gardens to it.
In this case, we will assign "Joe's Java Guest" authentication system, and "Allow to www.joesveryfinecafe.com" walled garden.
The former will place the "Joe's Java Guest" authentication system first (if you have multiple authentication systems), where the [login] tag appears in the captive portal content.
The latter adds the sites defined by www.joesveryfinecafe.com to your captive portal's walled garden. If a user clicks on the link in "Please view our breakfast or lunch menu" (see above) they will be able to browse walled garden sites, for example, to see the menu of the day.
Click "Update" for these changes to take effect.
Assign secondary authentication systems to your captive portal.
After clicking "Update" you can add as many additional authentication systems as required, which will be provided as options for the user. Authentication systems are listed in the captive portal in the order in which they are originally applied.
In this case, we assign the "Joe's Cafe PayPal" authentication system as the second option.
Preview your revised captive portal.
Now, the original default login form is replaced with the selected authentication systems in the order applied.
In this case, the user can surf for a half hour for free using a guest authentication system. After that time has expired, she will be required to pay for access using a PayPal/credit card authentication system.
Preview all authentication options.
Click on "Paid Wi-Fi Access" to preview the secondary authentication system. When the user selects this option, the screen changes to ask them to sign in or to create a new account.
SputnikNet is very flexible when it comes to authentication-- it's possible to do practically anything you want. For more information, see the chapters covering various authentication systems.