Settings

When the social login solution is initialized, it reads some or all of its settings from the settings object. These settings always include the tokenUrl, which is the address of the web page responsible for retrieving user information. (See Authentication.)

If you created your implementation with embedded settings (Pro or Enterprise service levels only), the complete configuration is placed in the generated code. You can modify these settings on a page-by-page basis, making it possible to customize the solution where needed. See Figure 1.

Embedded settings

Figure 1. Embedded settings

Settings can also be specified when the solution is designed and created (see Deploy Social Login), or they can be modified after the solution is live (see Modify the Social Login UI).

Supported Settings

The following fields in the janrain.settings object define settings:

Available to:      

Field Description
tokenUrl The URL that receives the one-time token.
storageType Value is either default or single cookie. If set as default, Janrain uses three cookies to store needed information (expected_tab, login_tab, welcome_info_name). If set as single cookie, Janrain will use a single cookie named janrain_engage_login_data that stores expected_tab, login_tab, and welcome_info_name data as JSON.
noReturnExperience If you change this setting to true, end users will not be presented with a return experience. The default value is false.

Available to:  

Field Description
appUrl The URL for the server for this application. Available from the Dashboard for this app, under “Settings / App Info.” Note: If your Janrain representative has given you a new custom domain to use, change this setting immediately, or else social login authentication will not work.
appID A string that identifies the application. Available from the Dashboard for this app, under “Settings / App Info.”
tokenUrl The URL that receives the one-time token.
tokenAction The one-time token can be issued to the application using different methods. The following values set the method used:

  • url or none — Sends the one-time token as a HTTP Post to the address specified by the tokenURL field. Use the url value when the JavaScript is set up for the server-side authentication method.
  • event — Janrain issues the one time token within the object generated by the onProviderLoginToken event. Use this method when the JavaScript is set up for the client-side authentication model.
  • hybrid — Uses both methods depending on the browser context. Uses HTTP Post for desktop browser, and an onProviderLoginToken event for mobile browsers.

The method also affects the behavior of browsers on different platforms:

Platform: Desktop Browser

  • url — The UI authenticates in the currently open window.
  • event — The UI opens a new window to authenticate.
  • hybrid — The UI opens a new window to authenticate.

Platform: Mobile Browser

  • url — The UI authenticates in the currently open window.
  • event — The UI will open a new tab to authenticate.
  • hybrid — The UI authenticates in the currently open window.

Alert: Do no set tokenAction to event in a mobile application, because this is incompatible with popup set to false. Set tokenAction to either url or hybrid and popup to false, and your application should work.

custom Specifies customized presentation of the sign-in UI. If false or missing, the UI displays itself and handles user interactions. If true, the UI doesn’t display itself, and the sign-in page must initiate sign-in flow using setProviderFlow or triggerFlow. For more information, see Modify the Social Login UI.
noProvidersCss When set to true and when used in conjunction with janrain.settings.custom = true, this setting prevents the providers.css file from loading if you don’t require that file. This is for cases where you want to load your own .css file.
forceReauth If set to true, the identity provider is asked to re-authorize the user, even if the user has specified automatic authorization. Facebook, Twitter, Google+, and Sina Weibo support this feature. For Google+, it forces the user to reauthorize permissions. Default is false.
bpChannel The Channel ID for Backplane-enabled applications.
language Specifies a language for messages. Must be a string listed in Localization.
linkClass Specifies the <a> element used to pop up a modal UI. The <a> must have a class attribute that matches the linkClass specified in the JavaScript.
type String that specifies whether the UI is embedded in the web page or is modal (the UI pops up when the user clicks on a link). Values are embed or modal.
providers Array of strings which must be from the IP specifiers listed in Identity Providers.
providersPerPage Specifies the number of provider buttons to display at once.
format Specifies the arrangement of the provider buttons on an embedded UI: two column, one column, or a compact one row. Modal UIs ignore this setting, because modal UIs always have two columns.
actionText Text that appears above provider buttons. To remove the action text completely, set janrain.settings.actionText = ' '. You must include the space between the quotes to remove the actionText. Note that this is a different behavior than results from calling janrain.engage.signin.widget.setActionText(' '), which sets the action text to its default value.

Alert: If you change the actionText setting, our social login UI will not make translations for you.

showAttribution If true, a “Social Login by Janrain” message appears at the bottom of the UI.
fontColor Color of text. Must be a string containing a hexadecimal color code or RGB triplet.
fontFamily Set action text font. Can be a comma-separated list of fonts families; we use the first available font in the list.
backgroundColor Background color. Must be string containing hexadecimal color code or RGB triplet.
width UI width in pixels. Only applies to an embedded UI with a format of two column or one column.
buttonBorderColor Specifies the border color of the buttons. Applies only to UI with a format of two column or one column. Must be string containing hexadecimal color code or RGB triplet.
buttonBorderRadius Specifies the radius of the button corners. Applies only to UI with a format of two column or one column. Must be an integer.
borderColor The color of the border. Must be a string containing a hexadecimal color code or RGB triplet.
borderRadius Specifies the radius of the corners. Must be an integer.
buttonBackgroundStyle Applies only to UIs with a format of two column or one column. Must be a string containing gradient, white or gray.
modalBorderWidth Specifies width in pixels of border for modal UIs.
modalBorderOpacity Must be a number between 0 and 1.
modalBorderColor Must be a string containing a hexadecimal color code or RGB triplet.
facebookPermissions For Facebook only. This requests greater permissions than are originally granted during sign-in, which is also known as Progressive Permissioning. When a user signs in using Facebook and visits a specified area, the user will be prompted to share the additional information. Values requested must be valid Facebook permissions. A list of these may be found on the Facebook Developer site.

Note: you may need to be registered as a Facebook developer to access this link.

extParams You can use this parameter to pass additional information to the providers on sign-in. In this release, only Disqus supports this, but other providers may use this feature in the future. See the extParams section below.
customOpenid Value is true or false. Must be true to add custom Open ID providers.
customProviderInIFrame Value is true or false. If true, custom providers will not escape iframes when using redirect authentication.
rowHeight Values are 40, 60, or 90. The row height in pixels in one row mode.

extParams

This is a provider-specific feature, so you must be careful when implementing it. Use only those parameters that you know a provider supports. If you send a parameter to the wrong provider, you may get unintended results. The syntax looks like this:

janrain.settings.extParams = {
disqus: '{"foo":"bar", "foo2":"baz"}',
facebook: '{"facebook":"boo"}'
}

Custom Window Size

Available to:  

These settings allow you to customize the window size for custom OpenID providers. You can use these settings to specify the window size that opens, or if you don’t, the window will use the default size. Specify the size in pixels.

Supported Settings

The following fields in the janrain.settings object customize the window size for custom OpenID Providers:

Field Description
customOpenidModalWidth Sets the window’s width, specify the number of pixels. The default value is 660. Not required.
customOpenidModalHeight Sets the window’s height, specify the number of pixels. The default value is 220. Not required.

Facebook AutoLogin

Available to: 

Facebook offers automatic login capabilities with other websites. In order for this to work, the user must have previously logged in to the website using Facebook, and approved the app and current set of permissions being requested. Then the user will be automatically logged in when visiting a website that has the auto login configured.

Janrain supports this feature, but currently, it is available only to sites using a Janrain custom CNAME with their Social Login application. If your application URL uses rpxnow.com as part of its address, this will not work.

Supported Settings

The following field in the janrain.settings object enables or disables auto login with Facebook:

Field Description
facebookAutoLogin true or false. When true, allows a user to automatically log into the site when using Facebook.

Custom Scopes

Available to: 

The Custom Scopes setting allows websites sharing the same social login solution to request different information from the user.

For detailed instructions for this feature, please refer to the Assign Scopes on a Per-page Basis topic.

The value for the scopes setting is a list added in array; for example:

janrain.settings.scopes = {"googleplus": ["https://www.googleapis.com/auth/plus.circles.read"]};

Supported Settings

The following field in the janrain.settings object specifies a list of custom scopes:

Field Description
scopes A list of requested scopes in an array.

Example

The following example sets essential values, and overrides select formatting settings.

janrain.settings = {};
janrain.settings.tokenUrl = 'https://example.com/landing';
janrain.settings.type = 'embed';
janrain.settings.appId = '12345678912345678912';
janrain.settings.appUrl = 'https://example.rpxnow.com';
janrain.settings.providers = ['facebook', 'google', 'blogger', 'aol', 'yahoo', 'openid'];
janrain.settings.actionText = 'Choose a provider!';
janrain.settings.showAttribution = false;
janrain.settings.fontColor = '#a020f0';
janrain.settings.fontFamily = 'impact, playbill, fantasy';

Setting Examples

Figure 1: Sign in Settings

  1. janrain.settings.actionText = ‘Sign in using your account with’;
  2. janrain.settings.providers = [‘aol’, ‘google’, ‘yahoo’, ‘openid’];
  3. janrain.settings.showAttribution = ‘true’;

Figure 1: Changing Colors

  1. janrain.settings.backgroundColor = ‘#f5f10c’;
  2. janrain.settings.format = ‘one row’;

Figure 2:  Modal Window

  1. janrain.settings.borderColor = ‘#C0C0C0”;
  2. janrain.settings.type = ‘modal’;