Web - React

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.

Create Permissions Group and Application Key/Secret#

The CDC application used for the OwnID integration requires a Permissions Group that authorizes OwnID to perform certain actions. OwnID strongly recommends that you create a new CDC application that is dedicated to the OwnID integration.

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:

Open the OwnID Console and create an account or log into an existing account.
Select Create Application.
Define the details of the OwnID application, and select Next.
Select the Customer Data Cloud card.
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#

Add OwnID button to your Registration and Login forms.

Install the OwnID React SDK with the following command

npm install @ownid/react

Import OwnIDInit component to your App component and configure it with the App Id from the Step 2

import {OwnIDInit} from '@ownid/react';
...
<OwnIDInit config={{
 appId: 'ogf2culx185biwq'
}}/>

Import OwnID to your Login form and initialize it. The onLogin function will be triggered whenever there's a login using OwnID. It is recommended to use Global Gigya onLogin event to handle the redirections to the profile.

import {OwnID} from "@ownid/react";
...

function LoginComponent() {
    const emailField = useRef(null);
    const passwordField = useRef(null);

    return (
        <form>
            <input ref={emailField} type="email" name="email" />
            <input ref={passwordField} type="password" name="password" />
            <button type="submit">Log In</button>
            <OwnID type='login'
                options={{variant:'button-fingerprint', infoTooltip:true, widgetPosition:'start'}}
                passwordField={passwordField}
                loginIdField={emailField}
                onError={(error) => console.error(error)} />
        </form>
    );
}

Import OwnID to your registration form and initialize it. OwnID SDK automatically will add the OwnID payload to the account if the user registered passwordless.

import {OwnID} from "@ownid/react";
...

function RegisterComponent() {
    const emailField = useRef(null);
    const passwordField = useRef(null);

    function onSubmit(userData) {
        //Call Gigya registration method.
        window.gigya.accounts.initRegistration({callback:function(e){
        window.gigya.accounts.register({regToken:e.regToken,email:userData.loginId,password:userData.password,finalizeRegistration:true, callback:function(ev){
            if(ev.errorCode === 0){
                    //registration is OK
                }
            }})
        }})
    }

    return (
        <form onSubmit={onSubmit}>
            <input ref={emailField} type="email" name="email" />
            <input ref={passwordField} type="password" name="password" />
            <button type="submit">Register</button>
            <OwnID type='register'
                options={{ variant: 'button-fingerprint', infoTooltip: true, widgetPosition:'start' }}
                loginIdField={emailField}
                passwordField={passwordField}
                onError={(error) => console.error(error)} />
        </form>
    );
}

Advanced Initialization Parameters#

The default code added to the CDC WebSDK Configuration initializes the OwnID SDK with two parameters: appId and sdk. 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 OwnID button. 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>'
});

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 it, go to the OwnID Console and open the application. Data type is a String.

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 the design of the OwnID button. Data type is String. Possible values are button(default) and button-fingerprint. The button variation displays a Skip Password button to the right of the password field while the button-fingerprint variation displays a button with a fingerprint icon.
infoTooltip - You have the option of displaying an informative tooltip on top of the button (recommended). Data type is Boolean. Default is false.
textColor - Defines the color of the Skip Password text and/or the color of the fingerprint icon. Data type is a String formatted as a hex color e.g., #0000FF.
borderColor - Defines the color of the border of the OwnID button. Data type is a String formated as a hex color e.g., #0000FF
addOrStatement - You have the option of displaying the word "or" in between the password field and the OwnID button. Data type is Boolean. Default is true.

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.
onBeforeRegister - Defines a custom function that is called just before OwnID registers the user.
onError - Defines a custom function that is called whenever an error happens.