Web

This is a walkthrough of how you can integrate the Onboarding or Authenticate SDK for Web applications.

Overview

The web SDK is a React component that enables you to trigger an identity verification.

It is responsive and works on both desktop and mobile browsers.

The user is asked to scan a QR code or use the generated link:

Once the user is on his phone, he is informed about his progress in the onboarding process

Getting started

In order to perform an Onboarding or an Authenticate, you should follow those steps:

1. Set up the SDK: install and import the SDK.

2. Get a token: request a token using your business credentials.

3. Start an onboarding or authenticate flow: launch a user workflow.

4. Get the user workflow result from SDK: use the Message handler to get insights about the user workflow.

5. Get the Analysis result: use your callback or the endpoint to get the analysis result.

1. Set up the SDK

Install the npm packages

The Web SDK is hosted on npm as a private package. To install it, you’ll need an npm account.

Once you provide us with your npm account, we will grant you access to the private package. (You will receive an invitation email)

After accepting the invitation, you’ll be able to install the following required package(s):

Onboarding

npm login
npm install @shareid/onboarding_desktop

Authenticate

npm login
npm install @shareid/authenticate_desktop

2. Get a token

Use the credentials you received from ShareID's team to get an authentication token and launch an onboarding or authenticate workflow.

Depending on the SDK you are integrating (Onboarding/Authenticate), you may use an API here Get a Token

3. Start an onboarding or authenticate flow

Once you have your token, you can start the process by setting your web SDK as described below:

Onboarding

import React from "react";
import ShareID from "@shareid/onboarding_desktop";

type FailDataType = {
    message: string;
};

const App = () => (
    <ShareID
        token="your-token"
        language="en"
        onFail={(data: FailDataType) => {
            /*any side effect here*/
        }}
        onExit={(data: FailDataType) => {
            /*any side effect here*/
        }}
        onSuccess={() => {
            /*any side effect here*/
        }}
    />
);

export default App;

Authenticate

import React from "react";
import Authenticate from "@shareid/authenticate_desktop";

type FailDataType = {
    message: string;
};

const App = () => (
    <Authenticate
        token="your-token"
        language="en"
        onFail={(data: FailDataType) => {
          /*any side effect here*/
        }}
        onSuccess={() => {
          /*any side effect here*/
        }}
    />
);

export default App;

token	The token received from your backend after the authentication process.
language	Language used in the SDK (en, fr, etc.).
debug	If true, enables detailed logs in the browser console.
dark	If true, Enables dark mode for the SDK UI.
theme	Allows you to customize the SDK colors and text style (see examples).
redirectUrl	Redirects the user at the end of the onboarding process.

The user will be guided to scan a QR code and follow the steps to provide his data : videos of his document and/or his face are recorded and sent to ShareID's backend for processing.

When the user finishes those steps, the appropriate callback function is triggered.

4. Get the user workflow result from SDK

The callback functions are used to manage the interactions ShareID's service.

4.1. Failure

This the callback function that triggers when something goes wrong during the acquisition process of the user or his identity document videos. You can call your backend to react to this event.

onFail={(data: FailDataType) => {
    console.log("verification failed : " & data.message)
}

4.2. Exit

This the callback function that triggers when the user exist the verification process without finishing all the steps.

onExit={(data: FailDataType) => {
    /*any side effect here*/
}}

4.3. Success

This callback function triggers when the videos of the identity document and the user has been successfully uploaded. You can call your backend to react to this event.

onSuccess={() => { 
    console.log("verification completed")
}}

5. Get the Analysis result

When the processing of an onboarding request is finished, you may receive the result through the callback if you provided it. You may also, fetch yourself the result by calling our API.

See Get the analysis result for more details.

Customisation

The ShareID Web SDK allows you to fully customise its colors and text styles.

You can do so by passing a theme prop to the ShareID component.

type SdkThemeType = {
  colors?: {
    primary?: SdkCssColorType, // Light mode colors
    secondary?: SdkCssColorType, // Dark mode colors
  },
  text?: {
    title?: SdkCssTextType,
    subtitle?: SdkCssTextType,
    paragraph?: SdkCssTextType,
  }
}

SdkCssColorType

Customize background and action-related colors for both light and dark modes.

type SdkCssColorType = {
  active?: string;    // Active state color
  hover?: string;     // Hover state color
  disabled?: string;  // Disabled state color
  bg?: string;        // Background color
};

The accepted values for colors are:

HEX : example => '#92a8d1'
RGB : example => 'rgb(201, 76, 76)'
RGBA : example => 'rgba(201, 76, 76, 0.6)'
HSL : example => 'hsl(89, 43%, 51%)'
HSLA : example => 'hsla(89, 43%, 51%, 0.6)'
Named : example => 'red'

SdkCssTextType

Customise font styles for various text elements in the SDK.

type SdkCssTextType = {
  size?: string;           // Font size
  lineHeight?: string;     // Line height
  weight?: FontWeight;     // Font weight
  primaryColor?: string;   // Text color in light mode
  secondaryColor?: string; // Text color in dark mode
};

The accepted values for font size are:

PX : example => '16px'
EM : example => '2em'
REM : example => '2rem'

The accepted values for FontWeight are:

type FontWeight =
  | 100
  | '100'

---

Technical support and contact 💬

[email protected]