Creating and Installing an Internal Captive Portal
If you do not wish to customize the defaultcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page, you can create and install a new internalcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page.
This section describes the following topics:
Creating a New Internal Web Page
In addition to customizing the defaultcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page, you can also create your own internal web page. A custom web page must include an authentication form to authenticate a user. The authentication form can include any of the following variables listed inTable 1:
Variable |
Description |
user |
(Required) |
password |
(Required) |
The fully-qualified domain name (this is dependent on the setting of themanaged deviceand is supported only in Global Catalog Servers software. |
The form can use either the "get" or the "post" methods, but the "post" method is recommended. The form's action must absolutely or relatively referencehttps://<managed device_IP>/cgi-bin/login.
You can construct an authentication form using the following HTML:
A recommended option for the
This option prevents Internet Explorer from caching the form inputs. The form variables are input using any form control method available such as INPUT, SELECT, TEXTAREA, and BUTTON. Example HTML code follows.
Username Example
最小:
Recommended Options:
accesskey="u" Sets the keyboard shortcut to 'u'
SIZE="25 "Sets the size of the input box to 25
VALUE= ""Ensures no default value
Password Example
最小:
Recommended Options:
accesskey="p" Sets the keyboard shortcut to 'p'
SIZE="25 "Sets the size of the input box to 25
VALUE= ""Ensures no default value
FQDN Example
最小:
Recommended Options:
None
Finally, an HTML also requires an input button:
Basic HTML Example
Username:
Password:
VALUE="">
You can find a more advanced example simply by using your browser’s "view-source" function while viewing the defaultcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page.
Installing a New Captive Portal Page
The following procedure describes how to install thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page by using the Maintenance function:
1.Login to theMobility Master.
2.In thenode hierarchy, navigate to thetab and select a role and clickintable.
3.Click. Click.
4.Click on.
5.To change the login page, browse for the file through theoption.
6.To change the Welcome page, browse for the file through theoption.
This page lets you upload your own files to themanaged device. There are different page types that you can choose:
Captive PortalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.Login (top level): This type uploads the file into themanaged deviceand sets thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page to reference the file that you are uploading. Use with caution on a productionmanaged deviceas this takes effect immediately.
Captive PortalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.Welcome Page: This type uploads the file that appears after logon and before redirection to the webURLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.. The display of the welcome page can be disabled or enabled in thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.profile.
Uploaded files can be referenced using:
https://<managed device_IP>/upload/custom/
Displaying Authentication Error Messages
This section contains a script that performs the following tasks:
When the user is redirected to the maincaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.login when there is authentication failure, the redirectURLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.includes a query parameter "errmsg" which java script can extract and display.
最初存储要求URLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.in a cookie so that once the user has authenticated, they are automatically redirected to its original page.
Configuring Localization
The ability to customize the internalcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.provides you with a very flexible interface to theArubacaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.system. However, other than posting site-specific messages onto thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.website, the most common type of customization is likely to be language localization. This section describes a simple method for creating a native languagecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.implementation using theArubainternalcaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.system.
1.Customize the configurable parts of thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.settings to your liking. To do this, navigate to theEditand selectand click
For example, choose a page design, upload a custom logo and/or a custom background. Also include any page text and acceptable use policy that you would like to include. Put this in your target language or else you will need to translate this at a later time.
Ensure Guest login is enabled or disabled as necessary by selecting the right option from pathto create or edit thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.profile.
2.Clickand then click onCheck that your customization and text/html is correct, with the default interface still in English and the character set still autodetects to ISO-8859-1.
Repeat steps 1 and 2 until you are satisfied with your page.
3.Once you have a page you find acceptable, click onone more time to display your login page. From your browser, choose "View->Source" or its equivalent. Your system will display the HTML source for thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.page. Save this source as a file on your local system.
4.Open the file that you saved instep 3, using a standard text editor, and make the following changes:
a.Fix the character set. The default
... section of the file will appear as:
In order to control the character set that the browser will use to show the text with, you will need to insert the following line inside the
... element:
Replace the "Shift_JIS" part of the above line with the character set that is used by your system. In theory, any character encoding that has been registered with IANA can be used, but you must ensure that any text you enter uses this character set and that your target browsers support the required character set encoding.
b.The final
... portion of the document should look similar to this:
c.Fix references: If you have used the built-in preferences, you will need to update the reference for the logo image and the CSS style sheet.
To update the CSS reference, search the text for "
This should be replaced with a link like the following:
The easiest way to update the image reference is to search for "src" using your text editor and updating the reference to include "/auth/" in front of the image file. The original link should look similar to the following:
This should be replaced with a link like this:
d.Insert javascript to handle error cases:
When themanaged devicedetects an error situation, it will pass the user's page a variable called "errmsg" with a value of what the error is in English. Currently, only "Authentication Failed" is supported as a valid error message.
本地化认证失败的我ssage, replace the following text (it is just a few lines below the
tag):
with the script below. You will need to translate the "Authentication Failed" error message into your local language and add it into the script below where it states: localized_msg="...":
e.Translate the web page text. Once you have made the changes as above, you only need to translate the rest of the text that appears on the page. The exact text that appears will depend on themanaged devicesettings when you originally viewed the captive portal. You will need to translate all relevant text such as "REGISTERED USER", "USERNAME", "PASSWORD", the value="" part of the INPUT type="submit" button and all other text. Ensure that the character set you use to translate into is the same as you have selected in part i) above.
Feel free to edit the HTML as you go if you are familiar with HTML.
5.After saving the changes made in step 4 above, upload the file to theMobility Masterusing the navigation provided in theInstalling a New Captive Portal Pagesection.
Choose thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.profile from the drop-down list. Browse your local computer for the file you saved. For Page Type, select “Captive PortalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.Login”. Ensure that the "Revert to factory default settings" box is NOT checked and click. This will upload the file to themanaged deviceand set thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.profile to use this page as the redirection page.
In order to check that your site is operating correctly, go back to the "Customize Login Page" and click on "ViewCaptive PortalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users." to view the page you have uploaded. Check that your browser has automatically detected the character set and that your text is not garbled.
To make any adjustments to your page, edit your file locally and simply re-upload to themanaged devicein order to view the page again.
6.Finally, it is possible to customize the welcome page on themanaged device, however for language localization it is recommended to use an "external welcome page" instead. This can be a web site on an external server, or it can be a static page that is uploaded to amanaged device.
You set the welcome page in thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.authentication profile. This is the page that the user will be redirected to after successful authentication.
If this is required to be a page on themanaged device, the user needs to create their own web page (using the charset meta attribute in step 4 above). Upload this page to the designatedmanaged devicein the same manner as uploading thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.login page under "For Page Type, select “Captive PortalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.Welcome Page”.
Any required client side script (CSS) and media files can also be uploaded using the “Content” Page Type, however file space is limited (use theCLICommand-Line Interface. A console interface with a command line shell that allows users to execute text input as commands and convert these commands to appropriate functions.commandto see available space). Remember to leave ample room for system files.
The "Registered User" and "Guest User" sections of the login page are implemented as graphics files, referenced by the default CSS styles. In order to change these, you will need to create new graphic files, download the CSS file, edit the reference to the graphics files, change the style reference in your index file and then upload all files as "content" to themanaged device. |
Customizing the Welcome Page
Once a user is authenticated by themanaged device, a Welcome page is launched.
You can customize this welcome page by building your own HTML page and uploading it to theMobility Master. You upload it to theMobility Masterusing the navigation provided in theInstalling a New Captive Portal Pagesection. This file is stored in a directory called "/upload/" on theMobility Masterusing the file's original name.
In order to actually use this file, you will need to configure the welcome page on thecontroller. To do this use theCLICommand-Line Interface. A console interface with a command line shell that allows users to execute text input as commands and convert these commands to appropriate functions.command: "aaacaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.welcome-page /upload/welc.html" where "welc.html" is the name of the file that you uploaded, or you can change the Welcome page in thecaptive portalA captive portal is a web page that allows the users to authenticate and sign in before connecting to a public-access network. Captive portals are typically used by business centers, airports, hotel lobbies, coffee shops, and other venues that offer free Wi-Fi hotspots for the guest users.authentication profile in the WebUI.
An example that will create the same page as displayed inis shown below. The part in red will redirect the user to the web page you originally set up. For this to work, please follow the procedure described above in this document.
:
User Authenticated
In 2 seconds you will be automatically redirected to your original web page
Press control-d to bookmark this page.
Customizing the Pop-Up box
In order to customize the Pop-Up box, you must first customize your Welcome page. Once you have customized your welcome page, then you can configure your custom page to use a pop-up box. The default HTML for the pop-up box is:
Logout
If you wish your users to be able to logout using this pop-up box, then you must include a reference to /cp/logout Once a user accesses thisURLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.then themanaged devicewill log them out. It is easiest to simply edit the above HTML to suit your users and then upload the resulting file to themanaged deviceusing the navigation provided in theInstalling a New Captive Portal Pagesection.
Once you have completed your HTML, then you must get the clients to create the pop-up box once they have logged into themanaged device. This is done by inserting the following code into your welcome page text and re-uploading the welcome page text to yourmanaged device.
Common things to change:
URLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.: set theURLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.to be the name of the pop-up HTML file that you created and uploaded. This should be preceded by "/upload/".
Width: set w to be the required width of the pop-up box.
Height: set h to be the required height of the pop-up box.
标题:window.open设置第二个参数command to be the title of the pop-up box. Be sure to include the quotes as shown:
Customizing the Logged Out Box
In order to customize the Logged Out box, you must first customize your Welcome page and also your Pop-Up box. To customize the message that occurs after you have logged out then you need to replace theURLUniform Resource Locator. URL is a global address used for locating web resources on the Internet.that the pop-up box will access in order to log out with your own HTML file.
First you must write the HTML web page that will actually log out the user and will also display page that you wish. An example page is shown below. The key part that must be included is the section. This is the part of the HTML that actually does the user logging out. The logout is always performed by the client accessing the /cp/logout file on themanaged deviceand so it is hidden in the html page here in order to get the client to access this page and for themanaged deviceto update its authentication status. If a client does not support the iframe tag, then the text between the is used. This is simply a 0 pixel sized image file that references /cp/logout. Either method should allow the client to logout from themanaged device.
Everything else can be customized.
You have now logged out.
After writing your own HTML, then you need to ensure that your customized pop-up box will access your new logged out file. In the pop-up box example above, you simply replace the "/cp/logout" with your own file that you upload to themanaged device. For example, if your customized logout HTML is stored in a file called "loggedout.html" then your "pop-up.html" file should reference it like this:
Logout
