Adding device profiling to an Authentication API-based application using Fingerprint JS

About this task

Use the following instructions to add device profiling to a web application using Fingerprint JS. Learn more about the authentication API in Authentication API in the PingFederate documentation.

The PingOne Risk (Signals) SDK is the preferred way to get device profiling and is recommended for use in the PingOne Risk Integration Kit 1.3 and later.

Steps

Copy the following files from the integration .zip archive to your web server.
- fingerprint2-<version>.min.js
- pingone-risk-management-profiling.js

Add the following external script references to the sign-on page:

The scripts must be added in the following order.

<script type="text/javascript" src="fingerprint2-<version>.min.js"></script>
<script type="text/javascript" src="{file-prefix}-profiling.js"></script>

Configure your application to call the profileDevice(onCompletion) function. This creates the device profile.

Configure functions to format the device profile and submit it to the authentication API. Use the following code sample as a guide.

function onCompletion(flowId, components) {
    var deviceProfile = transformComponentsToDeviceProfile(components);
    submitDeviceProfile(flowId, deviceProfile);
}

function submitDeviceProfile(flowId, deviceProfile) {
    var myHeaders = new Headers();
    myHeaders.append("X-XSRF-Header", "test");
    myHeaders.append("Content-Type", "application/vnd.pingidentity.submitDeviceProfile+json");

    var raw = JSON.stringify({
        "deviceProfile": deviceProfile
    });

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };

    fetch("https://pf_host:pf_port/pf-ws/authn/flows/" + flowId, requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}

When the authentication API is in the DEVICE_PROFILE_REQUIRED state, your application should submitDeviceProfile with a value structured as follows:

{
   "deviceProfile":{
      "userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:82.0) Gecko/20100101 Firefox/82.0",
      "language":"en-CA",
      "colorDepth":24,
      "deviceMemory":null,
      "hardwareConcurrency":12,
      "screenResolution":[
         3440,
         1440
      ],
      "availableScreenResolution":[
         3440,
         1417
      ],
      "timezoneOffset":480,
      "timezone":"America/Los_Angeles",
      "sessionStorage":true,
      "localStorage":true,
      "indexedDb":true,
      "addBehaviour":false,
      "openDatabase":false,
      "cpuClass":null,
      "platform":"MacIntel",
      "plugins":[
      ],
      "webgl":[
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAARYUlEQVR4nO3c30vcj57f8effUWg5F1
		 [...]
		 WEBGL_draw_buffers;WEBGL_lose_context",
         "webgl aliased line width range:[1, 1]",
         "webgl aliased point size range:[1, 8191]",
         [...]
         "webgl fragment shader low int precision rangeMin:24",
         "webgl fragment shader low int precision rangeMax:24"
      ],
      "webglVendorAndRenderer":"ATI Technologies Inc.~AMD Radeon Pro 560X OpenGL Engine",
      "adBlock":false,
      "hasLiedLanguages":false,
      "hasLiedResolution":false,
      "hasLiedOs":false,
      "hasLiedBrowser":false,
      "touchSupport":[
         "0",
         "false",
         "false"
      ],
      "fonts":[
         "Andale Mono",
         "Arial",
         [...]
         "Wingdings",
         "Wingdings 2",
         "Wingdings 3"
      ],
      "audio":"35.7383295930922"
   }
}

When you complete the steps in Configuring an adapter instance, set the Device profiling method to Captured by this adapter.