Functions

Contents

The Social Login solution supports a number of functions that allow you to interact with the solution after it has been launched. You can use these functions to affect the state of the UI or request information from the application.

An example of a popular sign-in function is to launch a sign-in flow for a UI that has been built without the use of the Dashboard. The UI’s design is coded into the webpage, and uses setProviderFlow or triggerFlow to initiate user authentication.

Supported Functions

The following fields are supported in the janrain.engage.signin object:

Field Description
appendTokenParams Adds parameter information to the query string on the token URL after the UI has loaded. This is useful for adding information not addressed in the sign-in process, such as appending an ID you get from a cookie to the end of the URL.

appendTokenParams values are case-sensitive. When called repeatedly, the newer parameter value replaces the same parameter value set before it. Incrementally adding parameters to the token URL is not supported at this time.

Example usage:

debugDump Logs a series of items to the JavaScript console. These include information about the browser, the web page, and the contents of the settings object.

If debugDump is unable to locate a JavaScript console, it returns false. Otherwise it returns true.

getState Returns the current state of the solution. Supported objects are described in the getState section.
logoutFacebook Attempts to sign the user out of Facebook, and notifies a callback URL when completed. Must contain a Facebook app ID.

Note: Users must log in to Facebook using the same Facebook app at least once to use this function.

modal Object containing functions for manipulating modal UIs. These functions are described in the Modal section.
setBackplaneChannel For Backplane-enabled tools. Sets the Backplane channel when the UI loads during user sign-in. If the channel isn’t loaded yet, the channel is set according to the configuration settings.
setNoReturnExperience If true, the return experience form of the UI is bypassed and the user is presented with the usual, new visitor selection of providers. If false, the function does nothing.
setProviderFlow Used for coding a custom-designed Social Login implementation. This allows a page element to begin the provider sign-in flow.
triggerFlow Used when coding a custom-designed Social Login implementation. Triggers the sign-in flow for a provider.
version String specifying API version.
widget Object containing functions for manipulating appearance. These functions are described in the Widget section.

Modal

The modal functions are used to change the design and appearance of modal Social Login UI. These may also be set in the application’s Dashboard.

The following fields are supported in the janrain.engage.signin.modal object:

Field Description
close  Close the UI.
setBorder Set the border width (in pixels).
setBorderColor Set the border color. The value is a web color expressed as a hexadecimal value.

For example: #ffffff

setBorderOpacity  Set the border opacity. The value is a number between 0 and 1.
setBorderRadius Set the radius of corner curves. The value is expressed in degrees.

getState

The getState function returns an object that describes the current state of Social Login. Most fields in the object correspond to fields in the settings object.

The following fields in the janrain.engage.signin.getState() object return the current state of Social Login:

Field Description
actionText The text of the action.
backgroundColor The background color, expressed as a hexadecimal value.

For example: #ffffff 

borderColor The color of the borders, expressed as a hexadecimal value.

For example: #ffffff 

borderRadius The radius of the curves of the corners.
buttonBackgroundStyle The style of the button background.
buttonBorderColor The color of the button borders, expressed as a hexadecimal value.

For example: #ffffff 

buttonBorderRadius The radius of the curves on the corners of the buttons.
fontColor The font color for the action text, expressed as a hexadecimal value.

For example: #ffffff 

fontFamily Font family for the action text.
fontSize Font size for the action text.
format The button layout.
modalState If the UI is modal, this field is an object containing information that is specific to the modal UI. The fields in this object are described in the modalState section.
providers Array of specifier strings for provider buttons. Possible strings are listed in Identity Providers.
providersPerPage The number of provider buttons per UI page.
showAttribution A boolean value. True shows the attribution text, false hides the attribution text.
type The display type (modal or embedded).
width The width of the UI (in pixels).

modalState

The modalState object (if present) contains the following fields:

Field Description
borderColor The border color, expressed as a hexadecimal value.

For example: #ffffff 

borderOpacity Border opacity.
borderRadius Radius of border corners.
borderWidth Border width.
orientation Values are landscape or portrait. Set when the UI is viewed on a mobile device with orientation support.

Widget

This object contains functions that manipulate the appearance of the UI after it is displayed.

The following fields are supported in the janrain.engage.signin.widget object:

Parameter Description
getWidth Get width (in pixels).
refresh Used when the UI finds no identity associated with the user during sign-in. Instead of hanging on the “logging in” message, use refresh to allow a user to register or select another account.
setActionText The text that appears at the top of the UI. It is meant to describe the action that happens when a user signs in.
setBackgroundColor Set background color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).
setBorderColor Set border color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).
setBorderRadius Set the angle of rounding for button corners. The default value is 5.
setButtonBorderColor Set button border color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).
setButtonBorderRadius Set radius of button corners.
setFontColor Set font color of action text. The value is a web color expressed as a hexadecimal value (for example, #ffffff).
setFontFamily Set font family for action text.
setFontSize Set the font size (in pixels).
setFormat Set the arrangement of provider buttons. Valid values are two columns, one column, or one row.
setProviders An array of provider-specifier strings. See Identity Providers.
setProvidersPerPage The highest number of provider buttons to display at one time.
setWidth The width (in pixels).