Version: 4.4.0

Resources

Getting Started

To integrate the PingOne Fraud for Web SDK on your client:

  1. Import the Fraud SDK script. Include the following script section in each relevant page of your app:

    <script id="stPingId"
             src="https://assets.pingone.com/p1f/web-sdk/${LATEST_VERSION}/p1f-sdk.js?appId=<appId>"
             defer>
     </script>

    The id="stPingId" setting is mandatory.

  2. Initialize the SDK by adding a listener to the SecuredTouchReadyEvent event:

    function onSecuredTouchReady(callback) {
         if (window['_securedTouchReady']) {
             callback();
         } else {
             document.addEventListener('SecuredTouchReadyEvent', callback);
         }
     }
     onSecuredTouchReady(function () {
         _securedTouch.init({
             url : "https://<securedtouch-backend-host>",
             appId: "<appId>",
             appSecret: "<appSecret>",
             userId: "<currentUserId>",
             sessionId: "<sessionId>",
             isDebugMode: false,
             isSingleDomain: false,
         }).then(function () {
             console.log("SecuredTouchSDK initialized successfully");
         }).catch(function (e) {
             console.error("An error occurred. Please check your init configuration", e);
         });
     });
    Parameter Description
    appId The PingOne application ID. See the PingOne Fraud admin documentation for instructions on getting the PingOne Fraud SDK access credentials.
    appSecret The PingOne application secret. See the PingOne Fraud admin documentation for instructions on getting the PingOne Fraud SDK access credentials.
    serverHost The Fraud service host. See the PingOne Fraud admin documentation for instructions on getting this information.
    userId If the user is already identified (signed on) when initializing the Fraud SDK, their user ID should be set here. If the user ID originates from PingOne, use the user ID for the PingOne environment. For all other cases, use a non-personal user identifier.
    sessionId The user’s session ID. To query the Fraud service for the trust scores through the backend system, the Fraud service and the backend system must have a shared identifier for each session. The session ID usually serves as this shared identifier.
    consoleLogEnabled (Optional) Set this to true to enable console logging by the SDK. Defaults to false.
    externalLogsEnabled (Optional) Set this to false to prevent the SDK from sending error logs to an external logging service. Defaults to true.
  3. Fetch a Fraud token. The SDK generates a token that’s used for Fraud BOT detection capabilities. You’ll need to share the token with your application backend so a call with the fetched token can be sent from this backend to the Fraud Evaluation API to retrieve the risk assessment for a session.

    To get the token from the Fraud SDK, add a call to:

    window['_securedTouchToken']

    An event is fired every time the token changes. For example:

    document.addEventListener('SecuredTouchTokenReadyEvent', function () {
       // token = window['_securedTouchToken'];
     });

    Don’t use your application to store the token, and instead share the token stored by the SDK.

  1. User log in and log out. You can do this differently, depending on the following:

  2. Set the session ID. To query the Fraud service for the trust scores through the backend system, the Fraud service and the backend system must have a shared identifier for each session. The session ID usually serves as this shared identifier. To set the session ID after the application has it, call:

    _securedTouch.setSessionId(<session-id>)
  3. Add meaningful IDs to input fields and buttons. Meaningful IDs are required to ensure proper identification of the UI element for detection purposes. Here’s an example for a meaningful ID that can be added to a username:

    <input id="username">
  4. Add tags. You can tag specific points in time during a session that will be saved by the Fraud service. Tags can be added remotely by the PingOne Fraud platform (using CSS selectors), or programmatically using JavaScript or HTML attributes.

  5. Flush the buffer. Flushing the buffer forces the SDK to send buffered data to directly to the PingOne Fraud backend platform. Usually the built-in automatic flush should be sufficient, so this function should not be used unless instructed to do so by Ping Identity Professional Services.

    _securedTouch.flush()

Useful operations

Context APIs

PingOne Fraud does not collect email addresses or phone numbers, but their anonymized features instead (such as, email domain, length, phone number, and country code).

Collect user information

When collecting user information, add data-st-field entries for username and password:

<input type="email" id="username" placeholder="..." data-st-field="username"/>
<input type="password" id="password" data-st-field="password"/>

For the “input type=” entries, use the input type used for the user ID.

Login page

Registration page

Account page

Checkout page

Product page

Catalog page

Challenge page

Cart page

Orders page

Chat page

Feed page

Feedback page

Typescript definition

For the typescript definition, see the securedTouch.d.ts file in the SDK package.