Settings

There are several JavaScript settings you can use to manage the client-side page for registration. We provide the settings code, and you place the setting in the <head> section of your website. The definitions of these settings are shown below.

Usage: janrain.settings.capture

Example: janrain.settings.capture.modalBorderWidth = 4;

Identity

Use these identity settings to authenticate the client-side page with the remote registration application.

Field Description
appId  The unique key assigned to a Registration application. This value is provided by Janrain.
clientId The unique key assigned to an API user. Found in the API Clients section of the Dashboard.

Save Traditional Sign-in User Data

Field Description
returnExperienceUserData This setting specifies what should be saved in localStorage or a cookie from available data returned from an endpoint.

This value is stored as an array. Example:

[ "uuid", "displayName", "email" ]

Registration Flow

The registration flow settings determine which flow to use, and its behavior.

Field Description
accessTokenLifeHours Specifies how many hours Registration and SSO sessions should last. This value can be a whole number or a decimal number. The default value = 1 (one hour).

For example:

Three hours = 3

30 minutes = 0.5.

beforeJanrainCaptureWidgetOnLoad Each function in this array will be executed before the widget loads itself. Value is an array of functions.
captureServer Set to the URL used to access your Registration application.
cdnUrl Specifies where to load client settings and the flow from.
cookieDomain Changes the domain cookies are set on in certain functions, most notably createCaptureSession. Value is a URL.
dataDefaults This is an object that is passed to registration in the /widget/token_url.jsonp call.
flowName Set this to the name of your flow file, usually, signin for most pages, and editProfile for the page hosting the user profile screen. Get this value from your deployment engineer.
flowVersion The version of the flow to retrieve. Defaults to “HEAD”.
hasSettings Loads extra settings from a file on cloudfront so they may be loaded conditionally. Settings are added directly into the flow. Settings are per application.
hideSavedProfileMessageDelay Sets the time in miliseconds before the saved profile message is hidden. If this is not set, the message will never go away.
keepProfileCookieAfterLogout Value is ‘true’/’false’. If true, do not remove the janrainCaptureProfileData cookie.
language The language to use. Falls back to janrain.settings.language and then “en-US”.
mergeFlow The flow to use to render the mergeAccounts screen. Falls back to janrain.settings.capture.registerFlow and then “socialRegister”.
quiltUrl Specify the quilt URL to go through proxy servers.
quiltVersion Specify which Quilt version to load. Only works for the following domains: cdn.quilt.janrain.com and d3hmp0045zy3cs.cloudfront.net
recaptchaPublicKey The recaptcha key to use if we’re using recaptcha verification. An error will be thrown if the captcha renderer is used and this value isn’t present.
recaptchaUrl The URL from which to load the recaptcha script. Example value: http://www.google.com/recaptcha/api/js/recaptcha_ajax.js
recaptchaVersion Specifies which reCAPTCHA version to use.

1 = original version

2 = next generation No CAPTCHA reCAPTCHA

If value not set, defaults to version 1 (original version).

Refer to Google’s reCAPTCHA page for a discussion of the various versions.

redirectOnLogin Set this to enabled, or disabled. The redirectUri will only be used when this value is set to enabled.
redirectUri Set the URL for where to redirect after a successful registration or login.
registerFlow Sets the social registration screen to render.
responseType Set to either code or token. The response type sets what authentication method to use.
screenToRender Set to the UI screen name you wish to render. The defined screens will render instead of the default screen set in the flow file.
setProfileCookie Set to either true or false. When set to true, registration stores the tokens in localStorage.
socialRegistrationCompleteRedirect This redirects social registration to a different page upon completion.
socialRegistrationRedirect This redirects social registration to a different page.
socialRegistrationRedirectUrlCondition socialRegistrationRedirect only happens if this condition is met.
thinRegistration Forgoes the post login screen, immediately logging the social user in and storing their data. Value is a boolean.
transactionTimeout Controls how long the widget waits on an iframe post before the transaction times out. Upon timeout, this event is fired:  janrain.events.onCaptureTransactionTimeout.

Modal Options

Use these settings to control your registration UI in modal mode. You can set the border width, opacity, radius, and when to close the modal window.

Field Description
confirmModalClose Set to true or false. When true, any screen in the registration sign-in flow displays a confirmation screen before allowing a user to close it. If false, screens close immediately when a user closes them.
modalBorderColor Determines the border color of the modal UI using the web color hexadecimal value, for example: #009DDC.
modalBorderOpacity Defines the border opacity of a modal UI. 0 is completely clear, and 1 is completely solid. Use a value expressed in tenths to define, for example: .04. The default value is .05.
modalBorderRadius Sets the rounding angle of the border of a modal UI. 1 is square corners, and 20 is the greatest rounding. The default value is 5.
modalBorderWidth Use this to set the width of the border on a scale of 1–20 pixels. Default value is 5.
modalCloseHtml Set to true or false. When true, registration uses custom html to provide a way to close the UI, instead of the default ‘X’ icon. When false, registration presents the stock ‘X’ icon to close the UI.
modalCloseImage Set to an image URL string. The UI displays this image as the modal close button.
modalOpenClass Set to a CSS class string. Links with this class will open the UI when clicked.
noModalBorderInlineCss Set to true or false. If true, the modal window does not have a border, relying on the customer’s inline css to define it.
noStyling Set to true or false. Set to true to turn off the default UI style settings. Use this when you want to use your own stylings.

Style Sheets

You can add any stylesheets you want. The stylesheets settings takes an array of all the stylesheets you want to load. Just set the following settings:

Field Description
conditionalIEStylesheets The conditionalIEStylesheets load those stylesheets only if the end user is browsing with IE8 or earlier.
stylesheets Set to the name of the CSS stylesheet to use with the UI. Registration waits for a stylesheet to load before displaying any UI content to avoid any graphic ugliness.

Action Classes

These settings allow you to customize the name of the action classes used on the client site.

Field Description
editPhotoAfterUpload Set to true or false. If true, the photo editor will automatically open after the user uploads a photo.
logoutLinksClass Set to a CSS class string. Links with this class will log the user out when clicked.

SSO Settings

Janrain’s Single Sign-on (SSO) functionality allows a user to sign-in across a family of related, but distinct websites. The user signs in to one site, and is then implicitly signed in when visiting any other site under your umbrella. Customers often use this with communities of websites under a central brand.

SSO can be configured using the federate settings. When a signed in user visits a federated site, registration activates an implicit login, causing the onCaptureLoginSuccess and ssoImplicitLogin events to fire. Both events have a property called ssoImplicitLogin, set to true, flagging the event for the website as SSO, should you want to treat these logins differently. The onCaptureLoginSuccess setting provides the same information as the original explicit login, including an authorizationCode or accessToken.

Note: When making these settings, you must enter the entire line as shown in the example below. If you omit capture, the setting will not work.

Example: janrain.settings.capture.federate = true;

Add the following settings on all registration solutions appearing under the SSO umbrella:

Field Description
federate Set to true or false. When set to true, alerts registration that SSO is being used.
federateCookieTTL Changes the cookie time to live. Default is 28800 seconds.
federateLogoutCallback This is optional. This function is called after all logout URI’s finish loading.
federateLogoutUri Each site in your federation should have its own federateLogoutUri page. You can make this a blank page or something more elaborate. It is called in a hidden iframe from whichever site the user logs out on. It is commonly used to host custom behavior implemented once a user signs out, such as ending a server session on all other sites the user has visited, or clearing cookies. This value must be an absolute URI, as it is called from outside the site’s domain.
federateNoRefresh Sets the refresh SSO option. Value is ‘true’ or ‘false’.
federateSegment Only used when the site is using the Segments feature. Value is a text name of the segment to which the page belongs.
federateServer The URL of the SSO server to use.
federateSupportedSegments Only used when the site is using the Segments feature. Comma separated list of segments. These are the segments the site may join in addition to the defined federateSegment.
federateXdReceiver Each site in your federation should have its own federateXdReceiver page on the same domain.

Warning: If the cross domain receiver file does not reside on the same domain as the main site, Single Sign-on will not work in some browsers.

redirectUri Use this to identify the site with SSO; it won’t actually cause a redirect. It needs to be set to a URL on the same domain as the site where registration resides.
ssoFileUrl Specifies the location of the SSO js file. Defaults to “https://d1v9u0bgi1uimx.cloudfront.net/sso.js”

Also, the following code needs to be added to the federateXdReceiver page:

<script src="http://static.janraincapture.com/js/lib/xdcomm.js" type="text/javascript"></script>

Backplane Integration

Registration complies with the Backplane Protocol, and you can configure it along with other Backplane enabled web tools to share information through messages sent from a central server.

Alert: When making these settings, you must enter the whole line as shown in the example below. If you omit capture the setting will not work.

Example: janrain.settings.capture.backplane = true;

Field Description
backplane Set to true or false. Set to true to enable Backplane.
backplaneBusName Name of the Backplane bus to which registration listens. The bus name is set when the Backplane server is configured, and is available in the JavaScript of the Backplane-enabled page. This setting is required.
backplaneChannelExpires An optional setting defining the expiration time of channel cookies.

This dynamic value is passed directly into the JavaScript that sets the cookie using standard document.cookie behavior. See the code example for an example value.

backplaneLibrary Specifies the location of the backplane script to load. NOTE: not the script itself.
backplaneReplayOnPageLoad Sets the replayOnPageLoad option for Backplane.init().
backplaneServerBaseUrl Specifies the backplane server base URL.

Example backplaneChannelExpires value:

janrain.settings.capture.backplaneChannelExpires = dateVar.toGMTString();

Mobile

Usage: janrain.settings.capture.mobileStylesheets

Field Description
mobileFlowName If mobile is detected, it will use this value instead of janrain.settings.capture.flowName when retrieving the flow.
mobileStylesheets These stylesheets are loaded only if the end user is browsing on a mobile device. Also, you must specify the full settings path, unlike all the other settings on the page.

Settings Example

This example shows how to use many of the settings described on this page, including using stylesheets. The clientId, appid, and e.src all contain gibberish strings. All of these values are long strings of letters and numbers specific to each customer. The firm name has been replaced with yourfirm, and so on. Your implementation might be more or less elaborate than this one.

<html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript">
    (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://your-url/your-user-registration-widget.js';

        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(e, s);
    })();
        function janrainCaptureWidgetOnLoad() {
            janrain.capture.ui.start();
            janrain.events.onCaptureLoginSuccess.
                addHandler(function(result){
                     alert('neat, you just logged in and got an
                          accessToken of ' + result.accessToken);
            });
        }
    </script>
    <style type="text/css">
    body ... your .css stuff here ...
    </style>
    </head>