Lernprogramme

In diesem Artikel erfahren Sie mehr über den Aufbau von Teams-App-Funktionen. Hier ist eine Liste der verfügbaren Schritt-für-Schritt-Anleitungen für die Funktionen der Teams-Plattform.

# Funktion Schritt-für-Schritt-Anleitung
1. Bot - Debuggen Ihres KI-Chatbots mit Microsoft 365 Agents Playground
- Proaktive Nachrichten senden
2. Nachrichtenerweiterung - API-basierte Nachrichtenerweiterung erstellen
- Erstellen einer aktionsbasierten Nachrichtenerweiterung
- Erstellen Ihrer ersten Nachrichtenerweiterungs-App mit JavaScript
3. Tab Erstellen Ihrer ersten Registerkarten-App mit C-sharp
4. SSO - Erstellen eines Bots mit SSO-Authentifizierung
- Hinzufügen von SSO zur Registerkarten- und Nachrichtenerweiterungs-App

Erstellen Sie Ihre erste Bot-App

Beginnen Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer ersten Teams-App. Sie können eine Bot-App mit Teams mithilfe von Javascript erstellen.


Erstellen Sie Ihren ersten Bot.

Ihre App verfügt über eine Funktion mit eigener Benutzeroberfläche und UX:

Das Diagramm zeigt, dass diese App über drei Features verfügt.

In diesem Tutorial lernst du Folgendes:

  • Einrichten eines neuen Projekts mit dem Microsoft 365 Agents Toolkit (früher bekannt als Teams Toolkit).
  • Erstellen einer Bot-App.
  • Bereitstellen Ihrer App.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.

  Installieren Zur Verwendung...
Erforderlich    
  Microsoft 365 Agents Toolkit Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version.
  Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe – alles an einem Ort.
  Node.js JavaScript-Laufzeitumgebung für das Back-End. Weitere Informationen finden Sie in Node.js Versionskompatibilitätstabelle für den Projekttyp.
  Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.
  Visual Studio Code JavaScript, TypeScript oder SharePoint-Framework (SPFx)-Buildumgebungen. Verwenden Sie die neueste Version.
Optional    
  Azure-Tools für Visual Studio Code und Azure CLI Azure-Tools für den Zugriff auf gespeicherte Daten oder für die Bereitstellung eines cloudbasierten Back-Ends für Ihre Teams-App in Azure.
  React Developer Tools für Chrome ODER React Developer Tools für Microsoft Edge Eine Browser-DevTools-Erweiterung für die Open-Source-JavaScript-Bibliothek React.
  Microsoft Graph Explorer Microsoft Graph Explorer, ein browserbasiertes Tool, mit dem Sie eine Abfrage aus Microsoft Graph-Daten ausführen können.
  Entwicklerportal für Teams Webbasiertes Portal zum Konfigurieren, Verwalten und Veröffentlichen Ihrer Teams-App, einschließlich für Ihre organization oder den Microsoft Teams Store.

Tipp

Wenn Sie mit Microsoft Graph-Daten arbeiten, sollten Sie den Microsoft Graph-Explorer kennenlernen und mit einem Lesezeichen versehen. Mit diesem browserbasierten Tool können Sie Microsoft Graph außerhalb einer App abfragen.

Erforderliche Komponenten einrichten

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Microsoft 365 Agents Toolkit installieren

Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) hilft dabei, den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App und zur Veröffentlichung im Teams Store zu vereinfachen.

Sie können Agents Toolkit mit Visual Studio Code oder eine Befehlszeilenschnittstelle namens Microsoft 365 Agents Toolkit CLI (früher als TeamsFx CLI bezeichnet) verwenden.

  1. Öffne Visual Studio Code und wähle Erweiterungen aus (STRG+UMSCHALT+X oderErweiterungenanzeigen>).

  2. Geben Sie im Suchfeld "Microsoft 365 Agents Toolkit" ein.

  3. Wählen Sie Installieren aus.

    Screenshot: Installation der Agents Toolkit-Erweiterung.

    Das Symbol Microsoft 365 Agents Toolkit wird in der Aktivitätsleiste von Visual Studio Code angezeigt.

Sie können Agents Toolkit auch aus dem Visual Studio Code Marketplace installieren.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist ein Raum oder Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich laden Sie auch Ihre App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen einer App überprüfen

Nachdem Sie Ihre benutzerdefinierte App erstellt haben, müssen Sie Ihre App mit der Option "Benutzerdefinierte App hochladen " in Teams hochladen. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um zu überprüfen, ob diese Option aktiviert ist.

Mithilfe der folgenden Schritte können Sie überprüfen, ob Sie Apps in Teams hochladen können:

  1. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie App hochladen aus.

  4. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, können Sie benutzerdefinierte Apps hochladen.

    Der Screenshot zeigt die Option zum Hochladen einer benutzerdefinierten App in Teams.

Hinweis

Wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden, wenden Sie sich an Ihren Teams-Administrator.

Erstellen eines kostenlosen Microsoft Teams-Entwicklermandanten

Wenn Sie kein Teams-Entwicklerkonto haben, treten Sie dem Microsoft 365-Entwicklerprogramm bei. Dies ist ein optionaler Schritt.

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm E5-Abonnement einrichten aus.

  4. Richten Sie Ihr Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt:

    Der Screenshot zeigt das Microsoft 365 Developer Program.

  5. Melden Sie sich mit dem soeben eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Kostenloses Azure-Konto erhalten

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Jetzt verfügen Sie über alle Tools, um Ihr Konto einzurichten. Als Nächstes richten wir deine Entwicklungsumgebung ein und beginnen mit dem Erstellen! Wählen Sie zuerst die App aus, die Sie erstellen möchten.

Projektarbeitsbereich für Ihre Bot-App erstellen

Lassen Sie uns Ihre erste Bot-App erstellen.

Die Botfunktion einer Teams-App erstellt einen Chatbot oder Unterhaltungsbot. Sie verwenden es, um einfache und automatisierte Aufgaben auszuführen, wie z. B. die Bereitstellung von Kundenservice. Ein Bot kommuniziert mit einem Webdienst und hilft Ihnen bei der Nutzung seiner Angebote. Sie können Wettervorhersagen abrufen, Reservierungen vornehmen oder jeden anderen angebotenen Dienst über einen Konversationsbot erhalten.

Das Diagramm zeigt, dass diese App über drei Features verfügt. Bot ist hervorgehoben.

Da Sie die Erstellung dieser Apps bereits vorbereitet haben, können Sie ein neues Teams-Projekt zum Erstellen der Bot-App einrichten.

In diesem Tutorial lernst du Folgendes:

  1. So richten Sie ein neues Bot-Projekt mit Agents Toolkit ein.
  2. Über die Verzeichnisstruktur Ihres App-Projekts.

Wichtig

Bots sind in Government Community Cloud (GCC), GCC High, Department of Defense (DoD) und Teams, die von 21Vianet-Umgebungen betrieben werden, verfügbar.

Erstellen Sie Ihren Botprojektarbeitsbereich

Wenn die Voraussetzungen gegeben sind, kann es losgehen!

Hinweis

Die gezeigte Visual Studio Code-Benutzeroberfläche stammt vom Mac. Dies kann je nach Betriebssystem, Agents Toolkit-Version und Umgebung variieren.

  1. Öffne Visual Studio Code.

  2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  3. Wählen Sie "Neue Agent-/App-Teams-App> erstellen" aus.

    Dieser Screenshot zeigt die Position des Links

  4. Wählen Sie Bot , um ein neues Bot-Projekt zu erstellen.

    Screenshot zeigt den Assistenten zum Erstellen eines neuen Projekts.

  5. Stellen Sie sicher, dass Basic Bot als App-Feature ausgewählt ist, das Sie in Ihrer App erstellen möchten.

    Der Screenshot zeigt das App-Feature, das Sie Ihrer neuen App hinzufügen möchten.

  6. Wählen Sie JavaScript als Programmiersprache aus.

    Der Screenshot zeigt die Option zum Auswählen der Programmiersprache.

  7. Wähle Standardordner aus, um den Projektstammordner am Standardspeicherort zu speichern.

    Der Screenshot zeigt die Auswahl des Standardspeicherorts.

    Sie können den Standardspeicherort auch wie folgt ändern:

    1. Wählen Sie Durchsuchen aus.

      Screenshot: Auswahl der Option

    2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.

    3. Wählen Sie den ausgewählten Ordner aus.

      Screenshot: Auszuwählender Ordner.

  8. Geben Sie einen geeigneten Namen für Ihre App ein, und wählen Sie dann die EINGABETASTE aus.

    Screenshot, der zeigt, wo der App-Name eingegeben wird.

Ein Dialogfeld wird angezeigt, in dem Sie Ja oder Nein auswählen müssen, um den Autoren der Dateien in diesem Ordner zu vertrauen.

Der Screenshot zeigt das Dialogfeld, ob Sie den Autoren der Dateien in diesem Ordner vertrauen können oder nicht.

Ihre Teams-App mit einer Botfunktion ist in wenigen Sekunden erstellt.

Screenshot: Erstellte App.

Nachdem Ihre App erstellt wurde, zeigt Agents Toolkit die folgende Meldung an:

Screenshot: Meldung, dass das Feature erfolgreich erstellt wurde.

Wähle Lokales Debuggen aus, um eine Vorschau deines Projekts anzuzeigen.

Eine kurze Zusammenfassung der Erstellung einer Teams-App. Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-App an.

Erstellen einer Teams-App

Unternehmen Sie eine Tour durch den Quellcode der Bot-App

Zeigen Sie nach Abschluss des Gerüstbaus die Projektverzeichnisse und Dateien im Explorer in Visual Studio Code an.

Screenshot zeigt die Ordnerstruktur.

Ordner / Datei Inhalt
m365agents.yml Hauptprojektdatei
m365agents.local.yml Dies setzt Aktionen außer Kraft m365agents.yml , die lokale Ausführung und Debugging ermöglichen.
.vscode/ VSCode-Dateien für lokales Debuggen.
appPackage/ Vorlagen für das Teams-Anwendungsmanifest.
adaptiveCards/ Adaptive Karten, die vom Bot zurückgeschickt werden.
infra/ Vorlagen für die Bereitstellung von Azure-Ressourcen.
index.js Anwendungseinstiegspunkt und express -handler.
teamsBot.js Teams-Aktivitätshandler.

Tipp

Machen Sie sich mit Bots außerhalb von Teams vertraut, bevor Sie Ihren ersten Bot in Teams integrieren.

Erstellen und Ausführen Ihrer ersten Bot-App

Nachdem Sie Ihren Projektarbeitsbereich mit Agents Toolkit eingerichtet haben, erstellen Sie Ihr Botprojekt. Sie müssen sich bei Ihrem Microsoft 365-Konto anmelden.

Anmelden bei Ihrem Microsoft 365-Konto

Verwenden Sie dieses Konto, um sich bei Teams anzumelden. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, ist das Administratorkonto, das Sie bei der Registrierung einrichten, Ihr Microsoft 365-Konto.

  1. Öffne Visual Studio Code.

  2. Wählen Sie auf der Randleiste das Symbol Microsoft 365 Agents Toolkit aus.

  3. Wählen Sie "Bei M365 anmelden" mit Ihren Anmeldeinformationen aus.

    Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.

  4. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.

  5. Zurück zum Agents-Toolkit in Visual Studio Code.

    Verwenden Sie dieses Konto, um sich bei Teams anzumelden. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, ist das Administratorkonto, das Sie bei der Registrierung einrichten, Ihr Microsoft 365-Konto.

    Screenshot, der zeigt, wo Sie sich bei Microsoft 365 und Azure anmelden können.

Jetzt können Sie die App erstellen und lokal ausführen!

Erstellen und Ausführen Ihrer ersten Bot-App lokal

So erstellen und führen Sie Ihre App in der lokalen Umgebung aus:

  1. Wähle in Visual Studio Code F5 aus, um deine App im Debugmodus auszuführen.

    Hinweis

    Wenn Agents Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, dies zu überprüfen.

    Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.

    Falls Sie sich fragen, wenn Sie die Taste F5 drücken, Agents Toolkit:

    1. Überprüft alle folgenden Voraussetzungen:
    • Sie sind mit einem Microsoft 365-Konto angemeldet.
    • Der benutzerdefinierte App-Upload ist für Ihr Microsoft 365-Konto aktiviert.
    • Unterstützte Node.js-Version ist installiert.
    • Von Bot-App erforderlicher Port ist verfügbar.
    1. Installieren Sie npm-Pakete.
    2. Startet den Dev-Tunnel, um einen HTTP-Tunnel zu erstellen.
    3. Registriert die App in Microsoft Entra ID und konfiguriert die App.
    4. Registriert die Bot-App im Bot Framework und konfiguriert die Bot-App.
    5. Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
    6. Startet die Bot-App.
    7. Startet Teams in einem Webbrowser und lädt die benutzerdefinierte Bot-App hoch.

    Screenshot, der zeigt, wenn die Taste F5 zum Debuggen gedrückt wird.

    Hinweis

    Wenn Sie die App zum ersten Mal ausführen, werden alle Abhängigkeiten heruntergeladen, und die App wird erstellt. Nach Abschluss des Builds wird automatisch ein Browserfenster geöffnet. Dieser Vorgang kann drei bis fünf Minuten in Anspruch nehmen.

    Teams führt Ihre App in einem Webbrowser aus.

  2. Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.

  3. Wählen Sie "Hinzufügen" aus, um die benutzerdefinierte Bot-App in Teams hochzuladen.

    Screenshot des Dialogfelds mit den App-Details, um die Bot-App zu Teams hinzuzufügen.

  4. Wählen Sie "Öffnen " aus, um die App im persönlichen Bereich zu öffnen.

    Alternativ können Sie entweder den gewünschten Bereich durchsuchen und auswählen oder einen Kanal, Chat oder eine Besprechung aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.

    Screenshot des Dialogfelds

    Jetzt wird der Bot erfolgreich in Teams ausgeführt! Nachdem die App geladen wurde, wird eine Chatsitzung mit dem Bot geöffnet.

    Der Screenshot zeigt, dass der Bot auf dem Teams-Client ausgeführt wird.

    Sie können eingebenwelcome, um eine Einführung Karte anzuzeigen, und eingebenlearn, um zur Dokumentation zu adaptiven Karten und Botbefehlen zu gelangen.

    Screenshot zeigt die Learn-Karte im Bot im Teams-Client.

    Sie können wie bei jeder anderen Webanwendung auch normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten. Öffnen Sie die Datei, bot/teamsBot.js und suchen Sie die onMessage() Methode. Legen Sie für jeden Fall einen Haltepunkt fest. Geben Sie dann Text ein.

    Erfahren Sie, wie Sie Probleme beheben können, wenn Ihre App nicht lokal ausgeführt wird.

    Um Ihre App erfolgreich in Teams auszuführen, stellen Sie sicher, dass Sie den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt "Voraussetzungen".

    Wichtig

    Der benutzerdefinierte App-Upload ist in Government Community Cloud (GCC) verfügbar und wird in GCC High, DoD und Teams, die von 21Vianet betrieben werden, nicht unterstützt.

    Tipp

    Suchen Sie mit dem App-Validierungstool nach Problemen, bevor Sie eine benutzerdefinierte App hochladen. Dieses Tool ist im Toolkit enthalten. Beheben Sie die Fehler zum Hochladen der App.

Bereitstellen Ihrer ersten Teams-App

Sie haben gelernt, eine Teams-App mit Botfunktion zu erstellen, zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.

Stellen wir die erste App mit Bot-Funktion in Azure mithilfe des Agents Toolkit bereit.

Anmelden bei Ihrem Azure-Konto

Verwenden Sie dieses Konto für den Zugriff auf das Microsoft Azure-Portal und zum Bereitstellen neuer Cloudressourcen zur Unterstützung Ihrer App.

  1. Öffne Visual Studio Code.

  2. Öffnen Sie den Projektordner, in dem Sie die Bot-App erstellt haben.

  3. Wählen Sie auf der Randleiste das Symbol Microsoft 365 Agents Toolkit aus.

  4. Wählen Sie Bei Azure anmelden mit Ihren Anmeldeinformationen aus.

    Tipp

    Wenn Sie die AZURE ACCOUNT-Erweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen. Verwenden Sie dasselbe Konto wie in anderen Erweiterungen.

    Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.

  5. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.

    Im Abschnitt "KONTEN " der Randleiste werden die beiden Konten separat angezeigt. Außerdem wird die Anzahl der nutzbaren Azure-Abonnements aufgeführt, die Ihnen zur Verfügung stehen. Stellen Sie sicher, dass Sie über mindestens ein nutzbares Azure-Abonnement verfügen. Wenn nicht, melden Sie sich ab und verwenden Sie ein anderes Konto.

Herzlichen Glückwunsch, Sie haben eine Teams-App erstellt! Nun erfahren Sie, wie Sie eine der Apps mithilfe des Agents-Toolkits in Azure bereitstellen.

Bereitstellen und Bereitstellen Ihrer App in Azure

Die Bereitstellung besteht aus zwei Schritten. Zunächst erstellt Azure die erforderlichen Cloudressourcen (auch als Bereitstellung bezeichnet). Anschließend kopiert Azure den Code Ihrer App in die erstellten Cloudressourcen. Für dieses Tutorial stellen Sie die Bot-App bereit.

Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Der Bereitstellungsschritt erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, kopiert jedoch keinen Code (HTML, CSS oder JavaScript) in die Ressourcen. Im Bereitstellungsschritt wird der Code für Ihre App in die Ressourcen kopiert, die Sie während des Bereitstellungsschritts erstellt haben. Es kommt häufig vor, dass mehrere Stellen bereitgestellt werden, ohne dass neue Ressourcen bereitgestellt werden. Da der Bereitstellungsschritt einige Zeit in Anspruch nehmen kann, ist er vom Bereitstellungsschritt getrennt.

Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Visual Studio Code-Randleiste aus.

  1. Wählen Sie "Bereitstellen" aus.

    Screenshot: Auswahl der Bereitstellung in der Cloud unter Toolkit

  2. Wählen Sie ein Abonnement für die Azure-Ressourcen aus.

    Screenshot: Abonnement, das für die Azure-Ressourcen verwendet werden soll

    Ihre App wird mithilfe von Azure-Ressourcen gehostet.

    Ein Dialogfeld warnt Sie, dass beim Ausführen von Ressourcen in Azure Kosten anfallen können.

  3. Wählen Sie "Bereitstellen" aus.

    Screenshot: Dialogfeld, dass beim Ausführen von Ressourcen in Azure Kosten anfallen können.

    Beim Bereitstellungsprozess werden Ressourcen in der Azure-Cloud erstellt. Dies kann einige Zeit dauern. Sie können den Fortschritt überwachen, indem Sie die Dialogfelder in der unteren rechten Ecke beobachten. Nach ein paar Minuten sehen Sie den folgenden Hinweis:

    Screenshot zeigt einen Hinweis, der anzeigt, dass hellomsg erfolgreich in der Cloud bereitgestellt wurde.

    Sie können sich die bereitgestellten Ressourcen anzeigen lassen. Für dieses Tutorial müssen Sie keine Ressourcen anzeigen.

    Die bereitgestellte Ressource wird im Abschnitt ENVIRONMENT angezeigt.

    Der Screenshot zeigt die Ressource, die im Umgebungsabschnitt bereitgestellt wird.

  4. Wählen Sie nach Abschluss der Bereitstellung im Bereich "LEBENSZYKLUS" die Option "Bereitstellen" aus.

    Screenshot: Bereitstellen in der Cloud rot hervorgehoben.

    Wie bei der Bereitstellung nimmt die Bereitstellung einige Zeit in Anspruch. Sie können den Prozess überwachen, indem Sie die Dialogfelder in der unteren rechten Ecke beobachten. Nach ein paar Minuten wird ein Hinweis zum Abschluss angezeigt.

Jetzt können Sie denselben Prozess verwenden, um Ihre Bot- und Nachrichtenerweiterungs-Apps in Azure bereitzustellen.

Ausführen der bereitgestellten App

Gehen Sie nach Abschluss der Bereitstellungs- und Bereitstellungsschritte folgendermaßen vor:

  1. Öffnen Sie den Debugbereich (STRG+UMSCHALT+D / ⌘⇧-D oder Ausführung anzeigen>) in Visual Studio Code.

  2. Wählen Sie "Remote starten (Edge)" aus der Dropdownliste der Startkonfiguration aus.

  3. Klicken Sie auf Debuggen starten (F5). Sie werden aufgefordert, die benutzerdefinierte Bot-App in Teams hochzuladen.

    Screenshot: Debuggen und Remotestarten der App.

  4. Wählen Sie Hinzufügen aus.

    Screenshot des Dialogfelds mit den App-Details, um die App zu Teams hinzuzufügen.

  5. Wählen Sie "Öffnen " aus, um die App im persönlichen Bereich zu öffnen.

    Alternativ können Sie entweder den gewünschten Bereich durchsuchen und auswählen oder einen Kanal, Chat oder eine Besprechung aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.

    Screenshot des Dialogfelds

    Sie haben Ihre Bot-App erfolgreich zum Teams-Client hinzugefügt.

    Screenshot zeigt die Learn-Karte im Bot im Teams-Client.

Erfahren Sie, was geschieht, wenn Sie Ihre App in Azure bereitstellen.

Vor der Bereitstellung wurde die Anwendung lokal ausgeführt:

  • Das Back-End wird mithilfe der Azure Functions Core Tools ausgeführt.
  • Der HTTP-Endpunkt der Anwendung, auf den Microsoft Teams die Anwendung lädt, wird lokal ausgeführt.

Die Bereitstellung erfolgt in zwei Schritten. Sie stellen die Ressourcen in einem aktiven Azure-Abonnement bereit und stellen dann den Back-End- und Front-End-Code für die Anwendung in Azure bereit oder laden ihn hoch.

  • Wenn das Back-End konfiguriert ist, verwendet es verschiedene Azure-Dienste, einschließlich Azure App Service und Azure Storage.
  • Die Front-End-Anwendung wird in einem Azure Storage-Konto bereitgestellt, das für statisches Webhosting konfiguriert ist.

Herzlichen Glückwunsch.

Du hast es geschafft!

Sie haben eine Bot-App erstellt.

Nachdem Sie nun wissen, wie Sie eine einfache App erstellen, können Sie mit dem Erstellen komplexerer Apps fortfahren. Sie haben das Tutorial zum Erstellen eines Bots mit JavaScript abgeschlossen.

Lernprogramme

Debuggen Ihres KI-Chatbots mit Microsoft 365 Agents Playground

Starten Sie die Microsoft Teams-App-Entwicklung mit Ihrer Teams KI-Chatbot-App, und debuggen Sie mit Microsoft 365 Agents Playground (früher als Teams App Test Tool bezeichnet). Agents Playground macht das Debuggen von Bot-basierten Apps mühelos. Sie benötigen kein Microsoft 365-Entwicklerkonto, keinen Tunnel oder keine Teams-App und Bot-Registrierung, um Agents Playground zu verwenden.


Tutorial: Debuggen Ihres KI-Chatbots

Voraussetzungen

Sie können mit Ihrem Bot chatten und die Nachrichten und adaptiven Karten anzeigen, während sie in Teams angezeigt werden. Sie können eine Aktivität in Agents Playground auch mithilfe von Aktivitätstriggern simulieren.

Hinweis

  • Agents Playground ist nur in Version 5.4.0 von Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) verfügbar.
  • Agents Playground wird nur für Desktop- und Webclients unterstützt.

Diese Schritt-für-Schritt-Anleitung hilft Ihnen, einen KI-Chatbot mit dem Agents Toolkit zu erstellen und mit dem Testtool zu debuggen. Nach Abschluss dieses Leitfadens wird die folgende Ausgabe angezeigt, in der der Benutzer auf den KI-Chatbot zugreifen und ihn verwenden kann:

Screenshot: Der Bot ist im Testtool geöffnet.

Installieren Zur Verwendung...
Visual Studio Code oder Visual Studio JavaScript-, TypeScript- oder C#-Buildumgebungen. Verwenden Sie die neueste Version.
Microsoft 365 Agents Toolkit Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie Agents Toolkit v5.4.0. Weitere Informationen finden Sie unter Installieren des Agents Toolkit.
Node.js JavaScript-Laufzeitumgebung für das Back-End. Weitere Informationen finden Sie in Node.js Versionskompatibilitätstabelle für den Projekttyp.
OpenAI oder Azure OpenAI Erstellen Sie zunächst Ihren OpenAI-API-Schlüssel, um die GPT von OpenAI zu verwenden. Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, müssen Sie einen Azure OpenAI-Dienst erstellen.
Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.

Projektarbeitsbereich für Ihre KI-Chatbot-App erstellen

Die Botfunktion einer Teams-App erstellt einen Chatbot oder Unterhaltungsbot. Es kommuniziert mit einem Webdienst und erleichtert so die Nutzung seiner Dienste. Der Bot kann einfache, automatisierte Aufgaben wie die Bereitstellung von Kundenservice ausführen. Sie können Wettervorhersagen abrufen, Reservierungen vornehmen oder jeden anderen angebotenen Dienst über einen Konversationsbot erhalten.

Der Screenshot zeigt Ihnen die App mit drei Features. Bot ist hervorgehoben.

Da Sie die Erstellung dieser Apps bereits vorbereitet haben, können Sie ein neues Teams-Projekt zum Erstellen der KI-Chatbot-App einrichten.

Erstellen Sie Ihren Botprojektarbeitsbereich

Wenn die Voraussetzungen gegeben sind, kann es losgehen!

  1. Öffne Visual Studio Code.

  2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  3. Wählen Sie "Neue Agentin/App erstellen" aus.

    Der Screenshot zeigt die Position des Links Neues Projekt erstellen in der Seitenleiste des Agents-Toolkits.

  4. Wählen Sie Agents für Teams> aus Azure OpenAI> Geben Sie jetzt eine Eingabe in Geben Sie Azure API-Dienstschlüssel ein

    Screenshot: App-Vorlagen für das Agents-Toolkit.

  5. Wählen Sie Basic-Agents für Teams aus. Wenn Sie eine andere Funktionalität für Ihren Bot benötigen, wählen Sie die gewünschte Option aus.

    Screenshot: App-Feature, das Ihrer neuen App hinzugefügt werden soll.

  6. Wählen Sie die Programmiersprache als JavaScript aus.

    Screenshot: Option zum Auswählen der Programmiersprache.

  7. Wählen Sie Standardordner aus.

    Screenshot: Auswahl des Standardspeicherorts.

    Gehen Sie wie folgt vor, um den Standardspeicherort zu ändern:

    1. Wählen Sie Durchsuchen aus.

      Screenshot: Auswahl der Option

    2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.

    3. Wählen Sie "Ordner auswählen" aus.

      Screenshot: Auszuwählender Ordner.

  8. Geben Sie einen geeigneten Namen für Ihre App ein, und wählen Sie dann die Eingabetaste aus .

    Screenshot, der zeigt, wo der App-Name eingegeben wird.

    Ein Dialogfeld wird angezeigt, in dem Sie Ja oder Nein auswählen müssen, um den Autoren der Dateien in diesem Ordner zu vertrauen.

    Der Screenshot zeigt das Dialogfeld, ob Sie den Autoren der Dateien in diesem Ordner vertrauen können oder nicht.

Jetzt haben Sie erfolgreich Ihren KI-Chatbot-Projektarbeitsbereich erstellt.

Unternehmen Sie eine Tour durch den Quellcode der Bot-App

Nachdem du das Gerüst fertiggestellt hast, erkunde die Projektverzeichnisse und Dateien im EXPLORER-Abschnitt von Visual Studio Code.

Screenshot zeigt die Struktur des Teams Toolkit-Beispielordners

Ordner- oder Dateiname Inhalt
env/.env.playground Die Konfigurationsdatei mit Umgebungsvariablen, die an Git übergeben werden können.
env/.env.playground.user Die Konfigurationsdatei mit Umgebungsvariablen, einschließlich Anmeldeinformationen, die standardmäßig nicht an Git übergeben werden.
appPackage Vorlagendateien für App-Manifeste und App-Symbole (color.png und outline.png).
appPackage/manifest.json App-Manifest zum Ausführen der App in lokalen und Remoteumgebungen.
src/app.js Verarbeitet die Geschäftslogik für den KI-Chatbot.
m365agents.yml Dies ist die Hauptprojektdatei des Agents-Toolkits. Die Projektdatei definiert zwei grundlegende Dinge: Eigenschaften und Konfiguration sowie Phasendefinitionen.
m365agents.local.yml Dies setzt Aktionen außer Kraft m365agents.yml , die lokale Ausführung und Debugging ermöglichen.
m365agents.playground.yml Dies setzt Aktionen außer m365agents.yml Kraft, die die lokale Ausführung und das Debuggen im Testtool ermöglichen.

Erstellen und Ausführen Ihrer KI-Chatbot-App

OpenAI-Schlüssel und Endpunkt für Ihren KI-Chatbot erstellen

  1. Wechseln Sie zum Azure-Portal.

  2. Wählen Sie Ressource erstellen aus, und suchen Sie nach Azure OpenAI.

  3. Wählen Sie Azure OpenAI und dann Erstellen aus.

    Screenshot zeigt die Azure OpenAI in Azure-Portal.

  4. Geben Sie die erforderlichen Details ein, und klicken Sie auf Weiter.

    Screenshot: Azure OpenAI-Abonnement und Ressourcengruppe.

  5. Wählen Sie Alle Netzwerke aus, einschließlich des Internets, können auf diese Ressource zugreifen, und wählen Sie dann Weiter aus.

    Screenshot: Details zum Azure OpenAI-Netzwerk.

  6. Geben Sie die erforderlichen Details ein, und klicken Sie auf Weiter.

    Screenshot: Details zu Azure OpenAI-Tags.

  7. Wählen Sie Erstellen aus.

    Der Screenshot zeigt die Vorschau und Erstellung von Azure OpenAI.

Sie haben erfolgreich Schlüssel und Endpunkt für Ihren KI-Chatbot erstellt.

Screenshot: Bereitstellung von Azure OpenAI.

Hinweis

Sie können auch einen OpenAI-API-Schlüssel abrufen, um Ihren KI-Chatbot zu debuggen.

Abrufen von Azure OpenAI-Schlüsseln und -Endpunkt

  1. Wählen Sie Zu Ressourcen wechseln aus.

    Der Screenshot zeigt die Bereitstellung von Azure OpenAI.

  2. Wählen Sie im linken Bereich Schlüssel und Endpunkt aus, und kopieren Sie den Schlüssel und Endpunkt. Sie können entweder SCHLÜSSEL 1 oder SCHLÜSSEL 2 kopieren.

    Screenshot: Schlüssel und Endpunkte.

    Speichern Sie den SCHLÜSSEL und den Endpunkt zur weiteren Verwendung.

  3. Wählen Sie im linken Bereich Modellbereitstellungen und dann Bereitstellungen verwalten aus.

    Screenshot: Modellbereitstellung für Azure OpenAI.

    Das Fenster Azure OpenAI Studio wird angezeigt.

  4. Wählen Sie im linken Bereich Bereitstellungen und dann + Neue Bereitstellung erstellen aus.

    Screenshot: Modellbereitstellungen für Azure OpenAI.

  5. Wählen Sie die folgenden Details aus:

    1. Wählen Sie gpt-35-turbo aus der Dropdownliste Modell auswählen aus.

      Hinweis

      Für den KI-Chatbot wird nur das Modell gpt-35-turbo unterstützt.

    2. Wählen Sie 0301 (Standard) aus der Dropdownliste Modellversion aus.

    3. Geben Sie den Bereitstellungsnamen ein, und wählen Sie Erstellen aus.

      Screenshot: Modell und Version für die Azure OpenAI-Bereitstellung.

    4. Kopieren und speichern Sie den Bereitstellungsnamen zur weiteren Verwendung.

      Der Screenshot zeigt den Bereitstellungsnamen für die Azure OpenAI-Bereitstellung.

Aktualisieren des Azure OpenAI-Schlüssels und der Endpunkte

  1. Öffne dein Projekt in Visual Studio Code.

  2. Wechseln Sie unter EXPLORER zur Datei env.env.playground.user>.

  3. Geben Sie Ihre SECRET_AZURE_OPENAI_API_KEY und SECRET_AZURE_OPENAI_ENDPOINT ein.

    ...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

  4. Wechseln Sie zu src>app.js Datei.

  5. Kommentieren Sie den OpenAI Code aus, und kommentieren Sie die Auskommentierung des Azure OpenAI Codes auf.

  6. Geben Sie den Namen für Ihre Azure OpenAI-Bereitstellung in azureDefaultDeploymentein.

    
// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,

Debuggen und Ausführen Ihrer KI-Chatbot-App

  1. Wählen Sie im linken Bereich AUSFÜHREN und DEBUGGEN (STRG+UMSCHALT+D) und dann in der Dropdownliste Debuggen in Agents Playground aus.

    Screenshot: Option zur Auswahl von

  2. Agents Playground öffnet Ihren KI-Chatbot auf einer Webseite.

    Screenshot: Der Bot ist im Testtool geöffnet.

Aktivitätsauslöser

Es gibt zwei Arten von Aktivitätsauslösern:

Vordefinierte Aktivitätsauslöser

Agents Playground stellt vordefinierte Aktivitätstrigger bereit, um die Funktionen Ihres Bots zu testen.

Kategorie Aktivität Handler
Installationsupdateaktivität auslösen Bot installieren


Bot zum Deinstallieren		 onInstallationUpdate
onInstallationUpdateAdded

onInstallationUpdate
onInstallationUpdateRemove
Konversationsupdateaktivität auslösen Benutzer hinzufügen


Bot hinzufügen


Kanal hinzufügen		 onMembersAdded
onTeamsMembersAddedEvent

onMembersAdded
onTeamsMembersAddedEvent

onTeamsChannelCreatedEvent
Remote-Benutzer


Bot entfernen


Kanal entfernen

Team entfernen		 onMembersRemoved
onTeamsMembersRemovedEvent

onMembersRemoved
onTeamsMembersRemovedEvent

onTeamsChannelDeletedEvent

onTeamsTeamDeletedEvent
Kanal umbenennen

Team umbenennen		 onTeamsChannelRenamedEvent

onTeamsTeamRenamedEvent

Hinweis

Nicht alle Arten von Aktivitäten sind in allen Bereichen verfügbar. Sie können beispielsweise keinen Kanal in einem persönlichen Chat oder Gruppenchat hinzufügen oder entfernen.

Vordefinierte Aktivitätsauslöser sind im Menü "Aktivität simulieren " im Agenten-Playground verfügbar.

Führen Sie die folgenden Schritte aus, um eine Benutzeraktivität zu simulieren:

  1. Wechseln Sie in Agents Playground zu Mock an activity add>user.

    Screenshot: Option

    Ein Dialogfeld wird angezeigt, um eine Vorschau des Aktivitätshandlers anzuzeigen.

  2. Wählen Sie Aktivität senden aus.

    Der Screenshot zeigt die Option zum Senden einer Aktivität für vordefinierte, vordefinierte Pseudoaktivität

    Bot sendet die folgende Antwort:

    Der Screenshot zeigt die Antwort der vordefinierten Scheinaktivität

Benutzerdefinierte Aktivitätstrigger

Sie können benutzerdefinierte Aktivitäten verwenden, um Aktivitätsauslöser anzupassen, reactionsAdded z. B. um die Anforderungen Ihrer Bot-App zu erfüllen. Agents Playground füllt automatisch die erforderlichen Eigenschaften der Aktivität aus. Sie können auch den Aktivitätstyp ändern und weitere Eigenschaften hinzufügen.

  1. Wählen Sie "Aktivität simulieren>" und"Benutzerdefinierte Aktivität" aus.

    Der Screenshot zeigt die Liste der Optionen unter

  2. Fügen Sie hinzu messageReaction , um die Aktivität unter der type Eigenschaft anzupassen:

    {
    "type": "messageReaction",
    "reactionsAdded": [
    {
        "type": "like"
    }
    ],
    "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
}

  3. Wählen Sie Aktivität senden aus.

    Screenshot: Option zum Senden von Aktivitäten nach der Anpassung der Mock-Aktivität.

    Bot sendet einen onReactionsAdded Handler als Antwort.

    Der Screenshot zeigt die Antwort der benutzerdefinierten Mock-Aktivität.

Herausforderung abschließen

Hast du dir eine Ausgabe wie diese ausgedacht?

Screenshot: Der Bot ist im Testtool geöffnet.

Herzlichen Glückwunsch. Sie haben erfolgreich eine KI-Chatbot-App erstellt. Jetzt haben Sie gelernt, Ihre KI-Chatbot-App im Agents Playground zu debuggen.

Microsoft 365 Agents-Playground

Zurück zum Anfang

Proaktive Nachrichten senden

Eine proaktive Nachricht ist eine Nachricht, die von einem Bot als Reaktion auf einfache Befehle gesendet wird, die von einem Benutzer im Chat gesendet werden.


Tutorial: Senden proaktiver Nachrichten

Die Antwort auf die Nachricht kann in einem der folgenden Formate vorliegen:

  • Begrüßungsnachrichten
  • Geplante Nachrichten
  • Benachrichtigungen

Diese schrittweise Anleitung hilft Ihnen, eine proaktive Nachricht von einem Bot zu senden. Die folgende Ausgabe wird angezeigt:

Screenshot: Proaktive Hallo-Nachricht im Teams-Chat.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.

  Installieren Zur Verwendung
  Microsoft Visual Studio Code JavaScript oder TypeScript, Buildumgebungen. Verwenden Sie die neueste Version.
  Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version.
  Node.js JavaScript-Laufzeitumgebung für das Back-End. Weitere Informationen finden Sie in Node.js Versionskompatibilitätstabelle für den Projekttyp.
  Microsoft Teams Teams, um mit allen Personen, mit denen Sie arbeiten, über Apps für Chat, Besprechungen, Anrufe und alles an einem Ort zusammenzuarbeiten.
  Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.
  Microsoft 365-Entwicklerkonto Zugriff auf ein Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.

Vorbereiten der Entwicklungsumgebung

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Microsoft 365 Agents Toolkit installieren

Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) hilft dabei, den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App und zur Veröffentlichung im Teams Store zu vereinfachen.

Sie können Agents Toolkit mit Visual Studio Code oder eine Befehlszeilenschnittstelle namens Microsoft 365 Agents Toolkit CLI (früher als TeamsFx CLI bezeichnet) verwenden.

  1. Öffne Visual Studio Code und wähle Erweiterungen aus (STRG+UMSCHALT+X oderErweiterungenanzeigen>).

  2. Geben Sie im Suchfeld "Microsoft 365 Agents Toolkit" ein.

  3. Wählen Sie Installieren aus.

    Screenshot: Installation der Agents Toolkit-Erweiterung.

    Das Symbol Microsoft 365 Agents Toolkit wird in der Aktivitätsleiste von Visual Studio Code angezeigt.

Sie können Agents Toolkit auch aus dem Visual Studio Code Marketplace installieren.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist ein Raum oder Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich laden Sie auch Ihre App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen einer App überprüfen

Nachdem Sie Ihre benutzerdefinierte App erstellt haben, müssen Sie Ihre App mit der Option "Benutzerdefinierte App hochladen " in Teams hochladen. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um zu überprüfen, ob diese Option aktiviert ist.

Mithilfe der folgenden Schritte können Sie überprüfen, ob Sie Apps in Teams hochladen können:

  1. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie App hochladen aus.

  4. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, können Sie benutzerdefinierte Apps hochladen.

    Der Screenshot zeigt die Option zum Hochladen einer benutzerdefinierten App in Teams.

    Hinweis

    Wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden, wenden Sie sich an Ihren Teams-Administrator.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie kein Teams-Entwicklerkonto haben, treten Sie dem Microsoft 365-Entwicklerprogramm bei.

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm E5-Abonnement einrichten aus.

  4. Richten Sie Ihr Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt:

    Dieser Screenshot zeigt das Microsoft 365 Developer Program.

  5. Melden Sie sich mit dem soeben eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Erstellen eines proaktiven Nachrichtenbots

Um einen proaktiven Nachrichtenbot mit Visual Studio Code zu erstellen, gehe folgendermaßen vor:

  1. Öffne Visual Studio Code.

  2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  3. Wählen Sie im linken Bereich Beispiele anzeigen aus.

    Screenshot zeigt die Option

  4. Wählen Sie in der Liste der Beispiele Proaktives Messaging aus. Ein vorgefertigtes Beispiel, das zum Debuggen bereit ist, wird geöffnet.

    Der Screenshot zeigt das vorkonfigurierte Beispiel für einen proaktiven Messaging-Bot in der Liste der Beispiele.

  5. Wählen Sie Erstellen aus.

    Screenshot zeigt die Option

  6. Wähle Standardordner, um den Projektstammordner am Standardspeicherort zu speichern.

    Screenshot: Option zum Auswählen des Standardspeicherorts.

    Wenn Sie den Standardspeicherort ändern möchten, führen Sie die folgenden Schritte aus:

    1. Wählen Sie Durchsuchen aus.

      Screenshot: Option zum Durchsuchen des Standorts.

    2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.

    3. Wählen Sie "Ordner auswählen" aus.

      Screenshot: Option zum Auswählen des Ordners.

    Der proaktive Nachrichtenbot ist in wenigen Sekunden erstellt und zeigt in der unteren rechten Ecke das Dialogfeld "Erfolg des proaktiven Nachrichtenbots" mit der Option zum Debuggen an:

    Screenshot zeigt den erstellten proaktiven Nachrichtenbot. :::

  7. Wählen Sie das Symbol Ausführen und Debuggen in der oberen linken Ecke aus.

  8. Wählen Sie in der Dropdownliste Debuggen (Edge) oder Debuggen (Chrome) aus.

    Screenshot mit den Debugoptionen zur Auswahl.

    Wenn das Debuggen erfolgreich ist, werden Sie aufgefordert, den proaktiven Nachrichtenbot in Teams auf Ihrem lokalen Computer hochzuladen.

  9. Wählen Sie Hinzufügen aus.

    Screenshot des Dialogfelds mit Details zur Nachrichtenerweiterung mit hervorgehobener Option

  10. Suchen Sie den gewünschten Bereich, und wählen Sie ihn aus, oder wählen Sie einen Kanal, Chat oder eine Besprechung aus der Liste aus, und navigieren Sie durch das Dialogfeld, um Los auszuwählen.

    Screenshot des Dialogfelds für die Bereichsauswahl mit der Liste der freigegebenen Bereiche.

    Die proaktive Nachrichten-Bot-App wird in den Teams-Client hochgeladen und die folgende Nachricht wird als Antwort auf die gesendete Nachricht angezeigt.

    Der Screenshot zeigt die proaktive Nachrichten-Bot-Antwort im Chat.

  11. Kopieren Sie die URL, fügen Sie sie ein, oder navigieren Sie im Browser zur URL. Eine proaktive Hallo-Nachricht wird ausgelöst und im Chat geteilt.

    Der Screenshot zeigt den Browser, der den Bot auslöst, mit einer proaktiven Nachricht in Teams zu antworten.

  12. Wechseln Sie zu Teams. Sie erhalten eine proaktive Hallo-Nachricht vom Bot.

    Screenshot: Bot-Antwort im Chat.

Unternehmen Sie eine Tour durch den Quellcode

Agents Toolkit stellt Komponenten zum Erstellen einer App bereit. Nach dem Erstellen des Projekts kannst du die Projektordner und -dateien im EXPLORER-Bereich von Visual Studio Code anzeigen.

Screenshot: Registerkarte

Der neue Projektordner enthält den folgenden Inhalt:

Ordner / Datei Inhalt
.vscode/ Visual Studio Code-Dateien für das Debuggen.
appManifest/ Vorlagen für das App-Manifest (zuvor als Teams-App-Manifest bezeichnet).
env/ Name/Wert-Paare werden in Umgebungsdateien gespeichert und von m365agents.yml zum Anpassen der Bereitstellungs- und Bereitstellungsregeln verwendet.
manifest.json Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert.
m365agents.yml Die Hauptprojektdatei beschreibt Ihre App-Konfiguration und definiert die Aktionen, die in den einzelnen Lebenszyklusphasen ausgeführt werden sollen.
m365agents.local.yml Dies setzt Aktionen außer Kraft m365agents.yml , die lokale Ausführung und Debugging ermöglichen.

Bereitstellen Ihres proaktiven Nachrichtenbots

Sie haben gelernt, eine Teams-App mit proaktiver Nachrichtenbotfunktion zu erstellen und auszuführen. Lassen Sie uns die erste App mit proaktiver Nachrichtenbotfunktion in Azure mit dem Agents Toolkit bereitstellen.

Anmelden bei Ihrem Azure-Konto

Verwenden Sie Ihr Konto, um auf die Microsoft Azure-Portal zuzugreifen und neue Cloudressourcen zur Unterstützung Ihrer App bereitzustellen.

  1. Öffne Visual Studio Code.

  2. Öffnen Sie den Projektordner, in dem Sie die proaktive Nachrichten-Bot-App erstellt haben.

  3. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  4. Wählen Sie Bei Azure anmelden mit Ihren Anmeldeinformationen aus.

    Tipp

    Wenn Sie die AZURE ACCOUNT-Erweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen.

    Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.

  5. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.

Im Abschnitt "KONTEN " der Randleiste werden die beiden Konten separat angezeigt. Außerdem wird die Anzahl der nutzbaren Azure-Abonnements aufgeführt, die Ihnen zur Verfügung stehen. Stellen Sie sicher, dass mindestens ein nutzbares Azure-Abonnement verfügbar ist. Wenn nicht, melden Sie sich ab und verwenden Sie ein anderes Konto.

Bereitstellen Ihrer App in Azure

Die Bereitstellung besteht aus zwei Schritten. Zunächst werden die erforderlichen Cloud-Ressourcen erstellt (auch als Bereitstellung bezeichnet). Anschließend wird der Code Ihrer App in die erstellten Cloudressourcen kopiert. Für dieses Tutorial stellen Sie die Bot-App bereit.

Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Bereitstellen erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, aber es wird kein Code (HTML, CSS und JavaScript) in die Ressourcen kopiert.
Beim Bereitstellen wird der Code für Ihre App auf die Ressourcen kopiert, die Sie während der Bereitstellung erstellt haben. Es kommt häufig vor, dass mehrere Stellen bereitgestellt werden, ohne dass neue Ressourcen bereitgestellt werden. Da die Bereitstellung einige Zeit in Anspruch nehmen kann, ist sie von der Bereitstellung getrennt.

  1. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  2. Wählen Sie unter "LEBENSZYKLUS"die Option "Bereitstellen" aus.

    Screenshot der Bereitstellungsbefehle.

  3. Wählen Sie eines der vorhandenen Abonnements aus.

    Screenshot: Abonnementoption für die Bereitstellung.

  4. Wählen Sie eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue Ressourcengruppe. Weitere Informationen finden Sie unter Erstellen einer Ressourcengruppe.

    Screenshot: Ressourcengruppenoption für die Bereitstellung anzeigen.

    Hinweis

    Es wird in einem Dialogfeld darauf hingewiesen, dass beim Ausführen von Ressourcen in Azure Kosten anfallen können.

  5. Wählen Sie "Bereitstellen" aus.

    Screenshot des Dialogfelds für die Bereitstellung.

    Beim Bereitstellungsprozess werden Ressourcen in der Azure-Cloud erstellt. Sie können den Fortschritt in den Dialogfeldern überwachen, die in der unteren rechten Ecke angezeigt werden. Nach einigen Minuten wird das folgende Dialogfeld angezeigt:

    Screenshot: Dialogfeld

  6. Wählen Sie unter "LEBENSZYKLUS"die Option "Bereitstellen" aus.

    Screenshot: Option

  7. Wählen Sie Bereitstellen aus.

    Screenshot: Bestätigungsdialogfeld für die Bereitstellung.

    Die Bereitstellung nimmt einige Zeit in Anspruch. Sie können den Fortschritt in den Dialogfeldern überwachen, die in der unteren rechten Ecke angezeigt werden. Nach ein paar Minuten wird das folgende Dialogfeld angezeigt.

    Screenshot: Dialogfeld

  8. Öffnen Sie den Debugbereich (STRG+UMSCHALT+D / ⌘⇧-D oderAusführunganzeigen>) in Visual Studio Code.

  9. Wählen Sie "Remote starten (Edge)" aus der Dropdownliste der Startkonfiguration aus.

    Screenshot: Hervorgehobene Option

    Wenn das Debuggen erfolgreich ist, werden Sie aufgefordert, die proaktive Nachrichten-Bot-App in Teams hochzuladen.

  10. Wählen Sie Hinzufügen aus.

    Screenshot des Dialogfelds der Nachrichtenerweiterungs-App mit hervorgehobener Option

  11. Suchen Sie den gewünschten Bereich, und wählen Sie ihn aus, oder wählen Sie einen Kanal, Chat oder eine Besprechung aus der Liste aus, und navigieren Sie durch das Dialogfeld, um Los auszuwählen.

    Screenshot: Dialogfeld

    Die proaktive Nachrichten-Bot-App wird in den Teams-Client hochgeladen und die folgende Nachricht wird als Antwort auf die gesendete Nachricht angezeigt.

    Der Screenshot zeigt die proaktive Nachrichten-Bot-Antwort im Chat.

  12. Kopieren Sie die URL, fügen Sie sie ein, oder navigieren Sie im Browser zur URL. Eine proaktive Hallo-Nachricht wird ausgelöst und im Chat geteilt.

    Der Screenshot zeigt den Browser, der den Bot auslöst, mit einer proaktiven Nachricht in Teams zu antworten.

  13. Wechseln Sie zu Teams. Sie erhalten eine proaktive Hallo-Nachricht vom Bot.

    Screenshot: Bot-Antwort im Chat.

Herausforderung abschließen

Hast du dir so etwas ausgedacht?

Screenshot: Proaktive Hallo-Nachricht.

Sie haben das Szenario abgeschlossen.

  • Sie können täglich Benachrichtigungen senden oder regelmäßig Feedback von Benutzern anfordern.
  • Sie können mit Drosselungsgrenzwerten umgehen, um Mehrfachbenachrichtigungen zu vermeiden.

Proaktive Nachrichten senden

Zurück zum Anfang

API-basierte Nachrichtenerweiterung erstellen

Nachrichtenerweiterungen, die mit API (API-basiert) erstellt wurden, verbessern die Funktionalität Ihrer Teams-Apps erheblich, indem sie ihnen die Interaktion mit externen Diensten ermöglichen. API-basierte Nachrichtenerweiterungen können dazu beitragen, Workflows zu optimieren, indem sie die Notwendigkeit reduzieren, zwischen verschiedenen Anwendungen zu wechseln.


Lernprogramm: Erstellen einer API-basierten Nachrichtenerweiterung

Hinweis

API-basierte Nachrichtenerweiterungen unterstützen nur Suchbefehle.

Sie können API-basierte Nachrichtenerweiterungen verwenden, um externe Dienste zu integrieren, die häufig im Geschäftsworkflow verwendet werden. Beispielsweise könnte ein Unternehmen, das häufig ein CRM-System für die Kundenverwaltung verwendet, eine Nachrichtenerweiterung verwenden, um Kundendaten direkt aus Teams abzurufen und anzuzeigen. Diese App hilft, Zeit zu sparen und verbessert die Effizienz, indem die Notwendigkeit reduziert wird, zwischen verschiedenen Anwendungen zu wechseln. Dieses Feature wird auf allen Plattformen unterstützt, auf denen Teams verfügbar ist, einschließlich Desktop, Web und Mobilgeräte.

Voraussetzungen für das Erstellen einer Nachrichtenerweiterung

Hier ist eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer Apps benötigen.

Installieren Zur Verwendung...
Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen oder Anrufe – alles an einem Ort.
Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.
Visual Studio Code JavaScript, TypeScript oder SharePoint-Framework (SPFx)-Buildumgebungen. Verwenden Sie Version 1.55 oder höher.
Microsoft 365-Entwicklerkonto Zugriff auf ein Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.
Azure-Konto Zugriff auf Azure-Ressourcen.
OpenAPI-Beschreibungsdokument (OAD) Ein Dokument, das die Funktionen Ihrer API beschreibt. Weitere Informationen finden Sie unter OpenAPI-Beschreibung.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder ein Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich können Sie auch Ihre benutzerdefinierte App hochladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen benutzerdefinierter Apps überprüfen

Nachdem Sie die App erstellt haben, müssen Sie Ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Hinweis

Der benutzerdefinierte App-Upload ist erforderlich, um Apps in der lokalen Teams-Umgebung anzuzeigen und zu testen. Wenn sie nicht aktiviert ist, können Sie Ihre App nicht in der lokalen Teams-Umgebung in der Vorschau anzeigen und testen.

Haben Sie bereits einen Mandanten und verfügen Sie über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie das wirklich tun!

Überprüfen Sie, ob Sie eine benutzerdefinierte App in Teams hochladen können:

  1. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie App hochladen aus.

  4. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Screenshot: Startseite des Bots.

Hinweis

Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie kein Teams-Entwicklerkonto haben, können Sie es kostenlos erhalten. Treten Sie dem Microsoft 365-Entwicklerprogramm bei!

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm E5-Abonnement einrichten aus.

  4. Richten Sie Ihr Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt.

    Der Screenshot zeigt das Microsoft 365 Developer Program.

  5. Melden Sie sich mit dem soeben eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Kostenloses Azure-Konto erhalten

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Sie verfügen über alle Tools, um Ihr Konto einzurichten. Als Nächstes richten wir deine Entwicklungsumgebung ein und beginnen mit dem Erstellen! Wählen Sie zuerst die App aus, die Sie erstellen möchten.

OpenAPI-Beschreibungsdokument erstellen

OpenAPI Description (OAD) ist die branchenübliche Spezifikation, die beschreibt, wie OpenAPI-Dateien strukturiert und gegliedert sind. Es handelt sich um ein sprachunabhängiges, für Menschen lesbares Format zur Beschreibung von APIs. Es ist sowohl für Menschen als auch für Maschinen einfach zu lesen und zu schreiben. Das Schema ist maschinenlesbar und wird entweder in YAML oder JSON dargestellt.

Für die Interaktion mit den APIs ist ein OpenAPI-Beschreibungsdokument erforderlich. Das OpenAPI-Beschreibungsdokument muss die folgenden Kriterien erfüllen:

  • Die auth Eigenschaft darf nicht angegeben werden.

  • JSON und YAML sind die unterstützten Formate.

  • OpenAPI-Versionen 2.0 und 3.0.x werden unterstützt.

  • Teams unterstützt die Konstrukte "oneOf", "anyOf", "allOf" und "nicht (swagger.io)" nicht.

  • Das Erstellen von Arrays für die Anforderung wird nicht unterstützt, jedoch werden geschachtelte Objekte innerhalb eines JSON-Anforderungstexts unterstützt.

  • Der Anforderungstext muss, falls vorhanden, application/json sein, um die Kompatibilität mit einer Vielzahl von APIs sicherzustellen.

  • Definieren Sie eine HTTPS-Protokollserver-URL für die servers.url Eigenschaft.

  • Es wird nur die Suche mit einem einzelnen Parameter unterstützt.

  • Es ist nur ein erforderlicher Parameter ohne Standardwert zulässig.

  • Es werden nur POST- und GET-HTTP-Methoden unterstützt.

  • Das OpenAPI-Beschreibungsdokument muss über eine .operationId

  • Der Vorgang darf keine Header- oder Cookie-Parameter ohne Standardwerte erfordern.

  • Ein Befehl muss genau einen Parameter haben.

  • Stellen Sie sicher, dass keine Remoteverweise im OpenAPI-Beschreibungsdokument vorhanden sind.

  • Ein erforderlicher Parameter mit einem Standardwert gilt als optional.

    Wir haben die folgende OpenAPI-Beschreibung als Beispiel für dieses Tutorial verwendet:

    OpenAPI-Beschreibung 
        openapi: 3.0.1
    info:
    title: OpenTools Plugin
    description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
    version: 'v1'
    servers:
        - url: https://gptplugin.opentools.ai
    paths:
    /tools:
    get:
    operationId: searchTools
    summary: Search for AI Tools
        parameters:
        - in: query
          name: search
          required: true
          schema:
          type: string
          description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
        responses:
        "200":
          description: OK
          content:
          application/json:
            schema:
            $ref: '#/components/schemas/searchToolsResponse'
        "400":
          description: Search Error
          content:
          application/json:
            schema:
            ref: '#/components/schemas/searchToolsError'
        components:
        schemas:
        searchToolsResponse:
        required:
        - search
        type: object
        properties:
        tools:
        type: array
        items:
        type: object
        properties:
        name:
        type: string
        description: The name of the tool.
        opentools_url:
        type: string
        description: The URL to access the tool.
        main_summary:
        type: string
        description: A summary of what the tool is.
        pricing_summary:
        type: string
        description: A summary of the pricing of the tool.
        categories:
        type: array
        items:
        type: string
        description: The categories assigned to the tool.
        platforms:
        type: array
        items:
        type: string
        description: The platforms that this tool is available on.
        description: The list of AI tools.
        searchToolsError:
        type: object
        properties:
        message:
        type: string
        description: Message of the error.

    Hinweis

    Stellen Sie sicher, dass die required: true Eigenschaft nur für einen Parameter verfügbar ist. Wenn mehr als ein erforderlicher Parameter vorhanden ist, können Sie die erforderliche Eigenschaft required: false für die anderen Parameter aktualisieren.

Sie können überprüfen, ob das OpenAPI-Beschreibungsdokument gültig ist. Führen Sie zur Überprüfung die folgenden Schritte aus:

  1. Gehen Sie zu Swagger oder OpenAPI-Validator und validieren Sie das OpenAPI-Beschreibungsdokument.

  2. Speichern Sie das OpenAPI-Beschreibungsdokument.

  3. Wechsle zum Swagger-Editor.

  4. Fügen Sie im linken Bereich die OpenAPI-Beschreibung in den Editor ein.

  5. Wählen Sie im rechten Bereich GET aus.

  6. Wählen Sie "Ausprobieren" aus.

  7. Geben Sie die Werte für den Suchparameter als Werkzeug zum Erstellen von Musik ein.

  8. Wählen Sie Ausführen aus. Der Swagger-Editor zeigt eine Antwort mit einer Liste von Produkten an.

    Screenshots zeigt die Parameter, ihre Werte und die Option **EXECUTE** im Swagger-Editor.

  9. Wechseln Sie zumAntworttextder Serverantwort>.

  10. Kopieren productsSie unter das erste Produkt aus der Liste und speichern Sie es zum späteren Nachschlagen.

    Screenshots zeigen das hervorgehobene Produkt, das im Antworttext ausgewählt wurde.

Erstellen einer Vorlage für das Antwortrendering

Ein OpenAPI-Beschreibungsdokument erfordert eine Antwortrenderingvorlage, damit die App auf die GET- oder POST-Anforderungen reagieren kann. Die Vorlage für das Antwortrendering besteht aus einer adaptiven Kartenvorlage, einer Vorschau der Kartenvorlage und Metadaten.

Adaptive Kartenvorlage

Führen Sie die folgenden Schritte aus, um eine adaptive Kartenvorlage zu erstellen:

  1. Gehen Sie zu ChatGPT , und stellen Sie die folgende Abfrage im Bereich zum Verfassen von Nachrichten:

    
Create an Adaptive Card Template that binds to the following response:
    "categories": [
        "Music Generation",
        "AI Detection"
    ],
    "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
    "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
    "name": "AI Music Generator",
    "opentools_url": "https://goto.opentools.ai/ai-music-generator",
    "platforms": [
        "Web",
        "App",
        "API"
    ]

  2. Wählen Sie "Nachricht senden" aus.

  3. ChatGPT generiert eine Antwort mit einer adaptiven Kartenvorlage, die an die Beispieldaten gebunden wird. Speichern Sie die Vorlage "Adaptive Karten" zur späteren Referenz.

    Im Folgenden finden Sie ein Beispiel für die Vorlage "Adaptive Karten":

    Adaptive Kartenvorlage 
    
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
    {
    "type": "TextBlock",
    "text": "AI Music Generator",
    "weight": "Bolder",
    "size": "Large"
    },
    {
    "type": "TextBlock",
    "text": "Categories",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
     "text": "Music Generation, AI Detection",
     "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Description",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
    "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Platform",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "Web, App, API",
    "wrap": true
    }
],
"actions": [
    {
    "type": "Action.OpenUrl",
    "title": "Learn More",
    "url": "https://goto.opentools.ai/ai-music-generator"
    },
    {
    "type": "Action.OpenUrl",
    "title": "Try It",
    "url": "https://goto.opentools.ai/c/ai-music-generator"
    }
]
}

  4. Führen Sie die folgenden Schritte aus, um zu überprüfen, ob die generierte adaptive Karte an die Beispieldaten gebunden ist:

    1. Wechseln Sie zum Adaptiven Karten-Designer.

    2. Wechseln Sie zu Host-App auswählen und wählen Sie dann Microsoft Teams aus der Dropdownliste aus.

    3. Wechseln Sie zum KARTENNUTZLAST-EDITOR , und fügen Sie den Vorlagencode für adaptive Karten ein.

    4. Wechseln Sie zum BEISPIELDATEN-EDITOR , und fügen Sie die zuvor gespeicherte GET-API-Antwort ein.

      Screenshots: Designer für adaptive Karten mit der Vorlage für adaptive Karten und den Beispieldaten.

    5. Vorschaumodus auswählen. Der Designer für adaptive Karten zeigt eine adaptive Karte mit den Daten an, die die Antwort an die Vorlage binden.

      Screenshot: Designer für adaptive Karten mit der Vorlage für adaptive Karten und den Beispieldaten.

Erstellen einer Vorschau der Kartenvorlage

Die Vorschauvorlage für die Karte kann ein title, subtitleund image Eigenschaften enthalten. Wenn die API-Antwort kein Bild enthält, können Sie die image-Eigenschaft entfernen.

Im Folgenden finden Sie ein Beispiel für eine Vorschau einer Kartenvorlage:

Vorschau der Kartenvorlage 
   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    }

Erstellen Sie eine if-Bedingung für das title und subtitle, wobei:

  • Wenn ein Name vorhanden ist, verwendet der Bot den Namen.
  • Wenn der Name nicht vorhanden ist, verwendet der Bot die NA.

Beispiel: "title": "Name: ${if(name, name, 'N/A')}". Speichern Sie die Vorschau der Kartenvorlage zum späteren Nachschlagen.

Vorlage für das Rendern von Antworten

Die Vorlage für das Antwortrendering muss dem Schema entsprechen, das unter gehostet wird https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json.

Führen Sie die folgenden Schritte aus, um eine Antwortrenderingvorlage zu erstellen:

  1. Erstellen Sie eine JSON-Datei, und fügen Sie der Datei den folgenden Code hinzu:

    { 
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
  "version": "1.0", 
  "jsonPath": "", 
  "responseLayout": "", 
  "responseCardTemplate": { 
 },
 "previewCardTemplate": {
     }
 }

  2. Aktualisieren Sie die Eigenschaften in der Vorlage für das Antwortrendering wie folgt:

    # Eigenschaftsname Value
    1. "$schema" "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
    2. "version" "1.0"
    version ist die Version der Renderingvorlage, die verwendet werden soll.
    3. "jsonPath" "tools"
    jsonPath ist der Pfad zu einem oder mehreren Ergebnissen in der JSON-Antwort der Antwort. Fügen Sie die jsonPath zu den relevanten Daten/Arrays aus der Produktliste in der API-Antwort hinzu. In diesem Fall sind das jsonPath Werkzeuge. Weitere Informationen zum Ermitteln des JSON-Pfads finden Sie unter Abfragen von JSON mit JSON-Pfad.
    4. "responseLayout" "list"
    responseLayout Gibt das Layout der Anlagen an. Wird für Antworten des Typs "Ergebnis" verwendet. Unterstützte Typen sind "list" und "grid". Wenn der Antworttext ein Objekt mit mehreren Elementen wie Text, Titel und Bild enthält, muss das Antwortlayout auf listfestgelegt werden. Wenn die API-Antwort nur Bilder oder Miniaturansichten enthält, muss das Antwortlayout auf gridfestgelegt werden.
    5. "responseCardTemplate" Fügen Sie den zuvor gespeicherten Vorlagencode für adaptive Karten ein.
    responseCardTemplate ist eine adaptive Kartenvorlage zum Zuordnen der JSON-Antwort zu einer adaptiven Karte.
    6. "previewCardTemplate" Fügen Sie den Code der Vorschau-Kartenvorlage ein, den Sie zuvor gespeichert haben.
    previewCardTemplateist eine Vorschau der Karte wird verwendet, um eine Vorschau der Ergebnisse im Flyout der Nachrichtenerweiterung anzuzeigen.

  3. Speichern Sie die Antwortrenderingvorlage in demselben Ordner, in dem Sie das OpenAPI-Beschreibungsdokument gespeichert haben.

Der folgende Code ist ein Beispiel für eine Antwortrenderingvorlage:

Vorlage für das Rendern von Antworten 

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

App-Manifest erstellen

Jetzt müssen Sie ein App-Manifest (zuvor als Teams-App-Manifest bezeichnet) erstellen. Das App-Manifest beschreibt, wie Ihre App in das Microsoft Teams-Produkt integriert wird.

Erstellen eines Teams-App-Manifests

Gehen Sie folgendermaßen vor, um das Manifest zu erstellen:

  1. Erstelle eine neue JSON-Datei. Ihr App-Manifest muss mit der Version 1.20 des Schemas konform sein, das unter App-Manifestschema definiert ist.

  2. Fügen Sie der JSON-Datei den folgenden Code hinzu:

    App-Manifest 
    {
 "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
 "manifestVersion": "1.20",
 "version": "1.0.3",
 "id": "<<YOUR-MICROSOFT-APP-ID>>",
 "packageName": "com.microsoft.teams.extension",
 "developer": {
     "name": "Teams App, Inc.",
     "websiteUrl": "https://www.example.com",
     "privacyUrl": "https://www.example.com/termofuse",
     "termsOfUseUrl": "https://www.example.com/privacy"
 },
 "icons": {
     "color": "color.png",
     "outline": "outline.png"
 },
 "name": {
     "short": "Search ME API",
     "full": "Search ME API full"
 },
 "description": {
     "short": "product app for testing API Message Extensions",
     "full": "product app for testing API Message Extensions"
 },
 "accentColor": "#FFFFFF",
 "composeExtensions": [
     {
         "composeExtensionType": "",
         "apiSpecificationFile": "",
         "commands": [
             {
                 "context": [
                     "compose"
                 ],
                 "type": "query",
                 "title": "API for fetching Klarna.",
                 "id": "",
                 "parameters": [
                     {
                         "name": "",
                         "title": "",
                         "description": ""
                     }
                 ],
                 "description": "",
                 "apiResponseRenderingTemplateFile": ""
             }
         ]
     }
 ],
 "permissions": [
     "identity",
     "messageTeamMembers"
 ],
 "validDomains": []
}

  3. Aktualisieren Sie die App-Manifesteigenschaften wie folgt:

    • Ersetzen Sie <<YOUR-MICROSOFT-APP-ID>> dies durch die Microsoft-App-ID des Bots.
    • Aktualisieren Sie den Wert für composeExtensionType in apiBased.
    • Aktualisieren Sie den Wert für apiSpecificationFile auf den Pfad Ihrer OpenAPI-Beschreibungsdatei.
    • Aktualisieren Sie den Wert für commands.id in searchTools.
    • Aktualisieren Sie den Wert für commands.title in Search for AI Tools.
    • Aktualisieren Sie den Wert für commands.description in Search for AI Tools.
    • Aktualisieren Sie den Wert für parameters.name in search. Wenn keine Parameter vorhanden sind, müssen die Werte Abfrageparameter sein oder properties.name wenn sie auf eine Eigenschaft im Schema des Anforderungstexts verweisen.
    • Aktualisieren Sie den apiResponseRenderingTemplateFile Pfad Ihrer Antwortrenderingvorlagendatei.
    • Aktualisieren Sie den Wert für validDomains auf den Endpunkt, der in der service URL OpenAPI-Beschreibungsdatei definiert ist.

  4. Speichern Sie das Teams-App-Manifest in demselben Ordner, in dem Sie das OpenAPI-Beschreibungsdokument und die Antwortrenderingvorlage gespeichert haben.

    • Sie benötigen ein Farbbild und ein Konturbild. Diese Bilder sollten in den Ordner aufgenommen und in Ihrem Teams-App-Manifest referenziert werden.

    • Öffnen Sie den Inhalt des Ordners mit einem Reißverschluss. Die ZIP-Datei muss die folgenden Dateien enthalten:

      • OpenAPI-Beschreibungsdokument
      • Vorlage für das Rendern von Antworten
      • App-Manifest
      • Farbsymbol
      • Symbol 'Gliederung'

Hochladen einer benutzerdefinierten App in Teams

Melden Sie sich bei der Teams-Testumgebung an, um Ihre App in Teams zu testen. Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte App in Teams hochzuladen:

  1. Wechseln Sie zu Microsoft Teams, und melden Sie sich mit den Anmeldeinformationen Ihres Testmandanten an.

  2. Wechseln Sie zu Apps>App verwalten>Laden Sie eine App hoch.

  3. Wählen Sie "Benutzerdefinierte App hochladen" aus.

  4. Wählen Sie die erstellte ZIP-Datei und dann "Öffnen" aus.

  5. Wählen Sie Hinzufügen aus.

    Screenshot der Nachrichtenerweiterungs-App mit hervorgehobener Option

  6. Wählen Sie Öffnen aus.

    Screenshot der Nachrichtenerweiterungs-App mit hervorgehobener Option

  7. Wechseln Sie zu einem Chat, wählen Sie im Bereich zum Verfassen von Nachrichten eine Auswahl + aus, und suchen Sie nach Ihrer App.

  8. Wählen Sie die App aus, und erstellen Sie eine Suchabfrage.

    Der Screenshot zeigt, dass Benutzer über das Pluszeichen im Chatmenü die im Flyoutmenü angezeigte Nachrichtenerweiterungs-App aufrufen können.

  9. Die App antwortet mit einer adaptiven Karte im Chatfenster.

  10. Wählen Sie Senden aus.

    Screenshot: Adaptive Karte mit den Suchergebnissen in der Chatnachricht in Teams.

Herzlichen Glückwunsch. Fertig! Sie haben gelernt, eine API-basierte Nachrichtenerweiterung mithilfe des OpenAPI-Beschreibungsdokuments zu erstellen.

Erstellen einer API-basierten Nachrichtenerweiterung

Zurück zum Anfang

Erstellen einer aktionsbasierten Nachrichtenerweiterung

Die aktionsbasierte Teams-Nachrichtenerweiterung ermöglicht Benutzern die Interaktion mit Webdiensten im Microsoft Teams-Client. Nachrichtenerweiterungen helfen dabei, Aktionen in einem externen System aus dem Bereich zum Verfassen von Nachrichten, dem Befehlsfeld oder direkt aus einer Nachricht heraus zu initiieren.


Lernprogramm: Erstellen einer aktionsbasierten Nachrichtenerweiterung

Hauptmerkmale der aktionsbasierten Nachrichtenerweiterung:

  • Stellt dem Benutzer ein modales Popupfenster zum Sammeln oder Anzeigen von Informationen bereit.
  • Löst die Aktionsbefehle im Bereich zum Verfassen einer Nachricht, im Befehlsfeld oder in einer Nachricht aus.

Diese schrittweise Anleitung hilft Ihnen beim Erstellen der aktionsbasierten Nachrichtenerweiterung in Teams, um Aktionen aus dem Bereich zum Verfassen von Nachrichten und Nachrichten zu initiieren. Am Ende dieses Lernprogramms können Sie die folgende Ausgabe erzielen:

Screenshot der Ausgabe der Nachrichtenerweiterung, nachdem Sie die schrittweise Anleitung erfolgreich abgeschlossen haben.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Tools installieren und Ihre Entwicklungsumgebung einrichten:

  Installieren Zur Verwendung...
  Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe – alles an einem Ort.
  Visual Studio 2022 Sie können die Enterprise-Version in Visual Studio 2022 installieren und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version.
  .NET Core SDK Angepasste Bindungen für lokales Debuggen und Bereitstellungen von Azure Functions-Apps. Wenn Sie nicht die neueste Version installiert haben, installieren Sie die portable Version.
  Dev-Tunnel Microsoft Teams-App-Features (Unterhaltungsbots, Nachrichtenerweiterungen und eingehende Webhooks) benötigen eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren lokalen Host sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Der Dev-Tunnel ist in Visual Studio 2022, Version 17.7.0 oder höher, verfügbar.
oder
Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Microsoft Teams zu verbinden. Für Apps, die nur Registerkarten enthalten, ist dies nicht erforderlich. Dieses Paket wird im Projektverzeichnis installiert (mit npm devDependencies).

Hinweis

Melden Sie sich nach dem Herunterladen von ngrok an und installieren Sie authtoken.

Einrichten der lokalen Umgebung

  1. Öffnen Sie Microsoft-Teams-Samples.

  2. Wählen Sie "Code" aus.

  3. Wähle im Dropdownmenü "Mit GitHub Desktop öffnen" aus.

    Screenshot: Option zum Klonen des Repositorys in lokal.

  4. Wählen Sie "Klonen" aus.

Registrieren der Microsoft Entra-App

Die folgenden Schritte helfen Ihnen beim Erstellen und Registrieren Ihres Bots in Azure-Portal:

  • Erstellen und registrieren Sie Ihre Azure-App.
  • Erstellen Sie einen geheimen Clientschlüssel, um die SSO-Authentifizierung des Bots zu ermöglichen.
  • Fügen Sie den Teams-Kanal hinzu, um den Bot bereitzustellen.
  • Erstellen Sie einen Tunnel zu den Endpunkten Ihres Webservers mithilfe von dev tunnel (empfohlen) oder ngrok.
  • Fügen Sie dem von Ihnen erstellten Dev-Tunnel einen Messagingendpunkt hinzu.

Hinzufügen einer App-Registrierung

  1. Wechseln Sie zum Azure-Portal.

  2. Wählen Sie "App-Registrierungen" aus.

    Screenshot: Azure Services zum Auswählen von App-Registrierungen.

  3. Wählen Sie "+ Neue Registrierung" aus.

    Screenshot: Seite

  4. Geben Sie den Namen Ihrer App ein.

  5. Wählen Sie Konten in einem beliebigen Organisationsverzeichnis (beliebiger Microsoft Entra ID-Mandant – mehrinstanzfähig) aus.

  6. Wählen Sie Registrieren aus.

    Screenshot zeigt die Option zum Registrieren des Bots im Microsoft Entra Admin Center.

    Ihre App ist in Microsoft Entra ID registriert. Die App-Übersichtsseite wird angezeigt.

    Screenshot: Übersichtsseite für die App-Registrierung.

    Hinweis

    Speichern Sie die App-ID aus Anwendungs-ID (Client) undVerzeichnis-ID (Mandant) zur weiteren Verwendung.

Erstellen eines Tunnels

Führen Sie eine der folgenden beiden Methoden aus, um einen Tunnel zu erstellen.

  1. Öffnen Sie Visual Studio.

  2. Wähle "Neues Projekt erstellen" aus.

    Screenshot: Auswahl zum Erstellen eines neuen Projekts.

  3. Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen "ASP.NET Core Web App" aus.

  4. Wählen Sie Weiter aus.

    Screenshot: Suche und Auswahl der Vorlage.

  5. Geben Sie den Projektnamen ein, und wählen Sie Weiter aus.

    Screenshot: Einzugebender Projektname.

  6. Wählen Sie Erstellen aus.

    Screenshot zeigt zusätzliche Informationen zum Projekt.

    Ein Übersichtsfenster erscheint.

    Screenshot: Übersichtsfenster.

  7. Wählen Sie in der Dropdownliste debuggen die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen....

    Screenshot: Dropdownliste zum Auswählen der Entwicklertunnel.

    Ein Pop-up-Fenster wird angezeigt.

  8. Aktualisieren Sie im Popupfenster die folgenden Details:

    1. Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
    2. Name: Geben Sie einen Namen für Ihren Tunnel ein.
    3. Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
    4. Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.

  9. Wählen Sie OK aus.

    Der Screenshot zeigt die zu aktualisierenden Details für die Erstellung des Tunnels.

    Ein Popupfenster wird angezeigt, das zeigt, dass der Dev-Tunnel erfolgreich erstellt wurde.

  10. Wählen Sie OK aus.

    Screenshot zeigt die Popupmeldung, dass der Tunnel erstellt wurde.

    Du findest den erstellten Tunnel in der Debug-Dropdownliste wie folgt:

    Der Screenshot zeigt, dass der Tunnel aktiv und ausgewählt ist.

  11. Drücken Sie F5 , um die Anwendung im Debugmodus auszuführen.

  12. Wenn ein Dialogfeld mit einer Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.

    Screenshot: Dialogfeld zum Akzeptieren der Sicherheitswarnung.

    Ein Pop-up-Fenster wird angezeigt.

  13. Wählen Sie Weiter aus.

    Screenshot: URL für den Tunnel.

    Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Dev Tunnel ist jetzt aktiv.

    Screenshot der Dev-Tunnel-Willkommensseite im Browser.

  14. Wechseln Sie zu Visual Studio und wählen Sie Ausgabe anzeigen >aus.

  15. Wählen Sie im Dropdownmenü der Ausgabekonsole die Option Dev Tunnels aus.

    Die Ausgabekonsole zeigt die Dev-Tunnel-URL an.

    Der Screenshot zeigt die URL in der Visual Studio-Ausgabekonsole.

Webauthentifizierung hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option Authentifizierung aus.

  2. Wählen Sie Plattform>hinzufügen Web aus.

    Screenshot: Auswahl der Webauthentifizierung.

  3. Geben Sie den Umleitungs-URI für Ihre App ein, indem Sie ihn an den vollqualifizierten Domänennamen anfügen auth-end . Beispielsweise https://your-devtunnel-domain/auth-end oder https://your-ngrok-domain/auth-end.

  4. Aktivieren Sie unter Implizite Gewährung und Hybridflüsse die Kontrollkästchen Zugriffstoken und ID-Token .

  5. Wählen Sie "Konfigurieren" aus.

    Der Screenshot zeigt die Option zum Hinzufügen eines Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

  6. Wählen Sie unter Web die Option "URI hinzufügen" aus.

  7. Geben Sie https://token.botframework.com/.auth/web/redirectein.

  8. Wählen Sie Speichern aus.

    Der Screenshot zeigt die Option zum Hinzufügen des Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

Einen geheimen Clientschlüssel erstellen

Hinweis

Wenn der Fehler " Geheime Clientschlüssel werden durch mandantenweite Richtlinie blockiert" auftritt. Wenden Sie sich an Ihren Mandantenadministrator, um weitere Informationen zu erhalten. können Sie stattdessen ein Zertifikat erstellen. Eine schrittweise Anleitung finden Sie unter Erstellen eines Zertifikats für die App-Registrierung.

  1. Wählen Sie im linken Bereich unter Verwalten die Option Zertifikate & Geheimnisse aus.

  2. Wählen Sie unter Geheime Clientschlüsseldie Option + Neues geheime Clientschlüssel aus.

    Screenshot: Auswahl des neuen geheimen Clientschlüssels.

    Das Fenster Einen geheimen Clientschlüssel hinzufügen wird angezeigt.

  3. Beschreibung eingeben.

  4. Wählen Sie Hinzufügen aus.

    Screenshot zeigt die hinzuzufügende Option zur Beschreibung des geheimen Clientschlüssels.

  5. Wählen Sie unter "Wert" die Option "In Zwischenablage kopieren " aus, um den Wert des geheimen Clientschlüssels zur weiteren Verwendung zu speichern.

    Screenshot: Option zum Kopieren des ID-Werts des geheimen Clientschlüssels in die Zwischenablage

API-Berechtigungen hinzufügen

  1. Wählen Sie im linken Bereich API-Berechtigungen aus.

  2. Wählen Sie "+ Berechtigung hinzufügen" aus.

    Screenshot: Option zum Auswählen von

  3. Wählen Sie Microsoft Graph aus.

  4. Wählen Sie Delegierte Berechtigungen aus.

  5. Wählen Sie User>User.Read aus.

  6. Wählen Sie Berechtigungen hinzufügen aus.

    Screenshot: Option zum Auswählen von Berechtigungen

    Hinweis

    • Wenn einer App keine Zustimmung des IT-Administrators erteilt wird, müssen Benutzer bei der ersten Verwendung einer App ihre Zustimmung erteilen.
    • Benutzer müssen den API-Berechtigungen nur zustimmen, wenn die Microsoft Entra-App in einem anderen Mandanten registriert ist.

Anwendungs-ID-URI hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie neben Anwendungs-ID-URIdie Option Hinzufügen aus.

    Der Screenshot zeigt die Option zum Hinzufügen des Anwendungs-ID-URI für Ihre App.

  3. Aktualisieren Sie den Anwendungs-ID-URI im api://botid-{AppID} Format, und wählen Sie Speichern aus.

    Screenshot: Option zum Hinzufügen der App-ID-URI und zum Speichern

Hinzufügen eines Bereichs

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie "+ Bereich hinzufügen" aus.

    Screenshot: Auswahl zum Hinzufügen eines Bereichs.

  3. Geben Sie access_as_user als Bereichsnamen ein.

  4. Wählen Sie unter Wer kann zustimmen?die Option Administratoren und Benutzer aus.

  5. Aktualisieren Sie die Werte für die übrigen Felder wie folgt:

    • Geben Sie Teams kann als Anzeigename der Admin-Zustimmungauf das Profil des Benutzers zugreifen.

    • EINGABE Ermöglicht Teams das Aufrufen der Web-APIs der App als aktueller Benutzer als Beschreibung der Admin-Einwilligung.

    • Geben Sie Teams kann als Anzeigename der Benutzereinwilligungauf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers stellen.

    • Geben Aktivieren Sie Teams, um die APIs dieser App mit denselben Rechten wie der Benutzer aufzurufenBeschreibung der Benutzerzustimmung.

  6. Stellen Sie sicher, dass State auf Aktiviert festgelegt ist.

  7. Wählen Sie Bereich hinzufügen aus.

    Die folgende Abbildung zeigt die Felder und die Werte:

    Der Screenshot zeigt die Werte, die in das Feld zum Hinzufügen eines Bereichs eingegeben wurden.

    Hinweis

    Der Bereichsname muss mit dem Anwendungs-ID-URI übereinstimmen, der /access_as_user am Ende angefügt ist.

    Screenshot: Details in

Clientanwendung hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

    Identifizieren Sie unter Autorisierte Clientanwendungen die Anwendungen, die Sie für die Webanwendung Ihrer App autorisieren möchten.

  2. Wählen Sie "+ Clientanwendung hinzufügen" aus.

    Screenshot: Option zum Auswählen der Clientanwendung.

  3. Hinzufügen von Teams Mobile oder Desktop und der Teams-Webanwendung.

    1. Für Teams Mobile oder Desktop: Geben Sie die Client-ID als 1fec8e78-bce4-4aaf-ab1b-5451cc387264ein.

      Screenshot: Mobile oder Desktop-Client-ID-Anwendung.

    2. Für Teams Web: Geben Sie die Client-ID als 5e3ce6c0-2b1f-4285-8d4b-75ee78787346ein.

      Screenshot: Webclient-ID-Anwendung.

  4. Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .

  5. Wählen Sie Anwendung hinzufügen aus.

    Screenshot: Option zum Auswählen autorisierter Bereiche und Hinzufügen einer Anwendung.

    In der folgenden Abbildung wird die Client-ID angezeigt:

    Screenshot: Ausgabe der Clientanwendungen.

Erstellen Ihres Bots

Erstellen einer Azure Bot-Ressource

Hinweis

Wenn Sie Ihren Bot bereits in Teams testen, melden Sie sich von dieser App und Teams ab. Melden Sie sich erneut an, um diese Änderung zu sehen.

  1. Zur Startseite.

  2. Wählen Sie + Ressource erstellen aus.

  3. Geben Sie im Suchfeld Azure Bot ein.

  4. Drücken Sie die EINGABETASTE.

  5. Wählen Sie Azure Bot aus.

  6. Wählen Sie Erstellen aus.

    Screenshot: Erstellung eines Azure-Bots.

  7. Geben Sie den Botnamen in Bothandle ein.

  8. Wählen Sie Ihr Abonnement aus der Dropdownliste aus.

  9. Wählen Sie in der Dropdownliste Ihre Ressourcengruppe aus.

    Screenshot: Option Ressourcengruppe und Abonnement im Azure-Portal

    Wenn Sie über keine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Gehen Sie folgendermaßen vor, um eine neue Ressourcengruppe zu erstellen:

    1. Wählen Sie Neu erstellen aus.
    2. Geben Sie den Ressourcennamen ein, und wählen Sie OK aus.
    3. Wählen Sie einen Standort aus der Dropdownliste "Neuer Standort der Ressourcengruppe " aus.

    Der Screenshot zeigt die neue Ressourcengruppenoption im Azure-Portal.

  10. Wählen Sie unter "Preise" die Option "Plan ändern" aus.

    Screenshot: Preisoption im Azure-Portal.

  11. Wählen Sie FO Free>Select.

    Screenshot: Option zum Auswählen von

  12. Wählen Sie unter Microsoft-App-IDden App-Typ "Multi-Tenant" aus.

  13. Wählen Sie unter Erstellungstypdie Option Vorhandene App-Registrierung verwenden aus.

  14. Geben Sie die App-ID ein.

    Hinweis

    Sie können nicht mehr als einen Bot mit derselben Microsoft-App-ID erstellen.

  15. Wählen Sie Überprüfen + erstellen.

    Screenshot zeigt die Erstellung eines neuen Bots.

  16. Nachdem die Überprüfung erfolgreich war, wählen Sie Erstellen aus.

    Die Bereitstellung des Bots dauert ein paar Minuten.

  17. Wählen Sie "Zu Ressource wechseln aus".

    Screenshot: Option

    Sie haben erfolgreich Ihren Azure-Bot erstellt.

    Screenshot: Ausgabe eines Bots.

Hinzufügen eines Teams-Kanals

  1. Wählen Sie im linken Bereich Kanäle aus.

  2. Wählen Sie unter "Verfügbare Kanäle"die Option "Microsoft Teams" aus.

    Screenshot: Auswahl von Teams in Kanälen.

  3. Aktivieren Sie das Kontrollkästchen, um die Nutzungsbedingungen zu akzeptieren.

  4. Wählen Sie Zustimmen aus.

    Screenshot: Annahme der Nutzungsbedingungen.

  5. Wählen Sie Anwenden aus.

    Der Screenshot zeigt die anzuwendenden Microsoft Teams als Nachrichten.

Messagingendpunkt hinzufügen

Verwenden Sie eine der folgenden Methoden, um einen Messaging-Endpunkt hinzuzufügen:

  1. Verwenden Sie die Dev-Tunnel-URL in der Ausgabekonsole als Messagingendpunkt.

    Screenshot: URL in der Visual Studio-Ausgabekonsole.

  2. Wählen Sie im linken Bereich unter Einstellungen die Option Konfiguration.

  3. Aktualisieren Sie den Messagingendpunkt im Format https://your-devtunnel-domain/api/messages.

    Screenshot: API zum Hinzufügen des Messagingendpunkts.

  4. Wählen Sie Anwenden aus.

    Sie haben erfolgreich einen Bot in Azure Bot Service eingerichtet.

    Hinweis

    Wenn der Application Insights-Instrumentierungsschlüssel einen Fehler anzeigt, aktualisieren Sie mit der App-ID.

Einrichten von App-Einstellungen und Anwendungsmanifestdateien

  1. Wechseln Sie zur appsettings.json Datei im geklonten Repository.

    Screenshot: Speicherort der AppSettings-JSON-Datei.

  2. Öffnen Sie die appsettings.json Datei, und aktualisieren Sie die folgenden Informationen:

    • Auf die Microsoft-App-ID Ihres Bots festlegen"MicrosoftAppId".
    • Auf den ID-Wert des geheimen Clientschlüssels Ihres Bots festlegen"MicrosoftAppPassword".
    • Als OAuth-Verbindungsname festlegen ConnectionName .
    • Auf MultiTenant festlegen"MicrosoftAppType".
    • Auf gewöhnlich festlegen"MicrosoftAppTenantId".

    Screenshot zeigt den AppSettings-JSON-Code.

  3. Wechseln Sie zur manifest.json Datei im geklonten Repository.

    Screenshot: Auswahl der JSON-Manifestdatei.

  4. Öffnen Sie die manifest.json Datei, und aktualisieren Sie die folgenden Änderungen:

    • Ersetzen Sie alle Vorkommen von "{TODO: MicrosoftAppId}" durch Ihre Microsoft-App-ID.
    • Auf Ihre ngrok- oder dev tunnel-Domäne festlegen "<<domain-name>>" .

    Der Screenshot zeigt die Details, die in der Manifestdatei in Visual Studio eingetragen wurden.

Erstellen und Ausführen des Diensts

Verwenden Sie zum Erstellen und Ausführen des Diensts Visual Studio oder die Befehlszeile.

  1. Öffnen Sie Visual Studio.

  2. Gehe zu Datei>Projekt/Projektmappeöffnen>.....

    Screenshot von Visual Studio mit rot hervorgehobenem Projekt/Projektmappe

  3. Wählen Sie im Ordner csharp die Datei TeamsMessagingExtensionsAction.csproj aus.

    Screenshot des geklonten Repositorys mit rot hervorgehobener TeamsMessagingExtensionsAction.csproj.

  4. Drücken Sie F5 , um das Projekt auszuführen.

  5. Wählen Sie Ja aus, wenn das folgende Dialogfeld angezeigt wird:

    Screenshot: Sicherheitswarnung mit rot hervorgehobener Option

    Eine Webseite wird mit einer Meldung angezeigt: Ihr Bot ist bereit!.

    Screenshot der Webseite, auf der Ihr Bot ist bereit! angezeigt wird.

Hinzufügen der App "Aktionsnachrichtenerweiterung" zu Teams

  1. Wechseln Sie in Ihrem geklonten Repository zu den Beispielen>msgext-action>csharp>TeamsAppManifest.

  2. Erstellen Sie eine .zip mit den folgenden Dateien, die im Ordner "Manifest" vorhanden sind:

    • manifest.json
    • icon-outline.png
    • icon-color.png

    Screenshot des geklonten Repositorys mit rot hervorgehobener ZIP-Datei der Messaging-Erweiterung.

  3. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  4. Wählen Sie Apps verwalten aus.

  5. Wählen Sie App hochladen aus.

  6. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Screenshot: Hochladen einer benutzerdefinierten App.

    Hinweis

    Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.

  7. Wählen Sie "Öffnen " aus, um die messaging.zip Datei hochzuladen, die Sie im Ordner "TeamsAppManifest" erstellt haben.

    Screenshot des geklonten Repositorys, in dem die Nachrichten-ZIP-Datei angezeigt wird.

  8. Wählen Sie Hinzufügen aus.

    Screenshot des Dialogfelds mit den App-Details zum Hinzufügen der Nachrichtenerweiterungs-App.

  9. Wählen Sie "Öffnen " aus, um die App im persönlichen Bereich zu öffnen.

    Alternativ können Sie entweder den gewünschten Bereich durchsuchen und auswählen oder einen Kanal, Chat oder eine Besprechung aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.

    Screenshot des Dialogfelds zur Bereichsauswahl, um den erforderlichen Bereich auszuwählen.

Interagieren mit der App in Teams

  1. Wählen Sie in der Befehlsliste des Verfassungsfelds den Befehl "Karte erstellen " aus.

    Screenshot des Überlauffelds zum Verfassen von Nachrichten mit rot hervorgehobener Option

  2. Geben Sie Ihre Informationen in das modale Popupfenster ein.

    Der Screenshot zeigt das Popupfenster

  3. Wählen Sie Absenden aus.

    Screenshot des Popupfensters

  4. Wählen Sie im Überlaufmenü Weitere Optionen (...) aus.

  5. Weitere Aktionen> auswählenNachricht freigeben.

    Screenshot: Nachrichtenüberlaufmenü. Die Aktionen

  6. Wenn Sie ein Bild einschließen möchten, aktivieren Sie das Kontrollkästchen Bild in Hero-Karte einschließen , und wählen Sie dann Senden aus.

    Screenshot der Aktionsnachrichtenerweiterung mit dem Kontrollkästchen

Herausforderung abschließen

Hast du dir so etwas ausgedacht?

Screenshot der Ausgabe der Nachrichtenerweiterung, nachdem Sie den Schritt-für-Schritt-Leitfaden erfolgreich abgeschlossen haben.

Sie haben das Tutorial für die ersten Schritte mit einer Aktionsnachrichtenerweiterungs-App abgeschlossen!

Aktionsbefehle

Zurück zum Anfang

Erstellen eines Bots mit SSO-Authentifizierung

Unterhaltungs-Bots in Microsoft Teams führen sich wiederholende automatisierte Aufgaben aus, die von Benutzern initiiert werden, z. B. Kundenservice. Der Benutzer muss sich mehrmals ohne Single Sign-On (SSO)-Authentifizierung anmelden. Mit SSO-Authentifizierungsmethoden müssen sich die Benutzer nicht mehrmals beim Bot anmelden.


Tutorial: Erstellen eines Bots mit SSO-Authentifizierung

Ein Bot verhält sich je nach der Konversation, an der er beteiligt ist, anders:

  • Bots in Kanal- und Gruppenchatunterhaltungen erfordern, dass die Benutzer den Bot verwenden @mention .
  • Bots in einer 1:1-Unterhaltung benötigen keine @mention. Alle vom Benutzer gesendeten Nachrichten werden an den Bot weitergeleitet.

Diese schrittweise Anleitung hilft Ihnen, einen Bot mit SSO-Authentifizierung zu erstellen. Die folgende Ausgabe wird angezeigt:

Screenshot des Bots mit SSO-Authentifizierungsausgabe, nachdem Sie die Schritt-für-Schritt-Anleitung erfolgreich abgeschlossen haben.

Voraussetzungen für die Erstellung eines Bots

Stellen Sie sicher, dass Sie die folgenden Tools installieren und Ihre Entwicklungsumgebung einrichten:

Installieren Zur Verwendung...
Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort.
Visual Studio 2022 Sie können die Enterprise-Version in Visual Studio 2022 installieren und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version.
Microsoft 365-Entwicklerkonto Zugriff auf ein Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.
Dev-Tunnel Microsoft Teams-App-Features (Unterhaltungsbots, Nachrichtenerweiterungen und eingehende Webhooks) benötigen eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren lokalen Host sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Der Dev-Tunnel ist in Visual Studio 2022, Version 17.7.0 oder höher, verfügbar.
oder
Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Microsoft Teams zu verbinden. Für Apps, die nur Registerkarten enthalten, ist dies nicht erforderlich. Dieses Paket wird im Projektverzeichnis installiert (mit npm devDependencies).

Hinweis

Melden Sie sich nach dem Herunterladen von ngrok an und installieren Sie authtoken.

Einrichten des Teams-Entwicklungsmandanten

Ein Mandant ist mit einem Raum oder Container vergleichbar, in dem Sie chatten, Dateien freigeben und Besprechungen für Ihre organization in Teams durchführen. Sie können auch die benutzerdefinierte App hochladen und testen.

Überprüfen auf eine Option zum Hochladen einer benutzerdefinierten App

Nachdem Sie die App erstellt haben, müssen Sie Ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Hinweis

Der benutzerdefinierte App-Upload ist erforderlich, um Apps in der lokalen Teams-Umgebung anzuzeigen und zu testen. Aktivieren Sie den App-Upload, um eine Vorschau Ihrer App anzuzeigen und Ihre App lokal in Teams zu testen.

Haben Sie bereits einen Mandanten und verfügen Sie über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie das wirklich tun!

So überprüfen Sie benutzerdefinierte Upload-Apps in Teams:

  1. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie "App hochladen" aus.

  4. Suchen Sie nach der Option Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Screenshot: Rot hervorgehobene Teams-Apps,

Hinweis

Wenden Sie sich an den Teams-Administrator, wenn Sie nicht die Möglichkeit haben, eine benutzerdefinierte App hochzuladen.

Erstellen eines kostenlosen Microsoft Teams-Entwicklermandanten

Wenn Sie kein Teams-Entwicklerkonto haben, können Sie es kostenlos erhalten. Treten Sie dem Microsoft 365-Entwicklerprogramm bei!

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm "E5-Abonnement einrichten" aus.

  4. Richten Sie ein Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt.

    Screenshot des Abonnements des Microsoft 365 Developer Program.

  5. Melden Sie sich mit dem soeben eingerichteten neuen Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Einrichten der lokalen Umgebung

Führen Sie die folgenden Schritte aus, um das Repository zu klonen:

  1. Öffnen Sie Microsoft-Teams-Samples.

  2. Wählen Sie "Code" aus.

  3. Wähle im Dropdownmenü "Mit GitHub Desktop öffnen" aus.

    Screenshot: Option zum Klonen des Repositorys in lokal.

  4. Wählen Sie "Klonen" aus.

Registrieren der Microsoft Entra-App

Die folgenden Schritte helfen Ihnen, Ihren Bot im Azure-Portal zu erstellen und zu registrieren:

  • Erstellen und registrieren Sie Ihre Azure-App.
  • Erstellen Sie einen geheimen Clientschlüssel, um die SSO-Authentifizierung des Bots zu ermöglichen.
  • Fügen Sie den Teams-Kanal hinzu, um den Bot bereitzustellen.
  • Erstellen Sie einen Tunnel zu den Endpunkten Ihres Webservers mithilfe von dev tunnel (empfohlen) oder ngrok.
  • Fügen Sie dem von Ihnen erstellten Dev-Tunnel einen Messagingendpunkt hinzu.

Hinzufügen einer App-Registrierung

  1. Wechseln Sie zum Azure-Portal.

  2. Wählen Sie "App-Registrierungen" aus.

    Screenshot: Azure Services zum Auswählen von App-Registrierungen.

  3. Wählen Sie "+ Neue Registrierung" aus.

    Screenshot: Seite

  4. Geben Sie den Namen Ihrer App ein.

  5. Wählen Sie nach Bedarf die Mandantenoption aus.

  6. Wählen Sie Registrieren aus.

    Screenshot zeigt die Option zum Registrieren des Bots im Microsoft Entra Admin Center.

    Ihre App ist in Microsoft Entra ID registriert. Die App-Übersichtsseite wird angezeigt.

    Screenshot: Übersichtsseite für die App-Registrierung.

    Hinweis

    Speichern Sie die App-ID aus Anwendungs-ID (Client) undVerzeichnis-ID (Mandant) zur weiteren Verwendung.

Erstellen eines Tunnels

Führen Sie eine der folgenden beiden Methoden aus, um einen Tunnel zu erstellen.

  1. Öffnen Sie Visual Studio.

  2. Wähle "Neues Projekt erstellen" aus.

    Screenshot: Auswahl zum Erstellen eines neuen Projekts.

  3. Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen "ASP.NET Core Web App" aus.

  4. Wählen Sie Weiter aus.

    Screenshot: Suche und Auswahl der Vorlage.

  5. Geben Sie den Projektnamen ein, und wählen Sie Weiter aus.

    Screenshot: Einzugebender Projektname.

  6. Wählen Sie Erstellen aus.

    Screenshot zeigt zusätzliche Informationen zum Projekt.

    Ein Übersichtsfenster erscheint.

    Screenshot: Übersichtsfenster.

  7. Wählen Sie in der Dropdownliste debuggen die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen....

    Screenshot: Dropdownliste zum Auswählen der Entwicklertunnel.

    Ein Pop-up-Fenster wird angezeigt.

  8. Aktualisieren Sie im Popupfenster die folgenden Details:

    1. Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
    2. Name: Geben Sie einen Namen für Ihren Tunnel ein.
    3. Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
    4. Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.

  9. Wählen Sie OK aus.

    Der Screenshot zeigt die zu aktualisierenden Details für die Erstellung des Tunnels.

    Ein Popupfenster wird angezeigt, das zeigt, dass der Dev-Tunnel erfolgreich erstellt wurde.

  10. Wählen Sie OK aus.

    Screenshot zeigt die Popupmeldung, dass der Tunnel erstellt wurde.

    Du findest den erstellten Tunnel in der Debug-Dropdownliste wie folgt:

    Der Screenshot zeigt, dass der Tunnel aktiv und ausgewählt ist.

  11. Drücken Sie F5 , um die Anwendung im Debugmodus auszuführen.

  12. Wenn ein Dialogfeld mit einer Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.

    Screenshot: Dialogfeld zum Akzeptieren der Sicherheitswarnung.

    Ein Pop-up-Fenster wird angezeigt.

  13. Wählen Sie Weiter aus.

    Screenshot: URL für den Tunnel.

    Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Dev Tunnel ist jetzt aktiv.

    Screenshot der Dev-Tunnel-Willkommensseite im Browser.

  14. Wechseln Sie zu Visual Studio und wählen Sie Ausgabe anzeigen >aus.

  15. Wählen Sie im Dropdownmenü der Ausgabekonsole die Option Dev Tunnels aus.

    Die Ausgabekonsole zeigt die Dev-Tunnel-URL an.

    Der Screenshot zeigt die URL in der Visual Studio-Ausgabekonsole.

Webauthentifizierung hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option Authentifizierung aus.

  2. Wählen Sie Plattform>hinzufügen Web aus.

    Screenshot: Auswahl der Webauthentifizierung.

  3. Geben Sie den Umleitungs-URI für Ihre App ein, indem Sie ihn an den vollqualifizierten Domänennamen anfügen auth-end . Beispielsweise https://your-devtunnel-domain/auth-end oder https://your-ngrok-domain/auth-end.

  4. Aktivieren Sie unter Implizite Gewährung und Hybridflüsse die Kontrollkästchen Zugriffstoken und ID-Token .

  5. Wählen Sie "Konfigurieren" aus.

    Der Screenshot zeigt die Option zum Hinzufügen eines Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

  6. Wählen Sie unter Web die Option "URI hinzufügen" aus.

  7. Geben Sie https://token.botframework.com/.auth/web/redirectein.

  8. Wählen Sie Speichern aus.

    Der Screenshot zeigt die Option zum Hinzufügen des Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

Einen geheimen Clientschlüssel erstellen

Hinweis

Wenn der Fehler " Geheime Clientschlüssel werden durch mandantenweite Richtlinie blockiert" auftritt. Wenden Sie sich an Ihren Mandantenadministrator, um weitere Informationen zu erhalten. können Sie stattdessen ein Zertifikat erstellen. Eine schrittweise Anleitung finden Sie unter Erstellen eines Zertifikats für die App-Registrierung.

  1. Wählen Sie im linken Bereich unter Verwalten die Option Zertifikate & Geheimnisse aus.

  2. Wählen Sie unter Geheime Clientschlüsseldie Option + Neues geheime Clientschlüssel aus.

    Screenshot: Auswahl des neuen geheimen Clientschlüssels.

    Das Fenster Einen geheimen Clientschlüssel hinzufügen wird angezeigt.

  3. Beschreibung eingeben.

  4. Wählen Sie Hinzufügen aus.

    Screenshot zeigt die hinzuzufügende Option zur Beschreibung des geheimen Clientschlüssels.

  5. Wählen Sie unter "Wert" die Option "In Zwischenablage kopieren " aus, um den Wert des geheimen Clientschlüssels zur weiteren Verwendung zu speichern.

    Screenshot: Option zum Kopieren des ID-Werts des geheimen Clientschlüssels in die Zwischenablage

API-Berechtigungen hinzufügen

  1. Wählen Sie im linken Bereich API-Berechtigungen aus.

  2. Wählen Sie "+ Berechtigung hinzufügen" aus.

    Screenshot: Option zum Auswählen von

  3. Wählen Sie Microsoft Graph aus.

  4. Wählen Sie Delegierte Berechtigungen aus.

  5. Wählen Sie User>User.Read aus.

  6. Wählen Sie Berechtigungen hinzufügen aus.

    Screenshot: Option zum Auswählen von Berechtigungen

    Hinweis

    • Wenn einer App keine Zustimmung des IT-Administrators erteilt wird, müssen Benutzer bei der ersten Verwendung einer App ihre Zustimmung erteilen.
    • Benutzer müssen den API-Berechtigungen nur zustimmen, wenn die Microsoft Entra-App in einem anderen Mandanten registriert ist.

Anwendungs-ID-URI hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie neben Anwendungs-ID-URIdie Option Hinzufügen aus.

    Der Screenshot zeigt die Option zum Hinzufügen des Anwendungs-ID-URI für Ihre App.

  3. Aktualisieren Sie den Anwendungs-ID-URI im api://botid-{AppID} Format, und wählen Sie Speichern aus.

    Screenshot: Option zum Hinzufügen der App-ID-URI und zum Speichern

Hinzufügen eines Bereichs

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie "+ Bereich hinzufügen" aus.

    Screenshot: Auswahl zum Hinzufügen eines Bereichs.

  3. Geben Sie access_as_user als Bereichsnamen ein.

  4. Wählen Sie unter Wer kann zustimmen?die Option Administratoren und Benutzer aus.

  5. Aktualisieren Sie die Werte für die übrigen Felder wie folgt:

    1. Geben Sie Teams kann als Anzeigename der Admin-Zustimmungauf das Profil des Benutzers zugreifen.

    2. EINGABE Ermöglicht Teams das Aufrufen der Web-APIs der App als aktueller Benutzer als Beschreibung der Admin-Einwilligung.

    3. Geben Sie Teams kann als Anzeigename der Benutzereinwilligungauf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers stellen.

    4. Geben Aktivieren Sie Teams, um die APIs dieser App mit denselben Rechten wie der Benutzer aufzurufenBeschreibung der Benutzerzustimmung.

  6. Stellen Sie sicher, dass State auf Aktiviert festgelegt ist.

  7. Wählen Sie Bereich hinzufügen aus.

    Die folgende Abbildung zeigt die Felder und die Werte:

    Der Screenshot zeigt die Werte, die in das Feld zum Hinzufügen eines Bereichs eingegeben wurden.

    Hinweis

    Der Bereichsname muss mit dem Anwendungs-ID-URI übereinstimmen, der /access_as_user am Ende angefügt ist.

    Screenshot: Details in

Clientanwendung hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

    Identifizieren Sie unter Autorisierte Clientanwendungen die Anwendungen, die Sie für die Webanwendung Ihrer App autorisieren möchten.

  2. Wählen Sie "+ Clientanwendung hinzufügen" aus.

    Screenshot: Option zum Auswählen der Clientanwendung.

  3. Hinzufügen von Teams Mobile oder Desktop und der Teams-Webanwendung.

    1. Für Teams Mobile oder Desktop: Geben Sie die Client-ID als 1fec8e78-bce4-4aaf-ab1b-5451cc387264ein.

      Screenshot: Mobile oder Desktop-Client-ID-Anwendung.

    2. Für Teams Web: Geben Sie die Client-ID als 5e3ce6c0-2b1f-4285-8d4b-75ee78787346ein.

      Screenshot: Webclient-ID-Anwendung.

  4. Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .

  5. Wählen Sie Anwendung hinzufügen aus.

    Screenshot: Option zum Auswählen autorisierter Bereiche und Hinzufügen einer Anwendung.

    In der folgenden Abbildung wird die Client-ID angezeigt:

    Screenshot: Ausgabe der Clientanwendungen.

Aktualisieren des Manifests

  1. Wählen Sie im linken Bereich Manifest aus.

  2. Legen Sie den Wert für " requestedAccessTokenVersion An" fest, 2 und wählen Sie "Speichern" aus.

    Screenshot: Manifestoption und Accesstokendetails im Azure-Portal.

Erstellen Ihres Bots

Erstellen einer Azure Bot-Ressource

Hinweis

Wenn Sie Ihren Bot bereits in Teams testen, melden Sie sich von dieser App und Teams ab. Melden Sie sich erneut an, um diese Änderung zu sehen.

  1. Zur Startseite.

  2. Wählen Sie + Ressource erstellen aus.

  3. Geben Sie im Suchfeld Azure Bot ein.

  4. Drücken Sie die EINGABETASTE.

  5. Wählen Sie Azure Bot aus.

  6. Wählen Sie Erstellen aus.

    Screenshot: Erstellung eines Azure-Bots.

  7. Geben Sie den Botnamen in Bothandle ein.

  8. Wählen Sie Ihr Abonnement aus der Dropdownliste aus.

  9. Wählen Sie in der Dropdownliste Ihre Ressourcengruppe aus.

    Screenshot: Option Ressourcengruppe und Abonnement im Azure-Portal

    Wenn Sie über keine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Gehen Sie folgendermaßen vor, um eine neue Ressourcengruppe zu erstellen:

    1. Wählen Sie Neu erstellen aus.
    2. Geben Sie den Ressourcennamen ein, und wählen Sie OK aus.
    3. Wählen Sie einen Standort aus der Dropdownliste "Neuer Standort der Ressourcengruppe " aus.

    Der Screenshot zeigt die neue Ressourcengruppenoption im Azure-Portal.

  10. Wählen Sie unter "Preise" die Option "Plan ändern" aus.

    Screenshot: Preisoption im Azure-Portal.

  11. Wählen Sie FO Free>Select.

    Screenshot: Option zum Auswählen von

  12. Wählen Sie unter Microsoft-App-IDden App-Typ "Multi-Tenant" aus.

  13. Wählen Sie unter Erstellungstypdie Option Vorhandene App-Registrierung verwenden aus.

  14. Geben Sie die App-ID ein.

    Hinweis

    Sie können nicht mehr als einen Bot mit derselben Microsoft-App-ID erstellen.

  15. Wählen Sie Überprüfen + erstellen.

    Screenshot zeigt die Erstellung eines neuen Bots.

  16. Nachdem die Überprüfung erfolgreich war, wählen Sie Erstellen aus.

    Die Bereitstellung des Bots dauert ein paar Minuten.

  17. Wählen Sie "Zu Ressource wechseln aus".

    Screenshot: Option

    Sie haben erfolgreich Ihren Azure-Bot erstellt.

    Screenshot: Ausgabe eines Bots.

Hinzufügen eines Teams-Kanals

  1. Wählen Sie im linken Bereich Kanäle aus.

  2. Wählen Sie unter "Verfügbare Kanäle"die Option "Microsoft Teams" aus.

    Screenshot: Auswahl von Teams in Kanälen.

  3. Aktivieren Sie das Kontrollkästchen, um die Nutzungsbedingungen zu akzeptieren.

  4. Wählen Sie Zustimmen aus.

    Screenshot: Annahme der Nutzungsbedingungen.

  5. Wählen Sie Anwenden aus.

    Der Screenshot zeigt die anzuwendenden Microsoft Teams als Nachrichten.

Messagingendpunkt hinzufügen

Verwenden Sie eine der folgenden Methoden, um einen Messaging-Endpunkt hinzuzufügen:

  1. Verwenden Sie die Dev-Tunnel-URL in der Ausgabekonsole als Messagingendpunkt.

    Screenshot: URL in der Visual Studio-Ausgabekonsole.

  2. Wählen Sie im linken Bereich unter Einstellungen die Option Konfiguration.

  3. Aktualisieren Sie den Messagingendpunkt im Format https://your-devtunnel-domain/api/messages.

    Screenshot: API zum Hinzufügen des Messagingendpunkts

  4. Wählen Sie Anwenden aus.

    Sie haben erfolgreich einen Bot in Azure Bot Service eingerichtet.

    Hinweis

    Wenn der Application Insights-Instrumentierungsschlüssel einen Fehler anzeigt, aktualisieren Sie mit der App-ID.

OAuth-Verbindungseinstellungen hinzufügen

  1. Wählen Sie im linken Bereich Konfiguration aus.

  2. Wählen Sie OAuth-Verbindungseinstellungen hinzufügen aus.

  3. Aktualisieren Sie unter Neue Verbindungseinstellung die folgenden Details:

    • Name: Geben Sie einen Namen für Ihre neue Verbindungseinstellung ein. Sie können den Namen in den Einstellungen Ihres Bot-Dienstcodes verwenden.
    • Dienstanbieter: Wählen Sie in der Dropdownliste Azure Active Directory v2 aus.
    • Client-ID: Aktualisieren Sie Ihre Microsoft-App-ID.
    • Geheimer Clientschlüssel: Aktualisieren Sie den Wert des geheimen Clientschlüssels.
    • Tokenaustausch-URL: Aktualisieren Sie den Anwendungs-ID-URI.
    • Mandanten-ID: Geben Sie Common ein.
    • Bereiche: Geben Sie User.Read ein.

  4. Wählen Sie Speichern aus.

    Screenshot: Die Werte, die zum Festlegen der OAuth-Verbindung hinzugefügt wurden.

Einrichten von App-Einstellungen und Anwendungsmanifestdateien

  1. Wechseln Sie zur appsettings.json Datei im geklonten Repository.

    Screenshot: Speicherort der AppSettings-JSON-Datei.

  2. Öffnen Sie die appsettings.json Datei, und aktualisieren Sie die folgenden Informationen:

    • Auf die Microsoft-App-ID Ihres Bots festlegen"MicrosoftAppId".
    • Auf den ID-Wert des geheimen Clientschlüssels Ihres Bots festlegen"MicrosoftAppPassword".
    • Als OAuth-Verbindungsname festlegen ConnectionName .
    • Auf MultiTenant festlegen"MicrosoftAppType".
    • Auf gewöhnlich festlegen"MicrosoftAppTenantId".

    Screenshot zeigt den AppSettings-JSON-Code.

  3. Wechseln Sie zur manifest.json Datei im geklonten Repository.

    Screenshot: Auswahl der JSON-Manifestdatei.

  4. Öffnen Sie die manifest.json Datei, und aktualisieren Sie die folgenden Änderungen:

    • Ersetzen Sie alle Vorkommen von "{TODO: MicrosoftAppId}" durch Ihre Microsoft-App-ID.
    • Auf Ihre ngrok- oder dev tunnel-Domäne festlegen "<<domain-name>>" .

    Der Screenshot zeigt die Details, die in der Manifestdatei in Visual Studio eingetragen wurden.

Erstellen und Ausführen des Diensts

  1. Öffnen Sie Visual Studio.

  2. Wechseln Sie zu Datei>Projekt/Projektmappe öffnen>....

    Screenshot des Dateimenüs in Visual Studio. Die Menüeinträge

  3. Gehen Sie zu bot-conversation-sso-quickstart>csharp_dotnetcore Ordner, und wählen Sie BotConversationSsoQuickstart.sln Datei aus.

    Screenshot: Project-Datei mit dem Dateipfad und der rot hervorgehobenen Datei BotSSOCSharp.csproj.

  4. Wählen Sie F5 , um das Projekt auszuführen.

  5. Wenn ein Dialogfeld mit einer Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.

    Screenshot der Sicherheitswarnung mit rot hervorgehobener Option

    Eine Webseite wird mit einer Meldung geöffnet: Ihr Bot ist bereit!.

    Hinweis

    Diese Seite wird nur angezeigt, wenn Sie zur localhost URL navigieren.

    Der Screenshot der Webseite, auf der Ihr Bot angezeigt wird, ist bereit.

    Problembehandlung

    Wenn Sie die Fehlermeldung "Paket kann nicht gefunden werden" erhalten, führen Sie die folgenden Schritte aus:

    1. Wechseln Sie zu Extras>NuGet-Paket-Manager-Paket-Manager-Einstellungen>.
    2. Wählen Sie im angezeigten Fenster Optionen die Option NuGet-Paket-Manager-Paketquellen> aus.
    3. Wählen Sie Hinzufügen aus.
    4. Geben Sie unter Name, und nuget.org in Quelle ein https://api.nuget.org/v3/index.json.
    5. Wählen Sie Aktualisieren und OK aus.
    6. Erstellen Sie Ihr Projekt neu.

Hochladen des Bots in Teams

  1. Wechseln Sie in Ihrem geklonten Repository zu "Microsoft-Teams-Samples>"-Beispiele:bot-conversation-sso-quickstart>>csharp_dotnetcore>TeamsApp>appPackage.

  2. Erstellen Sie eine .zip Datei mit den folgenden Dateien, die im Ordner appPackage vorhanden sind:

    • manifest.json
    • outline.png
    • color.png

    Screenshot des Ordners

  3. Wechseln Sie zu Microsoft Teams.

    1. Wählen Sie im Teams-Client "Apps" aus.
    2. Wählen Sie Apps verwalten aus.
    3. Wählen Sie App hochladen aus.
    4. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App.

    Screenshot der Teams-App mit dem Symbol

  4. Wähle "Öffnen" aus, um die .zip Datei hochzuladen, die du im Ordner "Manifest" erstellt hast.

    Screenshot des Manifestordners mit der Option

  5. Wählen Sie Hinzufügen aus, um den Bot zu Ihrem Chat hinzuzufügen.

    Screenshot des Unterhaltungsbots mit hervorgehobener Option

  6. Wählen Sie Öffnen aus.

    Screenshot des Dialogfelds

    Sie können mit dem Bot interagieren, indem Sie ihm eine Nachricht senden. Der Bot tauscht ein SSO-Token aus und ruft die Graph-API in Ihrem Namen auf. Sie bleiben angemeldet, es sei denn, Sie senden eine Nachricht, um sich abzumelden.

  7. Senden Sie eine Nachricht an den Bot. Der Unterhaltungsbot fragt zum ersten Mal nach Einwilligung.

  8. Für Desktop: Wählen Sie "Weiter " aus, um dem Teams-Client Berechtigungen für den Zugriff auf den Bot zu erteilen.

    Screenshot der zusätzlichen Berechtigungen mit rot hervorgehobener Option

    Hinweis

    Jetzt haben Sie SSO mit Ihrer Bot-App konfiguriert, und es ist das einzige Mal, dass Sie Ihre Zustimmung geben müssen.

  9. Für Mobilgeräte: Wählen Sie Annehmen aus.

    Hinweis

    Jetzt haben Sie SSO mit Ihrer Bot-App auf Mobilgeräten konfiguriert, und es ist das einzige Mal, dass Sie Ihre Zustimmung geben müssen.

    Screenshot der Bot-SSO-Ausgabe, nachdem Sie die Schritt-für-Schritt-Anleitung erfolgreich abgeschlossen haben.

Hast du dir so etwas ausgedacht?

Screenshot der Ausgabe, nachdem Sie die Schritt-für-Schritt-Anleitung erfolgreich abgeschlossen haben.

Sie haben das Tutorial für die ersten Schritte mit dem Erstellen eines Bots mit SSO-Authentifizierung abgeschlossen.

SSO für Ihren Bot aktivieren

Zurück zum Anfang

Erstellen Ihrer ersten Nachrichtenerweiterungs-App mit JavaScript

Beginnen Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer ersten Teams-App mit JavaScript.

In diesem Tutorial lernst du Folgendes:

  • Einrichten eines neuen Projekts mit dem Microsoft 365 Agents Toolkit (früher bekannt als Teams Toolkit).
  • Erstellen einer Nachrichtenerweiterungs-App.
  • Bereitstellen Ihrer App.
Tutorial: Erstellen Ihrer ersten Nachrichtenerweiterungs-App mit JavaScript

Diese schrittweise Anleitung hilft Ihnen, eine Teams-App für Nachrichtenerweiterungen mit dem Agents Toolkit in Visual Studio Code zu erstellen. Nach Abschluss dieses Handbuchs wird die folgende Ausgabe angezeigt:

Der Screenshot zeigt die endgültige Ausgabe der Nachrichtenerweiterungs-App in Teams.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.

  Installieren Zur Verwendung...
Erforderlich    
  Visual Studio Code JavaScript- oder TypeScript-Buildumgebungen. Verwenden Sie die neueste Version.
  Microsoft 365 Agents Toolkit Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version.
  Node.js Back-End-JavaScript-Laufzeitumgebung. Weitere Informationen finden Sie in Node.js Versionskompatibilitätstabelle.
  Microsoft Teams Arbeiten Sie mit Ihren Mitarbeitern über Apps für Chats, Besprechungen und Anrufe an einem Ort zusammen.
  Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools, die zum Debuggen und Testen unerlässlich sind.
  Microsoft 365-Entwicklerkonto Zugriff auf Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer benutzerdefinierten App.
Optional    
  Azure-Tools für Visual Studio Code und Azure CLI Azure-Tools für den Zugriff auf gespeicherte Daten oder für die Bereitstellung eines cloudbasierten Back-Ends für Ihre Teams-App in Azure.
  React Developer Tools für Chrome oder React Developer Tools für Microsoft Edge Eine Browser-DevTools-Erweiterung für die Open-Source-JavaScript-Bibliothek React.

Vorbereiten der Entwicklungsumgebung

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Microsoft 365 Agents Toolkit installieren

Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) hilft dabei, den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App und zur Veröffentlichung im Teams Store zu vereinfachen.

Sie können Agents Toolkit mit Visual Studio Code oder eine Befehlszeilenschnittstelle namens Microsoft 365 Agents Toolkit CLI (früher als TeamsFx CLI bezeichnet) verwenden.

  1. Öffne Visual Studio Code und wähle Erweiterungen aus (STRG+UMSCHALT+X oderErweiterungenanzeigen>).

  2. Geben Sie im Suchfeld "Microsoft 365 Agents Toolkit" ein.

  3. Wählen Sie Installieren aus.

    Screenshot: Installation der Agents Toolkit-Erweiterung.

    Das Symbol Microsoft 365 Agents Toolkit wird in der Aktivitätsleiste von Visual Studio Code angezeigt.

Sie können Agents Toolkit auch aus dem Visual Studio Code Marketplace installieren.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist ein Raum oder Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich laden Sie auch Ihre App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen einer App überprüfen

Nachdem Sie Ihre benutzerdefinierte App erstellt haben, müssen Sie Ihre App mit der Option "Benutzerdefinierte App hochladen " in Teams hochladen. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um zu überprüfen, ob diese Option aktiviert ist.

Mithilfe der folgenden Schritte können Sie überprüfen, ob Sie Apps in Teams hochladen können:

  1. Wählen Sie im Teams-Client das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie App hochladen aus.

  4. Suchen Sie nach der Option zum Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, können Sie benutzerdefinierte Apps hochladen.

    Der Screenshot zeigt die Option zum Hochladen einer benutzerdefinierten App in Teams.

    Hinweis

    Wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden, wenden Sie sich an Ihren Teams-Administrator.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie kein Teams-Entwicklerkonto haben, treten Sie dem Microsoft 365-Entwicklerprogramm bei.

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm E5-Abonnement einrichten aus.

  4. Richten Sie Ihr Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt:

    Screenshot: Microsoft 365 Developer Program

  5. Melden Sie sich mit dem soeben eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Kostenloses Azure-Konto erhalten

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Erstellen Sie einen Projektarbeitsbereich für Ihre Nachrichtenerweiterungs-App

Nun erstellen wir Ihre erste Nachrichtenerweiterungs-App.

Die Nachrichtenerweiterungsfunktion ermöglicht Ihnen die Interaktion mit einem Webdienst über Schaltflächen und Formulare. Verwenden Sie den Bereich zum Verfassen von Nachrichten, das Befehlsfeld oder eine Nachricht direkt im Teams-Client, um Aktionen in einem externen System zu suchen und zu initiieren. Nachrichtenerweiterungen basieren auf Bots, um einen Dialog zwischen dem Benutzer und Ihrem Code bereitzustellen.

Das Diagramm zeigt den Screenshot der verschiedenen Arten von App-Features mit hervorgehobener Nachrichtenerweiterung.

Es gibt zwei Arten von Teams-Nachrichtenerweiterungen:

  • Suchbefehle: Sie können externe Systeme durchsuchen und die Ergebnisse in eine Nachricht in Form einer Karte einfügen.
  • Aktionsbefehle: Sie können Ihren Benutzern ein modales Popupfenster zum Sammeln oder Anzeigen von Informationen bereitstellen. Anschließend können Sie ihre Interaktion verarbeiten und die Informationen zurück an Teams senden.

Lassen Sie uns eine Nachrichtenerweiterungs-App mit einem Suchbefehl erstellen. Richten Sie zunächst ein neues Teams-Projekt zum Erstellen der Nachrichtenerweiterungs-App ein.

In diesem Tutorial lernst du Folgendes:

  1. So richten Sie ein neues Nachrichtenerweiterungsprojekt mit dem Agents Toolkit ein.
  2. Über die Verzeichnisstruktur Ihres App-Projekts.

Erstellen Sie Ihren Projektarbeitsbereich für die Nachrichtenerweiterung

Wenn die Voraussetzungen gegeben sind, kann es losgehen!

Hinweis

Die gezeigte Visual Studio Code-Benutzeroberfläche kann je nach Betriebssystem, Toolkit-Version, Design und Umgebung unterschiedlich sein.

  1. Öffne Visual Studio Code.

  2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  3. Wählen Sie "Neue Agent-/App-Teams-App> erstellen" aus.

    Screenshot: Option zum Erstellen einer neuen App über die Randleiste des Agents-Toolkits.

  4. Nachrichtenerweiterung auswählen.

    Screenshot: Option zum Erstellen einer neuen Teams-App.

  5. Wählen Sie "Benutzerdefinierte Suchergebnisse" aus.

    Screenshot: Option zum Auswählen der Funktionen einer neuen App.

  6. Wählen Sie "Mit einem Bot starten" aus.

    Der Screenshot zeigt die Optionen für die Architektur der Nachrichtenerweiterung.

  7. Wählen Sie JavaScript.

    Screenshot: Option zum Auswählen der Programmiersprache.

  8. Wähle Standardordner aus, um den Projektstammordner am Standardspeicherort zu speichern.

    Screenshot: Auswahl des Standardspeicherorts.

    Sie können den Standardspeicherort auch wie folgt ändern:

    1. Wählen Sie Durchsuchen aus.

      Screenshot zeigt die Option

    2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.

    3. Wählen Sie "Ordner auswählen" aus.

      Der Screenshot zeigt, wie der Speicherort für den Projektarbeitsbereichsordner ausgewählt wird.

  9. Geben Sie einen geeigneten Namen für Ihre App ein. Drücken Sie die EINGABETASTE.

    Screenshot: Option zur Eingabe des App-Namens.

    Agents Toolkit erstellt die App in wenigen Sekunden.

    Screenshot: Neu erstellte Nachrichtenerweiterungs-App.

    Nachdem Ihre App erstellt wurde, zeigt Agents Toolkit die folgende Meldung an:

    Screenshot: Dialogfeld, in dem bestätigt wird, dass die Nachrichtenerweiterungs-App erstellt wurde.

Tour durch den Quellcode der Nachrichtenerweiterungs-App

Eine Nachrichtenerweiterung verwendet Bot Framework, um über eine Unterhaltung mit Ihrem Dienst zu interagieren. Zeigen Sie nach dem Gerüstbau die Projektverzeichnisse und Dateien unter EXPLORER an.

Screenshot: Dateien der Nachrichtenerweiterungs-App.

Ordner / Datei Inhalt
m365agents.yml Die Hauptprojektdatei beschreibt Ihre Anwendungskonfiguration und definiert die Aktionen, die in jeder Lebenszyklusphase ausgeführt werden sollen.
m365agents.local.yml Überschreibt m365agents.yml mit Aktionen, die lokale Ausführung und Debugging ermöglichen.
.vscode/ Visual Studio Code-Dateien für das lokale Debuggen.
appPackage/ Vorlagen für das Teams-Anwendungsmanifest.
infra/ Vorlagen für die Bereitstellung von Azure-Ressourcen.
index.js Anwendungseinstiegspunkt und express -handler.

Tipp

Machen Sie sich mit Bots und Nachrichtenerweiterungen außerhalb von Teams vertraut, bevor Sie Ihre App in Teams integrieren.

Erstellen und Ausführen Ihrer ersten Nachrichtenerweiterungs-App

Nachdem Sie Ihren Projektarbeitsbereich mit Agents Toolkit eingerichtet haben, ist es an der Zeit, Ihr Projekt zu erstellen. Sie müssen sich bei Ihrem Microsoft 365-Konto anmelden.

Anmelden bei Ihrem Microsoft 365-Konto

Melden Sie sich mit dem Administratorkonto an, das Sie beim Beitreten zum Microsoft 365-Entwicklerprogramm erstellt haben.

  1. Öffne Visual Studio Code.

  2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste aus.

  3. Wählen Sie "Bei Microsoft 365 anmelden" mit Ihren Anmeldeinformationen aus. Ihr Standardwebbrowser wird geöffnet, damit Sie sich anmelden können.

    Screenshot, der zeigt, wo Sie sich bei Microsoft 365 und Azure anmelden können.

  4. Schließen Sie den Browser, nachdem Sie sich mit Ihren Anmeldeinformationen angemeldet haben.

  5. Zurück zum Agents-Toolkit in Visual Studio Code.

Im Abschnitt KONTEN der Randleiste wird der Name Ihres Microsoft 365-Kontos angezeigt. Wenn der benutzerdefinierte App-Upload für Ihr Microsoft 365-Konto aktiviert ist, zeigt das Agents-Toolkit den benutzerdefinierten App-Upload aktiviert an.

Der Screenshot zeigt den bei Microsoft 365 angemeldeten Benutzer und die Meldung

Jetzt können Sie die App erstellen und lokal ausführen!

Erstellen und Ausführen Ihrer App in der lokalen Umgebung

Jetzt können Sie Ihre erste Teams-Nachrichtenerweiterungs-App lokal erstellen und debuggen.

Lokales Erstellen und Ausführen Ihrer App

  1. Drücke in Visual Studio Code die Taste F5 , um deine Anwendung im Debugmodus auszuführen.

    Hinweis

    Wenn Agents Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, dies zu überprüfen.


    Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.

    Wenn Sie F5 auswählen, führt Agents Toolkit die folgenden Funktionen aus:

    1. Überprüft die folgenden Voraussetzungen:

      1. Sie sind mit einem Microsoft 365-Konto angemeldet.
      2. Der benutzerdefinierte App-Upload ist für Ihr Microsoft 365-Konto aktiviert.
      3. Unterstützte Node.js-Version ist installiert.
      4. Von Bot-App erforderlicher Port ist verfügbar.

    2. Installiert npm-Pakete

    3. Startet den Dev-Tunnel, um einen HTTP-Tunnel zu erstellen.

    4. Registriert die App in Microsoft Entra ID und konfiguriert die App.

    5. Registriert die Bot-App im Bot Framework und konfiguriert die App.

    6. Registriert die App im Teams-Entwicklerportal und konfiguriert die App.

    7. Startet die lokal gehostete Nachrichtenerweiterungs-App.

    8. Startet Teams in einem Webbrowser und lädt die Teams-App hoch.

    Screenshot des Debugprozesses der Nachrichtenerweiterungs-App.

    Wenn Sie die App zum ersten Mal debuggen, lädt Teams die Abhängigkeiten herunter und erstellt die App. Dieser Vorgang kann 3 bis 5 Minuten in Anspruch nehmen.

  2. Teams wird in einem Browserfenster geöffnet, wenn der Build abgeschlossen ist. Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.

  3. Ein Dialogfeld wird geöffnet, in dem Sie Teams die Nachrichtenerweiterungs-App hinzufügen können. Wählen Sie Hinzufügen aus.

    Der Screenshot zeigt die Option zum Hinzufügen der benutzerdefinierten App in Teams.

    Teams lädt die Nachrichtenerweiterungs-App.

    Screenshot: In einem Teams-Botchat geöffnete Nachrichtenerweiterungs-App.

    Da Nachrichtenerweiterungs-Apps auf Bots angewiesen sind, um die Kommunikation zwischen dem Benutzer und dem Webdienst zu ermöglichen, wird Ihre App in ein Chatfeature eines Bots geladen.

    • Wenn Sie eine Bot-App erstellt haben, bevor Sie die Nachrichtenerweiterungs-App erstellt haben, lädt Teams die Nachrichtenerweiterung in die von Ihnen erstellte Bot-App. Vorherige Chatnachrichten der Bot-App sind sichtbar.
    • Wenn Sie zuerst eine Nachrichtenerweiterung erstellt haben, lädt Teams Ihre App im letzten Chat, der in Teams geöffnet ist.

Testen Ihrer App

Wenn Ihre App zum ersten Mal geladen wird, können Sie die Nachrichtenerweiterungs-App testen. Mit dieser Beispiel-App können Sie Open-Source-npm-Pakete in der Softwareregistrierung durchsuchen.

Ausführen einer Suchabfrage

  1. Geben Sie den Namen eines Open-Source-npm-Pakets in das Suchfeld der Nachrichtenerweiterung ein, z. B. cli. Die Nachrichtenerweiterung zeigt eine Liste der übereinstimmenden Elemente an.

    Screenshot: Suchzeichenfolge in der Nachrichtenerweiterungs-App.

  2. Wählen Sie eines der Elemente aus der Liste aus. Die App erstellt eine adaptive Karte mit dem Element im Bereich zum Verfassen von Nachrichten, damit Sie sie in einem Chat oder Kanal senden können.

    Der Screenshot zeigt das Suchergebnis im Bereich zum Verfassen von Nachrichten.

  3. Drücken Sie die EINGABETASTE. Die Nachrichtenerweiterungs-App sendet die adaptive Karte mit dem Element im Chat oder Kanal.

    Screenshot des im Chat gesendeten Suchergebnisses.

Öffnen der Nachrichtenerweiterungs-App

Sie haben die Suchfunktion der Nachrichtenerweiterungs-App im vorherigen Schritt getestet. Lernen Sie nun die verschiedenen Möglichkeiten zum Öffnen der Nachrichtenerweiterungs-App kennen.

App über Befehlsfeld öffnen

  1. Geben Sie gefolgt vom Namen Ihrer Nachrichtenerweiterungs-App in das Befehlsfeld ein / .

    Der Screenshot zeigt, wie die Nachrichtenerweiterungs-App aufgerufen wird.

    Die App wird im Befehlsfeld geöffnet und Sie können sie zum Ausführen einer Abfrage verwenden.

    Hinweis

    • Die Verwendung / zum Öffnen Ihrer Nachrichtenerweiterungs-App über das Befehlsfeld funktioniert nur im neuen Teams-Client.
    • Wird verwendet @ , um Ihre Nachrichtenerweiterungs-App über das Befehlsfeld im klassischen Teams-Client zu öffnen.

Öffnen Sie Ihre App über den Bereich zum Verfassen von Nachrichten.

  1. Wählen Sie die drei Punkte unten im Bereich zum Verfassen von Nachrichten aus.

  2. Wählen Sie Ihre Nachrichtenerweiterungs-App aus.

    Der Screenshot zeigt, wie Sie die Nachrichtenerweiterungs-App aus dem Bereich zum Verfassen von Nachrichten öffnen.

    Die Nachrichtenerweiterungs-App wird mit den Optionen zum Ausführen einer Suche geladen.


Öffnen Sie Ihre App aus hochgeladenen benutzerdefinierten Apps

  1. Wählen Sie Apps>aus, verwalten Sie Ihre Apps.

  2. Wählen Sie das Dropdown-Menü für Ihre App aus der Liste der Apps und dann Persönliche App aus.

    Screenshot: Apps hochgeladen in Teams.

  3. Ein Dialogfeld wird angezeigt, in dem Sie Ihre App ausprobieren sollten. Wenn Sie "Verstanden" auswählen, wird das Dialogfeld ausgeblendet. Wählen Sie "Ausprobieren" aus.

    Screenshot: Meldung, dass Sie die Nachrichtenerweiterungs-App jetzt oder später ausprobieren sollten.

  4. Eine Liste Ihrer Nachrichtenerweiterungs-Apps wird in Ihrem letzten Teams-Chat angezeigt. Wählen Sie in der Liste Ihre Nachrichtenerweiterungs-App aus.

Erfahren Sie, wie Sie Probleme beheben können, wenn Ihre App nicht lokal ausgeführt wird

Um Ihre App in Teams ausführen zu können, müssen Sie über ein Microsoft 365-Entwicklungskonto verfügen, das das Hochladen benutzerdefinierter Apps zulässt. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt Voraussetzungen.

Bereitstellen Ihrer ersten Teams-App

Lassen Sie uns Ihre erste Nachrichtenerweiterungs-App in Azure mit dem Agents Toolkit bereitstellen.

Anmelden bei Ihrem Azure-Konto

Melden Sie sich bei Ihrem Azure Konto an, um auf die Microsoft Azure-Portal zuzugreifen und neue Cloud-Ressourcen zur Unterstützung Ihrer App bereitzustellen.

  1. Öffne Visual Studio Code.

  2. Öffnen Sie den Projektordner, in dem Sie die Nachrichtenerweiterungs-App erstellt haben.

  3. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste aus.

  4. Wählen Sie Bei Azure anmelden mit Ihren Anmeldeinformationen aus. Ihr Standardwebbrowser wird geöffnet, damit Sie sich anmelden können.

    Tipp

    Wenn Sie die AZURE ACCOUNT-Erweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen.

  5. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.

Im Abschnitt KONTEN der Randleiste wird die Anzahl der nutzbaren Azure-Abonnements aufgeführt, die Ihnen zur Verfügung stehen. Stellen Sie sicher, dass mindestens ein nutzbares Azure-Abonnement verfügbar ist. Wenn nicht, melden Sie sich ab und verwenden Sie ein anderes Konto.

Bereitstellen Ihrer App in Azure

Die Bereitstellung besteht aus zwei Schritten. Zunächst werden die erforderlichen Cloud-Ressourcen erstellt (auch als Bereitstellung bezeichnet). Anschließend wird der Code Ihrer App in die erstellten Cloudressourcen kopiert. In diesem Lernprogramm wird die Nachrichtenerweiterungs-App bereitgestellt.

Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Der Bereitstellungsschritt erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, aber es wird kein Code (z. B. HTML, CSS oder JavaScript) in die Ressourcen kopiert. Im Bereitstellungsschritt wird der Code für Ihre App in die Ressourcen kopiert, die Sie während des Bereitstellungsschritts erstellt haben. Es kommt häufig vor, dass mehrere Stellen bereitgestellt werden, ohne dass neue Ressourcen bereitgestellt werden. Da der Bereitstellungsschritt einige Zeit in Anspruch nimmt, ist er vom Bereitstellungsschritt getrennt.

Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste von Visual Studio Code aus.

  1. Wählen Sie "Bereitstellen" aus.

    Screenshot: Auswahl der Bereitstellung in der Cloud unter Toolkit

  2. Wählen Sie ein Abonnement aus.

    Screenshot: Optionen für die Azure-Abonnementgruppe zur Auswahl.

  3. Wählen Sie eine Ressourcengruppe aus.

    Screenshot: Abonnement, das für die Azure-Ressourcen verwendet werden soll

    Wenn Sie keine Ressourcengruppe auswählen können, können Sie mit den folgenden Schritten eine neue Ressourcengruppe erstellen:

    1. Wählen Sie "+ Neue Ressourcengruppe" aus.

      Screenshot: Option zum Erstellen einer neuen Azure-Ressourcengruppe

    2. Wählen Sie den Standardnamen aus, oder geben Sie einen geeigneten Namen für Ihre Ressourcengruppe ein.

      Der Screenshot zeigt den Standardnamen der neuen Azure-Ressourcengruppe.

    3. Wählen Sie den Standort für Ihre Ressourcengruppe aus.

      Screenshot: Optionen für den Speicherort der neuen Ressourcengruppe Azure.

  4. Ein Dialogfeld warnt Sie, dass beim Ausführen von Ressourcen in Azure Kosten anfallen können. Wählen Sie "Bereitstellen" aus.

    Screenshot: Dialogfeld, in dem der Benutzer gewarnt wird, dass beim Bereitstellen von Azure-Ressourcen Kosten anfallen können

    Beim Bereitstellungsprozess werden Ressourcen in der Azure-Cloud erstellt. Dies kann einige Zeit dauern. Nach ein paar Minuten wird die folgende Meldung angezeigt:

    Screenshot: Benachrichtigung, mit der die in der Cloud erfolgreich bereitgestellte Nachrichtenerweiterungs-App angezeigt wird.

    Sie können sich die bereitgestellten Ressourcen anzeigen lassen. Für dieses Tutorial müssen Sie keine Ressourcen anzeigen.

    Die bereitgestellte Ressource wird unter ENVIRONMENT angezeigt.

    Der Screenshot zeigt die Ressource, die im Umgebungsabschnitt bereitgestellt wird.

  5. Wählen Sie unter LEBENSZYKLUS die Option Bereitstellen aus.

    Der Screenshot zeigt, dass die App in der Cloud bereitgestellt wird.

  6. Ein Dialogfeld wird angezeigt, in dem Sie gefragt werden, ob Sie Ressourcen in der Entwicklungsumgebung bereitstellen möchten. Wählen Sie Bereitstellen aus.

    Screenshot: Bestätigungsdialogfeld für die Bereitstellung der App in Azure.

    Wie bei der Bereitstellung nimmt die Bereitstellung einige Zeit in Anspruch. Nach ein paar Minuten wird eine Abschlussmeldung angezeigt.

Ausführen der bereitgestellten App

Wechseln Sie nach Abschluss der Bereitstellungs- und Bereitstellungsschritte zu Ausführen und Debuggen (STRG+UMSCHALT+D oder Ausführen anzeigen>) im Agents-Toolkit.

  1. Wählen Sie das Dropdownmenü AUSFÜHREN UND DEBUGGEN aus.

  2. Wählen Sie "Remote starten" in Teams (Edge) aus.

  3. Wählen Sie die Schaltfläche ▷ .

    Screenshot zeigt die Option

  4. Ein Dialogfeld wird geöffnet, um Ihre bereitgestellte App in Teams zu installieren. Wählen Sie Hinzufügen aus.

    Screenshot: Meldung zum Hinzufügen der bereitgestellten App.

    Teams öffnet die Nachrichtenerweiterungs-App im letzten Chat.

    Screenshot: In einem Chat geöffnete Nachrichtenerweiterung.

Erfahren Sie, was geschieht, wenn Sie Ihre App in Azure bereitstellen.

Vor der Bereitstellung wird die App lokal ausgeführt.

  • Das Back-End wird mithilfe der Azure Functions Core Tools ausgeführt.
  • Der HTTP-Endpunkt der Anwendung, auf den Microsoft Teams die Anwendung lädt, wird lokal ausgeführt.

Die Bereitstellung erfolgt in zwei Schritten. Sie stellen die Ressourcen in einem aktiven Azure-Abonnement bereit und laden dann den Back-End- und Front-End-Code der App in Azure hoch.

  • Wenn das Back-End konfiguriert ist, verwendet es verschiedene Azure-Dienste, einschließlich Azure App Service und Azure Storage.
  • Die Front-End-App wird in einem Azure Storage-Konto bereitgestellt, das für statisches Webhosting konfiguriert ist.

Herzlichen Glückwunsch

Sie haben das Tutorial zum Erstellen einer Nachrichtenerweiterungs-App mit JavaScript abgeschlossen!

Hast du dir so etwas ausgedacht?

Der Screenshot zeigt die endgültige Ausgabe der Nachrichtenerweiterungs-App in Teams.

Erstellen einer Nachrichtenerweiterungs-App

Zurück zum Anfang

Erstellen Ihrer ersten Registerkarten-App mit C-sharp

Beginnen Sie mit der Entwicklung von Microsoft Teams-Apps, indem Sie Ihre erste Teams-App mit Registerkartenfunktion erstellen.

In diesem Tutorial lernst du Folgendes:

  • Einrichten eines neuen Projekts.
  • Erstellen von Apps mit Registerkartenfunktion mit C# und Microsoft Visual Studio 2022.
Tutorial: Erstellen Ihrer ersten Registerkarten-App mit C#

Diese schrittweise Anleitung hilft Ihnen beim Erstellen einer Registerkarte mit dem Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet). Nach Abschluss dieses Leitfadens wird die folgende Ausgabe angezeigt:

Der Screenshot zeigt die endgültige Ausgabe der Teams-Registerkarten-App.

Voraussetzungen für die Erstellung Ihrer App

Hier ist eine Liste der Tools, die Sie zum Erstellen und Bereitstellen einer Teams-App installieren müssen.

Installieren Zur Verwendung...
Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe – alles an einem Ort.
Visual Studio 2022
 Sie können die Enterprise-Version in Visual Studio 2022 installieren und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version.
Microsoft 365 Agents Toolkit Eine Visual Studio-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version.

Agents Toolkit installieren

Das Agents Toolkit hilft Ihnen, den Entwicklungsprozess mit Tools zum Erstellen eines Projektgerüsts für Ihre App zu vereinfachen. Es erstellt die erforderliche Verzeichnisstruktur für alle ausgewählten Funktionen mit den erforderlichen Dateien, die zum Erstellen des Projekts bereit sind.

Sie können das neueste Visual Studio-Installationsprogramm herunterladen. Agents Toolkit ist als Erweiterung in Visual Studio verfügbar.

Nachdem Sie das Visual Studio-Installationsprogramm im Popupfenster "Arbeitsauslastungen" geöffnet haben:

  1. Wählen Sie ASP.NET und Webentwicklung aus.

  2. Wählen Sie unter "Installationsdetails>", "Optional", " Microsoft Teams-Entwicklungstools" aus.

  3. Wählen Sie Installieren aus.

    Screenshot zeigt die Visual Studio-Installation.

  4. Wählen Sie "Starten" aus. Das App-Fenster Visual Studio 2022 wird angezeigt.

    Screenshot: Auswahl von

  5. Wechseln Sie zu Erweiterungen>Erweiterungen verwalten.

    Screenshot: Auswahl der Erweiterungen.

    Das Fenster "Erweiterung verwalten" wird angezeigt:

    Screenshot:

  6. Wählen Sie im linken Bereich "Installiert" aus. Die Erweiterung "Microsoft 365 Agents Toolkit " ist verfügbar.

    Screenshot: Auswahl des Agenten-Toolkits.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich können Sie auch Ihre benutzerdefinierte App hochladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen benutzerdefinierter Apps überprüfen

Nachdem Sie die App erstellt haben, müssen Sie Ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Hinweis

Der benutzerdefinierte App-Upload ist erforderlich, um Apps in der lokalen Teams-Umgebung anzuzeigen und zu testen. Wenn sie nicht aktiviert ist, können Sie Ihre App nicht in der lokalen Teams-Umgebung in der Vorschau anzeigen und testen.

Haben Sie bereits einen Mandanten und Administratorzugriff? Lassen Sie uns überprüfen, ob Sie das tun!

Überprüfen Sie, ob Sie benutzerdefinierte Apps in Teams hochladen können:

  1. Öffnen Sie Microsoft Teams, und wählen Sie das Symbol "Apps " aus.

  2. Wählen Sie Apps verwalten aus.

  3. Wählen Sie App hochladen aus.

  4. Suchen Sie nach der Option "Benutzerdefinierte App hochladen ". Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Die Abbildung zeigt die Option zum Hochladen einer benutzerdefinierten App in Teams.

Hinweis

Wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden, wenden Sie sich an Ihren Teams-Administrator.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie kein Teams-Konto haben, können Sie es kostenlos erhalten. Treten Sie dem Microsoft 365-Entwicklerprogramm bei!

  1. Wechseln Sie zum Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie "Jetzt teilnehmen" aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf dem Willkommensbildschirm "E5-Abonnement einrichten" aus.

  4. Richten Sie Ihr Administratorkonto ein. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt:

    Der Screenshot zeigt beispielhaft, was nach der Anmeldung für das Microsoft 365-Entwicklerprogramm angezeigt wird.

  5. Melden Sie sich mit dem von Ihnen eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Kostenloses Azure-Konto erhalten

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto, bevor Sie beginnen.

Jetzt verfügen Sie über alle Tools, um Ihr Konto einzurichten. Als Nächstes richten wir deine Entwicklungsumgebung ein und beginnen mit dem Erstellen! Wählen Sie zuerst die App aus, die Sie erstellen möchten.

Erstellen Sie einen Projektarbeitsbereich für Ihre Registerkarten-App mit C sharp

Beginnen Sie mit der Entwicklung von Microsoft Teams-Apps, indem Sie Ihre erste App erstellen. Diese App verwendet die Registerkartenfunktion. Wenn die Voraussetzungen gegeben sind, kann es losgehen!

Die folgenden Schritte helfen Ihnen beim Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App in Visual Studio:

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie Neues Projekt aus.

    Der Screenshot zeigt die Auswahl von

  3. Geben Sie " Teams" in das Suchfeld ein.

  4. Wählen Sieals nächstesMicrosoft 365-Agents> aus.

    Screenshot: Auswahl von Teams.

  5. Geben Sie die folgenden Details ein, um Ihr neues Projekt zu konfigurieren.

  6. Geben Sie den erforderlichen Projektnamen in Projektname ein.

  7. Wählen Sie den erforderlichen Speicherort für Projektdateien und -ordner aus.

  8. Wählen Sie Erstellen aus.

    Screenshot: Erstellung des Projektnamens.

  9. Wählen Sie Registerkarte>Erstellen aus.

    Screenshot: Auswahl der Registerkarte.

Die Teams-Registerkarten-App ist in wenigen Sekunden erstellt.

Screenshot: Projekterstellung.

Erstellen und Ausführen Ihrer ersten Registerkarten-App mit C sharp

Nachdem Sie Ihren Projektarbeitsbereich mit Agents Toolkit eingerichtet haben, erstellen Sie Ihre Registerkarten-App.

Anmelden bei Ihrem Microsoft 365-Konto

Melden Sie sich mit Ihrem Microsoft 365-Konto bei Teams an. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, ist das Administratorkonto, das Sie bei der Registrierung einrichten, Ihr Microsoft 365-Konto.

  1. Klicken Sie im Projektmappen-Explorer unter Projektmappe MyTeamsApp mit der rechten Maustaste auf MyTeamsApp.

  2. Wählen Sie das Microsoft 365 Agents Toolkit>aus. Wählen Sie Microsoft 365-Konto aus.

    Screenshot: Auswahl der Teams-App-Abhängigkeiten.

  3. Wählen Sie Microsoft 365-Konto>"Weiter" aus.

    Screenshot zeigt die Auswahl des M365-Kontos.

Lokales Erstellen und Ausführen Ihrer App in Visual Studio

So erstellen und führen Sie Ihre App lokal aus:

  1. Wählen Sie Debuggen>starten oder F5 aus.

    Screenshot: Auswahl der Aktion

    Visual Studio startet den Debugprozess und öffnet den Teams-Webclient in einem Browser. Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.

  2. Wählen Sie Hinzufügen aus.

    Screenshot des Dialogfelds mit den App-Details, um die Registerkarten-App zu Teams hinzuzufügen.

  3. Wählen Sie "Öffnen " aus, um die App im persönlichen Bereich zu öffnen.

Alternativ können Sie entweder den gewünschten Bereich durchsuchen und auswählen oder einen Kanal oder Chat aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.

Screenshot: Dialogfeld zur Auswahl des Bereichs mit der Liste der freigegebenen Bereiche.

Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Teams ausgeführt!

Der Screenshot zeigt die endgültige Ausgabe der Teams-Registerkarten-App.

Erfahren Sie, wie Sie Probleme beheben können, wenn Ihre App nicht lokal ausgeführt wird.

Um Ihre App erfolgreich in Teams auszuführen, stellen Sie sicher, dass Sie den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt "Voraussetzungen ".

Sie haben erfolgreich eine Registerkarten-App mit C# erstellt. Agents Toolkit hat der Verzeichnisstruktur Ihrer App das erforderliche Gerüst hinzugefügt. Das Tutorial ist jetzt abgeschlossen.

Erstellen einer Registerkarte

Erstellen eines neuen Teams-Projekts mit dem Microsoft 365 Agents-Toolkit

Zurück zum Anfang

Hinzufügen von SSO zur Registerkarten- und Nachrichtenerweiterungs-App

Microsoft Microsoft Entra Single Sign-On (SSO) ermöglicht die nahtlose Benutzerauthentifizierung in Teams.

Wichtige Aspekte von Microsoft Entra SSO:

  • Ermöglicht dem Benutzer die automatische Anmeldung nach der ersten Anmeldung.
  • Ermöglicht dem Benutzer, sich bei anderen Geräten anzumelden, ohne Anmeldeinformationen erneut eingeben zu müssen.
  • Ruft das Token für den angemeldeten Benutzer ab.
Tutorial: Hinzufügen von SSO zur Registerkarten- und Nachrichtenerweiterungs-App

Diese schrittweise Anleitung unterstützt Sie beim Erstellen von Registerkarten und Nachrichtenerweiterungen, die die Authentifizierung mit Microsoft Entra SSO aktivieren. Die folgende Ausgabe wird angezeigt:

Screenshot der Registerkarte und der Nachrichtenerweiterung mit Ausgabe der SSO-Authentifizierung, nachdem Sie die schrittweise Anleitung erfolgreich abgeschlossen haben.

Voraussetzungen für das Hinzufügen von SSO zu Apps

Stellen Sie sicher, dass Sie die folgenden Tools installieren und Ihre Entwicklungsumgebung einrichten:

# Installieren Zur Verwendung...
1. Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort.
2. Microsoft 365-Entwicklerkonto Zugriff auf ein Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.
3. .NET Core SDK Angepasste Bindungen für lokales Debuggen und Bereitstellungen von Azure Functions-Apps. Wenn Sie nicht die neueste Version installiert haben, installieren Sie die portable Version.
4. Visual Studio 2022 Sie können die Enterprise-Version in Visual Studio 2022 installieren und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version.
5. Dev-Tunnel Microsoft Teams-App-Features (Unterhaltungsbots, Nachrichtenerweiterungen und eingehende Webhooks) benötigen eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren lokalen Host sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Der Dev-Tunnel ist in Visual Studio 2022, Version 17.7.0 oder höher, verfügbar.
oder
Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Microsoft Teams zu verbinden. Für Apps, die nur Registerkarten enthalten, ist dies nicht erforderlich. Dieses Paket wird im Projektverzeichnis installiert (mit npm devDependencies).

Hinweis

Melden Sie sich nach dem Herunterladen von ngrok an und installieren Sie authtoken.

Einrichten der lokalen Umgebung

  1. Öffnen Sie Microsoft-Teams-Samples.

  2. Wählen Sie "Code" aus.

  3. Wähle im Dropdownmenü "Mit GitHub Desktop öffnen" aus.

    Screenshot: Option zum Klonen des Repositorys in lokal.

  4. Wählen Sie "Klonen" aus.

Registrieren der Microsoft Entra-App

Die folgenden Schritte helfen Ihnen beim Erstellen und Registrieren Ihres Bots in Azure-Portal:

  • Erstellen und registrieren Sie Ihre Azure-App.
  • Erstellen Sie einen geheimen Clientschlüssel, um die SSO-Authentifizierung des Bots zu ermöglichen.
  • Fügen Sie den Teams-Kanal hinzu, um den Bot bereitzustellen.
  • Erstellen Sie einen Tunnel zu den Endpunkten Ihres Webservers mithilfe von dev tunnel (empfohlen) oder ngrok.
  • Fügen Sie dem von Ihnen erstellten Dev-Tunnel einen Messagingendpunkt hinzu.

Hinzufügen einer App-Registrierung

  1. Wechseln Sie zum Azure-Portal.

  2. Wählen Sie "App-Registrierungen" aus.

    Screenshot: Azure Services zum Auswählen von App-Registrierungen.

  3. Wählen Sie "+ Neue Registrierung" aus.

    Screenshot: Seite

  4. Geben Sie den Namen Ihrer App ein.

  5. Wählen Sie Konten in einem beliebigen Organisationsverzeichnis (beliebiger Microsoft Entra ID-Mandant – mehrinstanzfähig) aus.

  6. Wählen Sie Registrieren aus.

    Screenshot zeigt die Option zum Registrieren des Bots im Microsoft Entra Admin Center.

    Ihre App ist in Microsoft Entra ID registriert. Die App-Übersichtsseite wird angezeigt.

    Screenshot: Übersichtsseite für die App-Registrierung.

    Hinweis

    Speichern Sie die App-ID aus Anwendungs-ID (Client) undVerzeichnis-ID (Mandant) zur weiteren Verwendung.

Erstellen eines Tunnels

Wählen Sie eine der folgenden Möglichkeiten aus, um einen Tunnel zu erstellen:

  1. Öffnen Sie Visual Studio.

  2. Wähle "Neues Projekt erstellen" aus.

    Screenshot: Auswahl zum Erstellen eines neuen Projekts.

  3. Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen "ASP.NET Core Web App" aus.

  4. Wählen Sie Weiter aus.

    Screenshot: Suche und Auswahl der Vorlage.

  5. Geben Sie den Projektnamen ein, und wählen Sie Weiter aus.

    Screenshot: Einzugebender Projektname.

  6. Wählen Sie Erstellen aus.

    Screenshot zeigt zusätzliche Informationen zum Projekt.

    Ein Übersichtsfenster erscheint.

    Screenshot: Übersichtsfenster.

  7. Wählen Sie in der Dropdownliste debuggen die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen....

    Screenshot: Dropdownliste zum Auswählen der Entwicklertunnel.

    Ein Pop-up-Fenster wird angezeigt.

  8. Aktualisieren Sie im Popupfenster die folgenden Details:

    1. Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
    2. Name: Geben Sie einen Namen für Ihren Tunnel ein.
    3. Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
    4. Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.

  9. Wählen Sie OK aus.

    Der Screenshot zeigt die zu aktualisierenden Details für die Erstellung des Tunnels.

    Ein Popupfenster wird angezeigt, das zeigt, dass der Dev-Tunnel erfolgreich erstellt wurde.

  10. Wählen Sie OK aus.

    Screenshot zeigt die Popupmeldung, dass der Tunnel erstellt wurde.

    Du findest den erstellten Tunnel in der Debug-Dropdownliste wie folgt:

    Der Screenshot zeigt, dass der Tunnel aktiv und ausgewählt ist.

  11. Drücken Sie F5 , um die Anwendung im Debugmodus auszuführen.

  12. Wenn ein Dialogfeld mit einer Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.

    Screenshot: Dialogfeld zum Akzeptieren der Sicherheitswarnung.

    Ein Pop-up-Fenster wird angezeigt.

  13. Wählen Sie Weiter aus.

    Screenshot: URL für den Tunnel.

    Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Dev Tunnel ist jetzt aktiv.

    Screenshot der Dev-Tunnel-Willkommensseite im Browser.

  14. Wechseln Sie zu Visual Studio und wählen Sie dann Ausgabe anzeigen >aus.

  15. Wählen Sie im Dropdownmenü der Ausgabekonsole die Option Dev Tunnels aus.

    Die Ausgabekonsole zeigt die Dev-Tunnel-URL an.

    Der Screenshot zeigt die URL in der Visual Studio-Ausgabekonsole.

Hinzufügen einer Webauthentifizierung

  1. Wählen Sie im linken Bereich unter Verwaltendie Option Authentifizierung aus.

  2. Wählen Sie Plattform>hinzufügen Web aus.

    Screenshot: Auswahl der Webauthentifizierung.

  3. Geben Sie den Umleitungs-URI für Ihre App ein, indem Sie ihn an den vollqualifizierten Domänennamen anfügen auth-end . Beispielsweise https://your-devtunnel-domain/auth-end oder https://your-ngrok-domain/auth-end.

  4. Aktivieren Sie unter Implizite Gewährung und Hybridflüsse die Kontrollkästchen Zugriffstoken und ID-Token .

  5. Wählen Sie "Konfigurieren" aus.

    Der Screenshot zeigt die Option zum Hinzufügen eines Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

  6. Wählen Sie unter Web die Option "URI hinzufügen" aus.

  7. Geben Sie https://token.botframework.com/.auth/web/redirectein.

  8. Wählen Sie Speichern aus.

    Der Screenshot zeigt die Option zum Hinzufügen eines Umleitungs-URI und zum Auswählen von impliziten Genehmigungs- und Hybridflüssen.

Einen geheimen Clientschlüssel erstellen

Hinweis

Wenn der Fehler " Geheime Clientschlüssel werden durch mandantenweite Richtlinie blockiert" auftritt. Wenden Sie sich an Ihren Mandantenadministrator, um weitere Informationen zu erhalten. können Sie stattdessen ein Zertifikat erstellen. Eine schrittweise Anleitung finden Sie unter Erstellen eines Zertifikats für die App-Registrierung.

  1. Wählen Sie im linken Bereich unter Verwalten die Option Zertifikate & Geheimnisse aus.

  2. Wählen Sie unter Geheime Clientschlüsseldie Option + Neues geheime Clientschlüssel aus.

    Screenshot: Auswahl des neuen geheimen Clientschlüssels.

    Das Fenster Einen geheimen Clientschlüssel hinzufügen wird angezeigt.

  3. Beschreibung eingeben.

  4. Wählen Sie Hinzufügen aus.

    Screenshot zeigt die hinzuzufügende Option zur Beschreibung des geheimen Clientschlüssels.

  5. Wählen Sie unter "Wert" die Option "In Zwischenablage kopieren " aus, um den Wert des geheimen Clientschlüssels zur weiteren Verwendung zu speichern.

    Screenshot: Option zum Kopieren des ID-Werts des geheimen Clientschlüssels in die Zwischenablage

API-Berechtigungen hinzufügen

  1. Wählen Sie im linken Bereich API-Berechtigungen aus.

  2. Wählen Sie "+ Berechtigung hinzufügen" aus.

    Der Screenshot zeigt die Option zum Auswählen von Berechtigung hinzufügen.

  3. Wählen Sie Microsoft Graph aus.

  4. Wählen Sie Delegierte Berechtigungen aus.

  5. Wählen Sie User>User.Read aus.

  6. Wählen Sie Berechtigungen hinzufügen aus.

    Screenshot: Option zum Auswählen von Berechtigungen

    Hinweis

    • Wenn einer App keine Zustimmung des IT-Administrators erteilt wird, müssen Benutzer bei der ersten Verwendung einer App ihre Zustimmung erteilen.
    • Benutzer müssen den API-Berechtigungen nur zustimmen, wenn die Microsoft Entra-App in einem anderen Mandanten registriert ist.

Anwendungs-ID-URI hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie neben Anwendungs-ID-URIdie Option Hinzufügen aus.

    Screenshot: Option zum Hinzufügen des Anwendungs-ID-URI

  3. Aktualisieren Sie den Anwendungs-ID-URI im api://your-devtunnel-domain/botid-{AppID} Format oder api://your-ngrok-domain/botid-{AppID} und wählen Sie Speichern aus.

    Screenshot: Option zum Hinzufügen eines Umleitungs-URI und zum Speichern

    Die folgende Abbildung zeigt den Domänennamen:

    Screenshot: Umleitungs-URI.

Hinzufügen eines Bereichs

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

  2. Wählen Sie "+ Bereich hinzufügen" aus.

    Der Screenshot zeigt die Auswahl zum Hinzufügen eines Bereichs.

  3. Geben Sie access_as_user als Bereichsnamen ein.

  4. Wählen Sie unter Wer kann zustimmen?die Option Administratoren und Benutzer aus.

  5. Aktualisieren Sie die Werte für die übrigen Felder wie folgt:

    • Geben Sie Teams kann als Anzeigename der Admin-Zustimmungauf das Profil des Benutzers zugreifen.

    • EINGABE Ermöglicht Teams das Aufrufen der Web-APIs der App als aktueller Benutzer als Beschreibung der Admin-Einwilligung.

    • Geben Sie Teams kann als Anzeigename der Benutzereinwilligungauf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers stellen.

    • Geben Aktivieren Sie Teams, um die APIs dieser App mit denselben Rechten wie der Benutzer aufzurufenBeschreibung der Benutzerzustimmung.

  6. Stellen Sie sicher, dass State auf Aktiviert festgelegt ist.

  7. Wählen Sie Bereich hinzufügen aus.

    Die folgende Abbildung zeigt die Felder und die Werte:

    Der Screenshot zeigt die Werte, die in das Feld zum Hinzufügen eines Bereichs eingegeben wurden.

    Hinweis

    Der Bereichsname muss mit dem Anwendungs-ID-URI übereinstimmen, der /access_as_user am Ende angefügt ist.

    Der Screenshot zeigt die Details in

Clientanwendung hinzufügen

  1. Wählen Sie im linken Bereich unter Verwaltendie Option API verfügbar machen.

    Identifizieren Sie unter Autorisierte Clientanwendungen die Anwendungen, die Sie für die Webanwendung Ihrer App autorisieren möchten.

  2. Wählen Sie "+ Clientanwendung hinzufügen" aus.

    Screenshot: Option zum Auswählen der Clientanwendung.

  3. Hinzufügen von Teams Mobile oder Desktop und der Teams-Webanwendung.

    1. Für Teams Mobile oder Desktop: Geben Sie die Client-ID als 1fec8e78-bce4-4aaf-ab1b-5451cc387264ein.

      Screenshot: Mobile oder Desktop-Client-ID-Anwendung.

    2. Für Teams Web: Geben Sie die Client-ID als 5e3ce6c0-2b1f-4285-8d4b-75ee78787346ein.

      Screenshot: Webclient-ID-Anwendung.

  4. Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .

  5. Wählen Sie Anwendung hinzufügen aus.

    Screenshot: Option zum Auswählen autorisierter Bereiche und Hinzufügen einer Anwendung.

    In der folgenden Abbildung wird die Client-ID angezeigt:

    Screenshot: Ausgabe der Clientanwendungen.

Aktualisieren des Manifests

  1. Wählen Sie im linken Bereich Manifest aus.

  2. Legen Sie den Wert für " requestedAccessTokenVersion An" fest, 2 und wählen Sie "Speichern" aus.

    Screenshot: Manifestoption und Accesstokendetails im Azure-Portal.

Erstellen eines Bots

Erstellen einer Azure Bot-Ressource

Hinweis

Wenn Sie Ihren Bot bereits in Teams testen, melden Sie sich von dieser App und Teams ab. Melden Sie sich erneut an, um diese Änderung zu sehen.

  1. Zur Startseite.

  2. Wählen Sie + Ressource erstellen aus.

  3. Geben Sie im Suchfeld Azure Bot ein.

  4. Drücken Sie die EINGABETASTE.

  5. Wählen Sie Azure Bot aus.

  6. Wählen Sie Erstellen aus.

    Screenshot: Erstellung eines Azure-Bots.

  7. Geben Sie den Botnamen in Bothandle ein.

  8. Wählen Sie Ihr Abonnement aus der Dropdownliste aus.

  9. Wählen Sie in der Dropdownliste Ihre Ressourcengruppe aus.

    Screenshot: Option Ressourcengruppe und Abonnement im Azure-Portal

    Wenn Sie über keine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Gehen Sie folgendermaßen vor, um eine neue Ressourcengruppe zu erstellen:

    1. Wählen Sie Neu erstellen aus.
    2. Geben Sie den Ressourcennamen ein, und wählen Sie OK aus.
    3. Wählen Sie einen Standort aus der Dropdownliste "Neuer Standort der Ressourcengruppe " aus.

    Der Screenshot zeigt die neue Ressourcengruppenoption im Azure-Portal.

  10. Wählen Sie unter "Preise" die Option "Plan ändern" aus.

    Screenshot: Preisoption im Azure-Portal.

  11. Wählen Sie FO Free>Select.

    Screenshot: Option zum Auswählen von

  12. Wählen Sie unter Microsoft-App-IDden App-Typ "Multi-Tenant" aus.

  13. Wählen Sie unter Erstellungstypdie Option Vorhandene App-Registrierung verwenden aus.

  14. Geben Sie die App-ID ein.

    Hinweis

    Sie können nicht mehr als einen Bot mit derselben Microsoft-App-ID erstellen.

  15. Wählen Sie Überprüfen + erstellen.

    Screenshot zeigt die Erstellung eines neuen Bots.

  16. Nachdem die Überprüfung erfolgreich war, wählen Sie Erstellen aus.

    Die Bereitstellung des Bots dauert ein paar Minuten.

  17. Wählen Sie "Zu Ressource wechseln aus".

    Screenshot: Option

    Sie haben erfolgreich Ihren Azure-Bot erstellt.

    Screenshot: Ausgabe eines Bots.

Hinzufügen eines Teams-Kanals

  1. Wählen Sie im linken Bereich Kanäle aus.

  2. Wählen Sie unter "Verfügbare Kanäle"die Option "Microsoft Teams" aus.

    Screenshot: Auswahl von Teams in Kanälen.

  3. Aktivieren Sie das Kontrollkästchen, um die Nutzungsbedingungen zu akzeptieren.

  4. Wählen Sie Zustimmen aus.

    Screenshot: Annahme der Nutzungsbedingungen.

  5. Wählen Sie Anwenden aus.

    Der Screenshot zeigt die anzuwendenden Microsoft Teams als Nachrichten.

So fügen Sie einen Messaging-Endpunkt hinzu

  1. Verwenden Sie die Dev-Tunnel-URL in der Ausgabekonsole als Messagingendpunkt.

    Screenshot: URL in der Visual Studio-Ausgabekonsole.

  2. Wählen Sie im linken Bereich unter Einstellungen die Option Konfiguration.

  3. Aktualisieren Sie den Messagingendpunkt im Format https://your-devtunnel-domain/api/messages.

    Screenshot: API zum Hinzufügen des Messagingendpunkts

  4. Wählen Sie Anwenden aus.

    Sie haben erfolgreich einen Bot in Azure Bot Service eingerichtet.

    Hinweis

    Wenn der Application Insights-Instrumentierungsschlüssel einen Fehler anzeigt, aktualisieren Sie mit der App-ID.

OAuth-Verbindungseinstellungen hinzufügen

  1. Wählen Sie im linken Bereich Konfiguration aus.

  2. Wählen Sie OAuth-Verbindungseinstellungen hinzufügen aus.

  3. Aktualisieren Sie unter Neue Verbindungseinstellung die folgenden Details:

    • Name: Geben Sie einen Namen für Ihre neue Verbindungseinstellung ein. Sie können den Namen in den Einstellungen Ihres Bot-Dienstcodes verwenden.
    • Dienstanbieter: Wählen Sie in der Dropdownliste Azure Active Directory v2 aus.
    • Client-ID: Aktualisieren Sie Ihre Microsoft-App-ID.
    • Geheimer Clientschlüssel: Aktualisieren Sie den Wert des geheimen Clientschlüssels.
    • Tokenaustausch-URL: Aktualisieren Sie den Anwendungs-ID-URI.
    • Mandanten-ID: Geben Sie Common ein.
    • Bereiche: Geben Sie User.Read ein.

  4. Wählen Sie Speichern aus.

    Screenshot: Die Werte, die zum Festlegen der OAuth-Verbindung hinzugefügt wurden.

Einrichten von App-Einstellungen

  1. Wechseln Sie zur appsettings.json Datei im geklonten Repository.

    Screenshot: Project-Datei mit rot hervorgehobener appsettings.json-Datei.

  2. Öffnen Sie die appsettings.json Datei in Visual Studio.

  3. Aktualisieren Sie die folgenden Informationen:

    • Ersetzen Sie "MicrosoftAppId" sie durch die Microsoft-App-ID Ihres Bots.
    • Ersetzen "MicrosoftAppPassword" durch die Clientschlüssel Ihres Bots Wert.
    • Ersetzen Sie "SiteUrl" sie durch Ihre ngrok-URL.
    • Ersetzen Sie "ConnectionName" ihn durch den Namen der OAuth-Verbindungseinstellung.
    • Ersetzen Sie "TenantId" diese durch die Mandanten-ID des Mandanten, in dem die App verwendet wird.
    • Ersetzen Sie "ClientId" sie durch die Microsoft-App-ID Ihres Bots.
    • Ersetzen "AppSecret" durch die Clientschlüssel Ihres Bots Wert.
    • Ersetzen Sie die Form "ApplicationIdURI" von api://*******.ngrok.io/botid-{AppID}.

    Screenshot der appsettings.json-Datei mit rot hervorgehobenen eingegebenen Werten.

Manifestdatei einrichten

  1. Wechseln Sie zur manifest.json Datei im geklonten Repository.

    Screenshot des Ordners

  2. Öffnen Sie die manifest.json Datei in Visual Studio, und nehmen Sie die folgenden Änderungen vor:

    • Ersetzen Sie DOMAIN-NAME durch Ihre ngrok-URL.

    • Ersetzen Sie YOUR-MICROSOFT-APP-ID dies durch die Microsoft-App-ID Ihres Bots.

      Hinweis

      Je nach Szenario [YOUR-MICROSOFT-APP-ID] und [DOMAIN-NAME] kann mehrmals auftreten.

    • Ersetzen resource als api://*******.ngrok.io/botid-{AppID}.

      Screenshot der manifest.json-Datei mit rot hervorgehobenen eingegebenen Werten.

Erstellen und Ausführen des Diensts

Verwenden Sie zum Erstellen und Ausführen des Diensts Visual Studio oder die Befehlszeile.

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie Datei>Öffnen> *Projekt/Projektmappe...

    Screenshot des Menüs

  3. Wählen Sie im Ordner "csharp " die Datei App SSO Sample.csproj aus.

    Screenshot: Project-Datei mit rot hervorgehobener App-SSO-Datei

  4. Drücken Sie F5 , um das Projekt auszuführen.

  5. Wählen Sie Ja aus, wenn das folgende Dialogfeld angezeigt wird:

    Screenshot: Sicherheitswarnung mit rot hervorgehobener Option

Eine Webseite wird mit einer Meldung angezeigt: Ihr Bot ist bereit!

Screenshot der Webseite, auf der Ihr Bot ist bereit.

Zurück zum Anfang

  • Last updated on