PingOne Recognize

Prerequisites

The PingOne Recognize Web SDK requires three conditions, involving module loading, bundling, and the use of security headers.

Run as module

The Web SDK includes two modules:

  • @keyless/sdk-web

  • @keyless/sdk-web-components

The entry point for each module is index.js.

Each module must be loaded as a JavaScript module, as shown in the following examples:

  • Headless

  • Web components

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Keyless Web SDK</title>
  </head>
  <body>
    <script type="module">
      import { ... } from '@keyless/sdk-web/index.js'
    </script>
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Keyless Web SDK Components</title>
  </head>
  <body>
    <kl-auth-or-enroll></kl-auth-or-enroll>
    <script src="@keyless/sdk-web-components/index.js" type="module"></script>
  </body>
</html>

WebAssembly bundling

When using a bundler to build your web app, verify that it supports .wasm files.

Security headers

This requirement applies only when using multi-threading. Learn more in Multi-threading.

The Web Assembly module requires two security headers to run. If the header values are incorrect, you won’t be able to use the PingOne Recognize Web SDK.

Name Value

Cross-Origin-Embedder-Policy

require-corp

Cross-Origin-Opener-Policy

same-origin

Common issues include missing headers or headers with invalid values.

When loading resources from an external domain, use the crossorigin attribute. For details, refer to Cross-Origin-Embedder-Policy: Avoiding COEP Blockage With CORS.