- Overview
- Social Sign-in Widget
- User Registration Widget
- Social Sharing Widget
- Provider Setup Guide
- One-Click Sharing Widget
- Legacy Sign-in Widget
- Legacy Sharing Widget
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.
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. |
| 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:
The method also affects the behavior of browsers on different platforms: Platform: Desktop Browser
Platform: Mobile Browser
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 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 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 ¶
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. |
