Captive Portal with JavaScript

This guide demonstrates a lightweight example of client side processing using native JavaScript, HTML and CSS. It focuses on the fundamentals of a click-through splash page. This example is easily portable to any static host, such as Apache, Firebase or Github.io, making it highly versatile.

Static HTML/JS/CSS Site for a Click-through Splash Page

To truly demo this, you will need to use this link as the AP custom splash URL. Read on for details.

Source Code   Demo

Overview

Cisco Meraki provides cloud managed WiFi with the ability to host your own “Splash Page”, which is a captive portal service for authenticating users to join the network. This concept is called an External Captive Portal (ExCaP).

Meraki provides two splash page modes, click-through and sign-on. This application will use the click-through method.

To get started just host these files in the public directory on any web server such as Apache or Firebase Hosting and configure your Meraki SSID to use your server.

Since this is just a starter application. It will authenticate the user on the wireless network but you might still need to “do something” with the submitted form data. This splash page simply opens an alert box with the user’s name and email address. In reality, you would modify the JavaScript code to save the form data to a database or send a message to an administrator.

Installation

• Clone or download the project files and then serve the web application.
  • Option 1: NodeJS Server
    • Use the provided NodeJS Express server to host the application.

      git clone https://github.com/dexterlabora/excap-clientjs
      cd excap-clientjs
      npm install
      node server.js

      The server will host the project on http://localhost:5000.

    • Adjust your firewall rules to make the server accessible to the Internet. You can use alternatively use ngrok to quickly share your local computer to the public internet while developing.
      

      ngrok http 5000

      ngrok by @inconshreveable                                       (Ctrl+C to quit)
      
      Session Status                online
      Update                        update available (version 2.2.8, Ctrl-U to update)
      Version                       2.2.4
      Region                        United States (us)
      Web Interface                 http://127.0.0.1:4040
      Forwarding                    http://4a61b919.ngrok.io -> localhost:5000
      Forwarding                    https://4a61b919.ngrok.io -> localhost:5000
      
      Connections                   ttl     opn     rt1     rt5     p50     p90
                                    0       0       0.00    0.00    0.00    0.00

  • Option 2: Static Web Server (Apache, Firebase Hosting)
    • Copy public directory to the www folder or publicly accessible path for your server.
• Configure the Meraki wireless SSID with a Click-Through splash page authentication
  • Meraki Dashboard –> Configure –> Splash Page: Click-through
    
    
• Add the server address and additional resources to the “Walled Garden”
  • Meraki Dashboard –> Configure –> Access Control –> SSID: yourSSID –> Walled Garden.
  • Note: You will need to use the IP address instead of the domain name or contact Meraki Support to enable Walled Garden Domain Names
    
    
• Point the Meraki Splash page “Custom URL” to the HTML file. https://yourserver/ 
  • Meraki Dashboard –> Configure –> Splash Page –> Custom URL: https://yourserver/splash.html
    
    

Sample URL parameter string

The web server will receive several URL queries, which provide session details as well as the base_grant_url, which is used to process the login.

https://yourserver/index.html?base_grant_url=https%3A%2F%2Fn143.network-auth.com%2Fsplash%2Fgrant&user_continue_url=http%3A%2F%2Fask.com%2F&node_id=149624921787028&node_mac=88:15:44:50:0a:94&gateway_id=149624921787028&client_ip=10.110.154.195&client_mac=60:e3:ac:f7:48:08:22

Demo 

This demo uses GitHub.io to serve the splash page. You can point your wireless network to this site for testing and demonstration.

• Update the Custom Splash URL
  • https://dexterlabora.github.io/excap-clientjs/public/index.html
• Update the walled-garden
  • *.github.io
• Connect to your wireless network to test

Quick Test

(with sample parameters, just click the link to see the mechanics in action!)

https://dexterlabora.github.io/excap-clientjs/public/index.html?base_grant_url=https%3A%2F%2Fn143.network-auth.com%2Fsplash%2Fgrant&user_continue_url=http%3A%2F%2Fmeraki.io%2F&node_id=149624922840090&node_mac=88:15:44:60:1c:1a&gateway_id=149624922840090&client_ip=10.255.60.208&client_mac=f4:5c:89:9b:17:67

Resources

Captive Portal API