Enable a custom provider

Using the /custom-providers operation to create a custom provider means that you can now employ that provider for social logins. However, there are at least two things that creating a custom provider doesn’t mean:

1. It doesn’t mean that the provider is added to your Social Login Dashboard. With few exceptions (perhaps some SAML providers) custom providers aren’t available in the Social Login Dashboard; these providers can only be managed by using API calls.

2. It doesn’t mean that your new provider automatically appears on your Hosted Login sign-in screen. Instead, to use your new provider you’ll need to follow the procedures detailed in this section of the documentation and configure a pair of settings in your Hosted Login application client.

To begin with, you must create a JSON snippet that will serve as the value for the authentication.providers.custom setting. That snippet, which provides configuration details for your custom provider, should look similar to the following:

{
    "3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.ab34fd29-1c4b-42e3-8be8-142ab8de8841": {
        "name": "Dropbox",
        "icon": "https://icons.iconarchive.com/icons/danleech/simple/128/dropbox-icon.png",
        "provider": "akamai"
    }
}

Here’s how to interpret the preceding snippet:

In order to use your JSON value in Console you must then remove the line breaks and the blank spaces between the JSON elements. In other words, your final JSON snippet should look more like this:

{"3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.ab34fd29-1c4b-42e3-8be8-142ab8de8841": {"name": "Dropbox","icon": "https://icons.iconarchive.com/icons/danleech/simple/128/dropbox-icon.png","provider": "akamai"}}

As soon as the JSON snippet ready for use, the next order of business is to add (or modify) a pair of settings in your Hosted Login application client (the API client associated with your OpenID Connect login client). 

📘

These settings must be configured for each application client that will use the custom provider. If you want, you can configure the settings separately for each of your application clients. Alternatively, you can configure the two settings at the application scope. By default, those two settings will be inherited by all your application clients.

To configure the settings, complete the following procedure:

1. In Console, click Manage Properties, click the Actions icon next to your application client, and then click Edit:

   

2. On the Edit page, click Edit Settings:

   

3. On the Edit Settings page, click the Add Setting icon:

   

4. In the Select setting key field, type authentication.providers.custom and then click Create authentication.providers.custom:

   

5. Enter your JSON snippet in the Value field for the new setting:

   

6. If you already have a setting named authentication.providers, skip to step 7. (You probably will have this setting if you’re already using social login.) If you don't have a setting named authentication.providers then repeat steps 3 and 4 to create the authentication.providers setting.

7. Add the unique identifier (not the name) of your custom provider to the Value field for the authentication.providers setting. As noted previously, the identifier consists of your customer ID number (e.g., 3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.ab34fd29-1c4b-42e3-8be8-142ab8de8841) followed by a period, followed by the custom provider ID (for example, ab34fd29-1c4b-42e3-8be8-142ab8de8841).

   The following screenshot shows an authentication.providers value consisting of facebook, twitter, and the custom provider 3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.ab34fd29-1c4b-42e3-8be8-142ab8de8841.ab34fd29-1c4b-42e3-8be8-142ab8de8841:

   

   The Value must be configured as a JSON array containing a comma-separated list of providers, with each provider enclosed by double quote marks.

8. Click the Save Changes icon.

After saving your changes, wait a minute or two for those changes to take effect, then bring up your Hosted Login sign-in screen. When you do that, you should see your new social login provider:

If you want to use more than one custom provider, just add those additional providers to both the authentication.providers and authentication.custom.providers settings. For example, this JSON snippet adds Dropbox and Slack to the authentication.custom.providers setting:

{**"3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.3975a17a-54h6-4en5-nhj8-523133f0ki8g": {"name": "Dropbox", "icon": "https://icons.iconarchive.com/icons/danleech/simple/128/dropbox-icon.png", "provider": "akamai"}**, **"3cc14467-fd4f-437d-a0c0-0b3888dd2ee4.3fa7eb5d-8725-4902-81ae-d3b90e9d27a8": {"name": "Slack", "icon": "https://assets.brandfolder.com/pl546j-7le8zk-6gwiyo/v/2925175/view@2x.png?v=1611637093", "provider": "akamai"}**}

After the settings have been updated and saved, both Dropbox and Slack appear on your Hosted Login sign-in screen: