Einbetten eines Chats in eine benutzerdefinierte Microsoft Teams-App

In diesem Artikel wird beschrieben, wie Sie eine benutzerdefinierte Microsoft Teams-App für die Interaktion mit einer Azure Communication Services-Instanz erstellen. Diese Chat-App ermöglicht Interaktionsfunktionen zwischen den beiden Systemen, während getrennte Back-End-Umgebungen und Identitätskonfigurationen beibehalten werden.

Anwendungsfälle

• Point-of-Sales- und Post-Sales-Support

  Verbraucherwebsites können einen schnellen Zugriff auf einen Chatkanal bieten, entweder auf automatisierte Bots oder Vertriebsmitarbeiter oder beides. Es wird empfohlen, eine isolierte Azure Communication Service-Instanz zu verwenden.

  Ebenso profitieren Post-Sales-Support und -Koordination von der Möglichkeit, Chat unabhängig zu nutzen, wenn sie in Teams integriert sind.

• Gesicherte Fernberatungsdienste

  Für medizinische Telepresence-Anwendungen, Banking-Dienste und andere Szenarien, bei denen die Privatsphäre geschützt werden muss, ermöglicht die von Azure Communication Services bereitgestellte Verschlüsselung und Sicherheit diese Anwendungsfälle, ohne dass die Remote-Teilnehmer Teams verwenden müssen. Sie können der Lösung bei Bedarf ein Branding hinzufügen, und Mitarbeiter Ihrer Organisation können auf die Konsultationen über ihre vorhandene Teams-Installation zugreifen.

• Szenarien für Datentrennungsanforderungen

  Für einige Bereiche müssen Sie möglicherweise die geografische Quarantäne von Daten für bestimmte Gerichtsbarkeiten sicherstellen. Der rechtliche Datenspeicherbereich eines Unternehmens unterscheidet sich möglicherweise von dem Ort, der zum Speichern von Kundendaten erforderlich ist. Sie können ein solches Szenario mithilfe des Azure Communications Services-Speicherorts bei der Instanzerstellung konfigurieren. Der Speicherort kann vom Teams-Speicherort abweichen.

  

Aufbau

Das folgende Diagramm zeigt die Gesamtansicht der Teams-Erweiterbarkeits-Chat-App.

1. Eine Lösung bietet die Azure Communications Services-Instanz.

2. Die Web-API bietet serverseitige Funktionen für die Lösung sowohl für interne als auch für externe Anwendungen.

3. Contoso-Kunden verwenden Clientanwendungen (Web- oder mobile Anwendungen), um mit Mitarbeitern zu kommunizieren. Dieses Beispiel zeigt eine Web-App, die zum Hosten des Inhalts verwendet wird.

4. Contoso-Mitarbeiter verwenden die Teams-App innerhalb ihres Teams-Clients. Der Teams-Client ist eine Web-App, die in einer benutzerdefinierten Teams-App gehostet und über einen iframe im Teams-Client für Teams bereitgestellt wird.

   Die Azure Communication Services-Instanz ist nicht direkt mit der Teams-Umgebung verbunden. Die Communications Services-Umgebung wird über die benutzerdefinierte Teams-App angezeigt.

   Die benutzerdefinierte Teams-App erhält Single Sign-On (SSO) von Teams, das die Teams-Benutzer-ID für die App bereitstellt. Die benutzerdefinierte Messaging-App verwendet die Teams-Benutzer-ID für die Zuordnung zur Benutzer-ID des Kommunikationsdiensts.

Erstellen der Lösung

Sie benötigen die folgenden Komponenten, um die Chat-App zu erstellen.

1. Eine Azure Communication Services-Instanz.

   • Ausführlichere Informationen hierzu finden Sie unter Schnellstart: Erstellen und Verwalten einer Communication Services-Ressource.
   • Konfigurieren Sie den Speicherbereich für die Instanz während der Erstellung.

2. Ein API-Server zum Hosten der Back-End-Komponenten. Der API-Server stellt die erforderliche Back-End-Logik bereit. Häufige Anwendungsfälle sind Benutzerauthentifizierungs- und Chatthreadverwaltungs-APIs.

3. Eine Web-App-Instanz zum Hosten der Frontend-Komponenten. Die Frontend-Komponenten sowohl für das kundenorientierte Web als auch für das Steuern des benutzerdefinierten Teams-App-Layouts über eingebettetes iframe.

4. Eine benutzerdefinierte Teams-App hat Teams so konfiguriert, dass diese App-Installation aktiviert wird. Richten Sie die benutzerdefinierte Teams-App für die Verwendung von Webinhalten ein, die von einer Web-App oder über eine benutzerdefinierte Teams-App-Bereitstellung gesteuert werden.

App entwerfen

Sie können die kundengerichtete Portalwebsite nach Bedarf so entwerfen, dass sie Ihren geschäftlichen Anforderungen entspricht. Eine einfache Anruf-/Chat-Web-App erfordert in der Regel zwei Features:

• Authentifizierung (Registrierung/Anmeldung)
• Primäre Chat- (und Anruf-)Benutzeroberfläche

Single Sign-On (SSO) von Teams stellt die Authentifizierung in der benutzerdefinierten Teams-App für Mitarbeiter bereit. In diesem Fall muss der Mitarbeiter vor dem Hauptchat (und dem Anruf) eine weitere Liste der Kunden anzeigen.

Einige andere Überlegungen für die Entwurfsarbeit innerhalb von Teams umfassen Richtlinien, um eine einheitliche, inklusive und barrierefreie Erfahrung sicherzustellen. Weitere Informationen finden Sie unter Entwerfen Ihrer Microsoft Teams-App.

Implementieren der benutzerdefinierten Teams-App

Beginnen Sie Ihre dedizierte Reise mit Erste Schritte > Erstellen Ihrer ersten Teams-App.

Das Entwicklungs-Toolkit für Visual Studio Code, eine Kurzübersicht zu Lernmaterialien, Codebeispielen und Projektvorlagen finden Sie unter Übersicht über das Microsoft Teams-Toolkit.

Wählen Sie im Microsoft Teams-Toolkit Neues Projekt>Registerkarte aus.

Eine Registerkarten-App bietet das einfachste Framework, das Sie weiter verfeinern können, um React mit der Fluent-Benutzeroberfläche zu verwenden.

Sie können schnell ein App-Skelett erstellen und es mit einem Microsoft 365-Entwicklerkonto lokal in Teams ausprobieren. Verwenden Sie die React-Funktion mit Fluent-Benutzeroberfläche, und folgen Sie der grundlegenden Installation in Visual Studio Code.

Dieses Projekt verfügt über eine vorlagenbasierte API-Implementierung über Azure Functions. Zu diesem Zeitpunkt müssen Sie die vollständige Back-End-Implementierung für eine Chatplattform erstellen. Die Option „Standardregisterkarte“ stellt die Front-End-Struktur der Web-App bereit. Es ermöglicht außerdem SSO für die App, wie in Entwickeln der einmaligen Anmeldung in Teams | GitHub beschrieben.

Andere Möglichkeiten zum Implementieren der benutzerdefinierten Teams-App

Sie können eine Registerkarten-App erstellen, die jede Registerkarte über eine externe App verknüpft, indem Sie die Teams-App manifest.json-Datei verwenden. Weitere Informationen finden Sie im Artikel zur Beispiel-App-Manifest.

Sie können auch eine vorhandene Microsoft Entra-App verwenden, wie in Verwenden einer vorhandenen Microsoft Entra-App im TeamsFx-Projekt beschrieben.

Weitere Informationen zu Registerkartenfunktionen finden Sie unter Konfigurieren der Registerkartenfunktion in Ihrer Teams-App | GitHub.

Erstellen der Chat-App

Um eine voll funktionsfähige Chat-App zu erstellen, benötigen Sie einige wichtige Funktionen.

Sie benötigen eine Azure Communication Services-Instanz, um die Chats zu hosten und die Funktion zum Senden und Empfangen von Nachrichten (und anderen Kommunikationstypen) bereitzustellen. Innerhalb dieses Systems stellt jede Kommunikations-ID einen Benutzer dar, der vom API-Dienst für die App bereitgestellt wird. Der Benutzer erhält eine Kommunikations-ID, sobald der Benutzerauthentifizierungsflow abgeschlossen ist.

Authentifizierungsfluss

Azure Communication Services-Endpunkte erfordern eine Authentifizierung, die in Form eines Bearertokens bereitgestellt wird. Der Authentifizierungsdienst stellt ein Token pro Kommunikations-ID bereit.

Je nach Ihren Anforderungen müssen Sie möglicherweise eine Möglichkeit für Benutzer bereitstellen, sich zu registrieren, sich anzumelden oder eine andere Form eines einmaligen Authentifizierungslinks aufzulösen.

Sie müssen Identitäten erstellen und Authentifizierungstoken innerhalb eines Back-End-Diensts für Sicherheit ausstellen. Weitere Informationen finden Sie unter Schnellstart: Erstellen und Verwalten von Zugriffstoken.

Chat-Benutzeroberfläche

Die schnellste Methode zum Bereitstellen eines Chatbereichs mit Nachrichteneintrag für die Web-Benutzeroberfläche besteht darin, die React Web UI Library Composites aus dem Azure-Paket für Kommunikations-React zu verwenden. In der Storybook-Dokumentation wird ihre Integration und auch die direkte Nutzung in der Storybook-Umgebung erläutert.

Chatverbund mit der Teilnehmerliste

Die Chatverbundkomponente erfordert die Benutzer-ID und das Token aus dem Authentifizierungsflow, dem Endpunkt für Kommunikationsdienste und der Thread-ID, an die sie angefügt werden muss.

Thread-IDs stellen Unterhaltungen zwischen Gruppen von Kommunikations-IDs dar. Vor einer Unterhaltung müssen Sie den Thread erstellen und diesem Thread Benutzer hinzufügen. Sie können dieses Verfahren automatisieren oder die Funktion über eine Registerkarte in der Teams-App bereitstellen, damit die Mitarbeiter sie konfigurieren können.

Chat-Bots

Sie können Ihrer Chat-App Bots hinzufügen. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen eines Bots zu Ihrer Chat-App.

Verteilen der Teams-App

Um eine Teams-App in einer Organisation zu verwenden, muss der Teams-Administrator sie genehmigen. Sie können eine benutzerdefinierte Teams-App erstellen und das App-Paket über das Teams Admin Center installieren. Weitere Informationen hierzu finden Sie unter Verwalten benutzerdefinierter Apps im Microsoft Teams Admin Center.

Nächste Schritte

• Schnellstart: Hinzufügen eines Bots zu Ihrer Chat-App
• Aktivieren der Dateifreigabe mithilfe der Benutzeroberflächenbibliothek im Chat für die Teams-Interoperabilität

Verwandte Artikel

• Weitere Informationen zum Erstellen einer App mit Teams-Interoperabilität finden Sie unter Contact Center.