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.
Seleccione la plantilla App Builder, luego ingrese un Project Title y seleccione Add workspace. Finalmente, seleccione Save.
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.
Inicializar proyecto initialize-project
Una vez configurado el proyecto con plantilla, inicialícelo.
-
Abra el terminal e introduzca el siguiente comando para iniciar sesión en Adobe I/O.
code language-bash aio login -
Inicialice la aplicación y proporcione un nombre.
code language-bash aio app init slack-webhook-proxy -
Seleccione su
Organizationcon las teclas de dirección y, a continuación, seleccione elProjectque creó anteriormente en Developer Console. SeleccioneOnly Templates Supported By My Orgpara las plantillas que desea buscar.
-
A continuación, presione Entrar para omitir las plantillas e instalar una aplicación independiente.
-
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.
-
Utilice las teclas de dirección para desplazarse y seleccionar
Adobe Experience Platform: Realtime Customer Profilepara el tipo de acciones de ejemplo que desee crear.
-
Desplácese y seleccione
Pure HTML/JSpara 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.
Recibirá una confirmación de que la inicialización de la aplicación ha finalizado.
-
Vaya al directorio del proyecto.
code language-bash cd slack-webhook-proxy -
Añada la acción web.
code language-bash aio app add action -
Seleccione
Only Action Templates Supported By My Org. Aparecerá una lista de plantillas.
-
Para seleccionar la plantilla, presione la barra espaciadora y luego navegue hasta
@adobe/generator-add-publish-eventscon las flechas Arriba y Abajo. Finalmente, selecciona la plantilla presionando la barra espaciadora y presiona Intro.
Se muestra una confirmación de que
npm package @adobe/generator-add-publish-eventsse ha instalado. -
Asigne un nombre a la acción
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
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
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
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.
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.
En la página Agregar eventos, seleccione Experience Platform y Platform notifications, y después seleccione Next.
Seleccione los eventos para los que desea recibir notificaciones y luego seleccione Next.
Seleccione su credencial de autenticación de servidor a servidor y luego seleccione Next.
Escriba un Event registration name y un Event registration description de borrado para el registro, y después seleccione Next.
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.
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.