Guía rápida
Guía rápida de implementación de los componentes ofrecidos por el SDK Web.
El SDK Provider es un componente personalizado que incluye una colección de widgets para su uso. Esos widgets también son componentes personalizados.
Componentes SDK Web
Con la integración del SDK Web de Facephi se puede conseguir una aplicación de Onboarding o Autenticación completamente personalizable a través de los componentes que la librería ofrece.
En el siguiente ejemplo vemos una breve implementación de un flujo de Onboarding, donde el usuario comenzará el flujo capturando su documento de identidad con SelphID y finalizará con la captura del patrón facial en Selphi con una configuración mínima.
<facephi-sdk-provider
id="facephiSdkProvider"
apikey="PRIVATE_APIKEY"
type="ONBOARDING"
steps="START,SELPHID_WIDGET,SELPHI_WIDGET,FINISH"
customer="UNIQUE_USER_ID"
></facephi-sdk-provider>
<script>
const sdkProvider = document.getElementById("facephiSdkProvider");
function startOnboarding() {
sdkProvider.addEventListener("emitData", (event) => {
console.log("Facephi SDK Provider:", event.detail);
// Capture document with SelphID.
startSelphID();
});
}
function startSelphID() {
const selphidWidget = document.createElement("facephi-selphid-widget");
selphidWidget.setAttribute("disableTutorial", true);
selphidWidget.addEventListener("extractionFinish", () => {
console.log("Facephi SelphID Widget", event.detail);
// Capture facial template with Selphi.
startSelphi();
});
sdk.provider.innerHTML = "";
sdkProvider.appendCild(selphidWidget);
}
function startSelphi() {
const selphiWidget = document.createElement("facephi-selphi-widget");
selphidWidget.setAttribute("disableTutorial", true);
selphidWidget.addEventListener("extractionFinish", () => {
console.log("Facephi Selphi Widget", event.detail);
// Onboarding has finished. Continue with next steps.
sdkProvider.innerHTML = "Onboarding completed";
});
sdkProvider.appendCild(selphidWidget);
}
startOnboarding();
</script> TypeScript
Todos los componentes de Facephi están tipados para ser utilizados en entornos TypeScript (ya sea TypeScript puro o integrado en frameworks).
Esta configuración será útil durante la implementación de la biblioteca. Estos tipos funcionarán en cualquier framework, pero su uso puede diferir dependiendo del entorno.
Ejemplo de uso
Este es un ejemplo de uso simple para un entorno TS puro. Los tipos ofrecidos por los diferentes componentes pueden ser utilizados en cualquier framework con integración TS. Esto proporcionará correcciones y funciones de autocompletado en el IDE.
Los tipos de ayuda en un IDE podrían no mostrarse en algunas secciones de HTML en frameworks. Para aprovechar estas características, se recomienda implementar la configuración de los diversos componentes en la sección de código.
Integración en frameworks
El equipo de desarrollo de Facephi recomienda la integración de la librería en frameworks para potenciar y facilitar la implementación de la misma.
Algunas ventajas son:
Facilidad de integración y sintaxis.
Uso nativo de TypeScript y entorno de pruebas.
Componetización de los productos de la librería para ofrecer modularidad.
Uso de herramientas como routers.
Para más información sobre integraciones en frameworks es posible consultar la sección Frameworks y Samples.
Cómo usar
Los widgets deben estar contenidos por el componente SDK Provider y ser ejecutados uno por uno en orden.
Esta lógica se puede implementar de varias maneras:
Implementación Vanilla: Una implementación vanilla de los diferentes productos usando código HTML y JavaScript. Ésta opción es la menos recomendada.
Componentes de framework: Usando un framework para implementar los productos como componentes personalizados.
Enrutadores de componentes: Usando un enrutador para cargar un componente específico (producto) según un parámetro en la URL.
Métodos combinados: Implementar los productos de Facephi usando todos los métodos anteriores. El equipo de Facephi recomienda el uso de un framework para implementar el widget como componentes personalizados que se cargarán con un enrutador.
Last updated