Versions Compared

Version Old Version 59 New Version Current
Changes made by

Priit Aavik

Julius Bukauskas

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

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

Table of Contents
stylenone

...

  • Obtain the static OnAge setup id.

  • Verify the Web browser version limitations.

    • Refer to the documentation here.

  • Review npm examples for a better understanding.

...

🗃️ Example npm

Download example here

Expand
title|| CLICK TO VIEW SNIPPET ||
Code Block
// 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>
    </>
  );
});

...

To begin, run the following command:

Code Block
<script src="{baseUrl}https://stidvuiprod.z6.web.core.windows.net/libs/ondato-sdk/ondato-sdk.2.x.x.min.js"></script>

...

☑️ Prerequisites

...

  • Ensure the script is configured with the correct OnAge library build file in the index.html.

  • Obtain the static OnAge setup id.

  • Verify the Web browser version limitations.

    • Refer to the documentation here.

...

🗃️ Example script

Download example here

Expand
title|| CLICK TO VIEW SNIPPET ||
Code Block
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Cache-control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <style>
      html {
        height: 100vh;
        background-color: #b7b7b7;
        background-position: center;
        background-image: url(https://img.freepik.com/free-vector/quiz-background-with-flat-objects_23-2147593080.jpg);
      }

      body {
        margin: 0;
      }

      #end-action {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000001;
      }

      .input-group {
        display: grid;
        margin-top: 1rem;
        max-width: 30rem;
      }

      .input-group > * {
        margin: 1rem;
      }
    </style>
    <script>
      window.sdkTest = true;

      let onAgeSdk = null;
      async function loadHandler() {
        try {
          onAgeSdk = WebSdkEntry.load({
            mode: 'Sandbox',
          });

          document.getElementById('load-action').disabled = true;
          document.getElementById('begin-action').disabled = false;
          document.getElementById('customise-style-action').disabled = false;
          document.getElementById('end-action').disabled = false;
        } catch (error) {
          console.warn('OnageSdkLoadFailure', error);
          alert(`OnageSdkLoadFailure, ${error}`);
        }
      }

      async function beginHandler() {
        try {
          if (onAgeSdk?.onAge.begin) {
            await onAgeSdk.onAge.begin({
              onAgeSetupId: document
                .getElementById('on-age-setup-id')
                .value.trim(),
              language: document.getElementById('on-age-language').value.trim(),
              onSuccess: (props) => {
                console.log('onSuccess', props);
                alert(`onSuccess, OnAge: ${JSON.stringify(props)}`);
              },
              onFailure: (props) => {
                console.log('onFailure', props);
                alert(`onFailure, OnAge: ${JSON.stringify(props)}}`);
              },
              onClose: (props) => {
                console.log('onClose onAge', props);
              },
            });
          }
        } catch (error) {
          console.warn('OnAgeSdkBeginFailure', error);
          alert(`OnAgeSdkBeginFailure, ${error}`);
        }
      }

      function customiseStyleHandler() {
        onAgeSdk?.onAge.customiseStyle({
          background: {
            opacity: 0.12,
            blur: '10px',
          },
          theme: 'dark',
        });
      }

      function endHandler() {
        onAgeSdk?.onAge.end();
      }

      function versionHandler() {
        alert(WebSdkEntry.version());
      }
    </script>
  </head>
  <body>
    <button id="load-action" onclick="loadHandler()">Load On Age</button>
    <button onclick="versionHandler()">On Age SDK version</button>
    <button
      id="customise-style-action"
      onclick="customiseStyleHandler()"
      disabled
    >
      Customise Style
    </button>
    <button id="begin-action" onclick="beginHandler()" disabled>
      Begin On Age
    </button>
    <button id="end-action" onclick="endHandler()" disabled>X</button>
    <div class="input-group">
      <input
        id="on-age-setup-id"
        type="text"
        placeholder="On Age Setup Id"
        value=""
      />
      <input
        id="on-age-language"
        type="text"
        placeholder="en-GB (optional)"
        value=""
      />
    </div>
    <script src="../../build/ondato-sdk.2.0.3.min.js"></script>
  </body>
</html>

...

❔ Frequently Asked Questions (FAQs)

  • Why should both the begin()andload()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?

...