New Feature                                               Need help? Try our Zyxel Search AI feature Try Now!

Captive Portal [External/Internal Portal Page] - Customizing the HTML page of the external portal for the developer Wireless Controller icon

Avatar
Raphael

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. 

Related articles

Comments

0 comments

Please sign in to leave a comment.