SAP Customer Data Cloud Integration

The SAP Customer Data Cloud integration enables customized registration, login, and user profile management, along with consent management for both B2C and B2B users. This integration allows you to enhance user experience and streamline data management.

SAP Customer Data Cloud allows you to enable customized registration and login, and also manage user profile and consent.

For more information see, SAP Customer Data Cloud Integration Module and SAP Customer Identity Information published on non-SAP site .

Requirements

To integrate SAP Customer Data Cloud with composable storefront, you must have SAP Commerce Cloud 2105 or newer, along with the latest version of SAP Commerce Cloud Extension Pack

Enabling SAP Customer Data Cloud Integration in composable storefront

To enable SAP Customer Data Cloud Integration in composable storefront, you need to configure both the SAP Commerce Cloud back end, and the composable storefront front end.

Configuring the Back End for SAP Customer Data Cloud Integration

The following steps describe how to configure the SAP Commerce Cloud back end for integration with SAP Customer Data Cloud.

Procedure

Follow the steps for Setting Up SAP Commerce Cloud for use with Composable Storefront.
Enable the SAP Customer Data Cloud extensions for B2C.

For more information, see SAP Customer Data Cloud Integration Implementation.
Build and update the system so that the new functionality provided by the SAP Customer Data Cloud integration extension is available.

This step also creates sample CMS data for the electronics-spaContentCatalog content catalog.

Note

You can view the SAP Customer Data Cloud login page through the <spartacus-site-url>/cdc/login URL. This allows you to access the Customer Data Cloud pages and the default login page together.

Update the mobile_android OAuth client (created in step 1) to support the custom authorization grant type, and remove the refresh_token grant type. The following ImpEx can be used to update the grant types:

INSERT_UPDATE OAuthClientDetails ; clientId[unique = true] ; resourceIds ; scope ; authorizedGrantTypes ; authorities ; clientSecret ; registeredRedirectUri
                                 ; mobile_android          ; hybris      ; basic ; authorization_code,password,client_credentials,custom ; ROLE_CLIENT ; secret       ; http://localhost:9001/authorizationserver/oauth2_callback ;

Define the SAP Customer Data Cloud Site configuration and link it to the electronics-spa site.

You can also define other configurations for the integration, such as Field Mapping and Consent Templates. For more information, see SAP Customer Data Cloud Integration Implementation.

Configuring Composable Storefront for SAP Customer Data Cloud Integration

Perform the following steps after you have set up your composable storefront. For more information, see Building the Composable Storefront From 5.2 Libraries.

Procedure

Install the SAP Customer Data Cloud integration library by running the following command from within the root directory of your storefront application:

ng add @spartacus/cdc

When you run this command, the schematics create a module for the CDC integration that includes all of the required imports and configuration.

Note: To install the CDC integration library using schematics, your app structure needs to match the composable storefront reference app structure. For more information, see Reference App Structure.

Alternatively, you can create the module manually and import it into your application, as shown in the following example:

import { NgModule } from '@angular/core';
import { CdcConfig, CdcRootModule, CDC_FEATURE } from '@spartacus/cdc/root';
import { provideConfig } from '@spartacus/core';
@NgModule({
  declarations: [],
  imports: [CdcRootModule],
  providers: [
    provideConfig({
      featureModules: {
        [CDC_FEATURE]: {
          module: () => import('@spartacus/cdc').then((m) => m.CdcModule),
        },
      },
    }),
    provideConfig(<CdcConfig>{
      cdc: [
        {
          baseSite: 'electronics-spa',
          javascriptUrl: '<paste-link-to-cdc-script>',
          sessionExpiration: 3600,
        },
      ],
    }),
  ],
})
export class CdcFeatureModule {}

Adjust the CDC configuration in the newly created module, as shown in the following example:
```
provideConfig(<CdcConfig>{
      [CDC_FEATURE]: [
        {
          baseSite: 'electronics-spa',
          javascriptUrl: 'https://cdns.<data-center>.gigya.com/JS/gigya.js?apikey=<Site-API-Key>',
          sessionExpiration: 3600,
        },
      ],
    }),
```
The following is a summary of the options that are available in the CDC configuration:
- baseSite refers to the CMS Site that the Customer Data Cloud Site configuration should be applied to. The same should be configured in SAP Commerce Cloud Backoffice as well.
- javascriptUrl specifies the URL of the Web SDK that you wish to load. This is constructed using the value of the Site API Key, and the data center where the Customer Data Cloud site is created. For example, https://cdns.<data-center>.gigya.com/JS/gigya.js?apikey=<Site-API-Key>
- sessionExpiration is the time (in seconds) that defines the session expiry of the SAP Customer Data Cloud session. This should match with the session expiration time of the OAuth Client to ensure that both the Customer Data Cloud session and the SAP Commerce Cloud token live for the same time.
Build and start the storefront app to verify your changes.

SAP Customer Data Cloud Integration in the Composable Storefront User Interface

SAP Customer Data Cloud Integration supports native UI integration in the composable storefront without the use of SAP CDC screen sets.

The following screens are implemented using the SAP CDC SDK:

B2C: Login
B2C: Registration