Integración de Slack para alertas de clientes

Adobe Experience Platform le permite usar un proxy webhook en Adobe App Builder para recibir Adobe I/O Events en Slack. El proxy administra el protocolo de enlace de verificación de Adobe y convierte las cargas de evento en Slack mensajes, para que pueda recibir alertas de cara al cliente en su espacio de trabajo.

Requisitos previos prerequisites

Antes de empezar, asegúrese de que dispone de lo siguiente:

  • Acceso a Adobe Developer Console: un rol de Administrador del sistema o Desarrollador en una organización con App Builder habilitado.
  • Node.js y npm: Node.js (se recomienda LTS), que incluye npm para instalar la CLI de Adobe y las dependencias del proyecto. Para obtener más información, consulte Descargar Node.js y npm Guía de introducción.
  • Adobe I/O CLI: instale Adobe I/O CLI desde su terminal: npm install -g @adobe/aio-cli.
  • Aplicación de Slack con webhook entrante: Una aplicación de Slack en su área de trabajo con webhook entrante habilitado. Consulte Crear una aplicación de Slack y la guía de Webhooks entrantes de Slack para crear la aplicación y obtener la URL del webhook (formato: https://hooks.slack.com/...).

Configuración de un proyecto con plantilla templated-project

Para configurar un proyecto con plantilla, inicie sesión en Adobe Developer Console y luego seleccione Create project from template en la ficha Home.

Developer Console resalta la ficha Inicio y crea un proyecto a partir de una plantilla.

Seleccione la plantilla App Builder, luego ingrese un Project Title y seleccione Add workspace. Finalmente, seleccione Save.

Título del proyecto resaltado en Developer Console, Agregar Workspace y Guardar.

Recibirá la confirmación de que su proyecto se ha creado y se le redirigirá a la ficha Project overview. Desde aquí puede agregar Project description.

La ficha Información general del proyecto muestra los detalles del proyecto.

Inicializar proyecto initialize-project

Una vez configurado el proyecto con plantilla, inicialícelo.

  1. Abra el terminal e introduzca el siguiente comando para iniciar sesión en Adobe I/O.

    code language-bash
    aio login
    
  2. Inicialice la aplicación y proporcione un nombre.

    code language-bash
    aio app init slack-webhook-proxy
    
  3. Seleccione su Organization con las teclas de dirección y, a continuación, seleccione el Project que creó anteriormente en Developer Console. Seleccione Only Templates Supported By My Org para las plantillas que desea buscar.

    Terminal que muestra la selección de la organización y el proyecto y solo las plantillas admitidas por mi organización.

  4. A continuación, presione Entrar para omitir las plantillas e instalar una aplicación independiente.

    Terminal que muestra la selección de la organización y el proyecto y solo las plantillas admitidas por mi organización.

  5. Especifique las funciones de la aplicación de Adobe I/O que desea habilitar para este proyecto. Utilice las teclas de dirección para desplazarse y seleccionar Actions: Deploy Runtime actions.

    Terminal que muestra las características de la aplicación con las acciones: acciones de implementación en tiempo de ejecución seleccionadas.

  6. Utilice las teclas de dirección para desplazarse y seleccionar Adobe Experience Platform: Realtime Customer Profile para el tipo de acciones de ejemplo que desee crear.

    Terminal que muestra el tipo de acciones de ejemplo con Adobe Experience Platform: Perfil del cliente en tiempo real seleccionado.

  7. Desplácese y seleccione Pure HTML/JS para la interfaz de usuario que desee agregar a la plantilla. Presione Enter para dejar las acciones de ejemplo como predeterminadas y luego presione Enter de nuevo para dejar el nombre como predeterminado.

    Terminal que muestra la selección de IU con HTML/JS puro seleccionado.

    Recibirá una confirmación de que la inicialización de la aplicación ha finalizado.

  8. Vaya al directorio del proyecto.

    code language-bash
    cd slack-webhook-proxy
    
  9. Añada la acción web.

    code language-bash
    aio app add action
    
  10. Seleccione Only Action Templates Supported By My Org. Aparecerá una lista de plantillas.

    Terminal que muestra la lista de plantillas de acción.

  11. Para seleccionar la plantilla, presione la barra espaciadora y luego navegue hasta @adobe/generator-add-publish-events con las flechas Arriba y Abajo. Finalmente, selecciona la plantilla presionando la barra espaciadora y presiona Intro.

    Terminal que muestra la plantilla.

    Se muestra una confirmación de que npm package @adobe/generator-add-publish-events se ha instalado.

  12. Asigne un nombre a la acción webhook-proxy.

    Terminal que muestra la acción denominada webhook-proxy.

    Se muestra una confirmación de que la plantilla se ha instalado.

Creación de las acciones de archivo e implementación create-file-actions

Agregue el código proxy, establezca las variables de entorno y, a continuación, implemente. La acción estará disponible en Developer Console para su registro.

Implementar el proxy de tiempo de ejecución runtime-proxy

NOTE
La verificación de firma y la gestión de desafíos son automáticas al utilizar el registro de acciones en tiempo de ejecución.

Vaya a la carpeta del proyecto y abra el archivo actions/webhook-proxy/index.js. Elimine el contenido y reemplace por lo siguiente:

const fetch = require("node-fetch");
const { Core } = require("@adobe/aio-sdk");

/**
 * Adobe I/O Events to Slack Runtime Proxy
 *
 * Receives events from Adobe I/O Events and forwards them to Slack.
 * Signature verification and challenge handling are automatic when
 * using Runtime Action registration (non-web action).
 */
async function main(params) {
  const logger = Core.Logger("runtime-proxy", { level: params.LOG_LEVEL || "info" });

  try {
    logger.info(`Event received: ${JSON.stringify(params)}`);

    // Forward to Slack
    return forwardToSlack(params, params.SLACK_WEBHOOK_URL, logger);

  } catch (error) {
    logger.error(`Error: ${error.message}`);
    return { statusCode: 500, body: { error: "Internal server error" } };
  }
}

/**
 * Forwards the event payload to Slack
 */
async function forwardToSlack(payload, webhookUrl, logger) {
  if (!webhookUrl) {
    logger.error("SLACK_WEBHOOK_URL not configured");
    return { statusCode: 500, body: { error: "Server configuration error" } };
  }

  // Extract Adobe headers passed to runtime action
  const headers = {
    "x-adobe-event-code": payload["x-adobe-event-code"],
    "x-adobe-event-id": payload["x-adobe-event-id"],
    "x-adobe-provider": payload["x-adobe-provider"]
  };

  const slackMessage = buildSlackMessage(payload, headers);

  const response = await fetch(webhookUrl, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(slackMessage)
  });

  if (!response.ok) {
    const errorText = await response.text();
    logger.error(`Slack API error: ${response.status} - ${errorText}`);
    return { statusCode: response.status, body: { error: errorText } };
  }

  logger.info("Event forwarded to Slack");
  return { statusCode: 200, body: { success: true } };
}

/**
 * Builds a Slack Block Kit message from the event payload
 */
function buildSlackMessage(payload, headers) {
  // Adobe passes event code as x-adobe-event-code header (available in params for runtime actions)
  const eventType = headers["x-adobe-event-code"] ||
                    payload["x-adobe-event-code"] ||
                    payload.event_code ||
                    payload.type ||
                    payload.event_type ||
                    "Adobe Event";
  const eventId = headers["x-adobe-event-id"] || payload["x-adobe-event-id"] || payload.event_id || payload.id || "N/A";
  const eventData = payload.data || payload.event || payload;

  return {
    blocks: [
      {
        type: "header",
        text: { type: "plain_text", text: `Event: ${eventType}`, emoji: true }
      },
      {
        type: "section",
        fields: formatDataFields(eventData)
      },
      { type: "divider" },
      {
        type: "context",
        elements: [{
          type: "mrkdwn",
          text: `*Event ID:* ${eventId}  |  *Time:* ${new Date().toISOString()}`
        }]
      }
    ]
  };
}

/**
 * Formats event data as Slack mrkdwn fields
 */
function formatDataFields(data, maxFields = 10) {
  if (typeof data !== "object" || data === null) {
    return [{ type: "mrkdwn", text: `*Payload:*\n${String(data)}` }];
  }

  const entries = Object.entries(data);
  if (entries.length === 0) {
    return [{ type: "mrkdwn", text: "_No data provided_" }];
  }

  return entries.slice(0, maxFields).map(([key, value]) => ({
    type: "mrkdwn",
    text: `*${key}:*\n${typeof value === "object" ? `\`\`\`${JSON.stringify(value)}\`\`\`` : value}`
  }));
}

exports.main = main;

Configure la acción en app.config.yaml app-config

IMPORTANT
La configuración de la acción en app.config.yaml es crítica. Debe usar web: no para crear una acción que no sea de web y que se pueda registrar como una acción de tiempo de ejecución en Developer Console.

Vaya a la carpeta del proyecto y abra app.config.yaml. Reemplace el contenido por lo siguiente:

application:
  runtimeManifest:
    packages:
      slack-webhook-proxy:
        license: Apache-2.0
        actions:
          webhook-proxy:
            function: actions/webhook-proxy/index.js
            web: no
            runtime: nodejs:22
            inputs:
              LOG_LEVEL: info
              SLACK_WEBHOOK_URL: $SLACK_WEBHOOK_URL
            annotations:
              require-adobe-auth: false
              final: true

Variables de entorno environment-variables

IMPORTANT
La aplicación no se ejecutará sin un archivo .env correctamente configurado.

Para administrar las credenciales de forma segura, utilice variables de entorno. Modifique el archivo .env en la raíz del proyecto y agregue:

SLACK_WEBHOOK_URL=https://hooks.slack.com/services/YOUR/WEBHOOK/URL

Implementar la acción deploy-action

Una vez configuradas las variables de entorno, implemente la acción. Asegúrese de que está en la raíz del proyecto (slack-webhook-proxy) cuando ejecute este comando en el terminal:

aio app deploy

Se muestra una confirmación de que la implementación se ha realizado correctamente.

IMPORTANT
La acción se implementará en Adobe I/O Runtime. La acción ahora estará disponible en Developer Console para su registro.

Registre la acción con Adobe I/O Events register-events

Una vez implementada la acción, regístrela como destino para Adobe I/O Events.

En Developer Console, abra el proyecto de App Builder y seleccione su Workspace.

En la página de información general de Workspace, seleccione Add service y Event.

La página de información general de Workspace resalta Agregar servicio y Evento.

En la página Agregar eventos, seleccione Experience Platform y Platform notifications, y después seleccione Next.

La página Agregar eventos muestra las notificaciones seleccionadas de Experience Platform y Platform.

Seleccione los eventos para los que desea recibir notificaciones y luego seleccione Next.

La página Agregar eventos muestra la lista de eventos a los que suscribirse.

Seleccione su credencial de autenticación de servidor a servidor y luego seleccione Next.

La página Agregar eventos muestra la selección de credenciales de autenticación de servidor a servidor.

Escriba un Event registration name y un Event registration description de borrado para el registro, y después seleccione Next.

La página Agregar eventos muestra los campos Nombre de registro de evento y Descripción de registro de evento.

Seleccione Runtime Action como método de entrega y la acción slack-webhook-proxy/runtime-proxy que creó y, a continuación, seleccione Save configured events.

La página Agregar eventos muestra el método de envío Acción de tiempo de ejecución y Guardar eventos configurados.

El proxy del gancho web ya está configurado. Se le devolverá a la página de proxy de webhook. Puede probar todo el flujo de extremo a extremo seleccionando el icono Send sample event junto a cualquier evento configurado.

La página de proxy de gancho web que muestra los eventos configurados y el icono Enviar evento de muestra.

recommendation-more-help
d82ad670-3501-465b-afee-a91200fdc02c