ShareID
  • SDKs
    • Web
    • iOS
    • Android
    • Flutter
    • React Native
  • Photo-based authenticity API
  • Get a Token
    • Get a Token - Onboarding
    • Get a Token - Authenticate
  • Get the Analysis Result
    • Get Result - Onboarding
    • Get Result - Authenticate
  • AI Analysis Result
    • Analysis Result - Onboarding
    • Analysis Result - Authenticate
  • Message Handler
  • Changelog
    • SDK Web
    • SDK iOS
    • SDK Android
    • Photo-based authenticity API
  • Terminology
  • Api
  • FAQ
Powered by GitBook
On this page
  • Overview
  • Getting started
  • 1. Set up the SDK
  • 2. Get a token
  • 3. Start an onboarding or authenticate flow
  • 4. Get the user workflow result from SDK
  • 5. Get the Analysis result
  • Customisation
Edit on GitHub
  1. SDKs

Web

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

PreviousSDKsNextiOS

Last updated 1 month ago

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 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):

npm login
npm install @shareid/onboarding_desktop
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.

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:

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

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.

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 💬

: install and import the SDK.

: request a token using your business credentials.

: launch a user workflow.

: use the Message handler to get insights about the user workflow.

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

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

Allows you to customize the SDK colors and text style (see ).

See for more details.

Get a Token
Get the analysis result
support@shareid.ai
Set up the SDK
Get a token
Start an onboarding or authenticate flow
Get the user workflow result from SDK
Get the Analysis result
examples