Social Login JavaScript API: Functions

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.

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.

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 debugDumpis unable to locate a JavaScript console, it returns false. Otherwise it returns true.

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.

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

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.

modal.close

Close the UI.

modal.setBorder

Set the border width (in pixels).

modal.setBorderColor

Set the border color. The value is a web color expressed as a hexadecimal value. For example: #ffffff

modal.setBorderOpacity

Set the border opacity. The value is a number between 0 and 1.

modal.setBorderRadius

Set the radius of corner curves. The value is expressed in degrees.

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

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

widget.getWidth

Get width (in pixels).

widget.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.

widget.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.

widget.setBackgroundColor

Set background color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).

widget.setBorderColor

Set border color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).

widget.setBorderRadius

Set the angle of rounding for button corners. The default value is 5.

widget.setButtonBorderColor

Set button border color. The value is a web color expressed as a hexadecimal value (for example, #ffffff).

widget.setButtonBorderRadius

Set radius of button corners.

widget.setFontColor

Set font color of action text. The value is a web color expressed as a hexadecimal value (for example, #ffffff).

widget.setFontFamily

Set font family for action text.

widget.setFontSize

Set the font size (in pixels).

widget.setFormat

Set the arrangement of provider buttons. Valid values are two columns, one column, or one row.

widget.setProviders

An array of provider-specifier strings. See Identity Providers.

widget.setProvidersPerPage

The highest number of provider buttons to display at one time.

widget.setWidth

The width (in pixels).