SDK

En esta sección, encontrará cómo implementar el SDK de Unico en su aplicación web para el uso de by Unico.

---

El uso de integraciones que no estén en conformidad con los estándares establecidos en esta documentación puede resultar en interrupciones inesperadas en el funcionamiento del sistema, las cuales no serán cubiertas ni soportadas por by Unico.

Ej: Implementar el SDK (iFrame) dentro de una webview, implementar iFrame a través de una etiqueta HTML, etc.

Cómo empezar

---

Para utilizar by Unico a través del SDK de by Unico, el primer paso es registrar los dominios, siempre utilizando el protocolo HTTPS, que serán utilizados como host para mostrar el iFrame del viaje del usuario en by Unico.

Señale al responsable de su proyecto de integración o al equipo de soporte de Unico para realizar esta configuración.

Para comenzar a usar el SDK, es necesario instalar el SDK Web de Unico. Cabe destacar que el "by Unico" utiliza el mismo SDK empleado en IDPay:

$ npm install idpay-b2b-sdk

Cuando instale el paquete del SDK de Unico, impleméntelo sin especificar la versión que está utilizando, de manera que su gestor de dependencias actualice siempre los minor y patches a la versión más reciente.

Para verificar versiones anteriores, acceda a https://www.npmjs.com/package/idpay-b2b-sdk?activeTab=versions.

Métodos disponíveis:

---

1

init(options)

Este método inicializa el SDK, realizando una precarga de assets, creando la experiencia más fluida para el usuario final. En este momento, es necesario enviar el token recibido como resultado de CreateProcess.

Parámetros:

• options - es un objeto con las siguientes propiedades de configuración:

  • type

    • El tipo de flujo que se va a inicializar. En by Unico utilizamos la opción "IFRAME".

  • token

    • Recibe el token del proceso creado. Este token es importante para poder autenticar el viaje y garantizar que solo los dominios autorizados lo utilicen (se puede obtener al crear el proceso a través de la API).

import { UnicoSDK } from “idpay-b2b-sdk”;

UnicoSDK.init({
  type: 'IFRAME',
  env: 'uat'// Só irá ser preenchido se for ambiente de testes.
  token,
});

2

open(options)

Este método realiza la apertura de la experiencia de by Unico. Para el flujo de tipo IFRAME, esta función muestra el iframe ya precargado e inicia el flujo de mensajería entre la página del cliente y la experiencia de by Unico.

Parámetros:

options - es un objeto con propiedades de configuración:

• processId

  • Recibe el ID del proceso creado. Este ID es importante para obtener los detalles del proceso y realizar todo el flujo de manera correcta (se puede obtener al crear el proceso a través de la API).

• token

  • Recibe el token del proceso creado. Este token es importante para autenticar el viaje y garantizar que solo los dominios autorizados lo utilicen (se puede obtener al crear el proceso a través de la API).

• onFinish(process)

  • Recibe una función de callback que se ejecutará al finalizar el viaje de by Unico, pasando como argumento el objeto del proceso con los siguientes datos: { captureConcluded, concluded, id }

const processId = '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf';
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

const process = {
  id: '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf',
  concluded: true,
  captureConcluded: true
};

const onFinishCallback = process => {
  console.log('Process', process);
}

UnicoSDK.open({
  transactionId: processId,
  token: token,
  onFinish: onFinishCallback
});

El diagrama de secuencia a continuación demuestra cómo utilizar el SDK y el resultado de la API de by Unico para configurar el iFrame:

Seguridad

---

Elección de la Solución de Iframe con Auth Token en lugar de CSP

---

Tras un análisis cuidadoso de las necesidades y desafíos que enfrentamos, decidimos adoptar una solución basada en iframes con tokens de autenticación en lugar de implementar una política de Content Security Policy (CSP). Esta elección fue motivada por diversas consideraciones relacionadas con la seguridad y la flexibilidad necesarias para satisfacer las demandas de nuestros clientes.

Contexto y Desafíos con CSP

---

El Content Security Policy (CSP) es una herramienta poderosa para proteger aplicaciones web contra diversos tipos de ataques, como Cross-Site Scripting (XSS) e inyección de código. Sin embargo, al configurar una política CSP, es necesario definir una lista rígida de dominios confiables. Este enfoque es eficaz cuando los dominios son fijos y predecibles. No obstante, para nuestros clientes, que a menudo utilizan dominios dinámicos y variables, esta configuración rígida presenta desafíos significativos.

Vulnerabilidad con Dominios Dinámicos

---

Los dominios dinámicos representan un riesgo sustancial para la seguridad al usar CSP. Cuando un cliente tiene dominios que cambian con frecuencia o se crean dinámicamente, sería necesario actualizar constantemente la política CSP para incluir esos nuevos dominios. Esto no solo aumenta el esfuerzo de mantenimiento, sino que también expone los dominios a los que se aplica la política CSP. Cada dominio agregado a la política CSP es potencialmente un punto de vulnerabilidad si no se gestiona adecuadamente.

Solución con Iframe y Auth Token

---

Para mitigar estos riesgos y satisfacer la flexibilidad exigida por nuestros clientes, optamos por utilizar iframes combinados con tokens de autenticación. Esta solución ofrece una capa adicional de seguridad y evita la necesidad de exponer o gestionar una lista extensa y dinámica de dominios.

Cómo Funciona​

---

• Autenticación Segura: Cada iframe se carga con un token de autenticación exclusivo para cada transacción, garantizando que solo los usuarios autorizados puedan acceder al contenido. Este token se verifica en tiempo real, proporcionando una capa adicional de seguridad y control.

• Aislamiento de Contenido: El uso de iframes permite aislar el contenido en un contexto separado, reduciendo el riesgo de interferencia entre diferentes orígenes y mitigando ataques potenciales.

• Flexibilidad para Dominios Dinámicos: Al no depender de una política CSP estática, nuestra solución se adapta fácilmente a los dominios dinámicos de los clientes, sin la necesidad de actualización constante de las políticas de seguridad.

---

¿Dudas?

¿No encontraste algo o aún necesitas ayuda? Si ya eres cliente o socio, puedes ponerte en contacto a través del Centro de Ayuda.