🖥️KYC como componentes

Librería desarrollada en React JS + Node Js

Instalación de la librería

Con NPM:

$ npm i gbc-kyc-kit

Con Yarn:

$ yarn add gbc-kyc-kit

Importar los estilos

Importar los css de la librería:

import '../node_modules/gbc-kyc-kit/dist/style.css'

Personalizar los estilos

Podrás adaptar los componentes con el estilo de tu aplicación, solo debes usar el custom css de la siguiente manera:

Recuerda que tienes el prop mode que puede variar entre dark o light sin necesidad de alterar los estilos del componente.

CSS/SASS/SCSS

:root {
  --primary: #1976d2;
  --primary-hov: #2689ed;
  --secondary: #e8edff;
  --button-color: #1976d2;
  --text-button-color: #fff;
  --secondary: #e8edff;
  --warning: #f8bb86;
  --success: #4caf50;
  --error: #ff1199;
  --text-color: #8c8c8c;
  --title-color: #262626;
  --font-family: "Noto Sans", sans-serif;
}

Importar los componentes

import { BlackList, LivenessCheck, DocumentReader, FaceMatch } from 'gbc-kyc-kit'

Ejemplos:

Para todos los componentes se debe enviar un token que tiene como expiración 1 hora y eso es lo que retorna el método getAccessToken, Aquí un ejemplo👇

import axios from "axios";

const TOKEN    = "**************" //Bearer Token entregado por Global Bridge Connections
const clientId = "**************" //Client ID entregado por Global Bridge Connections
/* Se recomienda administrar estos valores como variables de entorno */

async function getAccessToken(){
    const customHeaders = {
      "Content-Type": "application/json", 
      "Authorization": TOKEN
    }
    
    const parseReq = {
      method: "POST",
      url: "https://services.globalbridgeconnections.com.py/oauth/access-token",
      headers: customHeaders,
      data: {
          "grant_type":"client_credentials",
      }
    }

    try{
      const res = await axios(parseReq);
      const { access_token } = res.data;
      return access_token;
    } catch (error){
      throw new error('Error al obtener el Token')
    }
  }

Para el uso con TS es important crear un archivo customType.d.ts dentro de la carpeta src que contenga: declare module 'gbc-kyc-kit'

Props	Type	Values	Description
inProduction	string	prd | stg | dev	Este atributo no es requerido, el defaultValue es "prd". Toda prueba de integración y reconocimiento debe ser realizada con "dev", la data que retorna es dummy, posteriormente puede pasar a "stg" para recibir datos reales y por último, pasarían a "prd" donde se hace validación de host e IP.
mode	string	dark | light	Este atributo no es requerido, el defaultValue es "light".
clientId	string	Entregado por Global Bridge Connections	Este valor es único por cada cliente y será entregado previo acuerdo comercial.
authorize	promise	() => Promise()	Función que valida clientId vs TOKEN y retorna un accessToken habilitado por una hora para ejecutar el resto de las peticiones.
picBase64	string		Este atributo es requerido. Es utilizado para comparar dos rostros (Un rostro lo da el cliente en base64 y el otro sería el selfie capturado mediante la webcam)
countryCodeAllowed	array	["PY", "PE", ...]	Atributo no requerido, en el caso de pasar un arreglo con los códigos de países permitidos se hará una validación de la IP del usuario para permitir o no el uso del componente. El código de país debe ser en formato ISO Alpha-2 code
validateVpn	boolean		Atributo no requerido, por defecto es false, si viene en true se validará que el usuario no esté usando VPN o Proxy
dualModeRequired	boolean		Atributo no requerido, por defecto es false, en el caso que sea true se obligará al usuario cargar ambos lados del documento. Solo aplica para OCR Component
successMessage	string		Atributo utilizado para customizar el mensaje exitoso en cada componente
alertMessage	string		Atributo utilizado para customizar el mensaje de alerta si existe coincidencias con listas de saniones. Solo aplica para Blacklist Component
faceMatch	string		Atributo para pasar una imagen en base64 o url. En el caso que sea distinto de null se procesará una comparación de rostro entre el liveness y la foto enviada. Solo aplica para LivenessCheck Component.
showFilterByButton	boolean		Atributo no requerido. Si este atributo se pasa como false el componente oculta el botón 'Filtrar por' luego de realizar una búsqueda. El valor predeterminado es verdadero.

BlackList

<BlackList
    clientId={clientId}
    authorize={getAccessToken}
    dataBlackList={getDataBlackList}
    inProduction= "prd" // Default value is prd, not is required
    mode= 'dark' // Default value is light, not is required
    countryCodeAllowed={["PY","PE"]} // En este caso solo se estarían permitiendo usuarios conectados desde Paraguay o Perú
/>

DocumentReader

const getDataDocument = async (info) => {
    if (info) {
      console.log(info.data)
    }
}
//getDataDocument es la función con la que podrá capturar los datos que retorna el componente

<DocumentReader
    dataDocument={getDataDocument}
    clientId={clientId}
    authorize={getAccessToken}
    inProduction="prd"
/>

LivenesCheck

const listener = (event) => {
    console.log(event)
    if (event.detail) {
      if (event.detail.action === 'PROCESS_FINISHED') {
        const { response } = event.detail.data
        console.log(response)
      }
    }
  }

useEffect(() => {
    const component = document.getElementsByTagName('face-liveness')[0]
    if (component) {
      component.addEventListener('face-liveness', listener)
    }
  }, [listener])
 
<LivenessCheck
    clientId={clientId}
    authorize={getAccessToken}
    inProduction="prd"
/>

FaceMatch

const getDataFaceMatch = async (info) => {
    if (info) {
      console.log(info.data)
    }
}
//getDataFaceMatch es la función con la que podrá capturar los datos que retorna el componente

const picbase64 = " ...Este es el base64 de la imagen a ser comparada con el selfie. Puede ser el rostro que sale en documento de identidad u otra imagen como la de un onboarding por ejemplo"

<FaceMatch
    dataFaceMatch={getDataFaceMatch}
    clientId={clientId}
    authorize={getAccessToken}
    inProduction="prd"
    picBase64={picbase64}
/>