UniFi - Hotspot 포탈 커스터마이제이션¶

Overview

이 문서는 UniFi Hotspot 포탈을 커스터마이징 하는 방법에 대하여 서술합니다.

다른 게스트 포탈이 디스크 공간 제한, 고정된 디렉토리 구조 등의 제한이 존재하지만, UniFi는 html을 사용하여 제한 없는 포탈 커스터마이징을 허용합니다.

전체 포탈 디렉토리는 수정 가능합니다. 파일을 저장하고 게스트 브라우저에서 변경내역도 즉시 확인가능합니다.

게다가, 여러개의 hotspot 패키지를 설치할 수 있습니다. 각기 다른 결제, 이름, 사용기간, 대역폭 제한 등 패키지 설치가 가능합니다.

이 문서에서는 가장 일반적으로 사용하는 방법에 대하여 서술합니다.

Setup

1. Settings->Guest Control 에서 Guest Portal Portal Customization를 활성화 합니다.
2. 'Apply.' 클릭. 포탈 페이지는 <unifi_base>/data/portal (v2.x) <unifi_base>/data/sites/sitename/portal (v3.x) 에 복사됩니다.
3. 다른 PC로 게스트 네트워크에 연결하여 아무 웹사이트로 이동합니다.
4. 기본 포탈 페이지로 연결되는 것을 확인합니다.
5. 페이지를 수정하고 다시 로딩해서 변경내역을 확인합니다.

샘플 포탈

샘플 포탈은 가장 간단한 포맷으로 대부분의 기능을 확인할 수 있습니다.

# 디렉토리구조
index.html    : 메인 페이지
bundle/messages.properties: 로컬라이제이션, hotspot 패키지 기술
payment.html  : 결제 정보, https 요청 등 html 페이지의 추가 기능 서술
fail.html     : 게스트 로그인 에러 핸들링 페이지

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

Notes:

1. 모든 html 페이지는 렌더링 엔진의 입력으로 제공되어 폼의 POST 액션의 대상이 될 수 있습니다.
2. 추가로 요구되거나 필요한 파일은 없습니다.
3. 포탈을 수정한 이후, https://[IP of the controller]:8843/guest/s/default/에 접근하여 수정 내역을 확인할 수 있습니다.

다음 시나리오를 확인하여 추가 기능을 확인합니다.

Scenarios

수정한 내역이 동작하는지 확인하는 방법

1. On controller: 게스트 포탈을 활성화 하고, No Authentication을 선택합니다.

2. index.html 수정: find

   "<h2>Terms of Use</h2>"
   

   을 다음으로 교체합니다.

   "<h2>Welcome to Joe's Guest Portal!</h2>"
   

3. 다른 장치에서 게스트 무선 네트워크에 연결하고 아무 URL로 접근하여 변경내역을 확인합니다.

커스터마이징 한 포탈에서 약관등을 출력하기

On controller: 게스트 포탈을 활성화 하고, No Authentication을 선택합니다.

1. index.html의 맨 아래부분을 확인하여 ToU 가 알맞게 수정되었는지 확인합니다.
2. 폼 POST에서 /guest/login 으로 이동하도록 하여 게스트네트워크로의 사용자 접근을 허가하도록 해야합니다.
3. 샘플 페이지는 사용자에게 이용 약관 (Terms of Use, ToU)를 동의하도록 해야합니다.

간단한 패스워드 인증 활성화 하기

On controller: 게스트 포탈을 활성화 하고, Simple Paasword을 선택합니다.

1. 다음 태그를 검색합니다 <unifi if="auth_password"> ... </unifi>
2. 폼 POST에 "password" 필드를 요청하도록 합니다.
3. index.html 페이지에서 "page_error"는 에러 페이지를 렌더링합니다.
4. <unifi if="has_error"> 섹션을 확인하여 로컬라이즈 에러(<unifi error="error" />)인지 타이틀이 <unifi txt="PasswordRequiredForWirelessAccess" /> 로 변경되는지 확인합니다.

UniFi 컨트롤러와 Paypal Pro, Standard 계정과 통합하기

UniFi and PayPal Integration 문서를 참조하여 UniFi hotspot과 paypal을 통합하는 방법에 대하여 확인하십시오.

Voucher Customization

현재 바우처 커스터마이제이션은 아직 구현되어 있지 않지만, webapps/ROOT/pages/voucher.jsp 수정을 할 수 있습니다.

Note: 컨트롤러 업그레이드/재인스톨 시 파일이 백업 되었는지 확인하십시오.

JSP 코드는 HTML과 비슷하지만, 수정이 가능합니다. 현재 구현은 4개의 바우처당 1개 행으로 포매팅하도록 합니다.

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

다른 방식은 API를 사용해서 바우처를 생성하는 방식입니다. 일반적으로 상새정보를 JSON으로 입력 받으며, 커스텀 포매팅과 출력을 위해서도 JSON을 사용합니다.

Portal page syntax and variables

일부 UniFi 태그는 아래와 같습니다.

몇몇 변수는 <unifi var="varnames" /> 태그를 사용하여 HTML 페이지를 렌더링 할 때 사용 할 수 있습니다:

<unifi var="name" />

• 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

다른 HTML 페이지에 포함하려면 다음과 같이 사용합니다:

<unifi include="header.html" />

간단한 if/then/else 로직을 사용하기 위해서는 다음과 같이 <unifi if="!name" eq="value" > ... </unifi> 를 사용합니다.

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

텍스트 현지화 또는 bundle/messages.properties를 확인하기 위해서는 다음을 사용합니다:

<unifi txt="InvalidPassword" />

URL을 생성하기 위해서는 다음과 같이 사용합니다:

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

Guest parameters

연산자는 URL "/guest/login" 의 파라미터를 정의하여 사용자가 POST로 인증을 수행할 수 있습니다:

• by: type of authentication (for hotspot): voucher | credit | paypal
• package: package id (for hotspot)
• voucher: voucher code (for hotspot/voucher)
• cc_xxxxx: credit card information (for hotspot/credit):
• landing_url: use a dynamic landing URL (which can be constructed by using vars)
• page_error: relative URI when error occurs (fail.html is the default)

Note: 신용카드 관련 필드는 다음과 같습니다 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

Package definitions

사용자는 디렉토리의 패키지 정의를 다음과 같이 정의할 수 있습니다:

"bundle/messages.properties:package definitions"

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