Thursday, April 19, 2012

Wakanda & JanRain - oAuth Social Network Authentication made easy


Wakanda and Janrain:  

Wakanda is web / desktop / mobile application development environment.

Janran empowers businesses to connect with their customers in meaningful ways.

Purpose of this blog:

Demonstrate with a sample app how to integrate Wakanda and Janrain specifically to support authentication  of users with multiple social networks and integrate with the Wakanda security system.    


Wakanda is made of 3 specific tools:

  • Wakanda Studio
    • A visual designer for your datastore and front end, as well as code editor. 
  • Wakanda Server
    • A super-rapid datastore and HTTP server, it's a home for all your app's business logic.
  • Wakanda Framework
    • Widgets and the fast, standards-based datasources that feed them.
Janrain consists of multiple products but for this demo I am only looking at one, Engage.

Basic Janrain workflow

  1. The user cames to the Wakanda website and clicks "Sign-in"
  2. A Janrain provided javascript displays a panel of social networks that the user selects one from.
  3. The user interacts with the social networks and authenticates
  4. User data is extracted by Engage
  5. Wakanda app retreives data from Engage 
  6. Optional display data to registration form
  7. Optional retreive updated data
  8. Store data to Wakanda db

Wakanda - Janrain hybrid approach

I will be creating a Users table to add the authenticated users.  It will contain where they came from (Google, PayPal, Yahoo, Twitter,etc) and update the Users table.  For each user that is in that Users table, a unique entry will be made in the Directory.addUser() with a common password. Since login via Wakanda is not surfaced, there is no problem having a password (that I know of) common in the database.  Wakanda is not doing the authentication, Janrain Engage is via the Social Networks.  Wakanda will be controlloing the Authorization.  The tables will be secured that only Users can perform the CRUD actions.

Setting up Janrain - 3 steps

Follow the steps described here.  You'll basically:
  1. Signup - there's a reasonable free account of up to 2500 users
  2. Configure the widget - what Social Networks do you want to use.  Note that not all networks provide the email - see 
  3. Get the code - a standard javascript boilerplate code will be provided.  You'll see that in the Wakanda application in the index.html file.
  4. Call the API - once the user has completed interacting w/ Janrain, you have to make API calls in Javascript to retrieve email and other information about the authenticated user.  You'll see this in the demo here too.
The Tutorial / Demo Instructions
There are only a few steps to do w/in Wakanda:
  1. Copy the javascript from janrain to the index.html source.  Be sure to include directly before the </head>
    1. Update the TOKEN field to a URL to be posted back to
    2. You'll notice that mine has a full URL - that's because Janrain needs to post to it.  My workstation is behind a firewall and on a wireless.  I use DNS2GO to expose my workstation to the web.
  2. Copy the href code snippet from janrain to somewhere in the body.
  3. Create source folder called "scripts".
    1. Add a file called bootstrap.js
    2. Use the context menu to set the Role as Bootstrap
    3. Add a file called required.js - refer to demo source 
  4. Create the allusers.html GRID
Run application and Enjoy


  1. Great post. These instructions would work for the most part for implementing social login too.

    Thanks again

  2. Very good work, you have done !!

    Laurent Ribardiere

  3. in the janrain you have to go to application settings and UNTICK the POST option.
    You cant get POST from javascript, it needs to be a get.

    near drove me nuts. lol.