Skip to main content

Search

How can we help ?

How to Integrate (Ubiquiti) Unifi Controller with Cloudi-Fi

Brendan Czerwonka
  • Updated

Describes how to configure your Unifi (Ubiquiti) Controller to enable Cloudi-Fi’s captive portal.

                                                            

Integration tested on 
Unifi       - 7.4.162

Configuration time: 20 minutes

 

This setup consists of the main parts:

 

Use case

Prerequisites

Step 1: Get Cloudi-Fi required URL

Step 2: Get Radius information

Step 3: Add a new Radius Server Profile

Step 4: Basic Captive Portal Setup

Step 5: Setup Captive Portal settings in Hotspot Portal Editor

Step 6: Deploy customized portal pages

Step 7: (Recommended) Install a public certificate

Troubleshooting

What’s Next?

 

Use case:

The following sections will provide step-by-step instructions to enable Cloudi-Fi cloud-based WiFi Captive portal service with your existing Ubiquiti architecture.

 

Prerequisites:

Before starting, ensure that you have the following prerequisites:

  • A Unifi access point.
  • Access to the Unifi Controller/dashboard.
  • Knowledge of your network’s IP addressing scheme.

 

Step 1: Get Cloudi-Fi required URL

Location URL: this URL will be used to configure an External Captive Portal

  • Access the Cloudi-Fi administration console
  • Select the location
  • Click on the menu button for the location
  • Select "Copy Splash page URL"

Cloudi-Fi Get captive portal url.png

Step 2: Get Radius information

You will need the Radius information (Server IPs, Secret, Ports) to proceed with the setup.

  1. IPs address of the Radius servers

  2. Ports: UDP 1814 (Authentication)

  3. The Secret (provided by Cloudi-Fi Support)

You can get the Secret by asking in the Chatbot, Cloudi-Fi’s Support team will provide you with the necessary information. (Unifi Secret is different than other Vendor integrations)

Cloudi-Fi - Get Radius information for Ubiquiti

  1. What shared secret is used for the Radius server with Ubiquiti? (Please save this confidential information securely, and do not share it publicly.)

Step 3: Add a new Radius Server Profile

  1. Go to Settings

  2. Click Profiles

  3. Click Radius

  4. Create a new radius profile

    • Name: Cloudi-FI Radius

    • The Cloudi-Fi Support team will provide IP Address, Port and Secret

    • Save

Unifi_Hotspot_Portal_config6.png
Unifi_Hotspot_Portal_config7.png

 

Step 4: Basic captive portal setup

  1. Go to Settings

  2. Select WiFi -> Select Network Using Captive Portal

  3. Check the Hotspot Portal Box

  4. Click on Hotspot Portal to open editor

Unifi_Hotspot_Check.png

 

Step 5: Setup Captive Portal settings in Hotspot Portal editor

  1. Click on Branding
  2. Scroll to Success Landing Page choose Custom URL and enter https://login.cloudi-fi.net/success.php

Unifi_Hotspot_Portal_config1.png

Step 6: Setting up Hotspot Authentication Method

  1. Click on the Authentication tab

  2. Choose Radius as the authentication method and click edit

  3. Choose the Radius group configured earlier and select CHAP as the Radius Authentication type.

Unifi_Hotspot_Portal_config2.png

Unifi_Hotspot_Portal_config3.png

Step 7: Setting up Hotspot Settings

  1. Click on the Settings tab

  2. Edit the Landing Page settings to match the screenshot (Ensure that the Domain is your Unifi Controller Hostname)

Unifi_Hotspot_Portal_config4.png

 

Step 8: Settings Authorization Access:

  1. Below the domain option enter the following values

    • 178.33.251.41/32

    • login.cloudi-fi.net

    • login-cn.cloudi-fi.net

Unifi_Hotspot_Portal_config5.png

Step 6: Deploy customized portal pages

To trigger the Cloudi-Fi portal, a custom web page has to replace the default Unifi Hotspot Portal page for each site where Cloudi-Fi is enabled.

Please take note of the "ch" attribute value from the Splash Page URL retrieved on the first step from the Cloudi-Fi Administration Console.

Replace the "" markup by the "ch" attribute value in the following code and save the code to "Cloudi_unifi.js" file.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guest WiFi</title>
    <script src="cloudifi_unifi.js"></script>
  </head>
  <body> 
  <script>
  	var redirectPortal=buildRedirect();	
  	window.location.replace(redirectPortal);
  </script>
  </body>
</html>

Cloudifi_unifi.js

var portail="https://login.cloudi-fi.net/start/ch/
YOURCOMPANY_CH_VALUE/sp/spubiquitiredirect.com";

var Base64 = {
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode: function(e) {
        var t = "";
        var n, r, i, s, o, u, a;
        var f = 0;
        e = Base64._utf8_encode(e);
        while (f <e.length) {="{">
            n = e.charCodeAt(f++);
            r = e.charCodeAt(f++);
            i = e.charCodeAt(f++);
            s = n  2;
            o = (n & 3) <><4 |="|" r="r"> 4;
            u = (r & 15) <><2 |="|" i="i"> 6;
            a = i & 63;
            if (isNaN(r)) {
                u = a = 64
            } else if (isNaN(i)) {
                a = 64
            }
            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) +
                this._keyStr.charAt(u) + this._keyStr.charAt(a)
        }
        return t
    },
    decode: function(e) {
        var t = "";
        var n, r, i;
        var s, o, u, a;
        var f = 0;
        e = e.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (f <e.length) {="{">
            s = this._keyStr.indexOf(e.charAt(f++));
            o = this._keyStr.indexOf(e.charAt(f++));
            u = this._keyStr.indexOf(e.charAt(f++));
            a = this._keyStr.indexOf(e.charAt(f++));
            n = s <><2 |="|" o="o"> 4;
            r = (o & 15) <><4 |="|" u="u"> 2;
            i = (u & 3) <><6 |="|" a;="a;">
            t = t + String.fromCharCode(n);
            if (u != 64) {
                t = t + String.fromCharCode(r)
            }
            if (a != 64) {
                t = t + String.fromCharCode(i)
            }
        }
        t = Base64._utf8_decode(t);
        return t
    },
    _utf8_encode: function(e) {
        e = e.replace(/\r\n/g, "\n");
        var t = "";
        for (var n = 0; n <e.length; n++)="n++)" {="{">
            var r = e.charCodeAt(n);
            if (r <128) {="{">
                t += String.fromCharCode(r)
            } else if (r  127 && r <2048) {="{">
                t += String.fromCharCode(r  6 | 192);
                t += String.fromCharCode(r & 63 | 128)
            } else {
                t += String.fromCharCode(r  12 | 224);
                t += String.fromCharCode(r  6 & 63 | 128);
                t += String.fromCharCode(r & 63 | 128)
            }
        }
        return t
    },
    _utf8_decode: function(e) {
        var t = "";
        var n = 0;
        var r = c1 = c2 = 0;
        while (n <e.length) {="{">
            r = e.charCodeAt(n);
            if (r <128) {="{">
                t += String.fromCharCode(r);
                n++
            } else if (r  191 && r <224) {="{">
                c2 = e.charCodeAt(n + 1);
                t += String.fromCharCode((r & 31) <><6 |="|" c2="c2" &="&" 63);="63);">
                n += 2
            } else {
                c2 = e.charCodeAt(n + 1);
                c3 = e.charCodeAt(n + 2);
                t += String.fromCharCode((r & 15) <><12 |="|" (c2="(c2" &="&" 63)="63)"><><>
                    6 | c3 & 63);
                n += 3
            }
        }
        return t
    }
}

function getQueryParams(parameterName) {
	var result = null,
        tmp = [];
    	var items = location.search.substr(1).split("&");
    	for (var index = 0; index <items.length; index++)="index++)" {="{">
        	tmp = items[index].split("=");
        	if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    	}
    	return result;
}

function buildRedirect(){
	var ap_identifier=getQueryParams("ap");
	var client_mac=getQueryParams("id");
	var ssid=getQueryParams("ssid");
	var url_post=getQueryParams("url");
	var auth=window.location.protocol + '//' + window.location.host + window.location.pathname + 'signin.html';
	var t=getQueryParams("t");
	var redirect= portail + "?ap=" + ap_identifier + "&id=" + client_mac + "&login_url=" + auth + "&ssid=" + ssid + "&t=" + t;
	return redirect;
}

function doSignin(){
	var dataJson=Base64.decode(getQueryParams("params"));
	var success_url=getQueryParams("next_url");
    var failure_url=portail;
	var xhr = new XMLHttpRequest();
   	xhr.open("POST", "login", true);
   	xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
   	xhr.onload = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            if (res && res["meta"]) {

                if (res["meta"]["rc"] && res["meta"]["rc"] == "ok") {
                    window.location.replace(success_url);
                } else {
                    if (res["meta"]["msg"]) {
                        window.location.replace(failure_url + '&Error=' + res["meta"]["msg"]);
                    } else {
                        window.location.replace(failure_url + '&Error=Ubiquiti+Unknown+Error');
                    }
                }
            } else {
                window.location.replace(failure_url);
            }
		}
   	};
   	try {
      		var resp = xhr.send(dataJson);
   	} catch(err){
      		console.log(err);
   	}
}

Signin.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guest WiFi</title>
    <script src="cloudifi_unifi.js"></script>
  </head>
  <body>
  <script>
	doSignin();
  </script>
  </body>
</html>

Copy the files into
Windows: C:\Users\your_windows_user\Ubiquiti UniFi\data\sites\default\app-unifi-hotspot-portal

 

Step 7: (Recommended) Install a public certificate

Cloudi-Fi provides a Keystore that can be deployed directly on your Unifi server; get in touch in our chat to get the Keystore.

To generate and install your certificate, follow the following guideline by clicking this link.

 

Troubleshooting:

If you do not have the file path mentioned in this document do the following and it will appear.

You can switch to the Legacy interface (Settings -> Search 'Interface' under the search bar on the top left), and under the map tab, select Floorplan and upload a sample floorplan.

Once done, you will be able to see the file to edit the captive portal for the sites as before.

If you still encounter any issues during the setup or operation, follow Cloudi-Fi's first-level troubleshooting guide. If you still face issues, we invite you to contact the Cloudi-Fi support team.

 

What’s Next?

Congratulations on configuring your Ubiquiti Controller with Cloudi-Fi!