如何建立 WiFi 登入頁面：設計、內容與最佳實踐

如何建立 WiFi 登入頁面：設計、內容與最佳實踐 Purple 技術簡報 — 全程約 10 分鐘 --- 前言與背景介紹 — 1 分鐘 歡迎收看 Purple 技術簡報系列。我是您的主持人，今天我們要探討一個正好處於網路基礎架構、品牌體驗和數據合規性交會點的主題：如何為您的企業建立一個真正發揮功效的 WiFi 登入頁面。 如果您是 IT 經理、網路架構師或場域營運總監，您幾乎肯定被要求過部署訪客 WiFi。而您的行銷團隊最想知道的第一件事就是：訪客連線時會看到什麼？那就是您的登入頁面（Splash Page）— 它遠不只是個登入畫面。如果做得好，它會是一個第一方數據收集引擎、品牌接觸點以及合規機制，三者合而為一。 在接下來的十分鐘內，我們將介紹其架構、設計原則、數據收集策略、GDPR 合規性，以及即使是經驗豐富的團隊也常踩到的常見陷阱。讓我們開始吧。 --- 技術深度解析 — 5 分鐘 那麼，WiFi 登入頁面到底是什麼？從技術術語來說，它是 Captive Portal 所提供的網頁 — 這是一種網路存取控制機制，可攔截 HTTP 流量，並在授予網際網路存取權限之前，將未經驗證的用戶端重新導向至特定 URL。其底層機制通常在閘道器層級使用 DNS 重新導向或 HTTP 302 回應，並結合防火牆規則，在驗證完成之前封鎖除入口網站伺服器以外的所有流量。 從架構的角度來看，您有兩種主要的部署模式。第一種是雲端託管的 Captive Portal，其登入頁面由供應商的基礎架構提供 — Purple 的平台就是一個很好的例子。第二種是本地部署（On-premise），入口網站運行在本地硬體上，通常與您的無線區域網路控制器整合。對於大多數多據點部署（如飯店、連鎖零售店、體育場）而言，雲端託管是正確的選擇。您可以獲得集中式管理、自動更新，而且入口網站的可用性不會依賴單一據點的網際網路連線。如果您想深入了解該決策，Purple 有一份關於雲端與本地 Captive Portal 比較的專題指南，非常值得一讀。 現在，讓我們來談談一個設計良好的登入頁面所包含的元件。有七個不可妥協的要素。 第一：您的品牌識別。標誌、配色方案和字型必須與您更廣泛的品牌保持一致。這不是虛榮 — 這是信任。在飯店或零售店連線的訪客，如果看到未冠名或通用的登入頁面，將會猶豫不決。品牌一致性代表著正統與安全。 第二：身分驗證方式。您有幾種選擇 — 電子郵件與密碼、透過 Google 或 Facebook 等平台的 OAuth 社群登入、SMS 簡訊驗證，或是無需憑證的簡單點擊。每種方式對資料豐富度與使用者阻力的影響都不同。社群登入可為您提供經驗證的電子郵件地址和人口統計資料，但需要 OAuth 整合並涉及隱私考量。收集電子郵件較為簡單，且能為您提供直接的行銷管道。點擊直接連線的阻力最低，但您無法獲得任何資料。對於大多數商業部署而言，收集電子郵件並搭配選用的社群登入是最佳平衡點。 第三：資料收集表單。請保持極簡。對於首次連線，姓名和電子郵件通常就足夠了。您可以隨著時間逐步豐富設定檔。您每增加一個欄位，都會提高流失率 — 而這是一個您應該追蹤的量化指標。 第四：條款與條件以及隱私權政策。這些必須存在、連結清晰，且不能隱藏在微小的字體中。從法律角度來看，使用者在連線前必須主動確認這些條款。 第五：GDPR 同意機制。這是許多部署力有未逮之處。在 GDPR 規範下，行銷傳播的同意必須是自由給予、具體、知情且明確的。這意味著預先勾選的核取方塊並非有效的同意。您需要一個獨立、明確的行銷訂閱選項，與接受服務條款分開。Purple 的平台原生支援此功能，提供可配置的同意欄位，並記錄時間戳記以供審計之用。 第六：行動呼籲（Call to Action）。您的連線按鈕。它應該要很顯眼、位於行動裝置的首屏畫面上方，且標示清晰。「連線至免費 WiFi」的效果優於一般的「提交」按鈕 — 如果您還沒測試過，請測試看看。 第七：連線後的重新導向。使用者驗證後會到達哪個頁面？這是黃金版位。飯店可能會重新導向至包含餐廳預訂和 SPA 優惠的歡迎頁面。零售商可能會重新導向至促銷活動落地頁。會議中心可能會重新導向至活動日程表。千萬不要浪費這個機會。 現在，在技術方面 — 行動裝置響應式設計是必備的。超過百分之七十的訪客 WiFi 連線來自智慧型手機。您的 Splash Page 必須在寬度 320 像素以上的螢幕上正確轉譯。請特別在 iOS Safari 和 Android Chrome 上進行測試，因為它們處理 Captive Portal 網頁檢視的方式與標準瀏覽器不同。尤其是 iOS 使用名為 Captive Network Assistant 的微型瀏覽器，其 JavaScript 支援有限且沒有持續性 Cookie — 因此請避免使用高度依賴 JavaScript 的驗證流程。 安全性方面：往返您 Splash Page 的所有流量都必須透過 HTTPS 並使用有效的 TLS 憑證。這既是安全要求，也是實際需要 — 現代瀏覽器會封鎖 HTTP Captive Portal 或發出警告。請確保您的憑證涵蓋所提供服務的確切網域。 --- 實作建議與常見陷阱 — 2 分鐘 讓我為您提供在實務中行之有效的實作順序。 首先從您的網路基礎架構開始。您的無線區域網路控制器（WLAN Controller）或基地台韌體必須支援 Captive Portal 重新導向。大多數企業級硬體（如 Cisco Meraki、Aruba、Ruckus、Ubiquiti）都原生支援此功能。設定您的 SSID，將未經身分驗證的用戶端重新導向至您的入口網站 URL。在您的防火牆規則中將入口網站網域加入白名單，以便在進行身分驗證之前載入頁面。 接著設定您的入口網站平台。如果您使用的是 Purple，這可以透過管理儀表板來完成：您可以選擇身分驗證方法、設定資料收集欄位、設定同意聲明文字，並使用內建編輯器設計您的 Splash Page。該平台會處理後端作業：工作階段管理、資料儲存、GDPR 記錄和分析。 設計 Splash Page 時，請務必以行動裝置優先（Mobile-first）為考量。從 375 像素的視埠（Viewport）開始設計。每個元素都必須在不進行水平捲動的情況下即可存取。連線按鈕必須在不縮放的情況下即可點擊。 在正式上線前進行徹底測試。至少在三種裝置類型上進行測試：使用 iOS Safari 的 iPhone、使用 Chrome 的 Android 裝置，以及使用 Edge 的 Windows 筆記型電腦。測試完整的身分驗證流程、連線後的重新導向以及資料收集管道。驗證同意記錄是否已正確記錄。 我在部署中看過最常見的陷阱包括： 第一：入口網站網域上的憑證錯誤。如果您在多個子網域中執行入口網站，請務必使用萬用字元（Wildcard）或多網域憑證。 第二：在 iOS 上依賴 JavaScript 的身分驗證。Captive Network Assistant 會無聲無息地失敗。請將您的入口網站邏輯保持在伺服器端。 第三：不合規的同意機制。將接受條款與行銷同意合併為單一核取方塊並不符合 GDPR 規範。請將這些項目分開。 第四：缺乏連線後的重新導向策略。您已經在使用者參與度最高的時刻（即連線瞬間）吸引了他們的注意力。不要將他們重新導向至空白頁面或路由器的預設頁面。 第五：忽略分析。您的入口網站平台應該要將資料匯入儀表板。停留時間、回訪率、尖峰連線時段——這些資料在營運和商業上都極具價值。Purple 的 WiFi Analytics 平台會自動呈現所有這些資訊。 --- 快速問答 — 1 分鐘 好的，以下是幾個我經常被問到的簡短問題。 「如果我只是提供免費 WiFi，我還需要 Splash Page 嗎？」— 技術上來說不需要，但如果沒有它，您就無法收集資料、沒有合規機制，也沒有品牌曝光。您正在流失潛在的價值。 「我可以使用 Splash Page 來提供付費 WiFi 嗎？」— 當然可以。相同的架構支援整合金流閘道，以實現分級存取模式。 「在重新驗證之前，WiFi 工作階段應該持續多久？」— 對於餐旅業，標準是 24 小時。對於零售業，則是 2 到 4 小時。對於活動，則是活動的持續時間。請在您的入口網站設定中進行此配置。 「Splash page 會影響 WiFi 效能嗎？」— 影響微乎其微。Portal 互動在每個工作階段中僅是一次性的 HTTP 交換。使用者通過驗證後，對吞吐量完全沒有影響。 「那 WPA3 和 802.1X 呢 — 這些會取代 Captive Portal 嗎？」— 它們是互補的，而非替代方案。WPA3 和 802.1X 是無線層的驗證協定。Captive Portal 則運作於應用層，並服務於不同的目的：資料收集、同意聲明和品牌互動。 --- 摘要與後續步驟 — 1 分鐘 總結來說：WiFi splash page 是一項策略性資產，而非技術上的事後補救。其架構非常直觀 — Captive Portal 重新導向、雲端託管的 Portal 平台，以及設計良好的驗證頁面。設計原則為行動優先、品牌一致且將阻力降至最低。在 GDPR 規範下，合規要求是不可妥協的：必須取得明確、細緻的同意，並記錄時間戳記。 商業案例顯而易見。每一次的訪客 WiFi 連線都是一個機會，可用於收集經驗證的第一方數據點、傳遞品牌體驗並推動商業成果 — 無論是飯店的追加銷售、零售促銷還是活動參與。 如果您正在評估平台，Purple 的 Guest WiFi 解決方案涵蓋了完整堆疊：Portal 設計、驗證、資料收集、GDPR 合規性以及分析 — 服務全球八萬個場域。這非常值得您參考。 後續步驟：對照我們今天介紹的七個要素，稽核您目前的 splash page。如果您還沒有，請從雲端託管平台和行動優先設計開始。如果您要在多個站點進行部署，請在確定架構之前，先閱讀雲端與地端 Captive Portal 的比較指南。 感謝您的收聽。我們下次見。 --- 腳本結束