Home How To: Quickly Enable Social Logins with JanRain Engage

How To: Quickly Enable Social Logins with JanRain Engage

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.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.