The Reference Implementation

The reference implementation should serve as a guide for integrating the Janrain Registration UI into your own site. The source files may be used as-is, but most customers will make adjustments to the markup and styling during integration. The hosted .zip file will be kept updated along with the hosted site as Janrain makes updates during the configuration phase, so it can be re-downloaded at any time.

The reference implementation also provides a clean, isolated environment for you to test Janrain configurations, so it should be the first place to check when troubleshooting so that you can identify integration vs. configuration issues. All Configuration Acceptance Testing should be completed at the reference implementation hosted by Janrain. Note that Janrain does not provide hosting for these files for production use.

See the following sections for a description of the source files provided. Note that the structure of these files may differ for some customers depending on when the reference implementation was created, but the overall contents will be the same.

HTML Files

Two HTML files are included as part of the reference implementation. These provide the markup for the Registration UI, including screen containers, JTL tags for forms and fields, and references to scripts utilizing the Registration JavaScript API. Detailed documentation on the contents of each screen can be found in the Default Registration Experience.

File Name

Description

index.html

Includes all screens needed for logged-out users, including registration, login, account merging, password reset, and email verification.

edit-profile.html

Includes all screens accessible by logged-in users for profile management functionality.

Scripts Folder

Two scripts are also included as part of the reference implementation and referenced on both of the HTML pages.

File Name

Description

janrain-init.js

Includes JavaScript settings and events needed to load the Registration UI. Some settings, such as the ones linking the integration to your application, are required. Other settings for things such as locale, styling options, or enabling Single Sign-on are optional. Sample event handlers are included to handle navigation through the reference implementation based on whether the user is logged in with a valid access token. Additional settings and events are documented on the Registration JavaScript API page.

janrain-utils.js

Optional JavaScript functions useful for troubleshooting and debugging during integration, such as logging Janrain events in the console or displaying the currently loaded flow version.

Styles Folder

Two CSS files are also included as part of the reference implementation. These files do not have to be used, but they provide a starting point for modification and extension as you apply your own styles to the Janrain Registration UI.

File Name

Description

janrain.css

A baseline stylesheet containing Janrain’s default styling for buttons, fields, text, and other elements that may appear in the Registration UI. This file is included in the array for janrain.settings.capture.stylesheets in janrain-init.js, which loads it after all other stylesheets are loaded from the Janrain platform so that default styles are overridden.

janrain-mobile.css

A stylesheet extending the janrain.css file to optimize the Registration UI for mobile devices. This file is included in the array for janrain.settings.capture.mobileStylesheets, which should be placed after the stylesheets setting so any styling loaded from that file is overridden for mobile.