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:
Field | Description |
|---|---|
customOpenid | Set customOpenid to true to use the custom OpenID settings. |
customOpenidFlow | Use this to set the flow. Enter the name of a valid flow file (for example: openid). |
customOpenIdProviderName | Optional Note: Long provider names will be truncated. Also, a leading symbol is needed when adding an apostrophe to text (for example: Provider’s). |
customOpenIdProviderColor | Use this setting to define the color of the button text. Use a standard webcolor hexadecimal value (for example: #729fcf). |
customOpenidProviderId | An 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. |
customOpenidIdentifier | This URL must point to a valid OpenID endpoint. |
customOpenidOpxblob | Use this setting to pass information to the provider as JSON. |
customOpenidLargeIcon | Enter 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. |
providers | Add 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:
Note. The icons will not display properly unless you modify the CSS for your UI.
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'