OCR + Biometrics - frankieone

Instead of building your own flow, it’s highly recommended to fork an existing flow from the public sample codes found here

Flow Overview

Welcome Screen

Initial user greeting and introduction

Consent Screen

Capture user consent for data processing

OCR Component

Document capture for Identity check

Biometrics Component

Biometrics (selfie capture) for facial identity

OCR Review Features

The OCR Review screen automatically extracts data from captured documents and allows users to verify:

Personal information (names)
Address details
Document information
Biometric data accuracy

Implementation Guide

1. Initialize OneSDK

const oneSDKInstance = await OneSdk({
  session: sessionObjectFromBackend,
  mode: "production",
  recipe: {
    form: {
      provider: {
        name: "react",
        googleApiKey: '<YOUR_GOOGLE_API_KEY>'
      },
    },
  },
});

Replace <YOUR_GOOGLE_API_KEY> with your actual Google API key for address autocomplete functionality.

2. Configure Components

// Set up individual profile
const oneSdkIndividual = oneSDKInstance.individual();
oneSdkIndividual.setProfileType("auto");

// Configure form components
const welcome = oneSDKInstance.component("form", {
  name: "WELCOME",
  mode: "individual",
  type: "manual",
});

const consent = oneSDKInstance.component("form", {
  name: "CONSENT",
  mode: "individual",
  type: "manual",
});

const biometrics = oneSdk.component("biometrics");
const ocr = oneSdk.component("ocr");

Event Handling

// Welcome screen to Consent screen
welcome.on("form:welcome:ready", () => {
  consent.mount(appContainer);
});

// Consent screen to OCR component
consent.on("form:consent:ready", async () => {
  ocr.mount(appContainer);
});

ocr.on("results", ({ document }) => {
    // Present the details of the document that were detected from the uploaded image or images.
  // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether document verification was successful.
  console.log('ocr results');
  if (document) {
        console.log(`document: ${JSON.stringify(document)}`);
      console.log(document.ocrResult.dateOfBirth);
      //oneSdkIndividual.submit();
      biometrics.mount("#form");
  } else {
        console.log("No document returned");
  }
});

biometrics.on("results", ({checkStatus}) => {
    // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether biometrics verification was successful.
  console.log('biometrics results');
  if (checkStatus === 'COMPLETE') {
        console.log(checkStatus);
  } else {
        console.log("no biometrics returned");
  }
});

// Initialize flow
welcome.mount(appContainer);

Complete Implementation

Full Code Example

async function loadOneSdk() {
  const appContainer = document.getElementById('form-container');

  // Initialize SDK
  const oneSDKInstance = await OneSdk({
    session: sessionObjectFromBackend,
    mode: "production",
    recipe: {
      form: {
        provider: {
          name: "react",
          googleApiKey: '<YOUR_GOOGLE_API_KEY>'
        },
      },
    },
  });

  // Initialize individual profile
  const oneSdkIndividual = oneSDKInstance.individual();
  oneSdkIndividual.setProfileType("auto");

  // Configure components
  const welcome = oneSDKInstance.component("form", {
    name: "WELCOME",
    mode: "individual",
    type: "manual",
  });

  const consent = oneSDKInstance.component("form", {
    name: "CONSENT",
    mode: "individual",
    type: "manual",
  });

  // Set up event handlers
  welcome.on("form:welcome:ready", () => {
    consent.mount(appContainer);
  });

  // Consent screen to OCR component
  consent.on("form:consent:ready", async () => {
    ocr.mount(appContainer);
  });

  ocr.on("results", ({ document }) => {
      // Present the details of the document that were detected from the uploaded image or images.
    // Decide whether to proceed to the next stage of the onboarding process
    // depending on whether document verification was successful.
    console.log('ocr results');
    if (document) {
          console.log(`document: ${JSON.stringify(document)}`);
        console.log(document.ocrResult.dateOfBirth);
        //oneSdkIndividual.submit();
        biometrics.mount("#form");
    } else {
          console.log("No document returned");
    }
  });

  biometrics.on("results", ({checkStatus}) => {
      // Decide whether to proceed to the next stage of the onboarding process
    // depending on whether biometrics verification was successful.
    console.log('biometrics results');
    if (checkStatus === 'COMPLETE') {
          console.log(checkStatus);
    } else {
          console.log("no biometrics returned");
    }
  });

  // Initialize flow
  welcome.mount(appContainer);
}

Best Practices

Error Handling

Add try-catch blocks around asynchronous operations and SDK calls to handle potential errors gracefully.

User Experience

Provide clear loading states and feedback during document processing and verification steps.

Testing

Test the flow with various document types and edge cases to ensure robust implementation.

Security

Ensure secure handling of the session object and API keys.

Remember to handle API key security appropriately. Never expose your Google API key directly in client-side code in production environments.

​Flow Overview

OCR Review Features

​Implementation Guide

​Event Handling

​Complete Implementation

​Best Practices

Error Handling

User Experience

Testing

Security

Flow Overview

Implementation Guide

Event Handling

Complete Implementation

Best Practices