Meraki Captive Portal

w/ Firebase Hosting and Database

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

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.

Sample URL received from Meraki to this page.

You can use this URL to test your application without an access point

http://YourAppName.firebaseapp.com/?base_grant_url=https%3A%2F%2Fn143.network-auth.com%2Fsplash%2Fgrant&user_continue_url=http%3A%2F%2Fspeedof.me%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

Installation

Clone this repo and change into the directory

$ git clone https://github.com/dexterlabora/MerakiCaptivePortal-firebaseDB.git

Update your Firebase Config settings in ./js/MerakiFirebase.js. This information is found in your Google Firebase Console.

// Initialize Firebase -- UPDATE THIS
var config = {
    apiKey: "YourAPIKey",
    authDomain: "YourAppName.firebaseapp.com",
    databaseURL: "https://YourAppName.firebaseio.com",
    projectId: "YourProjectID",
    storageBucket: "YourAppName.appspot.com",
    messagingSenderId: "YourSenderId"
};

Install and configure Google Firebase Hosting

NodeJS must be installed for the npm command to work

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server
$ firebase deploy  # Push changes to Firebase Hosting

Configure the Meraki wireless SSID with a Click-Through splash page authentication
- Meraki Dashboard --> Configure --> Splash Page: Click-through
Add the domain address of the webserver 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 "Customer URL" to the HTML file. https://yourserver/
- Meraki Dashboard --> Configure --> Splash Page --> Custom URL: https://yourserver.com/index.html

Sample URL paramater string

https://yourserver/splash.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

Screenshot

Additional Resources

http://developers.meraki.com/tagged/Splash-Pages

Written by

Cory Guynn 2017 www.InternetOfLEGO.com

LICENSE

Apache 2.0 (see LICENSE and NOTICE).