Web

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

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 by npm as a private package. So in order to install it, you'll need an npm account.

Once you provide us with your npm account we can grant you an access permission to the private package. You will receive the invitation email to connect to our private repository. You'll then be able to install the needed package (Onboarding_desktop or Authenticate):

npm login
npm install @shareid/onboarding_desktop
or
npm install @shareid/authenticate_desktop

2. Get a token

Use the credentials you recieved from ShareID's team to get an authentcation 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 an onboarding/Authenticate process by setting your web SDK as described below:

For 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;

For 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;

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 OnSuccess Callback function is triggered. Exemple:

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

Other Props can also be specified:

• token: the token you get through the authentication process.

• language: the language used in the sdk.

• debug: display more detailed error messages in the browser console if True

• dark: handle dark mode if True

• theme: this propriety allows you to customize the SDK to yours colors and text style (see examples in the FAQs).

• callback functions: these functions are used to manage the interactions ShareID's service. Examples of the use of callbacks (OnFail, OnExit, OnSuccess) are presented in the FAQs section.

  • OnSuccess is triggered when the videos of the user has been successfully uploaded (sent to backend for verification).

  • OnFail is triggered when something goes wrong during the acquisition process of the user or his identity document videos (an error occurred, example: token expired and user didn't start the process). The list of errors (code + message are detailed in the FAQs section).

  • OnExit is triggered when the user exist the verification process without finishing all the steps. It is only triggered if the token has expired.

• redirectUrl redirects the user at the end of the onboarding process

4. Get the user workflow result from SDK (Message Handling)

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

onFail {function} optional

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.

Exemple:

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

onExit {function} optional

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

onSuccess {function} optional

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.

Exemple:

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

How to use the Prop theme to customize the SDK to my colors ?

You can set the following values to customize the SDK's colors and text style:

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

Example of SdkCssColorType:

type SdkCssColorType = {
  active?: string,
  hover?: string,
  disabled?: string,
  bg?: string,
}

Example of SdkCssTextType:

type SdkCssTextType = {
  size?: string,
  lineHeight?: string,
  weight?: FontWeight,
  primaryColor?: string, // Light mode text color
  secondaryColor?: string, // Dark mode text 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'

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 💬

[e-mail]

---