Skip to content

Instantly share code, notes, and snippets.

@malle-pietje

malle-pietje/index.html

Last active December 14, 2023 06:34
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save malle-pietje/c030e9d6ccdc1c3ddfdfc4363ba79489 to your computer and use it in GitHub Desktop.
Save malle-pietje/c030e9d6ccdc1c3ddfdfc4363ba79489 to your computer and use it in GitHub Desktop.
Download ZIP
Redirection to a custom URL from the UniFi controller JSP-based captive portal
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title><unifi txt="Redirector" /></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="0;url=https://<YOUR CAPTIVE PORTAL URL>/<unifi var="mac" />/<unifi var="ap_mac" />">
</head>
<body>
</body>
</html>
@malle-pietje
Copy link
Author

More details on the unifi "vars" can be found here:
https://help.ubnt.com/hc/en-us/articles/205143830-UniFi-Hotspot-portal-customization

@malle-pietje
Copy link
Author

fixed the formatting and a minor syntax error

@malle-pietje
Copy link
Author

To automatically authorize a device you can use a different custom version of the index.html file. Follow this instruction taken from the above help article:
All that's required is that the form POST to /guest/login to authorize the user access to the guest network

Simply use JavaScript/jQuery to automatically perform the POST.

@malle-pietje
Copy link
Author

malle-pietje commented Jan 26, 2019 •
edited

From the same article:

A few vars are available which you can use to render it in the HTML page:

auth: none | password | hotspot
auth_none: false | true
auth_password: false | true
auth_hotspot: false | true
voucher_enabled: false | true
payment_enabled: false | true
package: the package id (from POST or GET)
mac: guest's MAC address
ap_mac: AP's MAC address
ap_name: AP's name
map_name: AP's location (name of the map)
ssid: the SSID of the wireless network
error: error message
has_error: false | true

@binooetomo
Copy link

dear sir

How to change it to include that vars in a form rather than a refresh get ?

and by the way.
Let's say I have my own website that will receive the request,
This website is a python django site .... will a social-login (oauth).
with this, I can give a user (after he/she oauth authenticated) a 'local' username/password and other attributes.
How can I ask unifi controller do a Radius Based auth based on that attributes ?

What controller version you refer when writing this ?

Note :
Currently I'm writing that kind of flow to work with Mikrotik's Hotspot and FreeRadius.

Sincerely
-bino-

@binooetomo
Copy link

and sir ....

is 'index.html' refer to '/usr/lib/unifi/webapps/ROOT/app-unifi/index.html' ?

Sincerely
-bino-

@malle-pietje
Copy link
Author

@binooetomo I don't recommend POSTing forms to URLs on another domain to prevent CSRF issues. That's also why I haven't provided any examples for that approach. Anyone with web-programming skills should be able to implement this though.

@malle-pietje
Copy link
Author

The location of this file depends on the OS:

  • /var/lib/unifi/sites//portal/index.html (on most Linux servers such as Ubuntu)
  • /usr/lib/unifi/sites//portal/index.html (on other Linux servers)
  • %userprofile%/Ubiquiti Unifi/data/sites//portal/index.html (on Windows servers)
  • /Applications/UniFi.app/Contents/Resources/sites//portal/index.html (on Macs)
  • /srv/unifi/data/sites//portal/index.html (on UniFi Cloud Keys)

@malle-pietje
Copy link
Author

One additional note:
You need to select Legacy JSP and enable Override templates with custom changes for the default index.html file to show up.

@eigger1202
Copy link

Hi Sir,

Thank you for this solution, I would like to know if this kind of customization will stay even after a major update of the controller? Our controller is hosted on vsphere/ubuntu 16.04.

Thank you,
Reggie

@SalimLeb
Copy link

SalimLeb commented Jul 6, 2019

One additional note:
You need to select Legacy JSP and enable Override templates with custom changes for the default index.html file to show up.

you need to select Voucher or Payment authorization if you choose Legacy JSP. this is not my case.
what I'm trying to achieve is to just open an external URL https://ibb.co/bXZByjK
the problem is that the login page is not opening. I'm not sure what to select in Authentication if Hotspot or External Portal Server. in both cases, there's no pop up for the login page, testing from mobile to connect to this network shows as "internet might not be available"

@malle-pietje
Copy link
Author

@SalimLeb This isn’t relevant to this gist AFAICT, may I suggest you create a thread on the UBNT community and add the “UniFi Wireless” tag?

@paologroppo
Copy link

paologroppo commented Jul 30, 2019 •
edited

Hi, do you know if this document still valid or obsolete?
https://help.ubnt.com/hc/en-us/articles/205143830-UniFi-Hotspot-portal-customization said that legacy method is no longer supported, but I still see it in Unifi controller.
Due to a completery lack of documentation from Unifi, a customized captive portal is a total nightmare...
I have a Unifi controller on IP 192.168.5.253 and I'M simply trying to set up an external captive portal on 192.168.5.240 but:

  1. If external portal is selected on Unifi controller THERE IS NO WAY to get the pop up showed on Apple devices (only Android devices work as expected)

  2. If Hotspot (Angular JS engine) is selected on Unifi controller popup is showed on Apple and Android devices... So I've tried to modify hotspot customizing index.hotspot.html with a javascript redirect. As said Android and Apple devices show login popup but (due to recent Unifi upgdades) now MAC ADDRESS OF THE CLIENT IS NO MORE PASSED by controller (it passes an "ec" var that is an encoded/encrypted parameter and only God is able to decode/decrypt it...)

So the question is ---unifi var="mac"--- does still work?
Many thanks

@malle-pietje
Copy link
Author

malle-pietje commented Jul 31, 2019 •
edited

UBNT now actively support the AngularJS portal but the Legacy JSP portal is still available, so the method described here still works fine. It also prevents the encoded parameters (ec) from showing up, if that is an issue for your external portal I suggest you take this approach.
With our captive portal platform the ec parameter is automatically decoded so we can choose from both methods and use each of them as needed.

@Maxwellkurt0407
Copy link

Maxwellkurt0407 commented Oct 3, 2019 •
edited

I've tried to the above mentioned index.html

But this is the result of the redirected link:
/portal/

I cannot get the mac address of the guest/client that connects.

@malle-pietje
Copy link
Author

I've tried to the above mentioned index.html

But this is the result of the redirected link:
/portal/

I cannot get the mac address of the guest/client that connects.

This is not the expected result. Did you make sure not to use a Windows editor if your controller is running on Linux? Can you also confirm which guest control settings you changed?

@Maxwellkurt0407
Copy link

I've tried to the above mentioned index.html
But this is the result of the redirected link:
/portal/
I cannot get the mac address of the guest/client that connects.

This is not the expected result. Did you make sure not to use a Windows editor if your controller is running on Linux? Can you also confirm which guest control settings you changed?

Sorry for responding late. I have settled the problem the had single quotes instead of double quotes.
Thank you for your response to the earlier query.

@malle-pietje
Copy link
Author

That does make sense, thanks for the feedback.

@Maxwellkurt0407
Copy link

image
Should the settings of the controller be like this?

@Maxwellkurt0407
Copy link

Can this code be used if the unifi controller is being hosted online, cloud?

@vettorazi
Copy link

@malle-pietje Thank you so much for your help! <3

@malle-pietje
Copy link
Author

@malle-pietje Thank you so much for your help! <3

You’re welcome 👍

@CumpsD
Copy link

CumpsD commented Dec 13, 2023

FYI legacy hotspot seems to be completely gone from Network 8.0.24, only the Angular seems to be left

@malle-pietje
Copy link
Author

Yes, that is correct. Here’s a first post on the Ubiquiti community where this topic is discussed:
https://community.ui.com/questions/Guest-portal-customization-html-css-with-the-new-UI-how-to-enable/81565820-50e2-4e6e-8bc6-b7c16877cb9a#answer/df1c3b80-6edd-4f75-a235-912f78afb994

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment