--- title: Step 2. Integrating PingOne Protect auth journeys in JavaScript description: Explains how to develop a client application that integrates with PingOne Protect by initializing data collection, managing behavioral data capture, and returning the collected data to an authentication journey. component: orchsdks page_id: orchsdks:journey:use-cases/protect/javascript/02-protect-javascript-app-journeys canonical_url: https://developer.pingidentity.com/orchsdks/journey/use-cases/protect/javascript/02-protect-javascript-app-journeys.html keywords: ["Journeys", "PingOne Protect", "Client App", "Data Collection", "Risk Evaluation"] section_ids: start: Initializing data collection direct: Initializing using the Protect interface on-demand: Initializing on receipt of a PingOne Protect initialize callback pause-resume: Pausing and resuming behavioral data capture return-data: Returning collected data for a risk evaluation --- # Step 2. Integrating PingOne Protect auth journeys in JavaScript [icon: circle-check, set=far]PingOne Advanced Identity Cloud [icon: circle-check, set=far]PingAM [icon: js, set=fab]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](#direct) 2. [Initializing on receipt of a PingOne Protect initialize callback](#on-demand) ### 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](https://docs.pingidentity.com/pingone/threat_protection_using_pingone_protect/p1_protect_risk_predictors.html#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: ```javascript 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: ```javascript 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 ```javascript 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: ```js 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: ```javascript 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); } } ```