Skip to main content

SAP Customer Data Cloud

A website using SAP Customer Data Cloud (CDC) as its identity platform can implement OwnID to simplify and streamline the login experience for its users. Integrating OwnID with a website that uses CDC involves three basic steps:

  • Create a CDC application and modify the CDC schema
  • Use the OwnID Console to create an OwnID application
  • Integrate OwnID with your website

Step 1: Configure CDC#

Configuring CDC includes creating a new CDC application with appropriate permissions and adding custom fields to the CDC schema.

Create Permissions Group#

The CDC application used for the OwnID integration requires a Permissions Group that authorizes OwnID to perform certain actions. Creating this Permissions Group first allows you to select it when creating the CDC application. Be sure to select Update on each tab when defining settings.

  1. In the CDC Console, create a new Permissions Group.
  2. On the Privileges tab, navigate to the External Integrations section and select both 3rd Party Plugins and Full API Access.
  3. On the Scope tab, select This group applies only to the sites listed below and then select the websites that are integrating with OwnID. If there is a site group, select the child site that uses OwnID.
  4. On the Data Field Access tab, allow Full Data Access to give Read and Write access to all fields. If you are using the new CDC Console, ensure that all fields have View and Edit access.

Create CDC Application#

OwnID strongly recommends that you create a new CDC application that is dedicated to the OwnID integration. Be sure to select the newly created Permissions Group when creating the application.

Modify CDC Schema#

SAP Customer Data Cloud includes a schema that stores all of your users' data. To integrate OwnID, you need to add custom fields to this CDC schema. You could create these fields one-by-one, but this is tedious and prone to error. To simplify the effort, CDC accepts an API call that automatically adds the fields to the schema, allowing you to use a REST client like Postman to accomplish the task. To add the custom fields to the schema:

  1. Open Postman and switch to the workspace where you want to import a collection. If you are new to Postman, you can start with the Postman documentation.
  2. Select the following button to import the collection that contains the required API call: Run in Postman
  3. In Postman, use the drop-down to select the OwnID-CDC Integration environment, and then select the Quick Look icon to open the variables of the environment. If you prefer, you can use the current environment and manually create each variable in the next step.
  4. Define the variables used by the API request (datacenter, apiKey, userKey, and secret). If you are using a CDC site group, apiKey must be the API Key of the parent site, not the child site. Note that userKey refers to the CDC application key. For more information about defining variables in Postman, see Using Variables.
  5. Send the API request.

You can now check the CDC schema to verify that the request successfully added the custom fields. Open your site in the CDC Console and select Schema in the left-hand navigation pane. You should see the schema fields under accounts > data > ownid.

Step 2: Create OwnID Application#

An OwnID application connects your website's identity platform with the OwnID widget in the front end. First, you integrate with CDC when creating the application. This OwnID application is then assigned a unique appId that is added to the website's front end. To create an OwnID application:

  1. Open the OwnID Console and create an account or log into an existing account.
  2. Select Create Application.
  3. Define the details of the OwnID application, and select Next.
  4. Select the Customer Data Cloud card.
  5. Collect the identifying information of the CDC application (site data center, site API key, application key, and application secret) and then define them in the OwnID application. When working with a site group, the API Key identifies the key of the child site.

Step 3: Integrate OwnID with Your Website#

You can add the Skip Password feature to your registration and login flows by adding a small block of code to the CDC WebSDK Configuration for your website. For additional configuration options that can change the behavior and look of the Skip Password feature, see Advanced Initialization Parameters.

  1. Open your site in the CDC Console, and go to the Settings tab.
  2. In the left-hand pane, select WebSDK Configuration.
  3. Copy and paste the following code into the text box, being sure to initialize it with the appId of your OwnID application. To find this appId, open the OwnID application in the OwnID Console and go to the General tab.
onGigyaServiceReady: function(serviceName) {
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments;(w[o].q = w[o].q || []).push(a); if('function'==typeof a[a.length - 1]){a[a.length - 1](Promise.resolve());}};
e = d.createElement(s); p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p);
})(window, document, 'script','https://cdn.ownid.com/js/gigya-sdk.es5.js', 'ownid');
// Initialize with the appId of your OwnID application
ownid('init', {appId: 'uw8nb56ipzsklu'});,
screensets: true});
},
  1. Select Save Changes.

As a result, your WebSDK Configuration should look something like: WebSDK Configuration

Advanced Initialization Parameters#

The default code added to the CDC WebSDK Configuration initializes the OwnID SDK with two parameters: appId and screensets. In addition to these required parameters, there are optional parameters that can be added to the initialization code to modify the look and behavior of the Skip Password option. Each parameter is added to the ownid function of the initialization code as a key/value pair of the JSON object. For example, once you have copied the initialization code to the WebSDK Configuration, you could edit the ownid function to add the optional textColor parameter:

ownid('init',{
appId: '<myAppId>',
screensets: true,
textColor: '#0000FF'
});

The following is a complete list of initialization parameters.

Required Parameters

  • appId - The OwnID appId, which is unique to the OwnID application for your website. To obtain the it, go to the OwnID Console and open the application. Data type is a String.
  • screensets - Indicates whether the OwnID-CDC integration leverages Screen-Sets. Data type is Boolean.

User Interface Parameters

  • passwordToggle - If your password field includes an option to hide/show the password (typically an eye icon), then the OwnID SDK must know the DOM element of the icon so it can adjust the OwnID widget accordingly. For example, the following key/value pair sets the passwordToggle parameter to a String that specifies the DOM element of the hide/show icon:
passwordToggle: '[data-screenset-roles*="instance"] .toggle-pw-visibility-icons'
  • variant - Determines whether the Skip Password feature appears as a button or inline text. Data type is String. Possible values are button(default) and inline. An inline widget displays "Skip Password" in the password field itself, while the button variation displays a Skip Password button to the right of the password field.
  • textColor - Defines the color of the Skip Password text. Data type is a String formatted as a hex color e.g., #0000FF.
  • borderColor - Defines the color of the border of the Skip Password widget. Data type is a String formated as a hex color e.g., #0000FF
  • addOrStatement - If you are using the default Skip Password button in your UI (as opposed to the inline variant), you have the option of displaying the word "or" in between the password field and the Skip Password button. Data type is Boolean. Default is true.

CDC Configuration Parameters

  • screensetsConfig - If your CDC implementation includes Screen-Sets with custom IDs, you must initialize the OwnID SDK with the custom IDs of the login and registration Screen-Sets. CDC implementations that use the default Screen-Set IDs can ignore this parameter. As an example, the following key/value pair passes the custom IDs of the login and registration Screen-Sets to the OwnID SDK:
screensetsConfig: {
customScreenSetsIds: {
login: 'bazco-nord-login-screen',
registration: 'bazco-nord-registration-screen'
}
}

Custom Code Parameters

The OwnID SDK can be initialized with custom code that is called just before or just after OwnID performs an action. This code is written as an inline JavaScript function that is passed as the value of an initialization parameter. For example, you could use the onRegister parameter to invoke a function that leverages the gtag of Google Analytics when a user registers:

onRegister:function(){
gtag('event', 'ownid_registration', {
'event_category': 'OwnID-registration',
'event_label': 'a user has completed the OwnID flow.'
});
}

The following custom code parameters are available:

  • onRegister - Defines a custom function that is called just after OwnID registers a new user.
  • onLogin - Defines a custom function that is called just after OwnID has logged in the user.
  • onBeforeLogin - Defines a custom function that is called just before OwnID logs in the user.
  • onBeforeLinkOnLogin - Defines a custom function that is called when an existing CDC user with a traditional password completes the process of setting up OwnID for the first time.
  • onMagicLinkLogin - Defines a custom function that is called just after the user logs in with a Magic Link. With Magic Link, users who are using a desktop without their phone available have the option of receiving an email that contains a one-time link. Without this parameter, the onLogin function is called after the user logs in with a Magic Link.