#janrain

The Landscape of #Social #Login: #Facebook bounced back after six quarters [Q2 2014] | #FedericoFrancioni.com

This quarter’s highlights:

Facebook bounced back after six straight quarters of falling market share. The social networking giant posted a healthy 1.5% gain of social logins.

Facebook overtook Google and LinkedIn as the most popular choice on B2B sites, reclaiming a lead it lost in Q1 2014 after holding it throughout 2012 and 2013. It also extended its lead on media and retail sites.

Google is a…

I wanted to reach out personally to let you know that we have made the decision to end of life the myOpenID service. myOpenID will be turned off on February 1, 2014.

So beginnt die E-Mail von Janrain CEO Larry Drebes an die Nutzer des von Janrain betriebenen OpenID Providers myOpenID. Weiter schreibt Drebes:

By 2009 it had become obvious that the vast majority of consumers would prefer to utilize an existing identity from a recognized provider rather than create their own myOpenID account.

Damit endet eine Entwicklung, die sich mit dem Launch von Facebook Connect Ende 2008 angekündigt hatte. Ich kann zwar nicht sagen, wie viele OpenID Provider noch existieren, aber ich behaupte mal kühn, dass es keine Hand voll mehr ist. Es verbleiben nur noch die großen Provider wie Google, die aber niemand mehr als solche erkennt.

from the Silicon Forest blog at OregonLive.com:

To enable social login and registration you need to have a free, pro, or enterprise account with Janrain and setup your providers i.e. Facebook, Twitter, etc. Next you need to provide a callback endpoint that Janrain can POST back to. Once Janrain POSTS to your site you can use the Janrain API to validate the credentials and request a normalized version of their profile, contact list, etc.

You can signup for a free, pro, enterprise account at Janrain.

The signup process uses their social login so you will need to have an account with Facebook, Google, Twitter, etc to start. You will need to confirm your information and create your account. You will need to pick your application's name. This name is visible by your users and will be presented to them each time they grant access to their 3rd party account i.e. Facebook and Twitter. Check out the image on the right hand side to see what your application name will look like when your users try to connect.

Great! You should be at your dashboard and if not go to your dashboard. You can keep clicking the button in the upper right hand corner labeled "account" or "dashboard" and this will toggle you between your account and dashboard--- how clever. Step 1 is to click on the "Sign-In for Websites" under the "Quick Links" on the right-hand side. This will take you to the wizard to help you get the javascript code to put on your site.

Before you do that, you need to choose and configure the providers that you want to offer to your users. To do this, skip the "Get the Widget" step by clicking on the "Choose Providers" this is labeled as Step 2. If you pick providers that require additional configuration i.e. ones that have a gear next to them you will be prompted to configure them.

Step 3 is to configure the providers. You will need to follow the steps in the wizard and copy the key/secret from the providers into Janrain setup wizard. Above is an example of Facebook and Twitter providers. Janrain will help you configure all your providers if you have a pro or enterprise account.

Now that you have picked your providers and configured them click on the wizard step labeled "Handle Tokens" copy the "apiKey" value this is your api key and SHOULD be kept secret. You can also get this value on your main dashboard page. We will need this later when we write our server code so keep it handy. 

If you want to test your configuration you can optionally click on the "Test Tool" under the "Resources" on the right hand side. This will simulate the Janrain sign-in widget and show you what data is returned when someone connects to your site.

We are almost done. The final step is to go to your dashboard and click on "Settings" under the "Quick Links" on the right-hand side. If you plan to use Janrain on a domain other than localhost you will need to add that domain to the "Token URL Domains". There are also many different settings like "Provider Configuration" on the dashboard page. I would recommend exploring them later after you get your code up and running.

Let the fun begin, now install the Janrain node.js package you can do this using npm or visit https://github.com/demetriusj/janrain to manually install the package. We are also going to need to build a barebone site to demo all our cool work so lets use connect because it makes it so much easier. If you do not have connect installed use "npm install connect"

$ npm install janrain-api

Now that you have the package installed you will need to create a folder for the project. We need to make a host demo site and RPX callback hook. This is just a place Janrain can POST back to.

Now create a file app.js in the folder. You will need to update the {YOUR_API_KEY}, {YOUR_APP_NAME}, and optionally localhost:8080 if you are going to run the application on a different domain than localhost. The {YOUR_API_KEY} should be replaced with your api key found in your Janrain account. The {YOUR_APP_NAME} is the name you gave your Janrain account.

var connect = require('connect'), janrain = require('janrain-api'), express = require('express'); var engageAPI = janrain('{YOUR_API_KEY}'); var app = express.createServer(); app.get('/', function(req, res){ res.render('index.jade', { locals: { app_name:'{YOUR_APP_NAME}', domain:'localhost:8080' }, layout:false }); }); app.post('/rpx', connect.bodyDecoder(), function(req, res){ // We will cover this in the next session! }); app.listen(8080);

Create a view lets use jade because that is what all the cool kids are using. Lets call the file views/index.jade and copy the code below.

!!! 5 html(lang="en") head title Janrain Web app :javascript | var rpxJsHost = (("https:" == document.location.protocol) ? "https://" : "http://static."); | document.write(unescape("%3Cscript src='" + rpxJsHost + "rpxnow.com/js/lib/rpx.js' type='text/javascript'%3E%3C/script%3E")); :javascript | RPXNOW.overlay = true; | RPXNOW.language_preference = 'en'; body a.rpxnow(onclick='return false;', href="https://" + locals.app_name + ".rpxnow.com/openid/v2/signin?token_url=http%3A%2F%2F" + locals.host + "%2Frpx") login

Now lets fire up the demo.

$ node app.js

If you open a browser up and go to http://localhost:8080 you should see a link "login" and if you click on it you should see the Janrain popup. We are almost done and all we need to do is wire up the callback so Janrain can pass us the identiy and we can validate it and sign in the user. To do this we need to write the RPX callback and we will do that next. Just stop node running and edit the app.js file and replace the app.post with the code below.

app.post('/rpx', connect.bodyDecoder(), function(req, res){ // STEP1: Get the token sent by the widget // and validate it. var token = req.body.token; if(!token || token.length != 40 ) { res.send('Bad Token!'); return; } // STEP2: get the auth info using the Janrain API. // Janrain will validate the request and return the profile // details using a secure channel. engageAPI.authInfo(token, true, function(err, data) { if(err) { res.send(err.message + ( data ? (' -- ' + JSON.stringify(data)) : '')); return; } /* check if we assigned a unique identifier to this user and if so they user is a return user if not we need to create a account in our user management system. You can also make other API calls to get the user contact list, friends, etc. if(data.profile.primaryKey) { signInUser(data.profile.primaryKey); } else { var uid = create a new user in your management system. engageAPI.map(data.profile.identifier, uid, function(err, data) { if(err) {res.send(err.message); return;} signInUser(uid); }); } */ res.send(JSON.stringify(data)); }); });

Just write your own signInUser function. This function will login the user into your site. This can be done using cookies or a variety of techniques. Notice that we also have sample code that lets you map the user to your user management system. So next time Janrain identifies the user it will identify them with your unique ID not the provider's ID. Its that simple now you can let your user sign in and register with any provider. Check out all the data that comes back from the authInfo call at Janrain API Docs. 

If you look at the view you will see I am manually creating the href that starts the Janrain popup. The rpx.js script helps wire-up all the magical UI. It looks for an href on the page with a css class "rpxnow"and uses the href to tell the widget what Janrain account to link to and what is the callback url. Looking at the url you will see the format is {application name}.rpxnow.com/openid/v2/signin and has a query string "token_url" that tells the widget where to POST the callback hook. If you remember in the Janrain wizard where we setup the providers their was a tab for "Get the Widget" on this tab it create sample code that you can cut/copy/paste but here in the example we just hide it into the template.

I recently had the pleasure to work on Janrain for one of my projects. So what is Janrain? They are leaders in the social login/registration and sharing space. They're one of the most inexpensive solutions to provide a turnkey social login and social sharing solution. We evaluated Gigya and the work required to write it from scratch and picked Janrain. Janrain Engage lets a website’s visitors register or login with their existing social network accounts from Facebook, Google, Twitter, Yahoo, LinkedIn or other networks, and share content or their site activities with friends on multiple social networks. Additionally Janrain lets users import their social network profile data and invites their friends to visit your website. They offer other services like analytics, profile storage, badges and points. They have been around for a long time and started OpenID.

The main benefit’s that I see to using social login is that we get the users social profile and social graph. We can provide a more customized experience and target advertisements more effectively. Finally, we can tap into the viral social web and drive traffic to our sites. From a user standpoint, they only have to manage one account to identify themselves and their experience on the site is more social. So its a win win for both sides. 

Key differences between using Janrain or Gigya over developing against native APIs like Facebook's connect are that you do not have to write lots of code to support all the different providers. Both Janrain and Gigya have support for dozens out of the box. You also do not have to maintain and keep up with all the changes to the API, and figuring out how to normalize the data. For $10 a month or $100 a year that is worth it. You can even start with a free account with limited features or get an evaluation account for a limited time. I know the world is trending towards using Facebook and Twitter widgets but I like the idea of supporting many different providers. I will say many of the provider widgets are amazing, and I think there is a place for Janrain and native widgets on the same site.

So how does it work?

Its simple you provide a login button that fires up the Janrain widget (just a little script you need to include on your page). The user then can click on one of the providers like Facebook, Google, Twitter, or other providers to identify themselves to your site. When they click on which provider they want to be identified with they will be prompted by the provider asking if the provider can share your identity so that it can be used by your site. For example, let’s say a user logs-in using Facebook they would be prompted to connect to your site with details about what is going on. If the user is already signed in to Facebook, they will be asked if its OK to share certain information with your site. The degree of information your site is asking the user to share is controlled by your configuration inside Janrain. So you can ask the user to share as little information about them self like their full name to detailed information including all their friends, contacts, DOB, etc.

Janrain also tries to simplify and consolidate the login process because each provider has a slightly different UI and flow. They also try to streamline the work flow so if the user is a return user they do not have to remember which provider they connected with. All these small details make the process a delight for your users.

Once the user has connected and shared their profile data with your site you no longer need to have your own registration process. The provider will share the details about the user so you can skip asking for their email, name, etc. and just create the account. The user will not need to have their own username and password but, they can be simply identified by the provider. Optionally you can store additional properties and preferences that are for your site only but link to the providers profile. At any point, you can ask the provider to share the most up-to-date information on that profiles social graph, contacts, etc.

Janrain is not a replacement for your user management and authentication system. Your site will still need to keep track of your users but, the main difference is that it does this by a user’s identity not an username and password. Janrain will let you associate a unique identifier to any providers identity. For example, if a user identifies themselves through Facebook you can tell Janrain next time the user signs back into your site to identify them with your previously assigned unique identifier, not with the default provider's identifier. Simplifying the process of having to map Janrain ID to your user IDs. Furthermore, you can tell Janrain to identify multiple profiles to a single ID, this is useful if a user has a Facebook and Twitter profile but you want to identify them as the same user.