JanRain Engage provides a convenient way to enable social logins on a site via a single API. This includes support for Facebook, Google, Twitter, LinkedIn and over a dozen additional services.
Implementing JanRain Engage on your site is a lot less work than implementing each login provider one by one. Also, as any changes to each login will be handled by JanRain, you won’t have to keep updating your authentication code if changes are made by the login provider.
Creating Your Application
Start by going to JanRain Engage and signing in. Of course, you’ll need to use a social login to get into the site. If you haven’t seen the sign-in interface before, this is a good opportunity to have a look at it. We’ll come back to this in a moment.
Once you’ve signed in, click the “Create Application” link from the drop down list at the top. By default, you’ll be prompted to purchase a “Plus” application. Look for the link that says “Create a basic application” – this will allow you to try the service for free. (Note: You can use JanRain Engage for free if you wish. You can upgrade to the Plus version at a later date if you need some of the enhanced features.)
Simply type the name of your application and click the “Create Application” button. Then click “Get Started” and you can start deploying the widget. You can return to this stage of the process by clicking the “Sign-in” link from your application’s home page.
Adding the Widget
On the “Get the Widget” screen, you’ll be asked for your token URL. For the moment, just enter the URL of your home page and click Next. This can be changed later. Now click the “Generate Code” button. You’ll be given two code snippets that look something like this:
This code should go immediately before the </body> tag. The second snippet is:
This is the Sign In link. “yoursite” will be replaced with the name of your site.
Getting Your API Key
In the next step, “Handle Tokens”, you’ll be given your API key. Copy the key, as you’ll need it in a moment.
Choosing Your Login Providers
Many of the popular login providers require configuration. These are shown with a gear icon. For now, remove the default providers and add one or two login providers that don’t require configuration. Make sure you choose at least one provider where you have an account. We can come back and add some more later.
A Helpful Login Class
Some code examples are provided by JanRain Engage. These are good for getting started. However, they will need to be changed if you need to access any other API calls in the future. With this in mind, I created a class that might be useful.
Don’t forget to complete the class – look for the @todo tags.
Once you’ve included the file in your project, just include the following code on the page that you’re using to process login requests:
I usually include the code in the bootstrap file of my project, so you can check if a user has just logged in from any page of your site.
Once the code is on your site, you’ll need to test it.
A Very Simple Example
I’ve set up a site where you can try out the Twitter login. The site doesn’t do much except allowing you to log in and click a button. It’s a good idea to set up a sandbox such as this so you can try out the functionality before using it on a real site.
Let us know in the comments if you’ve used JanRain Engage for your site or if there’s anything else you’d like to know about it.
