Slack-Integration für Warnhinweise für Kunden
Mit Adobe Experience Platform können Sie einen Webhook-Proxy für Adobe App Builder verwenden, um Adobe I/O Events in Slack zu erhalten. Der Proxy verarbeitet den Verifizierungs-Handshake von Adobe und wandelt Ereignis-Payloads in Slack um, sodass Sie kundenorientierte Warnhinweise an Ihren Arbeitsbereich senden können.
Voraussetzungen prerequisites
Bevor Sie beginnen, stellen Sie Folgendes sicher:
- Adobe Developer Console-Zugriff: Eine Systemadministrator- oder Entwicklerrolle in einem Unternehmen mit aktiviertem App Builder.
- Node.js und npm: Node.js (LTS empfohlen), das npm für die Installation der Adobe-CLI und Projektabhängigkeiten enthält. Weitere Informationen finden Sie unter Download Node.js und npm - Erste Schritte.
- Adobe I/O CLI: Installieren Sie Adobe I/O CLI von Ihrem Terminal aus:
npm install -g @adobe/aio-cli. - Slack-App mit eingehendem Webhook: Eine Slack-App in Ihrem Arbeitsbereich mit aktiviertem eingehender Webhook. Siehe Erstellen einer Slack-App und das Handbuch Eingehende Slack-Webhooks, um die App zu erstellen und die Webhook-URL abzurufen (Format:
https://hooks.slack.com/...).
Einrichten eines Vorlagenprojekts templated-project
Um ein Vorlagenprojekt einzurichten, melden Sie sich bei Adobe Developer Console an und wählen Sie dann auf der Registerkarte Create project from template die Option Home aus.
Wählen Sie die App Builder Vorlage aus, geben Sie dann einen Project Title ein und klicken Sie auf Add workspace. Wählen Sie abschließend Save aus.
Sie erhalten eine Bestätigung, dass Ihr Projekt erstellt wurde und zur Registerkarte Project overview weitergeleitet wird. Von hier aus können Sie eine Project description hinzufügen.
Projekt initialisieren initialize-project
Nachdem Sie Ihr Vorlagenprojekt eingerichtet haben, initialisieren Sie das Projekt.
-
Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein, um sich bei Adobe I/O anzumelden.
code language-bash aio login -
Initialisieren Sie die Anwendung und geben Sie einen Namen an.
code language-bash aio app init slack-webhook-proxy -
Wählen Sie Ihren
Organizationmithilfe der Pfeiltasten und anschließend die zuvor in der Developer Console erstellteProjectaus. Wählen SieOnly Templates Supported By My Orgfür die zu suchenden Vorlagen aus.
-
Drücken Sie als Nächstes Eingabetaste, um Vorlagen zu überspringen und eine eigenständige Anwendung zu installieren.
-
Geben Sie die Adobe I/O-App-Funktionen an, die Sie für dieses Projekt aktivieren möchten. Verwenden Sie die Pfeiltasten, um zu scrollen und
Actions: Deploy Runtime actionsauszuwählen.
-
Verwenden Sie die Pfeiltasten, um zu scrollen, und wählen Sie
Adobe Experience Platform: Realtime Customer Profilefür den Typ der Beispielaktionen aus, die Sie erstellen möchten.
-
Scrollen Sie und wählen Sie
Pure HTML/JSfür die Benutzeroberfläche aus, die Sie Ihrer Vorlage hinzufügen möchten. Drücken Sie Eingabe, um die Beispielaktionen als Standard zu belassen, und drücken Sie dann erneut Eingabetaste, um den Namen als Standard zu belassen.
Sie erhalten eine Bestätigung, dass die App-Initialisierung abgeschlossen ist.
-
Navigieren Sie zum Projektverzeichnis.
code language-bash cd slack-webhook-proxy -
Hinzufügen der Web-Aktion.
code language-bash aio app add action -
Wählen Sie
Only Action Templates Supported By My Orgaus. Eine Liste von Vorlagen wird angezeigt. -
Wählen Sie die Vorlage aus, indem Sie die Leertaste drücken, und navigieren Sie dann mit den
@adobe/generator-add-publish-eventsPfeilen Nach oben“ und Nach unten zu. Wählen Sie abschließend die Vorlage aus, indem Sie die Leertaste drücken und die Eingabetaste drücken.
Eine Bestätigung, dass die
npm package @adobe/generator-add-publish-eventsinstalliert wurde, wird angezeigt. -
Benennen Sie die Aktion
webhook-proxy.
Eine Bestätigung, dass die Vorlage installiert wurde, wird angezeigt.
Erstellen der Dateiaktionen und Bereitstellen create-file-actions
Fügen Sie den Proxy-Code hinzu, legen Sie Umgebungsvariablen fest und stellen Sie dann bereit. Die Aktion steht dann in der Developer Console zur Registrierung zur Verfügung.
Implementieren des Laufzeitproxys runtime-proxy
Navigieren Sie zum Projektordner und öffnen Sie die actions/webhook-proxy/index.js. Löschen Sie den Inhalt und ersetzen Sie durch Folgendes:
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;
Konfigurieren der Aktion in app.config.yaml app-config
app.config.yaml ist wichtig. Sie müssen web: no verwenden, um eine Nicht-Web-Aktion zu erstellen, die als Laufzeitaktion in der Developer Console registriert werden kann.Navigieren Sie zum Projektordner und öffnen Sie app.config.yaml. Ersetzen Sie den Inhalt durch Folgendes:
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
Umgebungsvariablen environment-variables
Verwenden Sie Umgebungsvariablen, um Anmeldeinformationen sicher zu verwalten. Ändern Sie die .env Datei im Stammverzeichnis Ihres Projekts und fügen Sie Folgendes hinzu:
SLACK_WEBHOOK_URL=https://hooks.slack.com/services/YOUR/WEBHOOK/URL
Aktion bereitstellen deploy-action
Stellen Sie nach dem Festlegen der Umgebungsvariablen die Aktion bereit. Stellen Sie sicher, dass Sie sich im Stammverzeichnis Ihres Projekts (slack-webhook-proxy) befinden, wenn Sie diesen Befehl am Terminal ausführen:
aio app deploy
Es wird eine Bestätigung angezeigt, dass die Bereitstellung erfolgreich war.
Registrieren der Aktion bei Adobe I/O Events register-events
Nachdem Ihre Aktion bereitgestellt wurde, registrieren Sie sie als Ziel für Adobe I/O Events.
Öffnen Sie in der Developer Console Ihr App Builder-Projekt und wählen Sie Ihre Workspace aus.
Wählen Sie auf der Workspace-Übersichtsseite Add service und Event aus.
Klicken Sie auf der Seite „Ereignisse hinzufügen“ auf Experience Platform und Platform notifications und dann auf Next.
Wählen Sie die Ereignisse aus, für die Sie Benachrichtigungen erhalten möchten, und klicken Sie dann auf Next.
Wählen Sie Ihre Anmeldedaten für die Server-zu-Server-Authentifizierung aus und klicken Sie dann auf Next.
Geben Sie einen Event registration name und einen leeren Event registration description für die Registrierung ein und wählen Sie dann Next aus.
Wählen Sie Runtime Action als Versandmethode und die von Ihnen erstellte slack-webhook-proxy/runtime-proxy aus und klicken Sie dann auf Save configured events.
Ihr Webhook-Proxy ist jetzt konfiguriert. Sie kehren zur Webhook-Proxy-Seite zurück. Sie können den gesamten Fluss End-to-End testen, indem Sie auf das Send sample event neben einem konfigurierten Ereignis klicken.