Frameworks y Samples

Implementación del SDK Web en frameworks y ejemplos.

El SDK Web puede ser implementado en la mayoría de los frameworks actuales.

Existen dos versiones de la librería SDK Web:

• SDK Web WebComponents: Librería web-components, compatible con la mayoría de frameworks y entornos.

  <facephi-sdk-provider>
      <facephi-selphid-widget />
  </facephi-sdk-provider>

• SDK Web React: Versión de componentes react. Esta librería cuenta con todas las funcionalidades que la versión WebComponents, pero con la sintaxis aplicable a react.

  <FacephiSdkProvider>
      <FacephiSelphidWidget />
  </FacephiSdkProvider>

Integración con frameworks

Las etiquetas de los custom elements deben ser definidas en algunos frameworks.

Este proceso puede ser necesario para usar cualquier custom element ofrecido por el SDK Provider, incluyéndose a sí mismo.

Los siguientes ejemplos son aproximaciones generalizadas, ya que cada entorno puede tener configuraciones o versiones diferentes. Una vez definidos los componentes, la integración es prácticamente la misma para todos los casos.

Angular

En las implementaciones de Angular, el CUSTOM_ELEMENTS_SCHEMA debe ser añadido para reconocer los componentes como elementos personalizados.

// App-component.ts
@Component({
    selector: 'AppComponent',
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    templateUrl: './App-component.html',
    // ...
})
export class AppComponent {
  //...
}

React

SDK Web Components

En las implementaciones de React/Next, para reconocer el componente personalizado del widget como un elemento HTML nativo, debe ser registrado como un elemento intrínseco. Todas sus propiedades, eventos y métodos pueden ser definidos de la misma manera.

// facephi-wdk-provider.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'facephi-sdk-provider': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLFacephiSDKProviderElement>,
      HTMLFacephiSDKProviderElement
    >;
  }
}

Nota: En React 19 es posible usar la etiqueta del elemento personalizado sin definición si la propiedad "jsx" está configurada como "react-jsx" en el archivo tsconfig.json.

SDK React

Esta biblioteca tiene una versión nativa de React disponible. Todos los componentes ofrecidos en la biblioteca facephi-sdk-react están definidos como componentes nativos de React.

Consulta la [enlace sospechoso eliminado] para más información.

Vue

En las implementaciones de Vue/Nuxt, el componente personalizado del provider debe ser definido como un elemento HTML nativo como en el siguiente ejemplo.

// vue.config.js
module.exports = {
  (...)
  chainWebpack: (config) => {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('facephi-sdk-provider'),
    },
  };
},

Ejemplos de programación

El equipo de Facephi ofrece un repositorio con una amplia gamma de ejemplos y finalidades de integración de los productos ofrecidos por Facephi.

Repositorio de ejemplos de programación del SDK Web: https://github.com/facephi/sdk-web-examples.