Overview

Wrapper of the IDVC library for DVS Online.

Use cases

• Capture and determination of the document type
• Capture of pdf417
• Capture of MRZ
• Capture of faces

Recommendations

Use a modern phone with a good camera having the definition of not less than 8 megapixels. The capture must be made in a well-lighted room. A document must be located at the uniform background.

Limitations

This component works in phones with the operating system Android in the browser Chrome (minimum version 52) and in phones with the operating system iOS (minimum version 15) in the browser Safari

Installation

$ npm install @idscan/onboarding

This component contains JS, CSS files which require the mandatory import into your project.

1. Before importing it is necessary to set the webpack-configuration.

Note: The project must use the webpack 4 and later versions.

1.1. Add the following rules of loading to the field rules

{
	test: /\.css$/,
	use: ["style-loader", "css-loader"]
}

1.2. If you prefer to use neural networks from your domain, you should add the 'CopyWebpackPlugin' into the section 'plugins' which will copy the files, which are necessary for the work of the neural network, from the folder to another folder that should be selected by you.

Note: The structure inside the folder of the component 'networks' must be saved on the server with due regard to the nesting. There are binary files in the folder which do not have the extension. These files must be provided by the server with the header Content-Type: application/octet-stream.

new CopyWebpackPlugin ([
  {
    from: 'node_modules/@idscan/onboarding/dist/networks/**/*',
    to: `${networkUrl}/[folder]/[name].[ext]`,
    toType: 'template'
  }
])

1.3. Import the library and css to your project.

import DVSOIDVC from '@idscan/onboarding';
import '@idscan/onboarding/dist/css/onboarding.css';

Initialization

Create an instance of the object 'DVS Online IDVC library wrapper'. The object takes one object of the component configuration as a parameter.

All configurations of @idscan/IDVC will be fetched from DVS Online by domainId.

Available fields:

el (string) - Id of an element on the page where the component will be integrated. Required.

applicantId (string) - Id of applicant. Required.

domainId (string) - Domain id where from will get configs and styles. Required.

domainApi (string) - URL address of onboarding API. Required.

publicKey (string) - DVS Web API Public Key. Required.

isAuth (boolean) - Flag indicating that only face authentication is required.

faceOnly (boolean) - Flag indicating that only face registration is required.

chunkPublicPath (string) - Path to the folder with chunks. Specify the path on the server if you need to remove the folder to another location. The default path is 'networks'.

networkUrl (string) - Path to the folder with neural networks. Specify the path on the server if you need to remove the folder to another location. The default path is 'networks'.'

useCDN (boolean) - Flag indicating that you want to load networks from cdn instead of your domain.

preferApiConfig (boolean) - Flag indicating that you prefer to use IDVC library configuration, that was sent from the DVS Online API, instead of the configuration used when initializing the wrapper.

hideDocumentTitle (boolean) - This option switches on/off the displaying document titles.

processingImageFormat (string) - This option switches image format, that used for image processing.

demoMode (boolean) - In true mode, the wrapper stops documents validation.

wrapperSettings (object) - Object with wrapper (not IDVC) settings. Allows you to override the config that came from the API. Available fields:

• showQrCode - Enable validation on another device using a QR link.

• showConsentForm - This option switches on/off the displaying consent form.

• consentText - This option allows you to set the body text of the consent form.

• checkboxText - This option allows you to set the confirmation text of the consent form.

callbacks (object) - Object with callback hooks. Available hooks:

• onChange - Callback-function which will be called after change one step. The returnable value is the object with the type and the image.

• onCameraError - Callback-function which is invoked in case if the camera is not available. The response value is the object with the error code and the message.

• onReset - Callback-function which will be called after reset all the steps. The returnable value is the object with the steps.

• onRetakeHook - Callback-function which will be called before reset the current step. The returnable value is the object with the current step.

• onValidate - Callback-function which will be called after validation response received. The returnable value is the object with validation information.

• onError - Callback-function which will be called on error. The response value is the object with the error code and the message.

• onReloaded - Callback-function which will be called after the component finishes reloading. This function doesn't return a value.

• onMounted - Callback-function which will be called on the component mounted. This function doesn't return a value.

• submit - Callback-function which will be called after completing all the steps. The returnable value is the object with the following content:

documentTypes: [
  {
    type: "ID",
    steps:[
      { type: 'front', name: 'Document Front', mode: { uploader: true, video: true } },
      { type: 'pdf', name: 'Document PDF417 Barcode' , mode: { uploader: true, video: true } },
      { type: 'face', name: 'Face', mode: { uploader: false, video: true } }
    ]},
  {
    type: "Passport",
    steps:[
      { type: 'mrz', name: 'Passport Front' , mode: { uploader: true, video: true } },
      { type: 'face', name: 'Face', mode: { uploader: false, video: true } }
    ]},
]

steps – steps with the type and the image in the format 'base64'.

Also, if you use automatic capture, in the "back" step trackstring will be returned (raw PDF417 data from Barcode encoded in base64)

Note: Request an license key for the library by emailing [email protected] or [email protected]

Methods

setApplicant (string) - the method that reinitialize wrapper for new applicant. Parameter is an applicant id of string type.

import DVSOIDVC from './Wrapper';

const lib = new DVSOIDVC({
  applicantId: '...',
  domainId: '...',
  publicKey: '...',
  chunkPublicPath: '/customPath/',
  domainApi: '...',
});

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  const applicantId = 'new applicant id';
  lib.setApplicant(applicantId);
});

updateConfig (string) - the method that reinitialize wrapper with new config. Parameter is an JSON encoded IDVC config. Works only in demo mode.

Version history

• 2.3.4

  • Updated IDVC component

• 2.3.3

  • fix: QR code process on SPA

• 2.3.2

  • Improving modal window styles

• 2.3.1

  • Updated IDVC component

• 2.3.0

  • feat: added 'wrapperSettings' option that allows you to override the wrapper config that comes from the API. This option works if the 'preferApiConfig' option is set to false.

• 2.2.27

  • Updated IDVC component

• 2.2.26

  • Updated IDVC component

• 2.2.25

  • Updated IDVC component
  • fix: wrapper config option 'el'

• 2.2.24

  • Updated IDVC component

• 2.2.23

  • Updated IDVC component
  • feat: simplify the Passport verification, now front step it's union of front and mrz

• 2.2.22

  • Updated IDVC component

• 2.2.21

  • Fixes: The image of the back of the document was not sent when International ID was selected

• 2.2.20

  • Updated IDVC component
  • Fixes: Response when isAuth = true

• 2.2.19

  • Updated IDVC component

• 2.2.18

  • Updated IDVC component

• 2.2.17

  • Added: documents config validation
  • Fixes: QR code processing

• 2.2.16

  • Added: mobile checking for qr code

• 2.2.15

  • Added: new config options 'hideDocumentTitle', 'processingImageFormat'
  • Updated IDVC component

• 2.2.14

  • Change webpack build options. Remove eval

• 2.2.13

  • Added: new config options 'networkUrl', 'useCDN', 'preferApiConfig'

• 2.2.12

  • Updated IDVC component
  • Updated readme

• 2.2.11

  • Feat: some minor fixes

• 2.2.10

  • Feat: face only mode

• 2.2.9

  • Fixed qr link

• 2.2.8

  • Updated IDVC component

• 2.2.7

  • Update TS types

• 2.2.6

  • Fixed config

• 2.2.5

  • Fixed build issue
  • Added: webp support

• 2.2.4

  • Updated IDVC component

• 2.2.3

  • Added: face auth success modal

• 2.2.2

  • Added: config change
  • Changed API calls

• 2.2.1

  • Fix: face validation

• 2.2.0

  • Feat: add flag indicating that only face authentication is required
  • Feat: some minor fixes

• 2.1.29

  • Feat: some minor fixes

• 2.1.28

  • Updated IDVC component

• 2.1.27

  • Updated IDVC component

• 2.1.26

  • Fix: Consent Form styles

• 2.1.25

  • Feat: Add attempt left status text
  • Fix: Validation Modal

• 2.1.24

  • Fix: Consent Form styles

• 2.1.23

  • Feat: rework Consent Form
  • Feat: change Domains Api to Integrations Api

• 2.1.22

  • Fix: embedded app status from api
  • Feat: update IDVC callbacks readme

• 2.1.21

  • Feat: change domain to domainApi
  • Feat: domainApi is required now

• 2.1.20

  • Fix: change showQRCode flag name to showQrCode

• 2.1.19

  • Fix: return old check validation endpoint
  • Feat: add check for showQRCode flag from backend

• 2.1.18

  • Add the possibility of continuing the documents' check on a mobile device

• 2.1.17

  • Change verifyFace option behavior

• 2.1.16

  • Updated IDVC component

• 2.1.15

  • Updated IDVC component

• 2.1.14

  • Updated IDVC component

• 2.1.13

  • Updated IDVC component

• 2.1.12

  • Fix: validation model

• 2.1.11

  • Updated IDVC component

• 2.1.10

  • Updated IDVC component

• 2.1.9

  • Fixed API path

• 2.1.8

  • Updated IDVC component

• 2.1.7

  • Added support for Proxy based frameworks

• 2.1.6

  • Added support for ios < 15

• 2.1.5

  • Updated IDVC component

• 2.1.4

  • Improved document types validation

• 2.1.3

  • Updated IDVC component

• 2.1.2

  • Updated IDVC component
  • Changed: modal message behaviour

• 2.1.1

  • Fixed: submit mrz

• 2.1.0

  • Added: new option in config "chunkPublicPath"

• 2.0.19

  • Updated IDVC component

• 2.0.18

  • Updated IDVC component

• 2.0.17

  • Some improvements

• 2.0.16

  • Some improvements

• 2.0.15

  • Some improvements

• 2.0.14

  • Some improvements

• 2.0.13

  • Updated IDVC component

• 2.0.12

  • Updated IDVC component

• 2.0.11

  • Updated IDVC component

• 2.0.10

  • Updated IDVC component

• 2.0.9

  • Updated IDVC component

• 2.0.8

  • Some improvements

• 2.0.7

  • Fixed background

• 2.0.6

  • Added version 1 config support

• 2.0.5

  • Updated IDVC component
  • Fixed submit method

• 2.0.4

  • Updated IDVC component

• 2.0.3

  • Some improvements

• 2.0.2

  • Updated IDVC component

• 2.0.1

  • Added consent form

• 2.0.0

  • Migrate to the IDVC version 2

• 1.0.18

  • Fixed spinner

• 1.0.17

  • Fixed license key

• 1.0.16

  • Added sign for forced closing of the request

• 1.0.15

  • updated IDVC component

• 1.0.14

  • updated IDVC component

• 1.0.13

  • added ids for style tags

• 1.0.12

  • updated IDVC component

• 1.0.11

  • updated using DVS Online API

• 1.0.10

  • added: onMounted callback

• 1.0.9

  • @idscan/idvc dependency updated

• 1.0.8

  • added: reload component with new configs in demo mode

• 1.0.7

  • updated using DVS Online API

• 1.0.6

  • updated using DVS Online API

• 1.0.5

  • updated IDVC component
  • updated using DVS Online API

• 1.0.4

  • use CDN

• 1.0.3

  • Changed readme

• 1.0.2

  • Some improvements

• 1.0.1

  • Changed readme

• 1.0.0