Quick guide

Quick implementation guide for the components offered by the Web SDK.

The SDK Provider is a custom component that includes a collection of widgets for use. Those widgets are also custom components.

---

SDK Web Components

With the Integration of Facephi SDK Web, you can achieve a completely customizable Onboarding or Authentication application through the components offered by the library.

In the following example, we see a brief implementation of an Onboarding Flow, where the user will begin the Flow by capturing their Identity document with SelphID and end with the capture of the facial pattern in Selphi with a minimal configuration.

import { TypeFamily, TrackingSteps } from '@facephi/sdk-web-wc';

<facephi-sdk-provider
  apikey={process.env.FACEPHI_SDK_APIKEY}
  type={TypeFamily.onboarding}
  steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}`
  customerId={uniqueUserId}
  onEmitData={(event) => {
    console.log('Facephi SDK Provider:', event.detail);
    startSelphID();
  }}
/>

If you need to assemble the widgets dynamically (without JSX), assign the properties in JavaScript:

const sdkProvider = document.querySelector('facephi-sdk-provider');

function startSelphID() {
  const selphidWidget = document.createElement('facephi-selphid-widget');
  selphidWidget.disableTutorial = true;
  selphidWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi SelphID Widget', event.detail);
    startSelphi();
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphidWidget);
}

function startSelphi() {
  const selphiWidget = document.createElement('facephi-selphi-widget');
  selphiWidget.disableTutorial = true;
  selphiWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi Selphi Widget', event.detail);
    sdkProvider.innerHTML = 'Onboarding completed';
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphiWidget);
}

Facephi recommends using tools such as Frameworks and routers for a simpler and more modular implementation.

In a real implementation, it is recommended to take the rest of the widgets' events into account.

---

TypeScript

All Facephi components are typed to be used in TypeScript environments (whether pure TypeScript or integrated into frameworks).

This configuration will be useful during the implementation of the library. These types will work in any framework, but their use may differ depending on the environment.

Usage example

This is a simple usage example for a pure TS environment. The types offered by the different components can be used in any framework with TS Integration. This will provide fixes and autocomplete functions in the IDE.

const facephiSdkProvider: HTMLFacephiSdkProviderElement = document.createElement('facephi-sdk-provider');
facephiSdkProvider.apikey = process.env.FACEPHI_SDK_APIKEY;
facephiSdkProvider.addEventListener('emitData', handleEmitData);

The helper types in an IDE may not be shown in some HTML sections in frameworks. To take advantage of these features, it is recommended to implement the configuration of the various components in the code section.

---

Integration in frameworks

The Facephi development team recommends the Integration of the library in frameworks to enhance and facilitate its implementation.

Some advantages are:

• Ease of Integration and syntax.

• Native use of TypeScript and testing environment.

• Componentization of the library products to offer modularity.

• Use of tools such as routers.

For more information about integrations in frameworks, you can consult the section Frameworks and Samples.

---

Compatibility with iframes

SDK Web is compatible with the use of iframes.

It is only necessary to activate focus in the iframe container when the Facephi components are going to be used. This can be achieved in several ways, such as:

• By having the user interact within the iframe before the SDK Web loads, using a button or link.

• Programmatically when the iframe is loaded (useful if the user is not going to interact with the application).

  const iframe = document.getElementById('my-iframe');
  iframe.addEventListener('load', () => {
      iframe.focus();
  });

Note: This process may be necessary especially if services of antispoofing (Prevention of identity spoofing).

---

How to use

The widgets must be contained by the SDK Provider component and executed one by one in order.

This logic can be implemented in several ways:

• Vanilla implementation: A vanilla implementation of the different products using HTML and JavaScript code. This option is the least recommended.

• Framework components: Using a framework to implement the products as custom components.

• Component routers: Using a router to load a specific component (product) according to a parameter in the URL.

• Combined methods: Implement Facephi products using all the methods above. The Facephi team recommends using a framework to implement the widget as custom components that will be loaded with a router.