Settings

When the Social Sign-in Widget 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 widget with embedded settings (Pro or Enterprise service levels only), the complete widget configuration is placed in the generated code. You can modify these settings on a page-by-page basis, making it possible to customize the widget where needed. See Figure 1.

Figure 1: Embedded Settings

Settings can also be specified when the widget is designed and created (see Configure the Widget), or they can be modified after the widget is live (see documentation for the Widget, Signin, and Modal objects).

Usage
janrain.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”, Engage uses three cookies to store needed information (expected_tab, login_tab, welcome_info_name). If set as “single cookie”, Engage will use a single cookie named ‘janrain_engage_login_data’ that stores expected_tab, login_tab, 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 Engage server for this application. Available from Engage Dashboard home page under “Application info.”
appID A string that identifies the application. Available from Engage Dashboard home page under “Application 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 widget is set up for the server-side authentication method.
  • event — The widget issues the one time token within the object generated by the onProviderLoginToken event. Use this method when the widget 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 widget authenticates in the currently open window.
  • event — The widget opens a new window to authenticate.
  • hybrid — The widget opens a new window to authenticate.

Platform: Mobile Browser

  • url — the widget authenticates in the currently open window.
  • event — the widget will open a new tab to authenticate.
  • hybrid — the widget 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.

popup

A flag controlling whether the sign-in flow is launched in a pop-up window or redirects the current browser window. Defaults to true. See also type and tokenAction.

Alert! For mobile applications, set popup to false and tokenAction to either url or hybrid.

custom Specifies customized presentation of sign-in widget. If false or missing, the widget displays itself and handles user interactions. If true, the widget doesn’t display itself, and the sign-in page must initiate sign-in flow using setProviderFlow or triggerFlow. For more information, see Coding the Widget Appearance.
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 widget. The <a> must have a class attribute that matches the linkClass specified in the widget.
type String that specifies whether the widget is embedded in the web page or is modal (the widget 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 widget: two column, one column, or a compact one row. Modal widgets ignore this setting, because modal widgets 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 Sign-In Widget will not make translations for you.
showAttribution If true, a “Powered by Janrain” message appears at the bottom of the widget.
fontColor Color of widget 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 Widget background color. Must be string containing hexadecimal color code or RGB triplet.
width Widget width in pixels. Only applies to embedded widgets with a format of two column or one column.
buttonBorderColor Specifies the border color of the buttons. Applies only to widgets 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 widgets with a format of two column or one column. Must be an integer.
borderColor The color of the widget border. Must be a string containing a hexadecimal color code or RGB triplet.
borderRadius Specifies the radius of the widget corners. Must be an integer.
buttonBackgroundStyle Applies only to widgets 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 widgets.
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 siteNote: 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 extParms section below.

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"}'
}

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';

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.

Usage: janrain.settings

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 into 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 only available to sites using a Janrain custom CNAME with their Engage application. If your application URL uses rpxnow.com as part of its address, this will not work.

Usage: janrain.settings

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

Custom Scopes

Available to: 
The Custom Scope setting allows websites sharing the same Social Sign-in solution to request different information from the user.

For detailed instructions for this feature, please refer to the Custom Scoping Guide.

The value for the scopes setting is a list added in array. Example:

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

Usage: janrain.settings

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

Help Us Improve!

Give us your feedback