PEA - personalización portal Hotspot

Resumen


Los lectores aprenderán a personalizar el portal de punto de acceso UniFi incorporado.

A diferencia de otras implementaciones portal de huésped que tienen limitaciones de espacio de disco, directorio fija estructuras y todo tipo de restricciones, UniFi permite casi ilimitada personalización portal usando html simple.

Todo el directorio de portal está abierto para su modificación. Al instante puede comprobar como vas por guardar el archivo y volver a cargar la página desde el navegador del cliente para revisar los cambios.

Además, puede crear varios paquetes de hotspot - cada uno con diferente pago, nombre, duración del uso, límite de ancho de banda.

Este artículo le dará una visión general de algunas de las variables más comunes.

Configuración


  1. En configuración-> Control de huésped, habilitar Portal de huésped y personalización del Portal.
  2. Golpe a 'Aplicar'. Una copia de las páginas del portal será copiada en <unifi_base> / datos/portal (v2.x) o <unifi_base> / / sitios/sitename/portal de datos (v3.x)
  3. Utilizar otro PC para conectarse a la red huésped y y use el navegador para desplazarse a cualquier sitio Web.
  4. Se le dirigirá a la página por defecto del portal.
  5. Modificar la página (s) (por ejemplo, la <title>) y volver a cargar el navegador en el cliente para ver los cambios.

<unifi_base> se encuentra en los siguientes directorios:

  • Mac:/Applications/UniFi.app/Contents/Resources
  • Windows: "%userprofile% / Ubiquiti Unifi"
  • Linux: / usr/lib/unifi

Portal de la muestra
el portal de la muestra, mientras que es útil por sí mismo, está escrito de una manera que demuestra la mayoría de características en el formato más simple.

# directory structure
index.html    : the main landing page
bundle/messages.properties: for localization and hotspot package specification
payment.html  : for credit card information submission. requires https, also served as an example of additional .html page
fail.html     : default page when there's error handling guest login

supporting files: 
images/
js/
reset-min.css
styles.css

Notas:

  1. Todas las páginas .html pasan por el motor de renderizado y pueden ser un objetivo de acción POST del formulario.
  2. Ninguno de los archivos auxiliares se necesitan y puede rodar su propio.
  3. Después de modificar el portal, se pueden ver las modificaciones apunta tu navegador a https://[IP del controlador]: 8843/invitado/s/default /.

Para explicar más lejos, vamos a ir a través de algunos escenarios. 

Escenarios


¿Puedo simplemente modificar algo y ver si funciona? ¡ Sí!

  1. Controlador: habilita Portal de huésped, seleccione autenticación No
  2. Modificar index.html: encontrar
    "<h2>Terms of Use</h2>"
    y cambiarlo a
    "<h2>Welcome to Joe's Guest Portal!</h2>"
  3. Utilice otro dispositivo conectado a la red inalámbrica del huésped y abrir el navegador a cualquier URL para ver los cambios.


¿Cómo muestro una página condiciones de uso del portal personalizado?

Controlador: habilitar Portal de huésped y seleccione sin autenticación.

  1. Revisión de la parte inferior del index.html. Ajustar el ToU como mejor parezca.
  2. Todo lo que se requiere es que la forma POST /guest/login para autorizar al usuario acceder a la red huésped.
  3. La página de muestra requiere el usuario aceptar términos de uso deshabilitando el botón Enviar si no comprueban la "Acepto los términos de uso".


¿Cómo habilito autenticación de contraseña simple?

Controlador: habilita Portal de huésped, seleccione contraseña Simple.

  1. Encuentre la sección encerrada por <unifi if="auth_password">... </unifi>
  2. Requiere la forma POST ("contraseña")
  3. La oculta "page_error" indica qué página representará el error, en la muestra, index.html
  4. Que nos lleva a mirar la sección de <unifi if="has_error"> donde el error sea localizado <unifi error="error" /> o un título Bienvenido <unifi txt="PasswordRequiredForWirelessAccess" /> se mostrará.


¿Cómo integrar controlador de PEA con Paypal Pro o cuentas estándar?

Hemos recopilado ejemplos paso a paso que muestran cómo UniFi hotspot puede ser integrado con cuentas PayPal y PayPal Pro.  PEA y la integración de PayPal

 

Personalización de vale


Actualmente, la personalización de vale no está implementada todavía. Sin embargo, usted puede tratar de modificar webapps/ROOT/pages/voucher.jsp

Nota: Asegúrese de que este archivo está respaldada en algún lugar como será aniquilada durante el controlador actualizar/reinstalar.

El código JSP es similar a HTML y modificable. La implementación actual imprime 4 vales por fila con el formato mínimo.

<td>
    <p class="valid">Valid for <%=valid%></p>
    <p class="code"><%=code%></p>
</td>

Otro enfoque es utilizar la API para crear vales, y naturalmente tendrás los detalles del vale en JSON para-formato e impresión personalizada (por ejemplo, enviarlo a una impresora de recibos). 

Variables y sintaxis de la página del portal


Continuación se enumeran algunas etiquetas de PEA.

Algunos vars están pobladas donde puede usar <unifi var="varnames" /> para representar la página HTML:

<unifi var="name" />
  • auth: ninguno | contraseña | punto de acceso
  • auth_none: falso | true
  • auth_password: falso | true
  • auth_hotspot: falso | true
  • voucher_enabled: falso | true
  • payment_enabled: falso | true
  • paquete: el identificador de paquete (por POST o GET)
  • Mac: dirección MAC del cliente
  • ap_mac: dirección MAC del AP
  • ap_name: nombre de AP
  • nombre_tabla: Ubicación del AP (nombre del mapa)
  • SSID: el SSID de la red inalámbrica
  • error: mensaje de error
  • has_error: falso | true

Para incluir otra página HTML, utilice:

<unifi include="header.html" />

Para utilizar simple if/then/else de lógica para determinar si una sección de la página debe mostrar uso <unifi if="!name" eq="value">... </unifi></unifi>

<unifi include="header.html" /><unifi if="name" eq="value"> ... <unifi else="var" /> ... </unifi>

Para la localización de texto o ver a bundle/messages.properties, utilice:

<unifi txt="InvalidPassword" />

Para generar la URL (y posiblemente cambiar a HTTPs) relativamente, utilice:

<unifi url="payment.html" https="true" />

Parámetros de la huésped


Los operadores pueden definir parámetros en la URL "/ guest login" donde los usuarios publicaremos para ser autorizado:

  • por: tipo de autenticación (por punto): vale | crédito | Paypal
  • paquete: paquete id (hotspot)
  • vale: bono código (punto de acceso/bono)
  • cc_xxxxx: información de la tarjeta de crédito (para hotspot/crédito):
  • landing_url: usar una URL dinámica aterrizaje (que se puede construir mediante el uso de vars)
  • Page_Error: URI relativo cuando se produce el error (fail.html es el valor por defecto)

Nota: tarjeta de crédito relacionadas con los campos incluyen cc_firstname, cc_lastname, cc_number, cc_year, cc_month, cc_ccv2 cc_addr1, cc_addr2, cc_city, cc_state, cc_zip, cc_country, cc_email

Definiciones de paquete


Los usuarios pueden definir definiciones de paquete en el directorio:

"definiciones bundle/messages.Properties:package"

## package 1
# amount is in US dollars
package.1.amount=5.99
# default currency is USD
package.1.currency=USD
package.1.hours=8
# what's shown in the Hotspot Manager
package.1.name=Basic 8HR
# what's shown on the credit card statement
package.1.charged_as=Hotspot 8-hour WiFi

## package 2
package.2.amount=8.99
package.2.hours=24
package.2.name=Premium Daypass
package.2.charged_as=Hotspot 1-day WiFi

## package 3
# this is a free trial package (with amount 0)
package.3.amount=0
package.3.hours=2
package.3.name=Free Trial
# whether to overwrite the user group policy per WLAN/User, default is false
# only available in release-2.1.0
package.3.limit_overwrite=true
# kbps, default is unlimited
package.3.limit_down=4096
# kbps, default is unlimited
package.3.limit_up=1024
# Mbytes, default is unlimited
package.3.limit_quota=1024
Tecnología de Zendesk