Web SDK OnAge integration

Owned by Priit Aavik
Last updated: about 2 hours agoVersion comment
12 min read

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.

OnAge_concept.png

 

Table of Contents

Introduction

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

Latest version

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.

  • 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

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?

Changelog