Web SDK OnAge integration

Ondato’s OnAge solution allow your customers to complete the process from anywhere, with any device, in a matter of seconds. With this method, Ondato employs AI and machine learning to gather and analyse biometric data, which is then used to create a 3D map of the customer’s face and accurately place them in an age group without gathering or storing any personal data. With a quick selfie, we are able to perform liveness checks, preventing any spoofing attempts or masks from getting through while keeping the steps easy for your clients.

Table of Contents

1 Introduction
2 Latest version
3 Compatibility
4 Getting started with npm
- 4.1 Prerequisites
- 4.2 Example npm
5 Getting started with javascript Script
- 5.1 Prerequisites
- 5.2 Example script
6 Flows explained
- 6.1 load()
- 6.2 exampleSdk.onAge.customiseStyleonload()
- 6.3 exampleSdk.onAge.begin()
- 6.4 exampleSdk.onAge.end()
- 6.5 Data flow
  - 6.5.1 Startup
  - 6.5.2 New Visitor
  - 6.5.3 Returning Visitor
7 Frequently Asked Questions (FAQs)
8 Changelog

Introduction

The current flow only allows using the Web Browser SDK by installing it through npm or using it as a script.

Latest version

Latest Major version is v2.x.x
Refer to Changelog for latest versions and changes.

Compatibility

Supported: Only web browsers (Chrome, Firefox, Safari, Edge etc.).
Not supported: Native application languages like React-Native, Flutter etc.

Getting started with npm

To begin, run the following command:

npm install @ondato-public/idv-sdk

Prerequisites

Adjusted .npmrc file with custom registry.

@ondato-public:registry=https://pkgs.dev.azure.com/Ondato/PublicNPM/_packaging/ondato-public-npm/npm/registry/

Obtain the static OnAge setup id.
- Please reach out to [support@ondato.com] for assistance.
Verify the Web browser version limitations.
- Refer to the documentation here.
Review npm examples for a better understanding.

Example npm

Download example here

// Typescript React example
import { memo, ReactElement, useCallback, useState } from 'react';

import { 
  IdvLanguage, 
  load, 
  SdkMode, 
  version,
  SdkLoadResult,
  SdkOnSuccessResult,
  SdkOnFailureResult,
  SdkOnCloseResult } from '@ondato-public/idv-sdk';

export const AppNew = memo((): ReactElement => {
  const [onAgeSetupId, setOnAgeSetupId] = useState('');

  const [language, setLanguage] = useState('');

  const [sdkOnAge, setSdkOnAge] = useState<SdkLoadResult | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  const loadHandlerOnage = useCallback(() => {
    try {
      const onAge = load({
        mode: SdkMode.Sandbox,
      });

      setSdkOnAge(onAge);
      setIsLoaded(true);
    } catch (error) {
      console.warn('OnageSdkLoadFailure', error);
      alert(`OnageSdkLoadFailure, ${error}`);
    }
  }, []);

  const beginHandlerOnAge = useCallback(async () => {
    try {
      if (sdkOnAge?.onAge.begin) {
  
        await sdkOnAge.onAge.begin({
          onAgeSetupId: onAgeSetupId.trim(),

          language: language.trim() as IdvLanguage,
          onSuccess: (props: SdkOnSuccessResult) => {
            console.log('onSuccess', { props });
            alert(`onSuccess, OnAge: ${props}`);
          },
          onFailure: (props: SdkOnFailureResult) => {
            console.log('onFailure', props);
            alert(`onFailure, OnAge: ${props}, reason: ${props}}`);
          },
          onClose: (props: SdkOnCloseResult) => {
            console.log('onClose ', props.id);
          },
        });
      }
    } catch (error) {
      console.warn('OnAgeSdkBeginFailure', error);
      alert(`OnAgeSdkBeginFailure, ${error}`);
    }
  }, [sdkOnAge?.onAge, onAgeSetupId, language]);

  const versionHandler = useCallback(() => {
    alert(version());
  }, []);

  const endHandlerOnAge = useCallback(() => {
    sdkOnAge?.onAge.end();
  }, [sdkOnAge]);

  return (
    <>
      <button type="button" disabled={isLoaded} onClick={loadHandlerOnage}>
        Load OnAge
      </button>
      <button type="button" onClick={versionHandler}>
        SDK version
      </button>
      <button type="button" disabled={!isLoaded} onClick={beginHandlerOnAge}>
        Begin On age
      </button>
      <button
        type="button"
        className="end-action"
        onClick={endHandlerOnAge}
        disabled={!isLoaded}
      >
        X
      </button>
      <button
        type="button"
        className="end-action"
        onClick={endHandlerOnAge}
        disabled={!isLoaded}
      >
        X
      </button>
      <div className="input-group">
        <input
          type="text"
          placeholder="OnAge setup Id"
          value={onAgeSetupId}
          onChange={(event) => setOnAgeSetupId(event.target.value)}
        />
        <input
          type="text"
          className="short-input"
          placeholder="en-GB (optional)"
          value={language}
          onChange={(event) => setLanguage(event.target.value)}
        />
      </div>
    </>
  );
});

Typescript:

Full TypeScript support is available. Full list *.d.ts types can be downloaded from script examples or when installed through npm.

Getting started with javascript Script

To begin, run the following command:

Prerequisites

Ensure the script is configured with the correct OnAge library build file in the index.html.
Obtain the static OnAge setup id.
- Please reach out to [support@ondato.com] for assistance.
Verify the Web browser version limitations.
- Refer to the documentation here.

Example script

Download example here

Flows explained

To illustrate how to implement flows, consider the following code snippet:

`load()`

Purpose: To invoke the initial Web SDK instance.
Return: On success, it provides the onAge.begin() and onAge.end() methods.
Accepted property: The mode interface (used for setting the environment).

Possible exceptions:

`exampleSdk.onAge.customiseStyleonload()`

`exampleSdk.onAge.begin()`

`exampleSdk.onAge.end()`

Data flow

Startup

New Visitor

Returning Visitor

Frequently Asked Questions (FAQs)

Why should both the begin() and load() methods be used within a try-catch block?
- Both methods should be utilized within a try-catch block to ensure proper error handling.
What happens to the session id during an F5 (page refresh)?
- In the event of an F5 (page refresh), the same session id will be retained, allowing the same session to be loaded seamlessly.
Where can I find a list of available languages?
- For a list of available languages, refer to the documentation here: Localization | 🗣️ Supported languages

Ondato

Web SDK OnAge integration

Analytics

Introduction

Latest version

Compatibility

Getting started with npm

Prerequisites

Example npm

Getting started with javascript Script

Prerequisites

Example script

Flows explained

`load()`

`exampleSdk.onAge.customiseStyleonload()`

`exampleSdk.onAge.begin()`

`exampleSdk.onAge.end()`

Data flow

Startup

New Visitor

Returning Visitor

Frequently Asked Questions (FAQs)

Changelog

Related content