Skip to main content

SAP Customer Data Cloud

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

  • Use the OwnID Console to create an OwnID application
  • Create a CDC application and modify the CDC schema
  • Add OwnID code to your flows

Step 1: Create OwnID Application#

An OwnID application connects your website's identity management system 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 Server URL 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 in to an existing account.
  2. Select Create Application.
  3. Define the details of the OwnID application, and select Next.
  4. If you are ready to configure CDC and add OwnID to your flows, select the SAP Customer Data Cloud card and go to Step 2: Configure CDC. If you would like to complete these steps later, select Skip for Now.

Step 2: Configure CDC#

Configuring CDC includes creating a new CDC application and adding custom fields to the CDC schema. If you created an OwnID application without starting the CDC integration, open the application in the OwnID Console and select the Integration tab before taking the following steps.

Define CDC Application Details#

OwnID strongly recommends that you create a new CDC application that is dedicated to the OwnID integration. Once you have created this application, collect its identifying information (site data center, site API key, application key, and application secret) and define them in the OwnID application. Note that the CDC console refers to the application key as a user key.

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). The values of these variables match the values defined in your new OwnID application with one exception: 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 3: Add OwnID to Your Flows#

With a just few steps in the CDC console, you can add the Skip the Password feature to your registration, log in, and account recovery flows.

Including the OwnID SDK#

A website that uses the OwnID widget must reference the OwnID SDK script file. To add the OwnID SDK to your website:

  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 Server URL of your OwnID application. To find this Server URL, 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 Server URL of your OwnID application
ownid('init', {serverUrl: 'https://myURL.server.ownid.com/ownid'});
},
  1. Select Save Changes.

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

Adding OwnID Events to Screen-Sets#

OwnID has custom code for screen events that provides the passwordless experience for your user. Use the following steps to add this code to your screen-sets in the CDC console. If you are overwriting events in your front end, you can place the required OwnID code in your client-side pages rather than the CDC console.

  1. In the CDC console, go to the Settings tab.
  2. In the left-hand pane, select Screen-Sets.
  3. Select your organization's implementation of the RegistrationLogin screen-set. Be sure to avoid the default version if you have a unique implementation.
  4. Select Javascript, and enter then following JavaScript parameters in the text box. If you already have custom code in the onSubmit, onAfterScreenLoad, or onHide events, place the OwnID code after your custom code within the event.
// Called before a form is submitted.
onSubmit: function(event) {
return window.ownid('screenSets.onSubmit', event);
},
// Called after a new screen is rendered.
onAfterScreenLoad: function(event) {
window.ownid('screenSets.onAfterScreenLoad', event);
},
// Called when a user clicks the "X" (close) button or the screen is hidden following the end of the flow.
onHide: function(event) {
window.ownid('screenSets.onHide');
}
  1. Select Save.

As a result, your JavaScript parameters should look something like: Javascript Events

Additional CMS/e-commerce Requirements#

If your CDC site is using a connector for a CMS/e-commerce like Drupal or SAP Commerce Cloud, there is an additional piece of code that you need to add to the onAfterScreenLoad event defined for your screen-set. Follow the instructions above for adding OwnID events to screen-sets, but place the following code at the top of the onAfterScreenLoad event (before the other OwnID function).

window.ownid('screenSets.addEventHandlers', {
onSuccess:function(currentScreen){
if(currentScreen === 'gigya-login-screen'){
gigya.accounts.getAccountInfo({include: 'all,id_token,groups'},{
callback:function(gaiEvent) {
gigya.socialize.notifyLogin({
siteUID: gaiEvent.UID,
UIDSig: gaiEvent.UIDSignature,
UIDTimestamp: gaiEvent.signatureTimestamp,
});
}
});
}
if(currentScreen === 'gigya-reset-password-screen'){
// Insert code e.g., display success message or switch to another screen
}
}
});

Configuring the Registration Screen#

If the registration page of your website includes a Confirm Password field, you need to use the CDC console to configure the properties of that field. Registration pages without a Confirm Password field do not need to be configured.

  1. Assuming you still have the RegistrationLogin screen-set open in the console, use the Choose a screen drop-down to select Registration.
  2. Select the Confirm Password field on your screen. The properties of the field appear in the right-hand Properties pane.
  3. In the CSS Classes field of the Properties pane, enter confirm-password-container.

Configuring the Reset Password Screen#

When implementing OwnID, the CDC Reset Password screen corresponds to the Account Recovery flow. For example, a customer who uses Skip the Password to log in, but has a new phone, navigates to the Reset Password screen to recover their account. You need to make the following changes to the Reset Password screen:

  1. Assuming you still have the RegistrationLogin screen-set open in the console, use the Choose a screen drop-down to select Reset Password.
  2. Drag and drop a label to the location on the screen where you want the OwnID widget to appear.
  3. In the Properties pane, clear the Label field so it is blank.
  4. In the CSS Classes field of the Properties pane, enter recovery-widget.