Source code template for External Web Portal (Controller 4.1.5 or above)

User Application Requirement
Güncellendi 07-28-2020 10:57:31 AM 2044
This Article Applies to: 

Suitable for Omada Controller V4.1.5 or above.

For Omada Controller V3.1.4 or above, please refer to FAQ2390

For Omada Controller V3.0.5 or below, please refer to FAQ916

 

This document outlines the requirements when establishing an external web portal server. In Omada Controller, External Web Portal can only be used when the portal authentication type is External Radius Server.

 

The below picture depicts the workflow among the wireless client, EAP, Omada Controller, External Web Portal and the Radius Server. It will help you better understand the requirements of establishing an External Web Portal server.

 

1.For wireless clients & wired clients, when they are connected to the SSID of the wireless network or wired LAN network and try to access the internet, EAP or gateway will intercepts client’s HTTP request and then redirects it to the Omada Controller. (Step 1 and Step 2)

2.The Omada Controller then redirects the client’s request to the external portal page by replying a HTTP response with status code 302 Found to the client. (Step 3 and Step 4)

3.Client sends HTTP/HTTPS GET request to external web portal with parameter “?target=target_controller_ip&targetPort=target_controller_port&clientMac=client_mac&clientIp=client_ip&raidusServerIp= radius_server_ip&apMac=ap_mac&gatewayMac=gateway_mac&scheme=scheme&ssidName==ssid_name&radioId=radio_id(0 for 2.4G radio, 1 for 5G radio)&vid-vid&originUrl==redirecturl(if you did not set the redirect URL after wireless/wired clients passing the portal authentication, the default redirect URL depends on the wireless clients)”.
for example, “http://172.30.30.113?target=172.30.30.113&targetPort=8088&clientMac=F8-1E-DF-AA-AA-AA&clientIP=172.30.30.103&raidusServerIp=172.30.30.120&apMac=AC-84-C6-BB-BB-BB&GatewayMac=172.30.0.1&scheme=https&ssidName=eap_test&radioId=1&originalUrl=https%3A%2F%2Fwww.tp-link.com“ (Step 5)

4.External web portal server should be able to get the value of the clientMac, clientIp, apMac, gatewayMac, ssidName, radioId, vid, scheme, originUrl parameters. Then external web portal server should submit the information of username, password, clientMac, clientIp, apMac, gatewayMac, ssidName, scheme, vid, radioId, originUrl to controller. (Step 6)

5.Client sends HTTP/HTTPS POST packets to (http) https://target_controller_ip:targetport/portal/radius/auth after submitting. (Step7)

6.Omada Controller communicates with radius server to verify the username and password. (Step 8 and Step 9)

7.If the authentication is passed, i.e., Access-Accept is received from radius server, Omada Controller will redirect a built-in success page or a predefined webpage according to the configuration to clients. (Step 10)

 

The below html template is a simple demo for you to develop your External Web Portal working with Omada Controller:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<div id="errorHint" style="color:red"></div>

<div><span>username:</span><input type="text" id="username" name="username"/> </div>

<div><span>password:</span><input type="password" id="password" name="password"/></div>

<button onclick="doSubmit()">submit</button>

<script type="text/javascript">

    var errorHintMap = {

        "-1": "General error.",

        "-1001": "Invalid request parameters.",

        "-41506": "Invalid Authorization Information.",

        "-41500": "Invalid authentication type.",

        "-41501": "Failed to authenticate.",

        "-41529": "Incorrect username or password.",

        "-41530": "Connecting to the RADIUS server times out."

    };

    var submitUrl = getQueryString("scheme") + "://" + getQueryString("target") + ":" + getQueryString("targetPort") + "/portal/radius/auth";

 

 

    var clientMac = getQueryString("clientMac");

    var clientIp = getQueryString("clientIp");

    var apMac = getQueryString("apMac");

            var gatewayMac = getQueryString("gatewayMac");

    var ssidName = getQueryString("ssidName");

            var vid = getQueryString("vid");

    var radioId = getQueryString("radioId");

    var originUrl = decodeURIComponent(getQueryString("originUrl"));

            var authType = 2;

    var submitData = {

        clientMac: clientMac,

        clientIp: clientIp,

        apMac: apMac,

                        gatewayMac: gatewayMac,

                        ssidName: ssidName,

                        vid: vid,

        radioId: radioId,

        originUrl: originUrl,

                        authType: authType

    };

    var xhr;

    function doSubmit() {

        submitData.username = document.getElementById("username").value;

        submitData.password = document.getElementById("password").value;

                        if (submitData.apMac == null || submitData.apMac == ""){

                            submitData.apMac =  undefined;

                        }

                       

                        if (submitData.gatewayMac == null || submitData.gatewayMac == ""){

                                    submitData.gatewayMac = undefined;

                        }

 

        xhr = null;

        if(window.XMLHttpRequest) {

            xhr=new XMLHttpRequest();

        }else {

            xhr=new ActiveXObject("Microsoft.XMLHTTP");

        }

        xhr.open('POST',submitUrl,true);

                        xhr.setRequestHeader( "Content-Type" , "text/plain;charset=utf-8" );

        xhr.onreadystatechange = function(){

            if(xhr.readyState==4 && xhr.status==200){

                var code = JSON.parse(xhr.responseText).errorCode;

                if (code === 0) {

                    location.href = originUrl;

                } else {

                    document.getElementById("errorHint").innerHTML = errorHintMap[code];

                }

            } else {

                document.getElementById("errorHint").innerHTML = xhr.statusText;

            }

        }

        xhr.send(JSON.stringify(submitData));

    }

 

    function getQueryString(name) {

 

        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

 

        var r = window.location.search.substr(1).match(reg);

 

        if (r != null && r != "") return unescape(r[2].replace(/\+/g, "%20")); return null;

 

    }

 

</script>

 

AbonelikTP-Link, gizliliğinizi ciddiye alır. TP-Link'in gizlilik uygulamaları hakkında daha fazla ayrıntı için bkz. TP-Link's Privacy Policy.

From United States (English)?

Check products and services for your region.