Teams-Tab-Plugins – Wie funktioniert das eigentlich?

Jeder, der bereits mit Teams gearbeitet hat, dürfte mit Teams-Plugins in Form von Registerkarten vertraut sein. Diese Registerkarten lassen sich problemlos in Chats oder Teams integrieren. Ob es sich um ein Whiteboard, eine Excel-Liste, ein Kanban-Board oder sogar Spiele wie Kahoot! handelt – all diese Anwendungen können mit nur einem Klick installiert und direkt in den Chat integriert werden. Doch wie entwickelt man eigentlich selbst solch ein Plugin? Und welche Programmiersprache oder UI-Library muss man dafür erlernen?

Die Antwort auf diese Fragen ist eigentlich recht simpel: Es ist nichts Neues erforderlich!
Jeder, der bereits eine Webseite oder Webanwendung entwickelt hat, kann auch ein eigenes Teams-Tab-Plugin erstellen. Teams-Tab-Plugins sind im Wesentlichen nur Webseiten, die vom Teams-Client in einem iframe dargestellt werden.

Aber wie erstellt man nun so ein Plugin?

1. Die Webseite erstellen und über eine HTTPS-Verbindung im Internet verfügbar machen.
2. Die App bei Microsoft registrieren.
3. Eine Manifest-Datei erstellen.
4. Das Manifest hochladen und das Plugin hinzufügen.

Webseite erstellen

Wie bereits erwähnt, handelt es sich bei Tab-Plugins im Grunde einfach um Webseiten. Daher reicht es aus, eine Webseite zu entwickeln, die die gewünschten Funktionen des Plugins bietet. Hierbei können bereits bekannte Technologien verwendet werden, wie z.B. eine Angular-Anwendung mit einem Node.js-Backend oder eine React-App mit einem .NET-Backend. React bietet den Vorteil, bereits vorgefertigte Microsoft-Komponenten im Microsoft-Stil einbinden zu können.
Grundsätzlich kann jedoch jede Webseite verwendet werden, sei sie statisch oder dynamisch, mit oder ohne Backend.
Wenn ein Backend benötigt wird, um beispielsweise Microsoft-Funktionalitäten wie die Abfrage von Benutzerinformationen zu ermöglichen, empfiehlt sich die Verwendung eines JavaScript- oder .NET-Backends, da die Dokumentation von Microsoft hierfür deutlich umfangreicher ist als für andere Sprachen.

App bei Microsoft registrieren

Bevor das Plugin verwendet werden kann, muss es bei Microsoft registriert werden. Dazu kann im Microsoft-Azure Active Directory eine neue App-Registrierung erstellt werden. Ein einfacher Name für die App und die Festlegung der erforderlichen Scopes für den Tab sind hierbei ausreichend. Nach der Registrierung gelangt man zu einem Dashboard, auf dem weitere Einstellungen für die App vorgenommen werden können, von Autorisierungen über Rollen bis hin zu API-Einstellungen. Für die Implementierung von Basisfunktionalitäten werden vorerst nur die Anwendungs-ID benötigt, die Microsoft dieser App zugewiesen hat.

Manifest-Datei erstellen

Der nächste Schritt besteht darin, eine Manifest-Datei zu erstellen. Diese wird verwendet, um Teams die erforderlichen Informationen über das Plugin mitzuteilen. Grundsätzlich handelt es sich bei dieser Manifest-Datei um ein ZIP-Archiv, das zwei App-Icons und eine .json-Datei enthält. In letzterer sind alle Informationen enthalten, die Teams benötigt, um das Plugin anzuzeigen: der Name, eine Beschreibung, die Anwendungs-ID aus Microsoft Azure und die Webseiten-Adresse, die Teams aufrufen muss, um das Plugin darzustellen. Diese Manifest-Datei kann entweder manuell erstellt werden, indem die Dokumentation verwendet wird, oder sie kann über das Teams-Plugin „Entwicklungsportal“ automatisch generiert und verwaltet werden.

Plugin hinzufügen und verwenden

Die erstellte Anwendung kann nun entweder direkt über das Entwicklerportal oder manuell mithilfe der Manifest-Datei in Teams verfügbar gemacht werden. Es besteht die Möglichkeit, sie selbst über „Sideloading“ einmalig zu installieren oder – durch einen Administrator – direkt in den App-Katalog einzufügen und von dort aus problemlos in diverse Chats hinzuzufügen. Da im Manifest nur der Link zur Webseite steht, genügt es, die Dateien der Webseite zu aktualisieren, um eine neue Plugin-Version zu veröffentlichen. Erst wenn Metadaten wie der Name, ein Bild oder die Webseiten-Adresse geändert werden, ist das Hochladen einer neuen Manifest-Datei erforderlich.

Probleme und Nachteile der Entwicklung

Das größte Problem bei der Entwicklung besteht darin, dass ein Tab-Plugin nicht rein lokal entwickelt und getestet werden kann, da der Teams-Client die Webseite über eine HTTPS-Verbindung aus dem Internet abrufen muss. . Daher ist es ratsam, die gebauten Webseitendaten so effizient wie möglich im Internet zugänglich zu machen. Hierfür gibt es zwei Herangehensweisen:

1. Eine Build-Pipeline, die das Projekt nach jeder Dateiänderung neu baut, auf einen Server hochlädt, diesen ggf. neu startet und die alten Dateien ersetzt.
2. Das Projekt wird wie gewohnt lokal entwickelt, und der Port des lokalen Entwicklungsservers wird freigegeben. Dieser kann dann mit einer HTTPS-Adresse verknüpft werden, um den lokalen Entwicklungsserver aus dem Internet aufrufbar zu machen.

Beide Methoden haben ihre Vor- und Nachteile, die individuell für jedes Unternehmen und jedes Projekt abgewogen werden müssen.

Es sei zudem darauf hinzuweisen, dass jeder Entwickler oder jede Entwicklerin sein bzw. ihr eigenes Plugin erstellen muss, einschließlich der Erstellung eines individuellen Manifests und der Azure App-Registrierung. Dies ist notwendig, da jede Person eine eigene Webseite benötigt, auf der ihre spezifischen Änderungen und Anpassungen angezeigt werden können.
Hierzu bietet sich zudem an, dass jeder Entwickler oder jede Entwicklerin sich eine eigene Microsoft-Sandbox-Organisation erstellt, um nicht im Azure des Unternehmens arbeiten zu müssen. Dieser Sandbox Account bietet vollen Admin-Zugriff auf ein Testsystem mit Testnutzern und weiteren Testdaten.

Teams-SDK und Microsoft Graph

Nun stellt sich die Frage, wie eine „einfache Webseite“ in Teams tiefgehender integriert werden kann. Die Antwort darauf ist recht einfach: das Teams-SDK.

Das Teams-SDK bietet die Möglichkeit, direkt von der Plugin-Applikation aus mit dem Teams-Client zu interagieren. Hierbei steht insbesondere das Context-Objekt im Vordergrund, das durch einen einfachen Funktionsaufruf erhalten werden kann. Es enthält wichtige Informationen über den Nutzer und den gesamten Plugin-Kontext, wie die ID der App, der Sitzung und der spezifischen Registerkarte, die Teams-Einstellungen und mehr. Darüber hinaus ermöglicht das Teams-SDK das Abrufen eines sogenannten ID-Tokens, eines JWT, welcher verifiziert werden kann, um beispielsweise Anfragen an das eigene Backend abzusichern, ohne dass ein eigenes Authentifizierungsverfahren integriert werden muss.

Wenn jedoch weitere Informationen über den Benutzer benötigt werden, wie das Profilbild, muss Microsoft Graph verwendet werden. Dabei handelt es sich um eine zentrale API-Schnittstelle für alle Microsoft-Dienste, über die man nicht nur Profildaten, sondern nahezu alle Daten rund um den Nutzer erhalten und verändern kann, zum Beispiel E-Mails, SharePoint oder One-Drive-Dateien.

Hierfür benötigt die Applikation allerdings einen Access-Token, einen JWT, der durch den Benutzer erteilte Berechtigungen enthält. Diesen erhält man mithilfe des sogenannten Single-Sign-On Prozesses (SSO). Um dies zu aktivieren, müssen noch weitere Einstellungen im Active-Directory getätigt werden und das Verfahren im Frontend sowie im Backend implementiert werden.

Fazit

Teams-Tab-Plugins sind eine effektive Möglichkeit, benutzerdefinierte Erweiterungen in Microsoft Teams zu integrieren. Der Prozess, ein solches Plugin zu erstellen, ist zugänglich und erfordert keine neuen Programmiersprachen oder UI-Libraries. Durch die Nutzung vorhandener Webentwicklungskompetenzen können Entwickler und Entwicklerinnen Teams-Tab-Plugins erstellen, die nahtlos in Chats und Teams integriert werden können.

Ergänzend dazu bieten das Teams-SDK und Microsoft Graph zusätzliche Möglichkeiten, um die Funktionalität der Plugins zu erweitern und noch besser in Teams zu integrieren.

Allerdings gibt es Herausforderungen bei der Entwicklung, insbesondere die Notwendigkeit, die Webseite über HTTPS bereitzustellen und die Einschränkung, dass man das Tab-Plugin nicht lokal testen kann.

Insgesamt bietet Microsoft aber eine vielseitige Lösung, um das Entwickeln von Plugins für Teams möglichst zugänglich zu gestalten.

---

Quelle Titelfoto: Foto von Ed Hardie auf Unsplash