OCR + Biometrics

This guide covers implementing a biometrics verification

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

Flow Overview

1

Welcome Screen

Initial user greeting and introduction

2

Consent Screen

Capture user consent for data processing

3

OCR Component

Document capture for Identity check

4

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

1const oneSDKInstance = await OneSDK({
2  session: sessionObjectFromBackend,
3  mode: "production",
4  recipe: {
5    form: {
6      provider: {
7        name: "react",
8        googleApiKey: '<YOUR_GOOGLE_API_KEY>'
9      },
10    },
11  },
12});

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

1// Set up individual profile
2const oneSdkIndividual = oneSDKInstance.individual();
3oneSdkIndividual.setProfileType("auto");
4
5// Configure form components
6const welcome = oneSDKInstance.component("form", {
7  name: "WELCOME",
8  mode: "individual",
9  type: "manual",
10});
11
12const consent = oneSDKInstance.component("form", {
13  name: "CONSENT",
14  mode: "individual",
15  type: "manual",
16});
17
18const biometrics = oneSdk.component("biometrics");
19const ocr = oneSdk.component("ocr");

Event Handling

Flow Implementation
1// Welcome screen to Consent screen
2welcome.on("form:welcome:ready", () => {
3  consent.mount(appContainer);
4});
5
6// Consent screen to OCR component
7consent.on("form:consent:ready", async () => {
8  ocr.mount(appContainer);
9});
10
11ocr.on("results", ({ document }) => {
12    // Present the details of the document that were detected from the uploaded image or images.
13  // Decide whether to proceed to the next stage of the onboarding process
14  // depending on whether document verification was successful.
15  console.log('ocr results');
16  if (document) {
17        console.log(`document: ${JSON.stringify(document)}`);
18      console.log(document.ocrResult.dateOfBirth);
19      //oneSdkIndividual.submit();
20      biometrics.mount("#form");
21  } else {
22        console.log("No document returned");
23  }
24});
25
26biometrics.on("results", ({checkStatus}) => {
27    // Decide whether to proceed to the next stage of the onboarding process
28  // depending on whether biometrics verification was successful.
29  console.log('biometrics results');
30  if (checkStatus === 'COMPLETE') {
31        console.log(checkStatus);
32  } else {
33        console.log("no biometrics returned");
34  }
35});
36
37// Initialize flow
38welcome.mount(appContainer);

Complete Implementation

1async function loadOneSDK() {
2  const appContainer = document.getElementById('form-container');
3
4  // Initialize SDK
5  const oneSDKInstance = await OneSDK({
6    session: sessionObjectFromBackend,
7    mode: "production",
8    recipe: {
9      form: {
10        provider: {
11          name: "react",
12          googleApiKey: '<YOUR_GOOGLE_API_KEY>'
13        },
14      },
15    },
16  });
17
18  // Initialize individual profile
19  const oneSdkIndividual = oneSDKInstance.individual();
20  oneSdkIndividual.setProfileType("auto");
21
22  // Configure components
23  const welcome = oneSDKInstance.component("form", {
24    name: "WELCOME",
25    mode: "individual",
26    type: "manual",
27  });
28
29  const consent = oneSDKInstance.component("form", {
30    name: "CONSENT",
31    mode: "individual",
32    type: "manual",
33  });
34
35  // Set up event handlers
36  welcome.on("form:welcome:ready", () => {
37    consent.mount(appContainer);
38  });
39
40  // Consent screen to OCR component
41  consent.on("form:consent:ready", async () => {
42    ocr.mount(appContainer);
43  });
44
45  ocr.on("results", ({ document }) => {
46      // Present the details of the document that were detected from the uploaded image or images.
47    // Decide whether to proceed to the next stage of the onboarding process
48    // depending on whether document verification was successful.
49    console.log('ocr results');
50    if (document) {
51          console.log(`document: ${JSON.stringify(document)}`);
52        console.log(document.ocrResult.dateOfBirth);
53        //oneSdkIndividual.submit();
54        biometrics.mount("#form");
55    } else {
56          console.log("No document returned");
57    }
58  });
59
60  biometrics.on("results", ({checkStatus}) => {
61      // Decide whether to proceed to the next stage of the onboarding process
62    // depending on whether biometrics verification was successful.
63    console.log('biometrics results');
64    if (checkStatus === 'COMPLETE') {
65          console.log(checkStatus);
66    } else {
67          console.log("no biometrics returned");
68    }
69  });
70
71  // Initialize flow
72  welcome.mount(appContainer);
73}

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.

Built with