Onfido Smart Capture Web SDK

The Onfido Smart Capture Web SDK provides a set of UI screens and functionality to implement user identity verification flows. It is designed to guide users through photo or video capture processes with built-in image quality detection and direct upload to Onfido services.

Key features include:

• Modular design for seamless integration into existing application flows.
• Advanced image quality detection to ensure high success rates.
• Fraud detection signals to protect against malicious users.
• Orchestration via Onfido Studio workflows.
• Cross-device experience management specifically for web applications.

Supported Browsers

• Chrome (Latest)
• Firefox (Latest)
• Edge (Latest)
• Safari (Latest)

Node.js Support

• Compatible with all supported Node.js versions (currently starting with Node.js 16).

Accessibility

The SDK provides default support for:

• Screen reader support (accessible labels and dynamic alerts).
• Keyboard navigation.
• Sufficient color contrast.
• Sufficient touch target size.

Warning: If you implement custom UI, you are responsible for maintaining these accessibility standards (e.g., color contrast and font legibility).

You can initialize the Onfido Web SDK without Onfido Studio by manually defining the verification steps in the steps parameter. This allows for granular control over the user journey.

Warning: This method is not recommended for most users as new features are primarily released for Studio workflows.

When using this method, the steps parameter is mutually exclusive with workflowRunId.

Onfido.init({
  token: "<YOUR_SDK_TOKEN>",
  // ... other params
  steps: [
    { type: "welcome", options: { title: "Custom Title" } },
    "document",
    "face",
    "complete"
  ]
});

The Web SDK creates a single cookie named onfido-web-sdk-analytics containing a randomly generated UUID. This is used for internal analytics to link verification sessions for the same end user.

• Persistence: The cookie persists for 30 days.
• Disabling: You can disable this cookie using the disableAnalyticsCookies option in the SDK configuration. Setting this will also remove the cookie if it already exists.

The Onfido Web SDK is responsible for capturing and uploading user media and data. It does not generate the identity verification reports itself.

Verification reports are generated by Onfido Studio based on workflows. To manage the results of a verification:

1. Automated Workflows: Use Onfido Studio to create workflows.
2. Manual Management: If using advanced customization, you can manually create checks and retrieve report results via the Onfido API.
3. Asynchronous Notifications: Configure webhooks to be notified when report results are ready.

The SDK operates in two distinct environments. The environment is automatically determined by the API token used to generate the SDK token during authentication:

• sandbox: Use this for testing with sample documents.
• live: Use this only for real documents in production applications.

Going Live: To transition to production, replace your sandbox token with a live API token obtained from Onfido Customer Support. Ensure your billing details are correctly configured in the Onfido Dashboard before going live.

You can import the SDK directly into your components or objects using ES6 or CommonJS syntax. When using this method, the CSS is included inline with the JavaScript code.

Warning: The library is for Browser use only and does not support the Node context.

// ES6 module import
import { Onfido } from 'onfido-sdk-ui'

// commonjs style require
var Onfido = require('onfido-sdk-ui').Onfido

The quickest way to integrate the SDK is via the Onfido-hosted CDN. You can control the update frequency by how you specify the version in the URL:

• Major release (e.g., v14): Receives the latest minor and patch updates.
• Minor release (e.g., v14.11): Receives the latest patch updates.
• Specific patch (e.g., v14.11.0): Pins the library to that exact version.

Note: From version 14 onwards, a separate stylesheet is no longer required as it is included in the default library.

<!-- Replace "<version>" with the actual SDK version you want to use, example: v14.11.0 -->
<script src="https://sdk.onfido.com/<version>" charset="utf-8"></script>

You can track the user's journey through the verification process by adding an EventListener to the window that listens for userAnalytics events.

Each event contains:

• eventName {String}: The name of the triggered event.
• properties {Object}: Event-specific metadata.
• isCrossDevice {Boolean}: true if the event originates from a mobile session.

To access the SDK version within an event listener, use the handle returned by Onfido.init().

addEventListener('userAnalytics', (event) => /*Your code here*/);

// Accessing version
const onfidoOut = Onfido.init({...})
onfidoOut.addEventListener('userAnalyticsEvent', (event) => {
  console.log('Version', onfidoOut.version)
});