Orchestration SDKs

Step 2. Integrating PingOne Protect auth journeys in JavaScript

PingOne Advanced Identity Cloud PingAM JavaScript

Integrating your application with PingOne Protect enables you to perform risk evaluations during your customer’s journey.

Initializing data collection

The earlier you can initialize data collection, the more data it can collect to make a risk evaluation.

Your client application can manually initialize data collection, and must provide the configuration to control the PingOne Signals SDK.

These are the main methods for initializing data collection:

  1. Initializing using the Protect interface

  2. Initializing on receipt of a PingOne Protect initialize callback

Initializing using the Protect interface

The Journey module allows you to initialize data collection directly using the Protect interface. This provides maximum flexibility in how the collection operates.

To directly initialize data collection using the Protect interface, complete these steps:

  1. Add a configuration object to your code that defines the property values for data collection.

    The available properties are as follows:

    Parameter Description

    envID

    Required. Your PingOne environment identifier.

    For example, 3072206d-c6ce-ch15-m0nd-f87e972c7cc3

    deviceAttributesToIgnore

    Optional. A list of device attributes to ignore when collecting device signals.

    For example, AUDIO_OUTPUT_DEVICES or IS_ACCEPT_COOKIES.

    behavioralDataCollection

    When true, collect behavioral data.

    Default is true.

    hubUrl

    Optional. The iframe URL to use for cross-storage device IDs.

    disableHub

    When true, the client stores device data in the browser’s localStorage only.

    When false the client uses an iframe.

    Default is false.

    disableTags

    When true, the client does not collect tag data.

    Tags are used to record the pages the user visited, forming a browsing history.

    Default is false.

    externalIdentifiers

    Optional. A list of custom identifiers that are associated with the device entity in PingOne Protect.

    waitForWindowLoad

    When true, initialize the SDK on the load event, instead of the DOMContentLoaded event.

    Default is true.

    universalDeviceIdentification

    Optional. When true, device data in the payload returned to the server is provided as a signed JWT.

    agentIdentification

    Set to true when using risk policies that contain the PingID Device Trust predictor.

    Default is false.

    agentTimeout

    If you have enabled agentIdentification, use agentTimeout to specify a connection timeout, in milliseconds.

    Specifying a value overrides the default.

    Default is 1000.

    agentPort

    If you have enabled agentIdentification, use agentPort to specify the port for connecting to the trust agent.

    Specifying a value overrides the default.

    Default is 9400.

    Example code:

    const protectApi = protect({
    behavioralDataCollection: true,
    envId: "3072206d-c6ce-ch15-m0nd-f87e972c7cc3",
    deviceAttributesToIgnore: ['deviceId', 'serialNumber'],
});

  2. Call the start() function to start the data collection using the configuration object:

    await protectApi.start();

console.log('Protect data collection initialized.');

Initializing on receipt of a PingOne Protect initialize callback

You can choose not to initialize data collection on app startup and instead initialize it on-demand, when your authentication journey reaches the relevant node.

Use the same start() method as before to initialize data collection in response to receiving a PingOneProtectInitializeCallback from the server, but use the getConfig() method to obtain the configuration provided by the callback, rather than hard-coding it in your app:

JavaScript example of on-demand PingOne Protect initialization
const callbacks = step.callbacks;
callbacks.forEach((callback) => {
  if (callback.getType() === 'PingOneProtectInitializeCallback') {
    // Optionally use configuration options from the journey to initialize the protect module
    const config = callback.getConfig();

    // Initialize the Protect module and begin collecting data
    const protectApi = protect(config);
    const result = await protectApi.start();

    if (result?.error) {
        // Handle error
    }
  }

Pausing and resuming behavioral data capture

The PingOne Protect Signals SDK can capture behavioral data, such as how the user interacts with the app, to help when performing evaluations.

There are scenarios where you might want to pause the collection of behavioral data:

  • To reduce memory and processor utilization. Continuously collecting behavioral data beyond authentication could reduce the performance of your client app.

  • You only want to consider device attribute data when performing PingOne Protect evaluations.

You can pause, and also resume behavioral data collection if required.

The SDKs provide the pauseBehavioralData() and resumeBehavioralData() methods for pausing and resuming the capture of behavioral data.

The PingOneProtectEvaluationCallback callback can include a flag to pause or resume behavioral capture that you should respond to as follows:

const callback = step.getCallbackOfType('PingOneProtectEvaluationCallback');
const shouldPause = callback.getPauseBehavioralData();

console.log(`getPauseBehavioralData: ${shouldPause}`);

if (shouldPause) {
  #protectApi.pauseBehavioralData()#;
}

Returning collected data for a risk evaluation

To perform risk evaluations, the PingOne server requires you to return the captured behavioural data.

On receipt of a PingOneProtectEvaluationCallback callback, use the getData() method to prepare the collected data, and call the setData() method to populate the response with that captured data.

Next, call setData() to attach the data to the callback:

if (step.getCallbacksOfType(callbackType.PingOneProtectEvaluationCallback).length) {
        const callback = step.getCallbackOfType(callbackType.PingOneProtectEvaluationCallback);
        const data = await protectApi.getData();
        if ('error' in data) {
          // Handle error
          console.error('Error collecting PingOne Protect data', data.error);
        } else {
          callback.setData(data);
        }
}