HTTPjs – a new API debugging, prototyping and test tool

Today, we released a new API debugging, prototyping and test tool that is available at:

When you arrive at the site, you’ll immediately be delegated a separate sub domain, such as http://f12.http.net. This subdomain is now ready to receive any kind of HTTP requests. At the site, you get a javascript editor window, where you can prototype the server side of the API server.

All requests sent to your new domain, will be processed in your browser with your custom javascript implementation. The web site will display the full HTTP log for you to inspect.

This tool is very useful for rapid development, and testing of API clients. In example, you may select a template OAuth Server implementation to start from, then attempt to return variations, invalid responses and similar to inspect how your client behaves.

The tool was made possible with Node.js, Websockets with Socket.io, Expressjs, requirejs, Grunt, Bower.io, nconf, select2, ace, bootstrap, momentjs, highlightjs.

Announcing online JWT Debugger tool

JSON Web Token (JWT) is a really nice IETF spec for encoding, signing and encrypting a set of claims using JSON. JWT is a standalone spec that is already used several places, but is also an essential part of the emerging OpenID Connect.

Today I’m anonuncing a online JWT debugger tool that allows you to decode and encode JWTs. This tool is part of the Federation Lab test and debugging suite for identity protocols. The Federation Lab also contains testing tools for OpenID Connect and SAML.

This is considered a beta version, and I’ve not quality controlled the output. The tool is also currently limited to the HS256 algoritm, but if people like the tool we may add more algoritms. Please give feedback if the tool does not work as expected or you have feature requests.

OAuth 2.0 with Phonegap + ChildBrowser using the JSO library

Aside

This document is also the README-Phonegap.md of the JSO library.

Using JSO with Phonegap and ChildBrowser

Using JSO to perform OAuth 2.0 authorization in WebApps running on mobile devices in hybrid environment is an important deployment scenario for JSO.

Here is a detailed instruction on setting up JSO with Phonegap for iOS and configure OAuth 2.0 with Google. You may use it with Facebook or other OAuth providers as well.

Preparations

Setup App

To create a new App

./create  /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"

Install ChildBrowser

The original ChildBrowser plugin is available here.

However, it is not compatible with Cordova 2.0. Instead, you may use this fork of ChildBrowser which should be working with Cordova 2.0:

What you need to do is to copy these files:

in to your WebApp project area, by using drag and drop into the Plugins folder in XCode.

Now you need to edit the file found in Resources/Cordova.plist found in your WebApp project area.

In this file you need to add one array entry with ‘*’ into ExternalHosts, and two entries into Plugins:

  • ChildBrowser -> ChildBrowser.js
  • ChildBrowserCommand -> ChildBrowserCommand

as seen on the screenshot.

Setting up your WebApp with ChildBrowser

I’d suggest to test and verify that you get ChildBrowser working before moving on to the OAuth stuff.

In your index.html file try this, and verify using the Simulator.

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript">

    var deviceready = function() {
        if(window.plugins.childBrowser == null) {
            ChildBrowser.install();
        }
        window.plugins.childBrowser.showWebPage("http://google.com");
    };

    document.addEventListener('deviceready', this.deviceready, false);

</script>

Setting up JSO

Download the latest version of JSO:

The documentation on JSO is available there as well.

The callback URL needs to point somewhere, and one approach would be to put a callback HTML page somewhere, it does not really matter where, although a host you trust. And put a pretty blank page there:

<!doctype html>
<html>
    <head>
        <title>OAuth Callback endpoint</title>
        <meta charset="utf-8" />
    </head>
    <body>
        Processing OAuth response...
    </body>
</html>

Now, setup your application index page. Here is a working example:

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jso/jso.js"></script>
<script type="text/javascript">

    var deviceready = function() {

        /*
         * Setup and install the ChildBrowser plugin to Phongap/Cordova.
         */
        if(window.plugins.childBrowser == null) {
            ChildBrowser.install();
        }

        // Use ChildBrowser instead of redirecting the main page.
        jso_registerRedirectHandler(window.plugins.childBrowser.showWebPage);

        /*
         * Register a handler on the childbrowser that detects redirects and
         * lets JSO to detect incomming OAuth responses and deal with the content.
         */
        window.plugins.childBrowser.onLocationChange = function(url){
            url = decodeURIComponent(url);
            console.log("Checking location: " + url);
            jso_checkfortoken('facebook', url, function() {
                console.log("Closing child browser, because a valid response was detected.");
                window.plugins.childBrowser.close();
            });
        };

        /*
         * Configure the OAuth providers to use.
         */
        jso_configure({
            "facebook": {
                client_id: "myclientid",
                redirect_uri: "https://myhost.org/callback.html",
                authorization: "https://www.facebook.com/dialog/oauth",
                presenttoken: "qs"
            }
        });

        // For debugging purposes you can wipe existing cached tokens...
        // jso_wipe();
        jso_dump();

        // Perform the protected OAuth calls.
        $.oajax({
            url: "https://graph.facebook.com/me/home",
            jso_provider: "facebook",
            jso_scopes: ["read_stream"],
            jso_allowia: true,
            dataType: 'json',
            success: function(data) {
                console.log("Response (facebook):");
                console.log(data);
            }
        });

    };

    document.addEventListener('deviceready', this.deviceready, false);

</script>

Web Application Cloud Engine for edu. Teaser: App Store

I’m currently working with a web application cloud engine, and this is a teaser of a very simple application running in the engine, representing a kind of an App Store making use of open APIs.

Soon we’ll present more advanced web application demos making use of distributed and highly available cloud storage, cross-federated authentication, privacy controls, SOA gatekeeper, and a whole lot of sparkling OAuth love and magic. We may run into WebDAV, WebFinger, Contact search, Invitation, group exchange with VOOT, notifications, gadgets and a lot more.

Stay tuned for updates.

Federated OAuth 2.0 SAML VOOT Chat Proof of Concept

Today I’m demoing a proof of concept chat service making use of federated Login and cross-federated group exchange with the VOOT protocol. The chat application is written in Javascript, and is making use of HTML5 WebSockets for Real time communication. The server side is running on Node.js.

The javascript client is using OAuth 2.0 implicit grant with the JSO library we recently released. The user access token is requested with a specific scope for having access to groups. The access token is cahced in localstorage, and send to the chat server during the first registration message. The VOOT provider is done using a new PHP OAuth 2.0 library we have not released yet. It supports using MongoDB and Mysql for storage.

This is only a simple demo of what cross-federated real-time collaboration software can be like. Next step could be adding WebRCT video or audio, file, slide sharing etc.

See also:

OpenID Connect JWT and IDToken proof of concept implementations in javascript

To better understand JWTs and IDTokens I did a proof of concept implementation of JWT and IDtokens in Javascript. I did this 6 months ago, but just realized that I never referred to the work. I’m not sure how useful the work is, because it might be updated due to changes in the spec, and it is not feature complete.

However, if you’re inrested, here it is:

Follow Web Tech related updates on Facebook

You’ll notice a slight change of direction on this blog. From having worked mostly on Identity Providers and Service Providers, and the protocols between them, I’ll be expanding scope to work more generally on Web Technology.

We’re establishing a Web Technology Innovation group at UNINETT, which will slowly approach new areas, and hopefully deliver very interesting results.

We will be working on HTML5, Javascript, Calendaring, Contacts, Authentication, Authorization, OAuth, Mobile, WebApps.

Our vision is to prepare a platform for mordern web application, including easy access to a number of sector specific prepared components (authentication, authorization, discovery, storage, groups).

To stay updated on this, you may in addition to follow this blog, follow our Facebook page:

Using MongoDB for logging

Recently, we’ve tested using MongoDB for a lot of different purposes. This article gives an example of how to log to MongoDB from PHP.

First, a very basic logging class written in PHP:

To do logging from your code, you simply do So_log::debug(message, object);:

You may easily access your logs through the Mongo shell, however it might be convenient to write your own customized tool to tail the logs. Yoy may extend the tools to give more advanced filtering and presentation options.

Here is a very basic tool for tailing the log, written in javascript.

To run the log tailer, run mongo oauth log.js.

The result, will look like this:

Instant File Sharing using HTML5

I’ve done a proof of concept implementation of a File Sharing web application using HTML5 File API and Drag and Drop API.

The coolest part is that people can start downloading the file, even before the upload is completed.

The implementation is a few lines of code in javascript on the front-end, combined with a small script in Node.js on the server side. Enjoy!

And I wish you a happy christmas as well. Thanks for following my blog!