Surveillance des événements Experience Platform dans Slack

Découvrez comment recevoir des notifications Experience Platform dans Slack en intégrant un proxy webhook Adobe App Builder. Les ingénieurs et administrateurs de données peuvent souhaiter recevoir des notifications proactives dans Slack de Adobe Experience Platform pour surveiller l’intégrité de leurs implémentations de Platform. Ce tutoriel décrit l’architecture et les étapes d’implémentation pour connecter Adobe I/O Events à Slack à l’aide d’Adobe App Builder.

Pourquoi utiliser un proxy webhook ?

La connexion directe de Adobe I/O Events à un Webhook entrant Slack n’est pas possible en raison d’une incohérence du protocole dans le processus de vérification.

Aperçu de l’architecture

Qu’est-ce que Adobe Developer Console ?

Adobe Developer Console est le portail central de gestion de vos projets, API et informations d’identification Adobe. C’est là que vous créez votre projet, configurez l’authentification et enregistrez vos Webhooks.

Qu’est-ce qu’App Builder ?

Adobe App Builder est un framework complet qui permet aux développeurs d’entreprise de créer des applications natives dans le cloud.

Qu’est-ce que Adobe I/O Runtime ?

Adobe I/O Runtime est la plateforme sans serveur qui alimente App Builder. Il permet aux développeurs de déployer du code (Fonctions en tant que service) qui s’exécute en réponse aux requêtes HTTP sans gérer l’infrastructure du serveur.

Dans cette implémentation, nous utilisons une Action. Une action est une fonction sans état (écrite dans Node.js) qui s’exécute sur le Adobe I/O Runtime. Notre action sert de point d’entrée HTTP public auquel Adobe I/O Events s’adresse.

Pour plus d’informations, consultez la documentation de Adobe I/O Runtime.

Guide de mise en œuvre

Conditions préalables

Avant de commencer, vérifiez que vous disposez des éléments suivants :

Étape 1 : créer un projet dans Adobe Developer Console

Tout d’abord, créez un projet avec le modèle App Builder dans Adobe Developer Console :

Initialiser l’environnement d’exécution

Exécutez les commandes suivantes dans votre terminal pour créer la structure du projet :

Connexion à aio

aio login

Étape 2 : initialiser un nouveau projet App Builder

aio app init slack-webhook-proxy

L'initialisation de votre application doit être terminée.

Accédez au répertoire du projet

cd slack-webhook-proxy

Ajouter l’action web

aio app add action

Étape 3 : mettre à jour le code d’action du proxy

Dans un IDE ou un éditeur de texte, créez/modifiez le fichier actions/webhook-proxy/index.js avec le code suivant. Cette implémentation transfère les événements vers Slack. La vérification des signatures et la gestion des défis sont automatiques lors de l’utilisation de l’enregistrement de l’action d’exécution.

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("webhook-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;

Étape 4 : configurer l’action

La configuration de l’action dans app.config.yaml est essentielle. Utilisez web : non pour créer une action non web qui peut être enregistrée en tant qu’action d’exécution dans le Developer Console.

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

Pourquoi web: no?

Lorsque vous utilisez une action non web et que vous l’enregistrez via l’option « Action d’exécution » dans le Developer Console, Adobe I/O Events effectue automatiquement les opérations suivantes :

Cela signifie que votre code ne doit gérer que la logique commerciale (transfert vers Slack).

Étape 4 : mettre à jour les variables d’environnement

Pour gérer les informations d’identification en toute sécurité, nous utilisons des variables d’environnement. Créez/modifiez le fichier .env à la racine de votre projet pour ajouter votre URL de webhook Slack. Veillez à afficher les fichiers masqués sur votre système si vous ne voyez pas le fichier .env :

# ... other .env file content ...

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

Étape 5 : déployer l’action

Une fois les variables d’environnement définies, déployez l’action. Assurez-vous d’être à la racine de votre projet, à savoir slack-webhook-proxy, lors de l’exécution de cette commande dans le terminal.

aio app deploy

Votre action est déployée sur Adobe I/O Runtime et peut être enregistrée dans Developer Console.

Étape 6 : enregistrer l’action dans Adobe Developer Console

Maintenant que votre action est déployée, enregistrez-la en tant que destination des événements Adobe.

Étape 7 : valider avec un exemple d’événement

Vous pouvez tester l’ensemble du flux de bout en bout en cliquant sur l’icône « Envoyer un exemple d’événement » en regard de n’importe quel événement configuré.

L’exemple d’événement est envoyé sur le canal que vous avez configuré lors de la création de votre application Slack et du webhook. Vous devriez voir un élément similaire à ce qui suit :

Félicitations, vous avez intégré Slack aux événements Experience Platform.

Problèmes courants

Voici quelques problèmes que vous pouvez rencontrer lors de la configuration du proxy et quelques moyens potentiels de les résoudre.