building a wifi hotspot with nodejs excap...

Building a WiFi Hotspot with NodeJSCisco Meraki – ExCap API

Cory Guynn, Consulting Systems Engineer

DEVNET-2049

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 3DEVNET-2049

Cisco MerakiCloud Managed IT


Captive Portal

Splash

Branding, T&Cs, advertising, survey

Authentication

Process login

Log

Store session and form data


Meraki Splash Page Options

Branding

Survey

T&Cs

Click-through Sign-on

“Splash, agree, have a nice day” “Splash, register/login,

have a nice day”

Branding

RADIUS w/

COA

Logout


Meraki Dashboard


Access Control


Walled Garden


Custom Splash URL


NodeJSBuilding the Webservice

• JavaScript with I/O

• Active developer community

• Rich library with NPM (Node Package Modules)


Install Sample App

Install NodeJS

Install MongoDB

Clone source code

git clone https://github.com/dexterlabora/excap.git

or

git clone https://github.com/dexterlabora/excap-social.git

Install dependencies (while in root of the cloned directory)

npm install

Run application

node app.js

mailto:https://nodejs.org/en/download/

mailto:https://docs.mongodb.com/manual/installation/

https://github.com/dexterlabora/excap.git

https://github.com/dexterlabora/excap-social.git


NodeJS Required Modules

• express

• Web server framework

• express-session

• Store client session data

• mongodb

• No-SQL database

• handlebars

• HTML template framework


Web Services

Express

var express = require('express')

var app = express()

app.get('/', function (req, res) {

res.send('Hello World')

})

app.listen(3000)

“Fast, unopinionated, minimalist web framework”


Web Services

app.use(require('express-session')({

secret: 'supersecret', // this secret is used to encrypt cookie

cookie: {

maxAge: 1000 * 60 * 60 * 24 // 1 day

},

store: store,

resave: true,

saveUninitialized: true

}));

Express-SessionSession data is not saved in the cookie itself, just the session ID.

Session data is stored server-side.


Web Services

var MongoDBStore = require('connect-mongodb-session')(session);

var store = new MongoDBStore({

uri: 'mongodb://localhost:27017/test',

collection: 'excap'

});

MongoDBStore session data into a No-SQL database


Click-through Splash Page


Click-through Network Flow


Click-through Code FlowApp

Web ServicesRoutes

MongoDB

Express[get]

/click

[post]

/login

[get]

/success

Meraki

HTML

success.

hbs

continue_url

/success

HTML

click-

through.hbs

authbase_grant_url


Click-through ExCap APIMeraki Provided Information

• base_grant_url

• https://n143.network-auth.com/splash/grant

• user_continue_url

• node_mac

• client_ip

• client_mac

• ap_name

• ap_tags

https://n143.network-auth.com/splash/grant


Request from Meraki via client

http://app.internetoflego.com:1880/click

?base_grant_url=https%3A%2F%2Fn143.network-auth.com%2Fsplash%2Fgrant

&user_continue_url=http%3A%2F%2Fwww.ask.com%2F

&node_id=149624927555708

&node_mac=88:15:44:a8:10:7c

&gateway_id=149624927555708

&client_ip=10.223.205.118

&client_mac=84:3a:4b:50:e2:3c

http://app.internetoflego.com:1880/excapClick?base_grant_url=https://n143.network-auth.com/splash/grant


/click// serving the static click-through HTML file

app.get('/click', function (req, res) {

// extract parameters (queries) from URL

req.session.host = req.headers.host;

req.session.base_grant_url = req.query.base_grant_url;

req.session.user_continue_url = req.query.user_continue_url;

req.session.node_mac = req.query.node_mac;

req.session.client_ip = req.query.client_ip;

req.session.client_mac = req.query.client_mac;

req.session.splashclick_time = new Date().toString();

// success page options instead of continuing on to intended url

req.session.success_url = 'http://' + req.session.host + "/success";

req.session.continue_url = req.query.user_continue_url;

// display session data for debugging purposes

console.log("Session data at click page = " + util.inspect(req.session, false, null));

// render login page using handlebars template and send in session data

res.render('click-through', req.session);

});


Click-through.hbs{{handlebars}}

<div id="continue">

<h1>IoL Cafe</h1>

<p>Please enjoy our complimentary WiFi and a cup of joe.</p>

<p>

Brought to you by <a href="http://www.internetoflego.com" target="blank">InternetOfLego.com</a>

</p>

<form action="/login" method="post" class="form col-md-12 center-block">

<div class="form-group">

<input class="form-control input-lg" placeholder="Email" type="text" name="form1[email]" required>

</div>


<button class="btn btn-primary btn-lg btn-block">Sign In</button>

<span class="pull-left"><a href="#">Terms and Conditions</a></span>

</div>

</form>

</div>

</div>

<div class="footer">

<p>Your IP: {{client_ip}}</p>

<p>Your MAC: {{client_mac}}</p>

<p>AP MAC: {{node_mac}}</p>

<h3>POWERED BY</h3>

<img class="text-center" src="/img/cisco-meraki-gray.png" style="width:10%; margin:10px;">

</div>


Process Login// handle form submit button and send data to Cisco Meraki - Click-through

app.post('/login', function(req, res){

// save data from HTML form

req.session.form = req.body.form1;

req.session.splashlogin_time = new Date().toString();

// forward request onto Cisco Meraki to grant access

// *** Send user to success page : success_url

res.writeHead(302, {

'Location': req.session.base_grant_url + "? continue_url="+req.session.success_url

});

res.end();

});


Success!Session Log Data

excap-1 Session data at login page = { cookie:

excap-1 { path: '/',

excap-1 _expires: Mon Dec 07 2015 02:11:55 GMT+0000 (UTC),

excap-1 originalMaxAge: 604800000,

excap-1 httpOnly: true,

excap-1 secure: null,

excap-1 domain: null },

excap-1 host: ’127.0.0.1:8181',

excap-1 base_grant_url: 'https://n143.network-auth.com/splash/grant',

excap-1 user_continue_url: 'http://www.google.com/',

excap-1 node_mac: '00:18:0a:13:dd:b0',

excap-1 client_ip: '10.173.154.6',

excap-1 client_mac: 'f8:95:c7:ff:86:27',

excap-1 splashclick_time: 'Mon Nov 30 2015 02:11:54 GMT+0000 (UTC)',

excap-1 _locals: {},

excap-1 form: { email: '[email protected]' },

https://n143.network-auth.com/splash/grant

http://www.google.com/

mailto:'[email protected]


Click-through w/Social Login


Code OverviewClick-through with Social OAuth

App

Web

Services

Routes

MongoDB

Express

[get]

/click

[get]

/auth/google

[get]

/success

Meraki

HTML

success

.hbs continue_url

/success

HTML

click-

through.hbs

auth

[get]

/auth/wifi

passport strategy

Social OAuth

success callback

/auth/wifi

OAuth

base_grant_url


OAuth

“Simple, unobtrusive authentication for Node.js"

Passport is authentication middleware for Node.js. Extremely flexible and modular,

Passport can be unobtrusively dropped in to any Express-based web application. A

comprehensive set of strategies support authentication using a username and

password, Facebook, Twitter, and more.

http://passportjs.org/

Passport


click-through.hbs

<div>

<h3>Login Options</h3>

<a href="/auth/signup" class="btn btn-default"><span class="fa fa-user"></span> Email</a>

<a href="/auth/facebook" class="btn btn-primary"><span class="fa fa-facebook"></span>

Facebook</a>

<a href="/auth/twitter" class="btn btn-info"><span class="fa fa-twitter"></span> Twitter</a>

<a href="/auth/google" class="btn btn-danger"><span class="fa fa-google-plus"></span> Google+</a>

<a href="/auth/linkedin" class="btn btn-info"><span class="fa fa-linkedin"></span> LinkedIn</a>

</div>


/auth/google

// send to google to do the authentication

app.get('/auth/google', passport.authenticate('google'));

// the callback after google has authenticated the user

app.get('/auth/google/callback',

passport.authenticate('google', {

successRedirect : '/auth/wifi',

failureRedirect : '/auth/google'

})

);


Passport Strategy

var GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;

passport.use(new GoogleStrategy({

clientID : configAuth.googleAuth.clientID,

clientSecret : configAuth.googleAuth.clientSecret,

callbackURL : configAuth.googleAuth.callbackURL,

scope : ['profile', 'email'],

passReqToCallback : true

},

function(req, token, refreshToken, profile, done) {

... SNIP ...


Google API


/auth/wifi

// authenticate wireless session with Cisco Meraki

app.get('/auth/wifi', function(req, res){

req.session.splashlogin_time = new Date().toString();

// debug - monitor : display all session data on console

console.log("Session data at login page = " + util.inspect(req.session, false, null));

// *** redirect user to Meraki to process authentication, then send client to success_url

res.writeHead(302, {'Location': req.session.base_grant_url +

"?continue_url="+req.session.success_url});

res.end();

});


Google Login


Sign-on Splash Page


Sign-on Flow


Code OverviewSign-on

App

HTMLWeb ServicesRoutes

Signon.h

bs

MongoDB

Express[get]

/signon

[get]

/success

[get]

/logout

Meraki

RADIUS

HTML

success.hbs

logout.hbs

redirect to

/success


ExCap APISign-on

• login_url

• https://n143.network-auth.com/splash/login?mauth=MMtoqbXZbiYvY2dkMWlEV06tIgp9mo6qkQKKcHG-0Oj4kb2bW0Vu4dLljkScAJRft95MSEA0YFLalbkUQtkt0YuL8jr_aRKOORUrbO8r8Vwq4EyRq9kfpkP2usCJL5qXRX7yrUCWtRyW0ryhTzs3lz6Gi2RVENFDo_vukBWh2Dcvso4AAl-mJJ2c8KaEnFlFCYS-gPn4ZhDA8&continue_url=http%3A%2F%2Fconnectivitycheck.android.com%2Fgenerate_204

• continue_url

• node_mac

• client_ip

• client_mac

• ap_name

• ap_tags

• logout_url

https://n143.network-auth.com/splash/login?mauth=MMtoqbXZbiYvY2dkMWlEV06tIgp9mo6qkQKKcHG-0Oj4kb2bW0Vu4dLljkScAJRft95MSEA0YFLalbkUQtkt0YuL8jr_aRKOORUrbO8r8Vwq4EyRq9kfpkP2usCJL5qXRX7yrUCWtRyW0ryhTzs3lz6Gi2RVENFDo_vukBWh2Dcvso4AAl-mJJ2c8KaEnFlFCYS-gPn4ZhDA8&continue_url=http://connectivitycheck.android.com/generate_204


/signon

app.get('/signon', function (req, res) {



req.session.login_url = req.query.login_url;

req.session.continue_url = req.query.continue_url;

req.session.ap_name = req.query.ap_name;

req.session.ap_tags = req.query.ap_tags;

req.session.client_ip = req.query.client_ip;

req.session.client_mac = req.query.client_mac;

req.session.success_url = req.protocol + "://" + req.session.host + "/success"; req.session.signon_time =

new Date();

// render login page using handlebars template and send in session data

res.render('sign-on', req.session);

});


sign-on.hbs{{handlebars}}

<form action={{login_url}} method="post" class="form col-md-12 center-block">

<input type="hidden" name="success_url" value={{success_url}} />


<div class="error">

{{recent_error}}

</div>

<input class="form-control input-lg" type="text" name="username" placeholder="Username or email">

<i class="icon-user icon-large"></i>

</div>


<input class="form-control input-lg" type="password" name="password" placeholder="Password">

<i class="icon-lock icon-large"></i>

</div>


<button class="btn btn-primary btn-lg btn-block">Sign In</button>

<span class="pull-left"><a href="#">Terms and Conditions</a></span>

... snip …

<div class="footer">

<p>Client IP: {{client_ip}}</p>

<p>Client MAC: {{client_mac}}</p>

<p>AP Tags: {{ap_tags}}</p>

<p>AP Name: {{ap_name}}</p>

<p>AP MAC: {{node_mac}}</p>


/success

app.get('/success', function (req, res) {



req.session.logout_url = req.query.logout_url + "&continue_url=" +

req.protocol + "://" + req.session.host + "/logout";

req.session.success_time = new Date();

// render sucess page using handlebars template and send in session data

res.render('success', req.session);

});


Success!


/logout

app.get('/logout', function (req, res) {

// determine session duration

req.session.loggedout_time = new Date();

req.session.duration = {};

req.session.duration.ms = Math.abs(req.session.loggedout_time - req.session.success_time) ;

req.session.duration.sec = Math.floor((req.session.duration.ms/1000) % 60);

req.session.duration.min = (req.session.duration.ms/1000/60) << 0;



req.session.logout_url = req.query.logout_url + "&continue_url=" + req.protocol + "://" + req.session.host +

"/logged-out";

// render sucess page using handlebars template and send in session data

res.render('logged-out', req.session);

});


Logged Out


Resources

Meraki Developers Portal

http://developers.meraki.com/

Cory Guynn

Twitter: @eedionysus

Email: [email protected]

http://developers.meraki.com/


Resources

• Captive Portal Solution Guide• https://meraki.cisco.com/lib/pdf/meraki_whitepaper_captive_portal.pdf

• Write-ups and source code• ExCap

• http://www.internetoflego.com/wifi-hotspot-cisco-meraki-excap-nodejs/• https://github.com/dexterlabora/excap

• Node-RED version• http://flows.nodered.org/flow/e80275ccd499c2edaf43

• ExCap-Social• http://www.internetoflego.com/wifi-hotspot-with-social-oauth-passport-mongodb/• https://github.com/dexterlabora/excap-social

https://meraki.cisco.com/lib/pdf/meraki_whitepaper_captive_portal.pdf

http://www.internetoflego.com/wifi-hotspot-cisco-meraki-excap-nodejs/

https://github.com/dexterlabora/excap

http://flows.nodered.org/flow/e80275ccd499c2edaf43

http://www.internetoflego.com/wifi-hotspot-with-social-oauth-passport-mongodb/

https://github.com/dexterlabora/excap-social


Install Sample App

Install NodeJS

Install MongoDB

Clone source code

git clone https://github.com/dexterlabora/excap.git

or

git clone https://github.com/dexterlabora/excap-social.git

Install dependencies (while in root of the cloned directory)

npm install

Run application

node app.js

mailto:https://nodejs.org/en/download/

mailto:https://docs.mongodb.com/manual/installation/

https://github.com/dexterlabora/excap.git

https://github.com/dexterlabora/excap-social.git


logged-out.hbs

<h1>Logged Out!</h1>

<p>

Total session duration: {{duration.min}} minutes

{{duration.sec}} seconds

</p>

</div>

</div>

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public

Complete Your Online Session Evaluation

Don’t forget: Cisco Live sessions will be available for viewing on-demand after the event at CiscoLive.com/Online

• Give us your feedback to be entered into a Daily Survey Drawing. A daily winner will receive a $750 Amazon gift card.

• Complete your session surveys through the Cisco Live mobile app or from the Session Catalog on CiscoLive.com/us.

50DEVNET-2049

CiscoLive.com/Online

http://ciscolive.com/Online

http://ciscolive.com/Online

http://ciscolive.com/us

http://ciscolive.com/us

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public

Continue Your Education

• Demos in the Cisco campus

• Walk-in Self-Paced Labs

• Lunch & Learn

• Meet the Engineer 1:1 meetings

• Related sessions

51DEVNET-2049

Thank you

building a wifi hotspot with nodejs excap...

Documents