Externes Tool zum Prüfen von Webhooks

[Moritz]

Es kam immer wieder vor, dass ich einmal prüfen wollte, ob eine bestimmte smap einen eingerichteten Webhook hat. Oder ganz allgemein ist es z.T. mühselig, eine Übersicht aller Webhooks für die eigenen smaps zu erhalten.

Aus diesem Grund hatte ich mal ein kleines Tool gebastelt, welches ich bei github hoste. Zu erreichen ist es unter der URL https://smappetizer.github.io/webhooks/

Im ersten Schritt wird man aufgefordert, das eigene smapOne-API-Token einzutragen.

⚠️⚠️⚠️⚠️⚠️

Wichtiger Hinweis: Das eigene API-Token sollte sehr vertraulich behandelt werden. Jede Aktivität, die ihr (oder andere) an der API damit ausführt, wird über das API-Token eurem Account zugeordnet. Deshalb gebt das Token niemals an Dritte weiter (es sei denn, ihr seid euch darüber bewusst, was ihr tut; z.B. wenn jemand eure smaps technisch in andere Systeme integriert, ist mitunter das Token erforderlich)! Und gebt das Token auch niemals in externen Webseiten ein, es sei denn, ihr vertraut der Seite. In meinem Fall könnt ihr euch den Quellcode sogar herunterladen, alles prüfen und das Tool dann auch lokal bei euch laufen lassen.

 ⚠️⚠️⚠️⚠️⚠️

Euer API-Token findet ihr, wenn ihr in der smapOne-Plattform in euer Profil geht und dann dort in der rechten Spalte auf "REST API Token verwalten" klickt. Alternativ kommt ihr über den folgenden Link an euer API-Token

https://platform.smapone.com/portal/Creator/Profile/ManageApiToken

Nachdem ihr euer Token eingetragen habt, sollte sich eine Liste aller eurer smaps öffnen. Für jede smap ist markiert, ob bereits ein Webhook eingerichtet ist (inkl. kleinem Label für POST oder GET-Methode) oder ob kein Webhook vorhanden ist (im gezeigten Beispiel hat die smap "Eventmeldung" einen aktiven POST-Webhook, die smap "Infos Panel Speaker" hat keinen eingerichteten Webhook):

Darüberhinaus könnt ihr – durch Klick auf eine smap – auch Details zu der jeweiligen smap anzeigen lassen, inkl. der Webhook-URL, die für die smap eingerichtet ist.

Fragen? Gerne fragen! 🙂

Achso und das ist ein github-Projekt. Das bedeuet, ihr könnt den Quellcode einsehen und auch Verbesserungsvorschläge am Quellcode durchführen und einreichen. Wenn sie hilfreich sind, werde ich sie in den Quellcode des Tools mit übernehmen.

Viel Spaß damit 🤗

[Moritz]

Mehr Infos zum API-Token findet ihr übrigens auch in unserer FAQ!

➡️ FAQ: REST-API-Token verwalten

[Moritz]

Hinweis: Ich habe das Tool umgezogen zum smappetizer-Account. Die neue URL lautet dementsprechend https://smappetizer.github.io/webhooks/. Sofern die alte URL aufgerufen wird, erscheint ein kurzer Hinweis und eine automatische Weiterleitung auf die neue Adresse.

[André Müller]

Hallo,

wo kann man das Script jetzt einsehen?
Im Repo ist nur noch die Index.html mit Weiterleitung und die .css-File.

Grüße

[Moritz]

Danke für den Hinweis: Ich muss den Link oben mal austauschen. Ich hatte das Repository von meinem github-Account (moritzhesse) in den smappetizer-Account umgezogen. Hier der neue Link zum Quelltext: https://github.com/smappetizer/webhooks

[Moritz]

Freunde des technischen Entertainments, liebe API-Enthusiasten, verehrte Webhook-Ninjas! Das smappetizer-Webhook-Tool hat ein Update erfahren. Es ist nun nicht nur möglich, bestehende Webhooks anzuzeigen...

... sondern erlaubt nun auch das setzen eines neuen Webhooks sowie das Entfernen von vorhandenen Webhooks.

 

setWebhook()

 

Die Eingabe erfolgt aktuell erstmal über eine – eher hässliche, aber vollfunktionale Javascript-prompt() und was keine gültige https-Adresse ist wird auch nicht akzeptiert:

 

removeWebhook()

Löschen erfolgt dann über den roten Button. Auch hier ist die Bestätigung durch ein einfaches Javascript-confirm() gelöst, verhindert aber hoffentlich versehentliches Löschen durch unbeabsichtigtes Anklicken des Buttons:

 

Mitmachen! 😉

Wem das alles noch zu rudmentär ist: Das ganze ist ein github-Projekt und kann durch eure Hilfe erweitert und verbessert; ich freue mich über Mithelfer!

https://github.com/smappetizer/webhooks

[Moritz]

Und wer keine Lust hat, sich die ganzen Entwicklertools, Runtimes und dergleichen zu installieren und nur mal ein kleines bisschen mit dem Code spielen will: Hier gibt es eine Live-Version auf Stackblitz von dem Projekt mit Code und Preview, so dass man am Code Änderungen vornehmen kann und diese sofort live sehen kann.

https://stackblitz.com/edit/smappetizer-webhooks-liveedit?file=src%2Fcomponents%2FSmapList.vue,src%2Fcomponents%2FSmapItem.vue,src%2Fsmapjs%2FApi.js,src%2FApp.vue

[Thomas Schnorrenberg]

@Moritz Ist es möglich für das github Tool einen AVV zu erhalten? Wir benötigen diesen für unsere Unterlagen, damit wir dieses Tool auch benutzen können und alles datenschutztkonform ist.

[Moritz]

@Thomas Schnorrenberg leider nein, das ist quasi ein quasi-privates Hobbyprojekt von mir. Ihr könnt das Script aber mit wenig Aufwand bei euch selber betreiben.

Zur Info zum Datenfluss: Es handelt sich um eine VueJS-Webapplikation, die nicht mit einem zusätzlichen Server spricht, sondern lediglich mit der smapOne-API. Das bedeutet, sowohl wenn ihr es selber betreibt, als auch wenn ihr das Tool im Web nutzt: Es werden keine Daten irgendwo extern verarbeitet oder gesammelt. Es ist lediglich die Kommunikation zwischen deinem Client (der die Webseite aufruft) und der smapOne-API.