Add a custom social login provider button

📘

Much of the content on this page deals with a legacy feature of the <COMPANY_NICKNAME>> Identity Cloud (in this case, the JavaScript SDK). If you are currently an Identity Cloud customer and are using the JavaScript SDK, that SDK is still supported. However, if you’re new to the Identity Cloud the JavaScript SDK is no longer available. Instead, you should use Hosted Login for your login and registration needs. See Configure social login in Hosted Login to learn how to implement social login in Hosted Login.


For more authentication options on your site, you may add OpenID providers to the Social Login UI. Find out more about becoming an OpenID Provider here.

To add a custom provider button, configure the following settings:

FieldDescription
customOpenidSet customOpenid to true to use the custom OpenID settings.
customOpenidFlowUse this to set the flow. Enter the name of a valid flow file (for example: openid).
customOpenIdProviderNameOptional. Use this to create the button text (usually, the Identity Provider name).The default text is “Sign In”.

Note: Long provider names will be truncated. Also, a leading symbol is needed when adding an apostrophe to text (for example: Provider’s).
customOpenIdProviderColorUse this setting to define the color of the button text. Use a standard webcolor hexadecimal value (for example: #729fcf).
customOpenidProviderIdAn ID that you create to use for keying configuration objects in the multi-custom OpenID scenario, or to call the trigger flow. For example: yourCustomId.
customOpenidIdentifierThis URL must point to a valid OpenID endpoint.
customOpenidOpxblobUse this setting to pass information to the provider as JSON.
customOpenidLargeIconEnter the full path to a large icon image for the provider. Other identity provider icons are 128×128 pixels. This image must be hosted on your servers.
providersAdd the custom provider ID created in the customOpenidProviderId setting to the array of available identity providers in your UI. You must also add openid to this array.

Single custom OpenID setup

To enable a single OpenID provider in your UI, your code should look similar to this:

janrain.settings.providers = ['google','facebook','openid','open-eye-dee'];
janrain.settings.customOpenid = true;
janrain.settings.customOpenidFlow = 'openid';
janrain.settings.customOpenIdProviderName = 'yourCustomId';
janrain.settings.customOpenIdProviderColor = '#729fcf';
janrain.settings.customOpenidProviderId = 'open-eye-dee';
janrain.settings.customOpenidIdentifier = 'https://openid.disqus.com';
janrain.settings.customOpenidOpxblob = '{'origin':'a.sjcrh.info','otherParam':'other cool value'}';
janrain.settings.customOpenidLargeIcon = 'http://janrain-widgets.s3.amazonaws.com/saml/customSAMLLargeIcon.png';

Multi-custom OpenID setup

To set up multiple OpenID providers in your UI, use code similar to this:

janrain.settings.providers = ['google','facebook','openid','alpha','gamma','beta','delta'];
janrain.settings.customOpenid = true;
janrain.settings.customOpenidProviderId = ['alpha','gamma','beta','delta'];
janrain.settings.customOpenIdProviderName = 'alpha':'Aardvark','beta':'Badger','gamma':'Giraffe','delta':'Donkey' };
janrain.settings.customOpenIdProviderColor = {'alpha':'#729fcf','beta':'#729fcf','gamma':'#729fcf','delta':'#729fcf' };
janrain.settings.customOpenidIdentifier = {'alpha':'https://openid.alpha.com',     'beta':'https://openid.beta.com','gamma':'https://openid.gammma.com','delta':'https://openid.delta.com' };
janrain.settings.customOpenidLargeIcon = {'alpha':'http://www.internet.com/abc.png','beta':'http://mail.google.com/inbox.png','gamma':'http://bing.com/large\_icon.png','delta':'http://bbc.co.uk/wales.png'

📘

The icons will not display properly unless you modify the CSS for your UI.


Did this page help you?