Technologie

Wie integriere ich eine benutzerdefinierte Zendesk App mit externen APIs?

Melden
  1. Grundlagen und Voraussetzungen
  2. Aufbau einer Zendesk App
  3. API-Kommunikation innerhalb der App
  4. Authentifizierung und Sicherheit
  5. Beispielhafter Gesamtprozess
  6. Zusammenfassung

Grundlagen und Voraussetzungen

Um eine benutzerdefinierte Zendesk App mit externen APIs zu integrieren, benötigt man zunächst Kenntnisse über das Zendesk App Framework (ZAF) sowie über die jeweilige API, die angesprochen werden soll. Zendesk Apps sind in JavaScript geschrieben und laufen innerhalb einer Sandbox-Umgebung, was bedeutet, dass externe Kommunikation über CORS (Cross-Origin Resource Sharing) oder über einen Backend-Proxy erfolgen muss. Außerdem sind API-Zugangsdaten, wie etwa Tokens oder Schlüssel, notwendig, um authentifizierte Anfragen an die externen Dienste zu stellen. Es ist empfehlenswert, sich zunächst mit dem Aufbau und der Funktionsweise des Zendesk App Frameworks vertraut zu machen und die offizielle Zendesk Dokumentation zu nutzen.

Aufbau einer Zendesk App

Eine typische Zendesk App besteht aus den Dateien manifest.json, app.js oder app.ts (JavaScript bzw. TypeScript), und einer HTML-Vorlage. Im Manifest werden die Berechtigungen definiert und eventuelle externe Domain-Zugriffe freigegeben. Wichtig ist hier, dass in der Manifestdatei die Domain der externen API explizit angelegt wird, um CORS-Probleme zu vermeiden. Zum Beispiel:

{ "name": "Beispiel-App", "version": "1.0", "location": { "support": { "ticket_sidebar": "assets/index.html" } }, "parameters": , "requirements": { "zendesk": { "min_version": "2.0" } }, "dependencies": {}, "external_api_authorizations": }

Mit diesem Eintrag erlaubt man der App, API-Anfragen an https://api.externe-domain.de zu stellen.

API-Kommunikation innerhalb der App

Die eigentliche Kommunikation mit der externen API erfolgt via JavaScript, meist mit fetch oder einer Bibliothek wie Axios. Die App führt die Anfrage in der app.js Datei durch. Die Nutzung von async/await erleichtert das asynchrone Arbeiten. Beispielhaft könnte man so eine GET-Anfrage implementieren:

async function holeDatenVonAPI() { try { const response = await fetch(https://api.externe-domain.de/daten, { method: GET, headers: { Authorization: Bearer DEIN_API_TOKEN, Content-Type: application/json } }); if (!response.ok) { throw new Error(Netzwerkantwort war nicht OK); } const daten = await response.json(); console.log(daten); // Weiterverarbeitung der Daten innerhalb der App } catch (error) { console.error(Fehler beim Zugriff auf die API:, error); }}

Diese Funktion kann dann z.B. beim Laden der App oder durch Benutzerinteraktionen aufgerufen werden. Dabei muss sichergestellt werden, dass der API-Token sicher verwaltet wird und nicht öffentlich einsehbar ist.

Authentifizierung und Sicherheit

Da Zendesk Apps im Browser laufen, sollten sensible Daten wie API-Schlüssel niemals direkt im Frontend-Code liegen. Stattdessen ist es ratsam, API-Schlüssel als Parameter in der App zu hinterlegen oder ein Backend-System als Proxy zu verwenden, das die Anfragen signiert. In Zendesk Apps können sogenannte Settings definiert werden, in denen Nutzer API-Schlüssel eingeben können. Diese Parameter sind in der manifest.json aufzunehmen und im Code per this.setting(paramName) einzulesen.

Alternativ kann man auch eine Middleware (z.B. eine kleine Node.js-Anwendung) nutzen, die als Zwischenschicht zwischen App und externer API fungiert. Diese kann z.B. Authentifizierungs-Token sicher speichern und verwalten sowie CORS-Probleme umgehen.

Beispielhafter Gesamtprozess

Der typische Workflow sieht so aus, dass die Zendesk App beim Start (etwa beim Öffnen eines Tickets) initialisiert wird, dann eine Anfrage mit passenden Nutzerdaten oder Ticketinformationen an die externe API stellt, die Antwort verarbeitet und die Ergebnisse in der Sidebar oder einem anderen Interface-Element darstellt. Hierbei bietet Zendesk auch Events an, mit denen man auf Änderungen in Zendesk reagieren kann, um API-Aufrufe bedarfsgerecht zu starten.

Zusammenfassung

Die Integration einer benutzerdefinierten Zendesk App mit externen APIs erfordert sowohl die Konfiguration des Manifests für Zugriffsrechte als auch die Programmierung der Kommunikation mit der API im App-Code. Die korrekte Handhabung von Authentifizierung und Sicherheit ist essenziell, um sensible Daten zu schützen. Hilfreich ist es, bei komplexen Szenarien eine Backend-Proxy-Schicht zu nutzen. Durch sorgfältige Planung, Nutzung der Zendesk Framework-Dokumentation und Testen kann eine robuste und nützliche Integration entstehen, die die Zendesk-Nutzung um externe Daten und Funktionalitäten erweitert.

0

Kommentare