Web Implementation

Web Installation & Setup

The Web SDK provides direct browser integration without requiring webview components.

Installation:

npm install kora-identity-web-sdk

Web Import and Setup

import { koraLivenessService } from 'kora-identity-web-sdk';

Web Basic Verification Example

await koraLivenessService.checkLiveness({
  publicKey: 'your-public-key',
  type: 'active',
  user: {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
  },
  branding: {
    color: '#2376F3',
    logo: 'https://yoursite.com/logo.png',
  },
  tasks: [
    {
      id: 'complete-the-circle',
      difficulty: 'medium',
    },
  ],
  onSuccess: (result) => {
    console.log('Verification passed:', result);
  },
  onFailure: (result) => {
    console.log('Verification failed:', result);
  },
  onClose: () => {
    console.log('Verification closed');
  },
});

Web Auto or Default-Type Example

If you want the platform SDK to use its default behavior, omit the type field. The published Web SDK currently defaults to active liveness when type is not specified:

await koraLivenessService.checkLiveness({
  publicKey: 'your-public-key',
  user: {
    firstName: 'John',
    lastName: 'Doe',
  },
  onSuccess: (result) => {
    console.log('Verified:', result);
  },
});

If you need deterministic behavior across integrations, pass type: 'active' or type: 'passive' explicitly.

Web Configuration Example

const config = {
  publicKey: 'your-public-key',
  user: {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
  },
  tasks: [
    {
      id: 'complete-the-circle',
      difficulty: 'medium',
      timeout: 30000,
    },
  ],
  branding: {
    color: '#2376F3',
    logo: 'https://yoursite.com/logo.png',
  },
  presentation: 'modal',
  allowAudio: true,
  onSuccess: (result) => {
    console.log('Success:', result);
  },
  onFailure: (result) => {
    console.log('Failure:', result);
  },
  onClose: () => {
    console.log('Closed');
  },
};

Web Manual Initialization Example

await koraLivenessService.initialize({
  publicKey: 'your-public-key',
});

await koraLivenessService.checkLiveness({
  type: 'active',
  user: {
    firstName: 'John',
    lastName: 'Doe',
  },
  onSuccess: (result) => {
    console.log('Success:', result);
  },
});

Browser Requirements:

Modern browsers with WebRTC support (Chrome 60+, Firefox 55+, Safari 11+, Edge 79+)
HTTPS required for camera access (except localhost for development)
Camera permissions granted by user.

Common Web-Specific Issues

Camera permissions: Ensure your site is served over HTTPS
Network connectivity: Verify internet connection for API communication
Cross-browser compatibility: Test across different browsers
API configuration: Verify publicKey and user.firstName are provided (firstName is required)
Type behavior: If no type is specified, SDK defaults to 'active' liveness

Troubleshooting

Check browser console for any JavaScript errors
Ensure camera permissions are granted
Verify API key is correct for the environment (sandbox vs production)
Ensure user.firstName is provided (required field)
Test with different browsers if issues persist