UniFi - portal personalização Hotspot

Visão geral


Os leitores aprenderão como personalizar o portal de hotspot UniFi built-in.

Ao contrário de outras implementações portal comentários que têm limitações de espaço de disco, estruturas de diretório fixo e todos os tipos de restrições, UniFi permite a personalização de portal quase ilimitada usando html simples.

O diretório inteiro portal está aberto para suas modificações. Instantaneamente, você pode testar como você vai salvando o arquivo e recarregar a página do navegador do convidado para revisar as alterações.

Além disso, você pode criar vários pacotes de hotspot - cada um com diferente pagamento, nome, duração de utilização, limite de largura de banda.

Este artigo dar-se-á uma visão geral de algumas das variáveis mais comuns.

Instalação


  1. Em configurações de-> controle de comentários, permitem comentários Portal e personalização do Portal.
  2. Bater 'Aplicar'. Uma cópia das páginas da portal será copiada para <unifi_base> / dados/portal (v2. x) ou <unifi_base> / dados/sites/NomeDoSite/portal (v3. x)
  3. Usar outro PC para se conectar à rede de comentários e e usar o navegador para navegar para qualquer site.
  4. Você será direcionado para a página padrão do portal.
  5. Modificar a página (s) (por exemplo, o <title>) e visualizar suas alterações ao recarregar o navegador no cliente.

<unifi_base> situa-se nos seguintes diretórios:

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

Portal da amostra
o portal da amostra, enquanto útil por si só, é escrito de forma que ele demonstra a maioria dos recursos no formato mais simples.

# 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 as páginas. html ir através do motor de renderização e podem ser um alvo da ação de POST do formulário.
  2. Nenhum dos arquivos de suporte são necessárias e você pode rolar seus próprios.
  3. Depois de modificar o portal, você pode ver as modificações por apontar seu navegador para https://[IP do controlador]: 8843/comentários/s/padrão /.

Para explicar melhor, vamos analisar alguns cenários. 

Cenários de


Posso modificar algo e ver se funciona? Sim!

  1. Controlador: habilitar comentários Portal, selecione sem autenticação
  2. Modificar o index. html: encontrar
    "<h2>Terms of Use</h2>"
    e alterá-lo para
    "<h2>Welcome to Joe's Guest Portal!</h2>"
  3. Use outro dispositivo conectado à rede sem fio comentários e abrir o navegador para qualquer URL para ver as alterações.


Como posso mostrar uma página de termos de uso com o portal personalizado?

Controlador: habilitar comentários Portal e selecione sem autenticação.

  1. Rever a parte inferior da index. html. Ajuste o ToU como você vê o ajuste.
  2. Tudo que é exigido é que a forma POST para /guest/login para autorizar o usuário acesso à rede de comentários.
  3. A página de exemplo exige que o usuário aceitar os termos de uso, desativando o botão enviar se não verificam o "Eu aceito os termos de uso".


Como faço para habilitar a autenticação de senha simples?

Controlador: habilitar comentários Portal, selecione senha simples.

  1. Localize a seção delimitada por <unifi if="auth_password">... </unifi>
  2. Requer que o formulário POST ("senha")
  3. O page_error"oculto" indica qual página processará o erro, na amostra, index. html
  4. Isso nos leva a olhar para a seção de <unifi if="has_error"> onde o erro localizado <unifi error="error" /> ou um título bem vindo <unifi txt="PasswordRequiredForWirelessAccess" /> será exibido.


Como faço para integrar UniFi controlador com contas Standard ou Paypal Pro?

Nós compilamos exemplos passo a passo que demonstram como UniFi hotspot pode ser integrado com contas PayPal e o PayPal Pro.  UniFi e integração PayPal

 

Personalização de voucher


Atualmente a personalização de voucher ainda não foi implementada. No entanto, você pode tentar modificar webapps/ROOT/pages/voucher.jsp

Nota: Certifique-se que este arquivo é apoiado em algum lugar que vão ser massacrado durante atualização/reinstalar o controlador.

O código JSP é tipo HTML e modificável. A implementação atual imprime 4 vales por linha com formatação mínima.

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

Outra abordagem é usar a API para criar comprovantes, e naturalmente você terá os detalhes do voucher em JSON para personalizado formatação/impressão (por exemplo, enviá-lo para uma impressora de recibos). 

Variáveis e sintaxe de página do portal


Algumas tags UniFi estão listados abaixo.

Alguns vars são populadas onde você pode usar <unifi var="varnames" /> para torná-lo na página HTML:

<unifi var="name" />
  • auth: nenhuma | senha | ponto de acesso
  • auth_none: falso | true
  • AUTH_PASSWORD: falso | true
  • auth_hotspot: falso | true
  • voucher_enabled: falso | true
  • payment_enabled: falso | true
  • pacote: a identificação do pacote (do POST ou GET)
  • Mac: endereço de MAC do convidado
  • ap_mac: endereço de MAC do AP
  • ap_name: nome do AP
  • map_name: localização do AP (nome do mapa)
  • SSID: o SSID da rede sem fio
  • erro: mensagem de erro
  • has_error: falso | true

Para incluir outra página HTML, use:

<unifi include="header.html" />

Para usar o simples se/então/else lógica para determinar se uma seção da página deve ser mostrada uso <unifi if="!name" eq="value">... </unifi></unifi>

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

Para localização de texto ou para ver bundle/messages.properties, use:

<unifi txt="InvalidPassword" />

Para gerar a URL (e eventualmente alterá-lo para HTTPs) relativamente, use:

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

Parâmetros de comentários


Os operadores podem definir parâmetros sob o URL "/ comentários/login" onde os usuários postar para ser autorizada:

  • por: tipo de autenticação (para hotspot): voucher | crédito | Paypal
  • pacote: pacote id (hotspot)
  • voucher: comprovante de código (de ponto de acesso/voucher)
  • cc_xxxxx: informações de cartão de crédito (para crédito/ponto de acesso):
  • landing_url: use um URL dinâmico de pouso (que pode ser construído usando vars)
  • Page_Error: URI relativo quando ocorre erro (fail.html é o padrão)

Nota: o cartão de crédito relacionado campos incluem 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

Definições de pacote


Os usuários podem definir as definições de pacote sob o diretório:

"Bundle/messages.Properties:Package definições"

## 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