Designing a Captive Portal Authentication Login Page on an EX Series Switch
You can set up captive portal authentication on your switch to redirect all Web browser requests to a login page that requires the user to input a username and password before they are allowed access. Upon successful authentication, the user is allowed access to the network and to continue to the original page requested.
Junos OS provides a customizable template for the captive portal window that allows you to easily design and modify the look of the captive portal login page. You can modify the design elements in the template to change the look of your captive portal login page and to add instructions or information to the page. You can also modify any of the design elements of an existing captive portal login page.
Figure 1 shows an example of a captive portal login page:
Figure 1: Example of a Captive Portal Login Page
Table 1 summarizes the configurable elements of a captive portal login page.
Table 1: Configurable Elements of a Captive Portal Login Page
| Element | CLI Statement | Description |
|---|---|---|
Banner message | banner-message text-string | The first screen displayed before the captive portal login page is displayed (not shown). The page header says “Terms and Conditions of Use: Please read the following terms of use and disclaimers carefully before using this network.” The configurable banner message appears in the body of the page. The default text is “Terms and Conditions.” A button labeled Agree gives the user access to the captive portal login page. |
Footer background color | footer-bgcolor hex-color | The HTML hexadecimal code for the background color of the captive portal login page footer. |
Footer message | footer-message text-string | For example, you can include copyright information and links to additional information such as help instructions, legal notices, or a privacy policy. The default text shown in the footer is Copyright @2009, Juniper Networks Inc. |
Form header background color | form-header-bgcolor hex-color | The HTML hexadecimal code for the background color of the header bar across the top of the form area of the captive portal login page. |
Form header message | form-header-message text-string | Text displayed in the header bar across the top of the form area of the captive portal login page. For example, Welcome to My Cafe. The default text is Captive Portal User Authentication. |
Form reset button label | form-reset-label label-name | Label appearing in the button that the user can select to clear the username and password fields on the form, for example, Reset or Clear. |
Form submit button label | form-submit-label label-name | Label appearing in the button that user selects to submit their login information—for example, Log In or OK. |
Header background color | header-bgcolor hex-color | The HTML hexadecimal code for the background color of the captive portal login page header. |
Header logo | header-logo filename | Filename of the file containing the image of the logo that you want to appear at the top of the captive portal login page. The image file can be in GIF, JPEG, or PNG format. You can upload a logo image file to the switch. Copy the logo to the /var/tmp directory on the switch (during the commit the files are saved to persistent locations). If you do not specify a logo image, the Juniper Networks logo is displayed. |
Header message | header-message text-string | Text displayed in the page header. The default text is User Authentication. |
Post-authentication URL | post-authentication-url url | URL to which the users are directed upon successful authentication. The default is to redirect users to the page they had originally requested. |
To design the captive portal login page:
- (Optional) Upload your logo image file to the
switch:
user@switch> file copy ftp://username:prompt@ftp.hostname.net/var/tmp/my-logo.jpeg - Configure the custom options to specify the background
colors and text displayed in the captive portal page:
[edit system services captive-portal]
user@switch# set custom-options header-bgcolor #006600
set custom-options header-message “Welcome to Our Network”
set custom-options banner-message “Please enter your username and password:”
set custom-options footer-message “Copyright ©2009, Our Network”
 | Note: For the custom options that you do not specify, the value is taken from the standard template. |
