Before you begin

PingOne JavaScript

To successfully complete this tutorial refer to the prerequisites in this section.

The tutorial also requires a configured server.

Compatibility

PingOne

Your PingOne instance must have DaVinci enabled.

DaVinci flows: Ensure your flows only use supported connectors, capabilities and fields for user interactions:

HTTP Connector

Custom HTML capability

View supported fields

HTTP Connector field and collector support
HTTP Connector SK-Component support

HTTP Connector field and collector support
Field	Collector
Field	Android	iOS	JavaScript
Text field Collects a single text string.	`TextCollector` `1.0.0`	`TextCollector` `1.0.0`	`TextCollector` `1.0.0`
Password field Collects a single text string that cannot be read from the screen.	`PasswordCollector` `1.0.0`	`PasswordCollector` `1.0.0`	`PasswordCollector` `1.0.0`
Submit Button Sends the collected data to PingOne to continue the DaVinci flow.	`SubmitCollector` `1.0.0`	`SubmitCollector` `1.0.0`	`SubmitCollector` `1.0.0`
Flow Button Triggers an alternative flow without sending the data collected so far to PingOne.	`FlowCollector` `1.0.0`	`FlowCollector` `1.0.0`	`FlowCollector` `1.0.0`
Label Display a read-only text label.	`ReadOnlyTextCollector` `1.1.0`	`LabelCollector` `1.1.0`	`ReadOnlyCollector` `1.1.0`
Radio / Dropdown Collects a single value from a choice of multiple options.	`SingleSelectCollector` `1.1.0`	`SingleSelectCollector` `1.1.0`	`SingleValueCollector` `1.1.0`

HTTP Connector SK-Component support
SK-Component	DaVinci module
SK-Component	Android	iOS	JavaScript
skIDP Presents a button to allow users to authenticate using an external identity provider, such as Apple, Facebook, or Google.	`IdpCollector` `1.1.0`	`IdpCollector` `1.1.0`	`IdpCollector` `1.1.0`
skrisk Instructs the client to gather behavioral data and return it to PingOne so that it can perform risk evaluations.	`ProtectCollector` `1.3.0`	`ProtectCollector` `1.3.0`	`ProtectCollector` `1.3.0`

View unsupported features

Verify that your flow does not depend on any unsupported elements:

SKPolling components: The SKPolling component cannot be processed by the DaVinci Client and should not be included in flows.

Features such as Magic Link authentication require the SKPolling component and therefore cannot be used with the DaVinci Client.
Images: Images embedded in a Custom HTML Template, such as background images or logos, cannot be passed to the SDK as structured data.

For example, the PingOne sign-on with sessions DaVinci flow.

PingOne Form Connector

Show Form capability

View supported fields

Custom Fields support
Toolbox support

Custom Fields support
Field	Collector
Field	Android	iOS	JavaScript
Checkbox Collects `true` or `false` from a checkbox or switch.	`BooleanCollector` `2.1.0`	`BooleanCollector` `2.1.0`	`BooleanCollector` / `ValidatedBooleanCollector`^[1] `2.1.0` 1. `ValidatedBooleanCollector` is returned for required checkboxes, and `BooleanCollector` for optional ones.
Checkbox List Collects the value of one or more checkboxes.	`MultiSelectCollector` `1.1.0`	`MultiSelectCollector` `1.1.0`	`MultiValueCollector` `1.1.0`
Combobox Collects a value from a dropdown containing one or more text strings.	`MultiSelectCollector` `1.1.0`	`MultiSelectCollector` `1.1.0`	`MultiValueCollector` `1.1.0`
Dropdown Collects a value from a dropdown containing one or more text strings.	`SingleSelectCollector` `1.1.0`	`SingleSelectCollector` `1.1.0`	`SingleValueCollector` `1.1.0`
Password Collects a single text string that cannot be read from the screen, and optionally verifies the provided value against a policy.^[2] 2. Support for verification against password policies was added in 2.1.0	`PasswordCollector` `1.1.0`	`PasswordCollector` `1.1.0`	`PasswordCollector` `1.1.0`
New Password Collects a new password and validates it against the environment’s password policy. Optionally presents password requirements to the user.	❌	❌	`ValidatedPasswordCollector` `2.1.0`
Phone Number Input Collects a phone number, with optional country code, and extension values.^[3] 3. Support for the extension value was added in 2.1.0	`PhoneNumberCollector` `1.2.0`	`PhoneNumberCollector` `1.2.0`	`PhoneNumberCollector` / `PhoneNumberExtensionCollector` `1.2.0`
Radio Button List Collects a value from one or radio buttons.	`SingleSelectCollector` `1.1.0`	`SingleSelectCollector` `1.1.0`	`SingleValueCollector` `1.1.0`
Submit Button Presents a button for form submission.	`SubmitCollector` `1.1.0`	`SubmitCollector` `1.1.0`	`SubmitCollector` `1.1.0`
Text Input Collects a single text string.	`TextCollector` `1.1.0`	`TextCollector` `1.1.0`	`TextCollector` `1.1.0`

Field

Collector

Android

iOS

JavaScript

Agreement

Presents text configured in PingOne under User Experience > Agreements, such as terms of service.

ReadOnlyTextCollector

2.1.0

ReadOnlyTextCollector

2.1.0

ReadOnlyCollector

2.1.0

FIDO2

Allows users to perform multi-factor authentication with a FIDO2 device, or register a new device.

FidoAuthenticationCollector / FidoRegistrationCollector

1.3.0

FidoAuthenticationCollector / FidoRegistrationCollector

1.3.0

FidoAuthenticationCollector / FidoRegistrationCollector

1.3.0

Image

Presents an image.

❌

ImageCollector

2.1.0

Flow Button

Presents a customized button.

FlowCollector

1.1.0

FlowCollector

1.1.0

FlowCollector

1.1.0

Flow Link

Presents a customized link.

FlowCollector

1.1.0

FlowCollector

1.1.0

FlowCollector

1.1.0

MFA Device Selection - Authentication

Presents a list of methods for performing multi-factor authentication (MFA).

DaVinci client currently only supports the Email, SMS, and Voice MFA types.

DeviceAuthenticationCollector

1.2.0

DeviceAuthenticationCollector

1.2.0

DeviceAuthenticationCollector

1.2.0

MFA Device Selection - Registration

Presents a list of methods you can register for multi-factor authentication (MFA).

DaVinci client currently only supports the Email, SMS, and Voice MFA types.

DeviceRegistrationCollector

1.2.0

DeviceRegistrationCollector

1.2.0

DeviceRegistrationCollector

1.2.0

Polling

Presents an activity indicator which allows you to pause or loop the flow while the user completes an action.

PollingCollector

2.1.0

PollingCollector

2.1.0

PollingCollector

2.1.0

QR Code

Presents a QR code containing data, for example, a URL.

QRCodeCollector

2.1.0

QRCodeCollector

2.1.0

QrCodeCollector

2.1.0

Social Login

Presents a button to allow users to authenticate using an external identity provider, such as Apple, Facebook, or Google.

IdpCollector

1.1.0

IdpCollector

1.1.0

IdpCollector

1.1.0

Translatable Rich Text

Presents rich text, including links, that you can translate into multiple languages.^[4]

4. Support for links in rich text fields was added in 2.1.0

LabelCollector

1.1.0

LabelCollector

1.1.0

RichTextCollector

1.1.0

PingOne Protect Connector
- Create Risk Evaluation capability
  
  Android
  
  iOS
  
  JavaScript
  
  ✅
  
  1.3.0
  
  ✅
  
  1.3.0
  
  ✅
  
  1.3.0

Android	iOS	JavaScript
✅ `1.3.0`	✅ `1.3.0`	✅ `1.3.0`

Prerequisites

Node and NPM: The SDK requires a minimum Node.js version of 18, and is tested on versions 18 and 20. To get a supported version of Node.js, refer to the Node.js download page.

You will also need npm to build the code and run the samples.

Server configuration

You must configure your PingOne instance for use with the DaVinci module.

Ask your PingOne administrator to complete the following tasks:

Configure a DaVinci flow
Create a DaVinci application
Configure PingOne for DaVinci flow invocation

To learn how to complete these steps, refer to Launching a flow with a Ping SDK in the PingOne DaVinci documentation.

The values you’ll need when configuring the OIDC application in PingOne for this tutorial are as follows:

Property values for OIDC application in PingOne
Property	Value required for tutorial
Token Auth Method	`None`
Response Type	`Code`
Grant Type	`Authorization Code`
Redirect URIs	`http://localhost:8443/callback.html`
Signoff URLs	`http://localhost:8443`
Terminate User Session by ID Token	`Enabled`
Allowed Origins	`http://localhost:8443` `http://localhost:9443`

Orchestration SDKs

Before you begin

Compatibility

Prerequisites

Server configuration