Installation

npm install passport.socketcluster

How it works

It plugs into the socket handshake process and parses your Express session cookie associated with the request. If the authentication was successful, you will receive a Passport user object that you can store in a SocketCluster socket session or any other store for later use.

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

//worker.js

var session = require('express-session'),
    express = require('express'),
    cookieParser = require('cookie-parser'),
    passport = require('passport'),
    passportSocketCluster = require('passport.socketcluster'),
    RedisStore = require('connect-redis')(session);

module.exports.run = function(worker) {
  var app = express(),
      store = new RedisStore(),
      cookieKey = 'session',
      cookieSecret = 'keyboard cat';

  var server = worker.getHTTPServer(),
      sc = worker.getSCServer();

  server.on('req', app);

  app.use(session({
    name:     cookieKey,
    secret:   cookieSecret,
    store:    store
  }));

  app.use(passport.initialize());
  app.use(passport.session());

  //Handshake authentication
  sc.addMiddleware(sc.MIDDLEWARE_HANDSHAKE, passportSocketCluster.handshake({
    cookieParser:cookieParser, //Cookie parser
    key:         cookieKey, //Express session cookie name
    secret:      cookieSecret, //Express session cookie secret
    store:       store, //User store
    passport:    passport, //Passport reference
    //Callback function. You will get an `err` in case
    //of user authentication failure or a `user` object
    //if a user was authenticated.
    //`next` is a callback function that
    //should be called both in case of failure
    //and success. You should pass and error or
    //no argument in case of sucessfull authentication
    callback: function(err, req, user, next) {
      if (err) {
        return next(err);
      }
      //Save Passport user in the session store for later use
      req.session.set('user', user, next);
    }
  }));
};

You can later retrieve a user object in your socket server code this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

module.exports = function(worker) {
  var sc = worker.getSCServer();

  sc.on('connection', function(socket) {
    var user;
    socket.session.get('user', function(err, value) {
      user = value;
      console.log('User connected: ' + user);
    });

    socket.on('disconnect', function() {
      console.log('User disconnected: ' + user);
    });
  });
};

Setup

npm install passport-oauth2-middleware

Consider the following example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var OAuth2Strategy = require('passport-oauth2'),
OAuth2RefreshTokenStrategy = require('passport-oauth2-middleware').Strategy,
passport = require('passport');

module.exports = function() {
  var refreshStrategy = new OAuth2RefreshTokenStrategy({
    refreshWindow: 10, // Time in seconds to perform a token refresh before it expires
    userProperty: 'ticket', // Active user property name to store OAuth tokens
    authenticationURL: '/login', // URL to redirect unathorized users to
    callbackParameter: 'callback' //URL query parameter name to pass a return URL
  });

  passport.use('main', refreshStrategy);  //Main authorization strategy that authenticates
                                          //user with OAuth access token
                                          //and performs a token refresh if needed

  var oauthStartegy = new OAuth2Strategy({
    authorizationURL: 'https://authserver/oauth2/auth',
    tokenURL: 'https://authserver/oauth2/token',
    clientID: 'clientID',
    clientSecret: 'clientSecret',
    callbackURL: '/oauth/callback',
    passReqToCallback: false //Must be omitted or set to false in order to work with OAuth2RefreshTokenStrategy
  },
    refreshStrategy.getOAuth2StrategyCallback() //Create a callback for OAuth2Strategy
  );

  passport.use('oauth', oauthStartegy); //Strategy to perform regular OAuth2 code grant workflow
  refreshStrategy.useOAuth2Strategy(oauthStartegy); //Register the OAuth strategy
                                                    //to perform OAuth2 refresh token workflow
};

passport-oauth2-middleware can be used alongside with passport-oauth2 strategy. When a request comes in and the main strategy is used, OAuth2RefreshTokenStrategy will check if the active access token is still valid and will try to renew it with an access token if needed. This process is transparent for the OAuth2Strategy and doesn’t require any changes to your code. Access/refresh token pair will then be stored in the Passport.js user session. You can choose to refresh access tokens before they expire by settings the refreshWindow option that indicates number of seconds before a token should be refreshed prior to expiration.

Your Express controllers would look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//GET /oauth
app.get('/oauth', passport.authenticate('oauth'));

//GET /oauth/callback
app.get('/oauth/callback', passport.authenticate('oauth'), function(req, res) {
  res.redirect('/profile');
});

//GET /profile
app.get('/profile',
passport.authenticate('main'), function(req, res) {
 res.render('profile_page');
});

//GET /api/data
app.get('/api/data',
passport.authenticate('main', {
  noredirect: true //Don't redirect a user to the authentication page, just show an error
}), function(req, res) {
  res.render('profile_page');
});

OAuth2 password grant workflow

Another Passport.js OAuth workflow that passport-oauth2-middleware OAuth2RefreshTokenStrategy provides is OAuth2 password grant workflow. It can be used in conjunction with passport-local‘s LocalStrategy to perform username/password authentication against an OAuth2 provider that supports it.

The configuration is similar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var OAuth2Strategy = require('passport-oauth2'),
    LocalStrategy = require('passport-local').Strategy,
    OAuth2RefreshTokenStrategy = require('passport-oauth2-middleware').Strategy,
    passport = require('passport');

module.exports = function(app) {
  var refreshStrategy = new OAuth2RefreshTokenStrategy({
    refreshWindow: 10,
    userProperty: 'ticket',
    authenticationURL: '/login',
    callbackParameter: 'callback'
  });

  passport.use('main', refreshStrategy);

  var oauthStartegy = new OAuth2Strategy({
    authorizationURL: 'https://authserver/oauth2/auth',
    tokenURL: 'https://authserver/oauth2/token',
    clientID: 'clientID',
    clientSecret: 'clientSecret',
    callbackURL: '/oauth/callback',
    passReqToCallback: false
  },
    refreshStrategy.getOAuth2StrategyCallback()
  );

  refreshStrategy.useOAuth2Strategy(oauthStartegy);

  var localStrategy = new LocalStrategy({
    usernameField : 'username',
    passwordField : 'password'
  },
    refreshStrategy.getLocalStrategyCallback() //Create a callback for LocalStrategy
  );

  passport.use('local', localStrategy); //Strategy to perform a username/password login
  refreshStrategy.useLocalStrategy(localStrategy); //Register the LocalStrategy
                                                   //to perform an OAuth 'password' workflow
};

Controllers:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//GET /login
app.get('/login', function(req, res){
 var callback = req.query.callback || '/';

 if (req.isAuthenticated()) {
   return res.redirect(callback);
 }

 res.render('login_page');
});

//POST /login
app.post('/login', function(req, res, next) {
 var callback = req.query.callback || '/profile';

 passport.authenticate('local', function(err, user, info) {
   if (err || !user) {
     res.render('login_page', {
       error: info ? info.message : 'Unable to login.',
       username: req.body.username
     });
     return next();
   }

   req.logIn(user, function(err) {
     if (err) {
       return next(err);
     }

     return res.redirect(callback);
   });
 })(req, res, next);
});

Note that you still need to use OAuth2Strategy in order to make OAuth requests to the authentication endpoint.

For example, when you need to write a JavaScript application that works with the Twitter API, one of the first obstacles that you encounter is storing the API credentials on the client. Exposing OAuth access keys on a web client is a major security flaw. JavaScript does not provide any secure storage option such as DPAPI, so any client-side cryptography that does not involve a server-side processing is as secure as storing the data in plaintext.

Another issue worth mentioning is cross-domain requests. By default, such requests are prohibited due to the same-origin policy. So unless the API you need to use allows cross-domain requests, you need to setup a proxy on your server.

Solution

One of the possible ways to counter those issues is to let the server handle credentials and do the OAuth request signing. This way the client application has no access to OAuth consumer and access token key pairs. This is were the OAuth Reverse proxy comes in handy.

OAuth Reverse proxy is a Node.js Express/Connect middleware for reverse proxying OAuth 1 web services. It signs all incoming requests with an OAuth Authorization header and performs a request proxying to the requested API URL.

Getting Started

npm install oauth-reverse-proxy

A typical middleware configuration looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var app = require('express')();
var when = require('when');

app.use(require('oauth-reverse-proxy').oauth1({
  endpoint: '/api/',
  target: 'https://api.twitter.com/1.1/',
  provider: function(req) {
    return when({
      consumerKey: 'active-consumer-key',
      consumerSecret: 'active-consumer-secret',
      tokenKey: 'active-access-token',
      tokenSecret: 'active-access-token-secret'
    });
  }
}));

The most interesting part here is the provider function. It is invoked for every /api/* request to get the OAuth credentials of the active user. This is where you match a session cookie or any other user authentication data with the user’s OAuth credentials. In case a user is not authenticated, the provider should return null to trigger the HTTP 401 error. To make a unauthorized API request, it needs to return an empty object promise ({})

The proxy trims a request’a URL endpoint part and replaces it with the target API URL. So when you make a GET /api/statuses/user_timeline.json request to your website, the actual API request URL would be /1.1/statuses/user_timeline.json.

By default, all cookies will be removed from the API requests. To keep cookies and to pass them with an API request, you can use the keepCookies option.

Conclusion

I’ve been using this solution in production in two projects for a few months now, so I consider it to be stable. Any comments, bug reports and suggestions are highly appreciated.

Browser Support

The library has the same requirements as the ExternalInterface, which are either ActiveX or NPAPI support, so almost any browser with Flash should be enough. A Flash movie should be embedded with an appropriate allowScriptAccess value for this library to work.

It can be used with any Flex or ActionScript project, including the binding support.

Binaries

Pre-built binaries are available via Bower:

bower install FlashWarp

or can be downloaded from github.

Flash Usage

Include FlashWarp.swc to your project and define the bindings when your application starts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Don't forget to make the binding field bindable to,
//so that it can be used in a binding chain in MXML code
[Bindable] private var binding:IObservable;

private function initializeHandler(event:FlexEvent):void
{
  //Define a procedure named "hello" with a single argument
  //It can be called from JavaScript
  FlashWarp.map("hello", function(text:String):void{
    Alert.show(text, "Message from HTML");
  });

  //Call the "hello" procedure,
  //defined on the JavaScript side of the bridge
  FlashWarp.invoke("hello", [ "Message from Flash" ]);

  //Create a binding named "textfield"
  binding = FlashWarp.binding("textfield");
}

You change a binding value mainually:

binding.value = "Hello World";

or it can be attached to a component:

<s:TextInput text="@{binding.value}" />

JavaScript Usage

Include flashwarp.min.js and define the bindings after your SWF file is embedded into the page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//Get the Flash object by ID
var warp = $FlashWarp("FlashContent");

//Call the "hello" procedure in Flash
warp.invoke("hello", "Message from JavaScript");

//Handle incoming Flash calls
warp.map("hello", function(message) {
  alert("Message from Flash: " + message);
});

//Subscribe for binding changes
warp.binding("textfield").addListener(function (value) {
  alert('Binding value has changed to ' + value);
});

//Binding values can also be updated manually
warp.binding("textfield").setValue("New value");

Performance and Limitations

Marshalling is built on XML, so it can be slow when you need to pass complex object or long arrays. Since all procedure calls, including the binding, are synchronous, it would hang the whole web page.

You can find the list of supported data types in Flash documentation here.

Installing Flash tools

The first thing to do to make your Grunt project Flash-enabled is to install the Flex SDK:

npm install flex-sdk@4.6.0 --save-dev

You can find the complete list of available SDK versions here.

The next thing to do is to install packages that provide wrappers for Flash compilers:

npm install grunt-mxmlc –save-dev
npm install grunt-compc –save-dev

And you are ready to go.

Configuring Grunt

Let’s assume that your Flex project consists of two parts: a library and a Flex app. In this case, your Grunt code for building that application could look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

compc: {
    compc: {
        src: ['lib/src/**/*.as', 'lib/src/**/*.mxml'],
        dest: 'lib/bin/example-lib.swc',
        options: {
            'source-path': ['lib/src/']
        }
    }
},

mxmlc: {
    options: {
        rawConfig: '-library-path+=lib/bin'
    },
    mxmlc: {
        files: {
            'app/bin-release/app.swf': ['app/src/**/*.as', 'app/src/**/*.mxml']
        }
    }
}

You can find the complete example project here.

Benchmarks

Peacekeeper

Peacekeeper is a popular online benchmark that is focused on measuring JavaScript performance. Its tests were built by profiling the code of four popular websites - YouTube, Facebook, GMail and Meebo, and analyzing the most most frequently used JavaScript functions. All tests fall into one of the following 8 categories: rendering, WebGL, HTML5 video, JavaScript web workers, 2D gaming, HTML5 canvas, data manipulation, HTML DOM operations and text parsing.

Aside from the overall score, the Peacekeeper also shows a number of tested HTML5 features that are supported by your browser.

Browsermark 2.0

Browsermark is a web browser benchmark that has a wide range of tests. It does not only measures the JavaScript performance, but it also checks if your browser supports modern HTML and CSS features, as well as popular browser plug-ins such as Flash Player and Silverlight. There are 5 tests categories in total: CSS, DOM manipulations, 2D and 3D graphics, JavaScript performance and general HTML tests.

Fish Bowl

• HTML5 Fish Bowl is one of the Internet Explorer Test Drive tests by Microsoft. It is a simple tests that measures 2D performance of your browser. The result is a number of frames per second that your browser can output for a selected number of animated fish sprites on the screen. Since there is no final score for this test, I measured an average FPS count after a few seconds the test had started.

Software

I’m going to cover only full .NET framework browsers, namely Windows Forms and WPF browsers. Mono implementations, as well as WinRT, are outside of the scope of this article.

.NET 4.5 has two built-in web browser components: System.Windows.Forms.WebBrowser for Windows Forms and System.Windows.Controls.WebBrowser for WPF applications. Both are based on the Internet Explorer that is installed on the user’s machine, so the performance may vary. I’m going to use Internet Explorer 9. It also worth mentioning that by default a WebBrowser component works in a IE7 emulation mode, unless you make some changes to the system registry, so many modern HTML features may not be available.

There are also several 3rd party implementations available on the market. Most of them can be used both in Windows Forms and WPF hosts, so I’m going to tests both versions when available. I have selected the following projects for my research:

• Awesomium v1.7.3.0
• CefGlue v0.4.8
• CefSharp v1.25.5
• Xilium CefGlue v3.1453.1236
• GeckoFx v22.0-0.6

All of them, except for the last one, are based the Chromium web browser. GeckoFx is using Firefox.

The target system is running Windows 7 Professional x86-64 with Service Pack 1 installed. The .NET framework version is 4.5.1. All browsers are tested in fullscreen mode with resolution of 1920x1080 pixels. The complete source code for each browser test is available on github.

Hardware

Most of the tests are directly dependent on CPU performance, but you can rarely find a powerful CPU in kiosks and other similar installations. I’m going to use the same hardware as I previously used in my Android x86 test run:

• ASUS E45M1-M PRO
  • AMD E-450 @ 1650 MHz
  • ATI Radeon HD 6320
• 2x4 GB DDR3 1600 MHz (PC-12800) RAM
• Kingston V100 32 GB SATA II SSD

The system score for hardware is:

• Processor: 3.9
• Memory: 5.9
• Graphics: 4.4
• Gaming graphics: 5.8
• Disk: 5.9

Results

Peacekeeper

As you can see, the default .NET implementation is not the best choice when you need a proper web browser in your app. GeckoFx has the best HTML5 features support, but it lacks speed, probably because it uses XULRunner technology.

Browsermark 2.0

As in the previous benchmark, the built-in WebBrowser component failed all HTML5 tests, which made it impossible for the Browsermark to run.

Surprisingly, Windows Forms hosts showed a little more higher scores in this benchmark than their WPF counterparts. It’s probably due to the fact that WPF renders everything into a buffer before showing on screen. Browsermark is more graphics-oriented benchmark than Peacekeeper, which is why there is almost no difference between Forms and WPF scores in the first batch of results.

Fish Bowl

Once again the WebBrowser component failed to initialize the test page. It’s no surprise, the Fish Bowl test was first introduced as a demo for Internet Explorer 9, which was a huge step forward in terms of web standards support.

You can see an even bigger gap between Windows Forms and WPF results in this test. WPF is definetly a bottleneck when it comes to a raw graphics performance.

Specs

Running Android-x86 4.0-r1 for AMD Brazos platform on the following hardware:

• ASUS E45M1-M PRO
  • AMD E-450 @ 1650 MHz
  • ATI Radeon HD 6320
• 2x4 GB DDR3 1600 MHz (PC-12800) RAM
• Kingston V100 32 GB SATA II SSD
• Dell ST2220T display with 1920x1080 touchscreen (two simultaneous touch points)

Installation

The setup is pretty straightforward.

There were some issues with Wi-Fi, so I had to use a wired ethernet connection.

To enable the Internet, you need to go to console (Alr+F1 to open console, Alt+F7 to close) and run the command:

netcfg eth0 upnetcfg eth0 dhcpsetprop net.dns1 8.8.8.8

Tests

The performance is very good and you can even play games.

Touch input only supports a single point touch. I did not found a way to enable any gestures.

I did run a few browser benchmarks with Google Chrome.

The results are pretty high for a mobile platform.

In summary, this looks pretty promising and it could make a great alternative to Windows Embedded and Webconverger if the driver issues will be addressed.