---
title: Getting started with the Web SDK
description: "\"Shows how to get started with the PingOne Recognize Web SDK.\""
component: recognize
page_id: recognize:web-sdk:web-sdk-guide-getting-started
canonical_url: https://docs.pingidentity.com/recognize/web-sdk/web-sdk-guide-getting-started.html
llms_txt: https://docs.pingidentity.com/recognize/llms.txt
docs_for_agents: https://developer.pingidentity.com/build-with-ai/docs-for-agents.md
section_ids:
  before-you-begin: Before you begin
  keys: Keys
  installation: Installation
---

# 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](web-sdk-introduction-components.html) and common authentication [integration flows](web-sdk-introduction-integration-flows.html).

## Before you begin

Verify the [prerequisite requirements](web-sdk-prerequisites.html) 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:

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

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

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

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

```none
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`:

```none
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. |

```html
<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>
```