PingOne Recognize

Getting started with the Web SDK

In this short guide, you will learn how to integrate the PingOne Recognize Web SDK in your web application, and enroll and authenticate users through the PingOne Recognize platform.

Take time to become familiar with the authentication components and common authentication integration flows.

Before you begin

Verify the prerequisite requirements before you begin.

Keys

Make sure you have all the required keys.

  • CLOUDSMITH_TOKEN to download the Web SDK from cloudsmith repository

  • CUSTOMER_NAME to define the customer

  • KEYLESS_AUTHENTICATION_SERVICE_URL to establish a connection

  • IMAGE_ENCRYPTION_PUBLIC_KEY for the image encryption to work

  • IMAGE_ENCRYPTION_KEY_ID for the image encryption to work

Installation

To set up the Web SDK, use a package manager to install the SDK locally or load it from the PingOne Recognize content distribution network (CDN).

  • Package manager

  • CDN

First, authenticate to the PingOne Recognize Cloudsmith repository.

Create a file called .npmrc in the root folder of your project and then add the following line:

@keyless:registry=https://npm.cloudsmith.io/keyless/partners/

Use your PingOne Recognize authorization token to launch this command on your terminal:

npm config set //npm.cloudsmith.io/keyless/partners/:_authToken=CLOUDSMITH_TOKEN

Use the following command to install @keyless/sdk-web:

npm install @keyless/sdk-web@2.4.2

You can also use alternate package managers.

Use the following command to install @keyless/sdk-web-components:

npm install @keyless/sdk-web-components@2.4.2

To set up content distribution network (CDN) access:

You should not use these scripts without integrity checks. 
<script type="importmap">
{
"integrity": {
"https://d3hz8ozgrmhn4r.cloudfront.net/sdk-web-components/2.4.0/index.js": "sha512-ykQlFiwUKzAHZI7EKgkxrVUpFHRfhlIDNROVsqru9YOmAHs6ongwHzRK6GEc3vA7W2zxER2yrEKGW8Q6BI9xWQ==",
"https://d3hz8ozgrmhn4r.cloudfront.net/sdk-web-components/2.4.0/wasm.js": "sha512-EvtJ8i04BCNvJZ5T4TSKRWz6iXvjo0wHe3gvj5fbYtnPRLUQkD7OzfH0CYCqXuOU3CMP/2/+HK/zIB3YedsGsA==",
"https://d3hz8ozgrmhn4r.cloudfront.net/sdk-web-components/2.4.0/pthreads/wasm.js": "sha512-YMgzs8ixla5TV/YHwK7Q7Rh6ylWvPtT0l5oVB49AEXIKfdj5dc6YaoNUYZ1jlAv8x9eVMpecJ0S+Fe7P2slSiQ=="
}
}
</script>
<script
crossorigin="anonymous"
integrity="sha512-ykQlFiwUKzAHZI7EKgkxrVUpFHRfhlIDNROVsqru9YOmAHs6ongwHzRK6GEc3vA7W2zxER2yrEKGW8Q6BI9xWQ=="
src="https://d3hz8ozgrmhn4r.cloudfront.net/sdk-web-components/2.4.0/index.js"
type="module"
></script>