User Registration Widget JS API

This documentation is for the User Registration widget solution that uses JavaScript. Deployments installed after 11/1/2012 are likely using this method. If you are unsure, please clarify with your Deployment Engineer.

This is a work in progress. We will continue to update it frequently, so check back often.

The User Registration Widget has it’s own specialized JavaScript API to help integrate Janrain Capture into your website. We also provide a more general JavaScript API that works with all of our widgets.

Usage:  janrain.capture.ui

The Widget class API calls affect the widget or its behavior directly. Some examples of what you can do with the Widget category include checking the current state of the user, assigning custom renderers, and changing launch triggers.

Usage: janrain.capture.ui

Field Value Description
hasActiveSession None Checks to see if a user has a valid token, and is thus considered signed into the website. The hasActiveSession field checks if the widget has an access token for that user.
setRenderer None Allows you to set or add a custom renderer for any element, including HTML elements and Capture elements. When you create a custom renderer there are renderer helpers available for common render tasks.
setFieldAttribute None Adds an attribute to a field definition.
setValidator List of comma-separated Identity Providers Allows you to add custom validation for a field. If the value in the field doesn’t meet the validation conditions, then it stops the flow.
modal.open Text Sets the behavior for launching the widget. Can be set to a mouse click or another trigger. If you want to open the modal window without a click, you can use code similar to this:
janrain.capture.ui.modal.open(screen);
Without an argument, it opens the default screen; otherwise, you can pass in the name of the screen you would like to open.
modal.close None Closes a modal window.
postCaptureForm field name and value This method creates a form, populates it with values, and submits the form all without user interactivity or any visible aspects. The method takes two parameters, a form name and a values object. The form name must be the name of the form as defined in the flow file. The values object is optional, and if not provided data values will be supplied from previously entered information (if any). See example below.
getReturnExperienceData This call fetches saved user data from a traditional sign-in. It takes two parameters: key is the required dot path string specified in the setting above to fetch. multiDomainCallback is an optional function used when the data that is to be fetched is on a different domain. See example below.

Examples for postCaptureForm

You can use a values object containing key and value pairs to populate the form with data. The key names must match the field names in the flow file. 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.

Note: To get a list of forms, you need to talk to your Janrain deployment engineer.

Let’s say we want to automatically resubmit a form called Traditional_Login using a set of values the user entered previously for that form:

janrain.capture.ui.postCaptureForm('Traditional_Login');

Now let’s submit that same form with a values object. First create the values object:

var valuesObject = {
    email: 'nate@janrain.com',
    password: 'p@33w0rd'
};

Then pass the values object as the second parameter to the postCaptureForm method:

janrain.capture.ui.postCaptureForm('Traditional_Login', valuesObject);

The above code assumes that the flow file defines a form named Traditional_Login with fields named email and password.

Example for getReturnExperienceData

Use this method to capture user data from a traditional sign-in process. See Saving Traditional Sign-In User Data.

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. Also you just logged in!");
});

Help Us Improve!

Give us your feedback