Captive Portal External/Internal Portal Page - Customizing the HTML page of the external portal for the developer – Zyxel Support Campus USA

By using the internal or external User Agreement portal, you can customize the User Agreement web page (UA Portal), which can be a replacement for the default user agreement that is originally built in UAG. Please download the example UA portal page files from UAG and then you can freely configure the appearance of your personal web portal page based on your preference.

Configuration of User Agreement portal pages

There are four pages you need to prepare (two pages for each Desktop and Mobile version) when a user accesses the network through UAG. They are the Agree page, and Welcome page. The agree page enables the user to agree so that the user can submit to UAG in order to login. If the agreement is successful, the user's browser will be redirected to Welcome page. (If user use a mobile browser will be redirected to mobile version).

Internal User Access Flow

The parameter list of the internal Welcome page:

PARAMETER	DESCRIPTION		MUST
Initial
$M	It will replace to identifier of portal page.		Yes
$Z	It will replace to root directory path of UAG web server.		Yes
Submit
agree		Value is Agree. <input type="hidden" name="agree" value="Agree"/>	Yes
mp_idx		Value is identifier of portal page from $M substituted. <input type="hidden" id="mp_idx" name="mp_idx" value=""/>	Yes
mobile		Value:1 is mobile, Value:0 is Desktop. <input type="hidden" id="mobile" name="mobile" value=""/>	Yes
fieldname		Data retention save td1 to td5 labels in log <input type="hidden" name="fieldname" value=""/> format ex: Name:!@#Phone:!@#Address:!@#E-mail:!@#	No
field1		Data retention save in log <input type="text" id="field1" name="field1" />	No
field2		Data retention save in log <input type="text" id="field2" name="field2" />	No
field3		Data retention save in log <input type="text" id="field3" name="field3" />	No
field4		Data retention save in log <input type="text" id="field4" name="field4" />	No
field5		Data retention save in log <input type="text" id="field5" name="field5" />	No

The parameter list of the internal Welcome page:

PARAMETER	DESCRIPTION	MUST
Initial
$A	It will replace to Advertisement URL.	Yes
$M	It will replace to identifier of portal page.	Yes
$Z	It will replace to root directory path of UAG web server.	Yes

External User Access Flow

PARAMETER	DESCRIPTION		MUST
Initial
getQueryString("gw_addr");	The getQueryString function can get Gateway IP address of URL parameter.		Yes
getQueryString("mp_idx");	The getQueryString function can get portal page identifier of URL parameter.		Yes
getQueryString("mobile");	The getQueryString function can get auto detect mobile device of URL parameter.		Yes
Submit to agree.cgi
agree		Value is Agree.<input type="hidden" name="agree" value="Agree"/>	Yes
mp_idx		Value is identifier of portal page from mp_idx substituted. <input type="hidden" id="mp_idx" name="mp_idx" value=""/>	Yes
mobile		Value is from getQueryString("mobile") acquirement. <input type="hidden" id="mobile" name="mobile" value=""/>	If Mobile Yes
fieldname		Data retention save td1 to td5 labels in log <input type="hidden" name="fieldname" value=""/> format ex: Name:!@#Phone:!@#Address:!@#E-mail:!@#	No
field1		Data retention save in log <input type="text" id="field1" name="field1" />	No
field2		Data retention save in log <input type="text" id="field2" name="field2" />	No
field3		Data retention save in log <input type="text" id="field3" name="field3" />	No
field4		Data retention save in log <input type="text" id="field4" name="field4" />	No
field5		Data retention save in log <input type="text" id="field5" name="field5" />	No

The parameter list of the external Agree page:

PARAMETER	DESCRIPTION	MUST
Initial
getQueryString("advertise");	The getQueryString function can get the Advertisement of URL parameter.	Yes
getQueryString("mobile");	The getQueryString function can get auto detect mobile device of URL parameters.	Yes

Agree page

In the Agree page, the parameters name “agree” and “mp_idx” must submit to agree.cgi on UAG.

The example below is html code:

Internal example:

var mp_idx = $M; function initTask()
{ 
document.form.action = "/agree.cgi";    
document.getElementById("mp_idx").value = mp_idx; 
} 
<body class="bg" onload="initTask();"> 
<form class="loginHotel activeHotel" method="post" action="" name="form"> 
<input type="hidden" name="agree" value="Agree"/> 
<input type="hidden" id="mp_idx" name="mp_idx" value=""/> 
<input type="submit" value=" Agree "></div> </form>

External example:

var external = getQueryString("gw_addr"); 
var mp_idx = getQueryString("mp_idx"); 
function action()
{ 
document.form1.action = external +"/agree.cgi";                 
document.getElementById("mp_idx").value = mp_idx; 
} <body class="bg" onload=" action();"> 
<form class="loginHotel activeHotel" method="post" action="" name="form1"> 
<input type="hidden" name="agree" value="Agree"/> 
<input type="hidden" id="mp_idx" name="mp_idx" value=""/> 
<input type="submit" value=" Agree "></div> </form>

If login is successful, user’s browser will be redirected to the Welcome page. If user clicks “disagree”, the user will be unable to login and then the window will close.

Welcome page

Once user's login is successful, agree.cgi will redirect to welcome page. You can show anything that you want to display on it. Simultaneously, if you have enabled advertisement and set “URL” it will pop up advertisement window

Internal User Agreement Example

You can download the example file from device. Login into your device Web Gui

Go to Configuration > Web Authentication > User Agreement File

Click "Download" to download the file to your computer

To unzip the default_wp.zip and customize your CSS and images style and keep file name and location must not be changed.

Once all changes have been made, download the file back to your device

Using Internal User Agreement to Enable Web Authentication

Go to Configuration > Web Authentication > Authentication Type

Click "Add"
In the “Authentication Type” profile, you must select the “User Agreement” type fill in the profile name, and choose the “Internal User Agreement (User Upload Page)” type. Then the customized file is selected yourself zip file
Click "OK"

Next, you need to set the “Authentication Type” profile in “Web Authentication Policy”

Go to Configuration > Web Authentication > General

External User Agreement Example

Go to Configuration > Web Authentication > Authentication Type

Click "Add"
In the “Authentication Type” profile, you must select the “User Agreement” type fill in the profile name, and choose the “External User Agreement” type. Then fill in your UA portal page’s URL format.
http://External portal server IP/ua_agree.html.
http://External portal server IP/ua_welcome.html.
Click "OK"

Next, you need to set the “Authentication Type” profile in “Web Authentication Policy” just like with the inner portal.

Captive Portal External/Internal Portal Page - Customizing the HTML page of the external portal for the developer

Configuration of User Agreement portal pages

Agree page

Welcome page

Internal User Agreement Example

Using Internal User Agreement to Enable Web Authentication

External User Agreement Example

Comments

This website uses cookies

Configuration of User Agreement portal pages

Agree page

Welcome page

Internal User Agreement Example

Using Internal User Agreement to Enable Web Authentication

External User Agreement Example

Related articles

This website uses cookies