Versions Compared

Version Old Version 59 New Version 60
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

...

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?

...