Saltar al contenido principal

Comunicación de iframe

Nuestro sistema proporciona un mecanismo de comunicación entre una aplicación externa y la plataforma mediante el intercambio de mensajes entre iframes. Esta comunicación permite que ambas partes intercambien información y coordinen acciones de forma segura y desacoplada, sin necesidad de una integración directa.

La interacción se basa en eventos y mensajes estructurados que son enviados y recibidos utilizando la API postMessage del navegador. Cada mensaje representa una acción específica y puede incluir datos asociados para su procesamiento. De esta manera, la aplicación externa puede solicitar información, notificar cambios o ejecutar funcionalidades disponibles dentro de la plataforma.

Este enfoque facilita la integración de aplicaciones de terceros, permitiendo una comunicación bidireccional eficiente y manteniendo la independencia entre los distintos componentes involucrados.

Solicitar información de la tienda​

La aplicación puede solicitar la información de la tienda enviando un mensaje al administrador mediante postMessage.

window.parent.postMessage({
  type: 'app/store/info'
}, '*');

Recibir la respuesta​

Una vez enviada la solicitud, la aplicación responderá mediante un evento message del navegador. El evento incluirá un objeto payload con la información de la tienda y un campo typeEvent que identifica el tipo de evento recibido.

window.addEventListener('message', (event) => {
  const { payload, typeEvent } = event.data;

  switch (typeEvent) {
    case 'app/store/info':
      console.log(payload);

      /*
      {
        id: 12345,
        name: "Mi Tienda",
        url: "https://mitienda.com",
        country: "AR",
        currency: "Peso argentino"
      }
      */
      break;

    default:
      console.warn(`Evento no manejado: ${typeEvent}`);
  }
});

Eventos​

app/navigate/exit​

Permite cerrar la aplicación embebida y regresar a la pantalla desde la cual fue abierta.

app/navigate/goTo​

Navega a una ruta específica dentro del administrador.

Payload

{
  "pathname": "/aplicaciones"
}

app/navigate/pathname​

Solicita la subruta actual de la aplicación embebida.

Respuesta

{
  "pathname": "/configuracion"
}

app/store/info​

Solicita información básica de la tienda asociada a la sesión actual.

Respuesta

{
  "id": 12345,
  "name": "Mi Tienda",
  "url": "https://mitienda.com",
  "country": "AR",
  "currency": "Peso argentino"
}

app/device​

Obtiene información sobre el dispositivo desde el cual se está utilizando la aplicación.

Respuesta

{
  "isMobileDevice": true
}

app/theme​

Obtiene información relacionada con el tema visual en el administrador.

Respuesta

{
  "isDarkMode": false
}

app/auth/sessionToken​

Podés obtener un token de sesión (JWT) que se utilizará para verificar la autenticidad de la solicitud en tu backend. El JWT está firmado con el client_secret de la aplicación y contiene el store_id y el app_id.

Respuesta

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Al decodificar el token, el payload incluye:

{
  "store_id": 12345,
  "app_id": 67890
}