How to import the customized page with HTML file for portal function?

Omada SDN controller supports portal function to pop up an authentication page when wireless clients connect to the network. We can customize the pop-up page through importing the html file on Omada SDN controller.

You can download the html template from Omada SDN controller. Then edit the code based on the template to improve your authentication page. It may require that you have the basic knowledge of JavaScript, HTML and CSS. If you are not familiar with these knowledge, it’s recommended to keep the original code and just add the html style to the original content.

Below is the download link of the HTML template.

https://static.tp-link.com/resource/omada/html-demo.html

This feature can be used for the following authentication types of portal function.

1. No Authentication (authType: 0). (In line 199 of demo.html)

2. Simple Password (authType: 1). (In line 202 of demo.html)

3. External Radius Server – Local Web Portal (authType: 2). (In line 206 of demo.html)

4. Facebook (authType: 7) (In line 210 of demo.html)

5. Hotspot (authType: 11) Hostpot contains the below authentication methods. (In line 218 of demo.html)

Voucher (authType: 3)

Local User (authType: 5)

SMS (authType: 6)

Hotspot Radius (authType: 8)

AuthType represents the number of authentication types in the html code of template.

The following is a simple schematic diagram of the portal function.

*Please see the attached table for the parameters and meanings include in the path.

In the html code, it gets the authentication type settings by sending the “getPortalPageSetting” request to the backend. Then the authentication page will show the authentication type according the returning information.

(If you select Facebook authentication type, the URL of authentication page will generate according to the following format. (In line 155 of demo.html)

Wireless clients

http://{controllerAddr}:{port}/portal/fbwifi/forward?clientMac={clientMac}&apMac={apMac}&ssidName={ssidName}&radioId={radioId}&originUrl={originUrl}

Wired clients

http://{controllerAddr}:{port}/portal/fbwifi/forward?clientMac={clientMac}&gatewayMac={gatewayMac}&vid={vid}&originUrl={originUrl}

)

After input the authentication information and click login button, the device will send /portal/auth authentication request to the backend. When authentication type is Hotspot Radius or External Radius, the path is /portal/radius/auth.

Attached Table

url parameter	request body
cid	clientMac string
ap	apMac string
gateway	gatewayMac string
ssid	ssidName string
rid	radioId int
vid	vid int
u	originUrl string
previewSite	previewSite string
error	error int
t	t long

/portal/getPortalPageSetting

Program	Content
URL	path	/portal/getPortalPageSetting
Method	POST
Request Body JSON	clientMac string	client MAC address
	apMac string	AP MAC address
	gatewayMac string	gateway MAC address
	ssidName string	ssid name
	radioId int	0: 2.4GHz 1: 5GHz
	vid int	VLAN ID
	originUrl string	Original URL
Response Body JSON	errorCode int	0	Success
	result	site string	site
		authType int	Authentication type 0: No Auth 1: Simple password 2: External RADIUS 11: Hotspot
		hotspot object	enabledTypes int list	Optional methods of Hotspot's authentication: 3: Voucher 5: Local User 6: SMS 8: RADIUS
		sms object	countryCode string	Default CountryCode
		landingUrl string	Redirect address when authentication is successful
Function	Search the Portal settings

/portal/sendSmsAuthCode (send SMS authentication code)

Program	Content
URL	path	/portal/sendSmsAuthCode
Method	POST
Content-Type	text/plain
Request Body JSON	clientMac string	client MAC address
	apMac string	AP MAC address
	gatewayMac string	gateway MAC address
	ssidName string	ssid name
	radioId int	0: 2.4GHz 1: 5GHz
	vid int	VLAN ID
	phone string	The phone number submitted by the user
Response Body JSON	errorCode int	0	Success
Function	It is used before submitting authentication to send authentication code. After successful sending, it needs 1 min waiting before sending again.
Limitation	Only available when SMS authentication is selected

/portal/auth (Submit authentication request)

Program	Content
URL	path	/portal/auth
Method	POST
Content-Type	text/plain
Request Body JSON	clientMac string	client MAC address
	apMac string	AP MAC address
	gatewayMac string	gateway MAC address
	ssidName string	ssid name
	radioId int	0: 2.4GHz 1: 5GHz
	vid int	VLAN ID
	originUrl string	original URL
	authType int	Actual authentication type. It will submit according to user’s selection when use Hotspot: 0: No Auth 1: Simple password 2: External RADIUS 3: Voucher 4: External Portal server 5: Local User 6: SMS 8: Hotspot RADIUS
	phone string (Optional, Necessary for SMS)	The phone number submitted by the user
	code string (Optional, Necessary for SMS)	SMS authentication code
	simplePassword string (Optiolan, Necessary for Simple password)	Password submitted of simple password authentication type
	localuser String (Optiolan, Necessary for Local User)	Username submitted of Local User authentication type
	localuserPsw String (Optiolan, Necessary for Local User)	Password submitted of Local User authentication type
	voucherCode String (Optiolan, Necessary for Voucher)	Code submitted of Voucher authentication type
Response Body JSON	errorCode int	0	Success
Function	Submit client’s authentication

/portal/radius/auth (Submit authentication request)

Program	Content
URL	path	/portal/radius/auth
Method	POST
Content-Type	text/plain
Request Body JSON	clientMac string	client MAC address
	apMac string	AP MAC address
	gatewayMac string	gateway MAC address
	ssidName string	ssid name
	vid int	VLAN ID
	radioId int	0: 2.4GHz 1: 5GHz
	authType int	The actual authentication type. Only External RADIUS and Hotspot RADIUS are supported 2: External RADIUS 8: Hotspot RADIUS
	username string	Authenticated username
	password string	Authenticated password
Response Body JSON	errorCode int	0	success
Function	Submit Radius Server authentication