Janrain Capture/Backplane

Customers using Janrain Capture and Backplane may use Livefyre Auth for Single Sign On (SSO), allowing users to immediately engage with your Livefyre Apps when they log into your site.

To benefit from this built-in Capture/Backplane integration, you must make configuration changes to both your Capture app and your Livefyre.js integration.

For more information, see Janrain’s Backplane documentation.

1. Set Up Capture.
2. (Optional) Add Livefyre Defaults to your Capture App.
3. Build the AuthDelegate Object.
4. Sync to Livefyre with Ping for Pull.

Step 1: Set Up Capture

Livefyre needs certain credentials from your Janrain Capture app.

1. Set up the Janrain Capture app.

2. Gather the following information for Livefyre:

   • Access to your Janrain Capture instance.
   • Access to your Janrain Engage dashboard.
   • Your Capture settings and credentials.
   • Your Engage credentials.
   • Your identity URL.

Step 2: (Optional) Add Livefyre Defaults to your Capture App

Add Livefyre defaults to users stored in your Capture app to enable you to send users email notifications or allow them to automatically follow conversations that users comment on.

1. Complete Step 1: Set Up Capture.
2. Add the following Livefyre default fields. All fields are optional.

Step 3: Build the AuthDelegate Object for Janrain Integration

Livefyre.require provides a plugin that enables auth to listen to the Janrain Backplane bus.

Login

When an identity/login message is broadcast on the Backplane channel, auth.authenticate() will be called for you with the user’s Livefyre Authentication token. You must still implement an AuthDelegate.

Livefyre.require(['auth', 'backplane-auth-plugin#0'], function(auth, backplanePluginFactory) {
   auth.plugin(backplanePluginFactory('network.fyre.co'));
   auth.delegate({
      login: function (finishLogin) {
         loginWithCapture(finishLogin);
      }
   });
});

The following are some examples of how an auth delegate may look for a Janrain Capture integration.

• errback: The callback passed to your auth delegate’s login method
• janrain: The reference to your Janrain capture variable.
• window.Backplane: A reference to your Backplane object.

/**
* Login function
* In this case, opens a login modal and triggers Backplane to start listening
* for login messages
*/
authDelegate.login = function(finishLogin) {
   var successCallback = function() {
      // These need to be replaced with the actions that correspond to successful login
      // and when the Janrain modal is closed.
      janrain.events.onCaptureLoginSuccess.removeHandler(successCallback);
      janrain.events.onModalClose.removeHandler(failureCallback);
      finishLogin();
   };

   var failureCallback = function(e) {
      janrain.events.onModalClose.removeHandler(failureCallback);
      janrain.events.onCaptureLoginSuccess.removeHandler(successCallback);
      finishLogin(e || new Error("Error logging in with Janrain Capture"));
   };

   // Open the modal to log a user in
   janrain.capture.ui.renderScreen('signIn');
   // Send a backplane message
   window.Backplane.expectMessages('identity/login');
   // Add handlers to specific janrain events
   janrain.events.onCaptureLoginSuccess.addHandler(successCallback);
   janrain.events.onModalClose.addHandler(failureCallback);
};

Logout

• finishLogout: The callback passed to your auth delegate’s login method.

• window.Backplane: A reference to your Backplane object.

/**
* Logout function
* In this case, invalidates the session and removes the cookie.
* Also reloads the page to change state. In order to do this without a reload,
* it would be necessary to also update the UI.
*/
authDelegate.logout = function(finishLogout) {
   Backplane.resetCookieChannel();
   janrain.capture.ui.endCaptureSession();
   finishLogout();
};

Edit Profile

This can link to whatever part of the site you would like users to visit to view their own profile page. This example merely prints out the author object passed in.

/**
* Edit profile function
* @param user - User who would like to edit their profile
*/
authDelegate.editProfile = function(user) {
   console.log(user);
};

View Profile

Like Edit Profile, this should link to a user’s page that is different from the currently logged in user. This can be implemented however you see fit. This example simply logs the author parameter to the console.

/**
* View profile function
* @param user - User or userId whose profile should be displayed
*/
authDelegate.viewProfile = function(user) {
   console.log(author);
};

Step 4: Sync to Livefyre with Ping for Pull for Janrain Integration

Keeping Livefyre Remote Profiles in sync with your Capture user management system involves a series of steps referred to as Ping for Pull. This process requires that you obtain a valid access token from Janrain, and then pass that token to an endpoint specified in step 3, below.

1. Get an access code from Janrain.

   To get the access code, supply the necessary credentials, specify the user_type as “user”, and the uuid as the current user’s uuid to update. For more information, see https://developers.janrain.com/rest-api/methods/authentication/access-codes-and-tokens/getauthorizationcode/.

2. Trade the access code for an access token. Supply the necessary credentials, the access code received from step 1, and specify the grant_type as “authorization_code”.

   For more information, see https://developers.janrain.com/rest-api/methods/authentication/oauth/token/.

3. Hit the Livefyre “Ping to Pull Capture” endpoint.

   Endpoint URL: https://{networkName}/api/v1.1/private/capture/profile_updated/?jrtoken={token} where {networkName} is the network name provided to you by Livefyre, and the jrtoken is the token received from Janrain in step 2.

   Once you hit this endpoint, you receive a 202 response and Livefyre begins an async process.

How It All Works

To benefit from this built-in Capture/Backplane integration, you must make some configuration changes to both your Capture app and your Livefyre.js integration.

Janrain sends successful login/logout messages through the Backplane bus, on which the Livefyre App, when properly configured, listens. These messages contain all the information needed to show App users as logged in or logged out. Developers can view Backplane bus messages by inspecting the Network tab in your browser’s developer console.

Login Code Example

Request:

https://backplane1.janrainbackplane.com//bus/{CUSTOMER_NAME}/channel/{CHANNEL}?callback=Backplane.response&rnd=0.15930617856793106

Response:

Backplane.response([{
  "id": "2014-05-06T22:51:55.406Z-eZp1HB1F7B",
  "channel_name": "{CHANNEL_NAME}",
  "message": {
    "source": "https://{CUSTOMER_DOMAIN}",
    "type": "identity/login",
    "sticky": true,
    "payload": {
      "context": "https://{CUSTOMER_DOMAIN}",
      "identities": {
        "startIndex": 0,
        "itemsPerPage": 1,
        "totalResults": 1,
        "entry": {
          "id": "https://{CUSTOMER}.janraincapture.com/oauth/public_profile?uuid={UNIQUE_USER_ID}",
          "displayName": "{USER_DISPLAY_NAME}",
          "accounts": [
            {
              "username": "{USER_DISPLAY_NAME}",
              "identityUrl": "https://{CUSTOMER}.janraincapture.com/oauth/public_profile?uuid={UNIQUE_USER_ID}",
              "photos": [
                {
                  "id": 48570146,
                  "value": "https://lh3.googleusercontent.com/-h8poqH8hlgw/AAA/AAA1/QuHtbeHMJzc/photo.jpg?sz=50",
                  "type": "other"
                },
                {
                  "id": 48570147,
                  "value": "https://lh3.googleusercontent.com/-h8poqH8hlgw/AAA/AAA1/QuHtbeHMJzc/photo.jpg?sz=50",
                  "type": "original"
                },
                {
                  "id": 48570148,
                  "value": "https://lh3.googleusercontent.com/-h8poqH8hlgw/AAA/AAA1/QuHtbeHMJzc/photo.jpg?sz=50",
                  "type": "large"
                },
                {
                  "value": "https://lh3.googleusercontent.com/-h8poqH8hlgw/AAA/AAA1/QuHtbeHMJzc/photo.jpg?sz=50",
                  "type": "avatar"
                }
              ]
            },
            {
              "identityUrl": "{USER_PROFILE_LINK}"
            }
          ]
        }
      }
    }
  }
}
]);

Empty Response:

Backplane.response([]);

Logout Code Example

Request:

https://backplane1.janrainbackplane.com/v1.2/bus/{CUSTOMER}/channel/new?callback=Backplane.finishInit&rnd=0.1057701709214598

Response:

Backplane.finishInit("{CHANNEL}");

If these messages are not appearing in your network requests, Livefyre will not be aware of the login/logout attempts and therefore, Livefyre won’t be able to integrate the user into the App.

Business.Adobe.com resources