Registration Implementation Examples

Getting Started

Before you can begin customizing your registration solutions, you need to make sure that the JavaScript for the minimal implementation has been loaded into theĀ head of your HTML page(s). Here is what that JavaScript snippet looks like, complete with mock values for variables such as clientId, appId, and others:

(function() {
  if (typeof window.janrain !== 'object') window.janrain = {};
  window.janrain.settings = {};
  window.janrain.settings.capture = {};

  /* _______________ can edit below this line _______________ */

  janrain.settings.packages = ['capture'];
  janrain.settings.capture.clientId = 'nnn123BVC345dd76example';
  janrain.settings.capture.appid = '23lettersandnumbers1234';
  janrain.settings.capture.flowName = 'yourfirmSignin';
  janrain.settings.capture.captureServer = 'https://yourfirm.janraincapture.com';
  janrain.settings.capture.redirectUri = 'http://yourfirm.com/',
  janrain.settings.capture.confirmModalClose = true;
  janrain.settings.capture.responseType = 'token';
  janrain.settings.capture.modalBorderOpacity = 1;
  janrain.settings.capture.modalBorderWidth = 5;
  janrain.settings.capture.modalBorderRadius = 20;
  janrain.settings.capture.modalCloseHtml = 'X';
  janrain.settings.capture.modalBorderColor = '#7AB433';
  janrain.settings.capture.noModalBorderInlineCss = true;
  janrain.settings.capture.stylesheets = ['stylesheets/your.css', 'stylesheets/your_other.css'];
  janrain.settings.capture.conditionalIEStylesheets = ['stylesheets/your-ie.css'];

  /* _______________ can edit above this line _______________ */

  function isReady() { janrain.ready = true; };
  if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", isReady, false);
  } else {
    window.attachEvent('onload', isReady);
  }

  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.id = 'janrainAuthWidget';

  e.src = 'http://aa11bb22cc33dd.cloudfront.net/youN/load.js';

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(e, s);
})();

Displaying User Information Upon Return to the Page

Use this method to capture user data from a traditional sign-in process. See the Extend Traditional Login Experience topic.

janrain.settings.capture.returnExperienceUserData = ["uuid","displayName","photos.0.type"];

janrain.events.onCaptureLoginSuccess.addHandler(function(result){
  janrain.capture.ui.modal.close();
  var name = janrain.capture.ui.getReturnExperienceData("displayName");
  var photoType = janrain.capture.ui.getReturnExperienceData("photos.0.type");
  alert("Hello, " + name + ". You have a " + photoType + " photo, and you are now successfully logged in!");
});

In this code sample, we define what data is to be sought from the server once the flow is fully loaded: the user’s UUID (uuid), name (displayName), and photo (photos.0.type). Then, we specify what is actually done with that data when it is ready. We do this by adding onCaptureLoginSuccess to the janrain.events object and add a handler callback for when that event is actually triggered.

Here, the UI modal is first closed, we assign the variable name to the displayName and the variable photoType to the photos-0.type returned by the server. Finally, an alert window will pop up saying something along the lines of this:

Hello, Rufus. You have a jpg photo, and you are now successfully logged in!

Form Example

You can use a values object containing key and value pairs to populate the form with data. The key names must match the corresponding schema attribute names. The value assigned to a form field will need to validate in order for the form to be submitted correctly, just as it would during a user-submitted form process.

Let’s suppose that we want to resubmit a form called traditional_login using a set of values that the user previously entered for that form. First, we’ll specify those values in a JavaScript object:

var valuesToSubmit = {
  email: "imtheonewhoknocks@janrain.com",
  password: "walterplusskyler"
};

Then, we’ll pass that object into the form:

janrain.capture.ui.postCaptureForm('traditional_login', valuesToSubmit);

Note: This example presupposes that the traditional_login form is already defined in the application’s flow file.