@seontechnologies/seon-id-verification

seon-id-verification documentation

Features

Our SDK offers a comprehensive suite of features designed to cater to a wide range of document validation and recognition needs. Below is a breakdown of the key features available:

Document Validation and Content Verification

• Document Type Recognition: Automatically identifies the type of document presented, whether it's an ID card, passport, driver's license, or any other official document.
• Content Validation: Extracts and validates the textual information from documents, ensuring the data's integrity and accuracy. This includes checking the validity of names, dates, document numbers, and other critical information.
• Forgery Detection: Utilizes advanced algorithms to detect and alert on any signs of tampering or forgery within the document, ensuring the authenticity of the presented documents.

Facial Recognition

• Identity Verification: Compares the facial image on the document with the person presenting it to ensure they are the same individual, enhancing security and preventing identity fraud.
• Liveness Detection: Detects real-time presence and distinguishes between a live person and a spoofing attempt, such as using photographs or videos, to ensure that the verification process is secure.

Hand Gesture Recognition

• Gesture Control: Enables interaction with devices or applications through simple hand gestures, making the user interface more intuitive and accessible.
• Complex Gesture Recognition: Our SDK can recognize complex hand gestures, offering sophisticated controls for applications requiring nuanced interactions.
• Real-time Processing: Processes and recognizes hand gestures in real-time, ensuring a seamless and responsive user experience.

Quick Installation Guide

Install the Package Open a terminal in the project directory and run:

npm i @seontechnologies/seon-id-verification

Get started

TypeScript

When you using typescript in you're application, to avoid errors from custom elements, extend your application's types by declaring custom elements as part of your global type definitions. This lets TypeScript recognize these elements as valid, preventing any complaints about unknown tags when you use them in your application. Essentially, it's about teaching TypeScript about your custom elements to ensure type safety and avoid errors during compilation or development.

React.js example

seon-id-verification.tsx

import { SeonIdVerificationService } from '@seontechnologies/seon-id-verification';
import '@seontechnologies/seon-id-verification/styles';
import { useEffect, useRef, useState } from 'react';

export default function SeonIdVerification() {
    const [isCompleted, setIsCompleted] = useState(false);
    const [eventString, setEventString] = useState<string>();

    const { current: seonIdVerificationService } = useRef(
      new SeonIdVerificationService()
    );

    useEffect(() => {
      seonIdVerificationService.initialize({
        baseUrl: 'YOUR_BASE_URL',
        language: 'en',
        SEONCustomerData: {
          licenseKey: 'YOUR_LICENSE_KEY',
          referenceId: 'YOUR_REFERENCE_ID',
          email: '[e-mail]',
          name: 'John Doe',
          phoneNumber: '+00000000000',
          type: 'id-verification',
          userId: 'john-doe',
          additionalProperties: {
            additionalProp1: 'value1',
            additionalProp2: 'value2',
            additionalProp3: 'value3'
          }
        }
      });

      seonIdVerificationService.on('error', (data: any) =>
        ('Error:', data)
      );

      seonIdVerificationService.on('start', () =>
        console.log('start event triggered')
      );

      seonIdVerificationService.on('completed', () =>
        console.log('completed event triggered')
      );
    }, [seonIdVerificationService]);

  return (
    <button onClick={() => seonIdVerificationService.start()}>
      Start verification
    </button>
  );
}

---

Angular.js example:

init-seon-idverif-wc.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { SeonIdVerificationService } from '@seontechnologies/seon-id-verification';
import '@seontechnologies/seon-id-verification/styles';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
  constructor() {
    this.initWC();
  }

  initWC() {
    const seonIdVerificationService = new SeonIdVerificationService();

    seonIdVerificationService.initialize({
      baseUrl: 'YOUR_BASE_URL',
      SEONCustomerData: {
        licenseKey: 'YOUR_LICENSE_KEY',
        referenceId: 'YOUR_REFERENCE_ID',
        email: '[e-mail]',
        name: 'John Doe',
        phoneNumber: '+00000000000',
        type: 'id-verification',
        userId: 'john-doe',
        additionalProperties: {
            additionalProp1: 'value1',
            additionalProp2: 'value2',
            additionalProp3: 'value3'
          }
      },
      language: 'hu'
    });

    seonIdVerificationService.on('error', (data: any) =>
      console.log('Error:', data)
    );

    seonIdVerificationService.on('start', () =>
      console.log('start event triggered')
    );

    seonIdVerificationService.on('completed', () =>
      console.log('completed event triggered')
    );

    seonIdVerificationService.start();
  }
}

init-seon-idverif-wc.component.html

no need

---

Next.js example:

When using SSR in any framework or library you need to import the package on the client. You can't run it on the server.

seon-id-verification.tsx

'use client';
import { useEffect } from 'react';
import '@seontechnologies/seon-id-verification/styles';

export default function IdverifWrapper() {
  useEffect(() => {
    if (!window) return;
    import('@seontechnologies/seon-id-verification').then(module => {
      const seonIdVerificationService = new module.SeonIdVerificationService();

      seonIdVerificationService.initialize({
        baseUrl: 'YOUR_BASE_URL',
        SEONCustomerData: {
          licenseKey: 'YOUR_LICENSE_KEY',
          referenceId: 'YOUR_REFERENCE_ID',
          email: '[e-mail]',
          name: 'John Doe',
          phoneNumber: '+00000000000',
          type: 'id-verification',
          userId: 'john-doe',
          additionalProperties: {
            additionalProp1: 'value1',
            additionalProp2: 'value2',
            additionalProp3: 'value3'
          }
        },
        language: 'hu'
      });

      seonIdVerificationService.on('error', (data: any) =>
        console.log('Error:', data)
      );

      seonIdVerificationService.on('start', () =>
        console.log('start event triggered')
      );

      seonIdVerificationService.on('completed', () =>
        console.log('completed event triggered')
      );

      seonIdVerificationService.start();
    });
  }, []);
  return null;
}

---

Vanilla JavaScript

main.js

import { SeonIdVerificationService } from 'seon-id-verification';
//importing the css file is can be different depending on the bundler you are using
import 'seon-id-verification/style.css';

const seonIdVerificationService = new SeonIdVerificationService();

seonIdVerificationService.initialize({
  baseUrl: 'YOUR_BASE_URL',
  language: 'en',
  SEONCustomerData: {
    licenseKey: 'YOUR_LICENSE_KEY',
    referenceId: 'YOUR_REFERENCE_ID',
    email: '[e-mail]',
    name: 'John Doe',
    phoneNumber: '+00000000000',
    type: 'id-verification',
    userId: 'john-doe',
    additionalProperties: {
      additionalProp1: 'value1',
      additionalProp2: 'value2',
      additionalProp3: 'value3'
    }
  }
});

seonIdVerificationService.start();

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>VanillaJS</title>
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <main></main>
  </body>
</html>

Initializer options

• baseUrl | Provided base url by the SEON for you're license key | string |
• language | Language of the SDK | string (lowercase ISO code)
• SEONCustomerData | Config object | object |
  • licenseKey | License key for the SDK | string
  • referenceId | Reference id for the license | string
  • type | Type | string
  • email | Email address | string
  • phoneNumber | Phone number | string
  • name | Name of the license key holder | string
  • userId | User id | string
  • additionalProperties | Additional properties for the initialization | object
    • additionalProp1 | Could be anything | string
    • additionalProp1 | Could be anything | string
    • additionalProp1 | Could be anything | string

Event listeners

Example of on events. The reference function will fired when the event is occurred.

seonIdVerificationService.on('eventName', () => {
  console.log('Event fired');
});

Example of on error event. The reference function will fired when the event is occurred.

seonIdVerificationService.on('error', err => {
  console.log('Error:', err);
});

List of events

eventName	description	return value
completed	When the sdk flow is finished successfully	none
start	When the flow is started	none
error	When some error occurred in the sdk	"error_code_1", "error_code_2", "error_code_3", "error_code_4", "error_code_5", "error_code_6"

Compatibility

Browser	Version
Chrome	96
Safari	15
Firefox	79
Opera	82
iOS Safari	15
Android Browser	81
Chrome for android	96
Firefox for android	79

License Terms

The detailed license terms can be viewed at the following link: SEON License Terms.