Lernprogramme

Voraussetzungen

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

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen eines KI-Chatbots mithilfe des Agents Toolkits und beim Debuggen mit dem Testtool. Nach Abschluss dieses Leitfadens wird die folgende Ausgabe angezeigt, in der der Benutzer auf den KI-Chat-Bot zugreifen und diesen verwenden kann:

Erstellen eines Projektarbeitsbereichs für Ihre KI-Chat-Bot-App

Die Botfunktion einer Teams-App erstellt einen Chatbot oder einen Konversationsbot. Es kommuniziert mit einem Webdienst und erleichtert die Nutzung seiner Dienste. Der Bot kann einfache, automatisierte Aufgaben wie die Bereitstellung von Kundendienst ausführen. Sie können Wettervorhersagen erhalten, Reservierungen vornehmen oder andere Dienste, die mithilfe eines Konversationsbots angeboten werden.

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

Erstellen Ihres Arbeitsbereichs für bot-Projekte

Wenn die Voraussetzungen erfüllt sind, fangen wir an!

1. Öffnen Sie Visual Studio Code.

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

3. Wählen Sie Create a New Agent/App (Neuen Agent/neue App erstellen) aus.

   

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

   

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

   

6. Wählen Sie die Programmiersprache javaScript aus.

   

7. Wählen Sie Standardordneraus.

   

   Führen Sie die folgenden Schritte aus, um den Standardspeicherort zu ändern:

   1. Wählen Sie Durchsuchen aus.

      

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

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

      

8. Geben Sie einen geeigneten Namen für Ihre App ein, und drücken Sie dann die EINGABETASTE .

   

   Es wird ein Dialogfeld angezeigt, in dem Sie ja oder nein auswählen müssen, um den Autoren der Dateien in diesem Ordner zu vertrauen.

   

Nun haben Sie erfolgreich ihren Ki-Chat-Bot-Projektarbeitsbereich erstellt.

Machen Sie einen Überblick über den Quellcode der Bot-App

Nachdem Sie das Gerüst erstellt haben, erkunden Sie die Projektverzeichnisse und -dateien im Explorer-Abschnitt von Visual Studio Code.

Erstellen und Ausführen Ihrer KI-Chat-Bot-App

Erstellen eines OpenAI-Schlüssels und -Endpunkts für Ihren KI-Chat-Bot

1. Navigieren 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.

   

4. Geben Sie die erforderlichen Details ein, und wählen Sie Weiter aus.

   

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

   

6. Geben Sie die erforderlichen Details ein, und wählen Sie Weiter aus.

   

7. Wählen Sie Erstellen aus.

   

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

Abrufen Azure OpenAI-Schlüssel und -Endpunkts

1. Wählen Sie Zu Ressourcen wechseln aus.

   

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

   

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

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

   

   Das Azure OpenAI Studio-Fenster wird angezeigt.

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

   

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-Chat-Bot wird nur das gpt-35-turbo-Modell unterstützt.

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

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

      

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

      

Aktualisieren Azure OpenAI-Schlüssel und -Endpunkte

1. Öffnen Sie Ihr 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 heben Sie die Auskommentierung des Codes auf Azure OpenAI .

6. Geben Sie ihren Azure OpenAI-Bereitstellungsnamen in einazureDefaultDeployment.

   
   // 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.

   

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

   

Aktivitätstrigger

Es gibt zwei Arten von Aktivitätstriggern:

Vordefinierte Aktivitätstrigger

Agents Playground bietet vordefinierte Aktivitätstrigger zum Testen der Funktionen Ihres Bots.

Vordefinierte Aktivitätstrigger sind im Menü Aktivität simulieren im Agents Playground verfügbar.

Führen Sie die folgenden Schritte aus, um eine Benutzer hinzufügen-Aktivität zu simulieren:

1. Wechseln Sie in Agents Playground zu Simulieren einer Aktivität>Benutzer hinzufügen.

   

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

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

   

   Der Bot sendet die folgende Antwort:

   

Benutzerdefinierte Aktivitätstrigger

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

1. Wählen SieBenutzerdefinierte Aktivität>simulieren aus.

   

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.

   

   Der Bot sendet als Antwort einen onReactionsAdded Handler.

   

Abschließen der Herausforderung

Haben Sie eine ausgabe wie diese?

Herzlichen Glückwunsch! Sie haben erfolgreich eine KI-Chatbot-App erstellt. Nun haben Sie gelernt, ihre KI-Chat-Bot-App in Agents Playground zu debuggen.

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 dabei, Zeit zu sparen und die Effizienz zu verbessern, indem sie die Notwendigkeit reduziert, 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 finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer Apps benötigen.

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 ausführen. Dieser Bereich ist auch der Ort, an dem Sie Ihre benutzerdefinierte App hochladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Überprüfen auf benutzerdefinierte App-Uploadoption

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.

Verfügen Sie bereits über einen Mandanten und über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies 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 Verwalten Ihrer Apps 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.

   

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

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

3. Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.

4. Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.

   

5. Melden Sie sich bei Teams mit dem Administratorkonto an, das Sie gerade eingerichtet haben. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Holen Sie sich ein kostenloses Azure-Konto

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 zum Einrichten Ihres Kontos. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen! Wählen Sie zuerst die App aus, die Sie erstellen möchten.

Erstellen eines OpenAPI-Beschreibungsdokuments

OpenAPI Description (OAD) ist die Branchenstandardspezifikation, die beschreibt, wie OpenAPI-Dateien strukturiert und umrissen werden. Es handelt sich um ein sprachunabhängiges, für Menschen lesbares Format zum Beschreiben von APIs. Es ist sowohl für Menschen als auch für Computer 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).

• Das Erstellen von Arrays für die Anforderung wird nicht unterstützt, geschachtelte Objekte in einem JSON-Anforderungstext werden jedoch unterstützt.

• Falls vorhanden, muss der Anforderungstext 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.

• Die Suche mit nur einem Parameter wird unterstützt.

• Nur ein erforderlicher Parameter ohne Standardwert ist zulässig.

• Nur DIE HTTP-Methoden POST und GET werden unterstützt.

• Das OpenAPI-Beschreibungsdokument muss über einen verfügen operationId.

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

• Ein Befehl muss genau einen Parameter aufweisen.

• Stellen Sie sicher, dass im Dokument OpenAPI Description keine Remoteverweise vorhanden sind.

• Ein erforderlicher Parameter mit einem Standardwert wird als optional betrachtet.

  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 mehrere erforderliche Parameter vorhanden sind, können Sie die erforderliche Eigenschaft required: false für die anderen Parameter auf aktualisieren.

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

1. Wechseln Sie zum Swagger- oder OpenAPI-Validierungssteuerelement , und überprüfen Sie das Dokument zur OpenAPI-Beschreibung.

2. Speichern Sie das OpenAPI-Beschreibungsdokument.

3. Wechseln Sie 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 Tool zum Erstellen von Musik ein.

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

   

9. Wechseln Sie zuAntworttext der Serverantwort>.

10. Kopieren Sie unter productsdas erste Produkt aus der Liste, und speichern Sie es zur späteren Referenz.

    

Erstellen einer Antwortrenderingvorlage

Ein OpenAPI-Beschreibungsdokument erfordert eine Antwortrenderingvorlage, damit die App auf die GET- oder POST-Anforderungen reagieren kann. Die Antwortrenderingvorlage besteht aus einer Vorlage für adaptive Karten, einer Vorschauvorlage Karte und Metadaten.

Vorlage für adaptive Karten

Führen Sie die folgenden Schritte aus, um eine Vorlage für adaptive Karten zu erstellen:

1. Wechseln 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 Vorlage für adaptive Karten, die an die Beispieldaten gebunden ist. Speichern Sie die Vorlage für adaptive Karten zur späteren Referenz.

   Es folgt ein Beispiel für die Vorlage für adaptive Karten:

   Vorlage für adaptive Karten

   
   {
   "$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 zu adaptiver Karte 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 GET-API-Antwort ein, die Sie zuvor gespeichert haben.

      

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

      

Erstellen einer Vorschauvorlage Karte

Die Vorschauversion Karte Vorlage kann die titleEigenschaften , subtitleund image enthalten. Wenn die API-Antwort kein Bild enthält, können Sie die Imageeigenschaft entfernen.

Im Folgenden sehen Sie ein Beispiel für eine Vorschau Karte Vorlage:

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

Antwortrenderingvorlage

Die Antwortrenderingvorlage 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 Antwortrenderingvorlage wie folgt:

   #	Eigenschaftenname	Wert
   1.	"$schema"	"https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
   2.	"version"	"1.0" version ist die Version der zu verwendenden Renderingvorlage.
   3.	"jsonPath"	"tools" jsonPath ist der Pfad zu einem oder mehreren Ergebnissen in der JSON-Antwortantwort. Fügen Sie den jsonPath relevanten Daten/Arrays aus der Produktliste in der API-Antwort hinzu. In diesem Fall handelt es sich um jsonPath Tools. Weitere Informationen zum Bestimmen 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 vom Typ 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 Vorlagencode für adaptive Karten ein, den Sie zuvor gespeichert haben. responseCardTemplate ist eine Vorlage für adaptive Karten zum Zuordnen der JSON-Antwort zu einer adaptiven Karte.
   6.	"previewCardTemplate"	Fügen Sie die Vorschauversion Karte Vorlagencode ein, den Sie zuvor gespeichert haben. previewCardTemplateist eine Vorschau Karte Vorlage verwendet wird, um eine Vorschau der Ergebnisse im Nachrichtenerweiterungs-Flyout anzuzeigen.

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

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

{
    "$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')}"
    } 
}

Erstellen eines App-Manifests

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

Erstellen eines Teams-App-Manifests

Führen Sie die folgenden Schritte aus, um das Manifest zu erstellen:

1. Erstellen Sie eine neue JSON-Datei. Ihr App-Manifest muss der Version 1.20 des schemas entsprechen, das im 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 durch <<YOUR-MICROSOFT-APP-ID>> die Microsoft App-ID des Bots.
   • Aktualisieren Sie den Wert für in composeExtensionTypeapiBased.
   • Aktualisieren Sie den Wert für in apiSpecificationFile den Pfad Ihrer OpenAPI-Beschreibungsdatei.
   • Aktualisieren Sie den Wert für in commands.idsearchTools.
   • Aktualisieren Sie den Wert für in commands.titleSearch for AI Tools.
   • Aktualisieren Sie den Wert für in commands.descriptionSearch for AI Tools.
   • Aktualisieren Sie den Wert für in parameters.namesearch. Wenn keine Parameter vorhanden sind, müssen die Werte Abfrageparameter sein oder properties.name auf eine Eigenschaft im Anforderungstextschema verweisen.
   • Aktualisieren Sie in apiResponseRenderingTemplateFile den Pfad Ihrer Antwortrenderingvorlagendatei.
   • Aktualisieren Sie den Wert für auf validDomains den Endpunkt, der service URL in der 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 Gliederungsbild. Diese Bilder sollten im Ordner enthalten sein und in Ihrem Teams-App-Manifest referenziert werden.

   • Zippen Sie den Inhalt des Ordners. Die ZIP-Datei muss die folgenden Dateien enthalten:

     • OpenAPI-Beschreibungsdokument
     • Antwortrenderingvorlage
     • App-Manifest
     • Farbsymbol
     • Kontursymbol

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 Ihren Testmandantenanmeldeinformationen an.

2. Wechseln Sie zu Apps>App verwalten>App hochladen.

3. Wählen Sie Angepasste App hochladen aus.

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

5. Klicken Sie auf Hinzufügen.

   

6. Klicken Sie auf Öffnen.

   

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

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

   

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

10. Wählen Sie Senden aus.

    

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

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

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

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen eines Bots mit SSO-Authentifizierung. Die folgende Ausgabe wird angezeigt:

Voraussetzungen für das Erstellen eines Bots

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

Einrichten des Teams-Entwicklungsmandanten

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

Suchen nach einer benutzerdefinierten App-Uploadoption

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.

Verfügen Sie bereits über einen Mandanten und über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies 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 Verwalten Ihrer Apps 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.

   

Erstellen eines kostenlosen Teams-Entwicklermandanten

Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

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

3. Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.

4. Richten Sie ein Administratorkonto ein. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.

   

5. Melden Sie sich mit dem neuen Administratorkonto, das Sie gerade eingerichtet haben, bei Teams an. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Einrichten einer 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ählen Sie im Dropdownmenü Mit GitHub Desktop öffnen aus.

   

4. Wählen Sie Klonen aus.

Registrieren Microsoft Entra App

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

• Erstellen und registrieren Sie Ihre Azure-App.
• Erstellen Sie einen geheimen Clientschlüssel, um die SSO-Authentifizierung des Bots zu aktivieren.
• 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 Entwicklungstunnel einen Messagingendpunkt hinzu.

Hinzufügen der App-Registrierung

1. Navigieren Sie zum Azure-Portal.

2. Wählen Sie App-Registrierungen aus.

   

3. Wählen Sie + Neue Registrierung aus.

   

4. Geben Sie den Namen Ihrer App ein.

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

6. Wählen Sie Registrieren aus.

   

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

   

   Hinweis

   Speichern Sie die App-ID unter Anwendungs-ID (Client) und Verzeichnis-ID (Mandant) zur weiteren Verwendung.

Erstellen eines Tunnels

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

ngrok http --host-header=localhost 3978

Hinzufügen der Webauthentifizierung

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

2. Wählen SiePlattformweb>hinzufügenaus.

   

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

4. Aktivieren Sie unter Implizite Genehmigung und Hybridflows die Kontrollkästchen Zugriffstoken und ID-Token .

5. Wählen Sie Konfigurieren aus.

   

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

7. https://token.botframework.com/.auth/web/redirect eingeben.

8. Klicken Sie auf Speichern.

   

Erstellen eines geheimen Clientschlüssels

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

2. Wählen Sie unter Geheime Clientschlüsseldie Option + Neuer geheimer Clientschlüssel aus.

   

   Das Fenster Geheimen Clientschlüssel hinzufügen wird angezeigt.

3. Geben Sie Beschreibung ein.

4. Klicken Sie auf Hinzufügen.

   

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

   

API-Berechtigungen hinzufügen

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

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

   

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.

   

   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.

Hinzufügen des Anwendungs-ID-URI

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

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

   

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

   

Hinzufügen eines Bereichs

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

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

   

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 restlichen Felder wie folgt:

   1. Geben Sie teams can access the user's profile as Admin consent display name ein.

   2. Geben Sie Erlaubt Teams das Aufrufen der Web-APIs der App als aktuellen Benutzer als Admin Einwilligungsbeschreibung ein.

   3. Geben Sie Teams kann auf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers als Anzeigename für die Benutzereinwilligung stellen ein.

   4. Geben Sie Teams aktivieren ein, um die APIs dieser App mit den gleichen Rechten wie der Benutzer als Beschreibung der Benutzereinwilligung aufzurufen.

6. Stellen Sie sicher, Zustand auf Aktiviert festgelegt ist.

7. Klicken Sie auf Bereich hinzufügen.

   Die folgende Abbildung zeigt die Felder und die Werte:

   

   Hinweis

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

   

Hinzufügen einer Clientanwendung

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

   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.

   

3. Fügen Sie Teams mobile oder Desktop- und Teams-Webanwendung hinzu.

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

      

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

      

4. Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .

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

   

   Die folgende Abbildung zeigt die Client-ID:

   

Aktualisieren des Manifests

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

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

   

Erstellen Ihres Bots

Erstellen einer Azure Botressource

1. Wechseln Sie zu 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.

   

7. Geben Sie den Botnamen im Bothandle ein.

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

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

   

   Wenn Sie nicht über eine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Führen Sie die folgenden Schritte aus, 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 in der Dropdownliste Neuer Ressourcengruppenstandort einen Standort aus.

   

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

    

11. Wählen Sie FO Free>Select aus.

    

12. Wählen Sie unter Microsoft App-IDdie Option App-Typ als mehrinstanzenfähig aus.

13. Wählen Sie unter Erstellungstyp die 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 aus.

    

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

    Die Bereitstellung des Bots dauert einige Minuten.

17. Wählen Sie Zu Ressource wechseln aus.

    

    Sie haben Ihren Azure Bot erfolgreich erstellt.

    

Hinzufügen eines Teams-Kanals

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

2. Wählen Sie unter Verfügbare Kanäledie Option Microsoft Teams aus.

   

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

4. Wählen Sie Zustimmen aus.

   

5. Wählen Sie Anwenden aus.

   

Hinzufügen eines Messagingendpunkts

Verwenden Sie eine der folgenden Möglichkeiten, um einen Messagingendpunkt hinzuzufügen:

Hinzufügen von OAuth-Verbindungseinstellungen

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 Botdienstcodes 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 der geheimen Clientschlüssel.
   • Tokenaustausch-URL: Aktualisieren Sie den Anwendungs-ID-URI.
   • Mandanten-ID: Geben Sie Allgemein ein.
   • Bereiche: Geben Sie User.Read ein.

4. Klicken Sie auf Speichern.

   

Einrichten von App-Einstellungen und Manifestdateien

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

   

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

   • Legen Sie "MicrosoftAppId" auf die Microsoft-App-ID Ihres Bots fest.
   • Legen Sie "MicrosoftAppPassword" auf den Wert der geheimen Client-ID Ihres Bots fest.
   • Legen Sie als OAuth-Verbindungsname fest ConnectionName .
   • Legen Sie auf MultiTenant fest"MicrosoftAppType".
   • Legen Sie diese Einstellung auf common fest"MicrosoftAppTenantId".

   

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

   

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.
   • Legen Sie auf Ihre ngrok- oder Dev Tunnel-Domäne fest "<<domain-name>>" .

   

Erstellen und Ausführen des Diensts

1. Öffnen Sie Visual Studio.

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

   

3. Wählen Siecsharp_dotnetcore Ordner bot-conversation-sso-quickstart> aus, und wählen Sie BotConversationSsoQuickstart.sln Datei aus.

   

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

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

   

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

   Hinweis

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

   

   Problembehandlung

   Wenn der Fehler Paket nicht gefunden angezeigt wird, führen Sie die folgenden Schritte aus:

   1. Wechseln Sie zu Extras>NuGet-Paket-Manager-Paket-Manager-Einstellungen>.
   2. Wählen Sie im daraufhin angezeigten Fenster Optionendie Option NuGet-Paket-Manager-Paketquellen>aus.
   3. Klicken Sie auf Hinzufügen.
   4. Geben Sie unter Name die Zeichenfolge nuget.org ein, und geben Sie unter 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. Navigieren Sie in Ihrem geklonten Repository zu Microsoft-Teams-Samples>samples>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

   

3. Wechseln Sie zu Microsoft Teams.

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

   

4. Wählen Sie Öffnen aus, um die .zip Datei hochzuladen, die Sie im Manifestordner erstellt haben.

   

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

   

6. Klicken Sie auf Öffnen.

   

   Sie können mit dem Bot interagieren, indem Sie diesem 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 zum Abmelden.

7. Senden Sie eine Nachricht an den Bot. Der Konversationsbot bittet zum ersten Mal um Zustimmung.

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

   

   Hinweis

   Nun haben Sie SSO für Ihre Bot-App konfiguriert, und es ist das einzige Mal, dass Sie ihre Zustimmung erteilen müssen.

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

   Hinweis

   Jetzt haben Sie einmaliges Anmelden für Ihre Bot-App auf mobilgeräte konfiguriert, und es ist das einzige Mal, dass Sie ihre Zustimmung erteilen müssen.

   

Haben Sie sich so etwas einfallen lassen?

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

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen einer Registerkarte mit dem Microsoft 365 Agents Toolkit (früher als Teams-Toolkit bezeichnet). Die folgende Ausgabe wird angezeigt, nachdem Sie diese Anleitung abgeschlossen haben:

Voraussetzungen für das Erstellen Ihrer App

Im Folgenden finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen einer Teams-App installieren müssen.

Installieren des Agents Toolkits

Agents Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Erstellen eines Projektgerüsts für Ihre App. 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. Das Agents-Toolkit ist als Erweiterung in Visual Studio verfügbar.

Nachdem Sie das Visual Studio-Installationsprogramm im Popupfenster für Workloads geöffnet haben:

1. Wählen Sie ASP.NET und Webentwicklung aus.

2. Wählen Sie unter Installationsdetails>Optional die Option Microsoft Teams-Entwicklungstools aus.

3. Wählen Sie Installieren aus.

   

4. Wählen Sie Starten aus. Das Visual Studio 2022-App-Fenster wird angezeigt.

   

5. Wechseln Sie zu Erweiterungen>Erweiterungen verwalten.

   

   Das Fenster Erweiterung verwalten wird angezeigt:

   

6. Wählen Sie im linken Bereich Installiert aus. Die Microsoft 365 Agents Toolkit-Erweiterung ist verfügbar.

   

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 ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Überprüfen auf benutzerdefinierte App-Uploadoption

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.

Verfügen Sie bereits über einen Mandanten und Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies 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 Verwalten Ihrer Apps 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.

   

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie nicht über ein Teams-Konto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

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

3. Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.

4. Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt:

   

5. Melden Sie sich mit dem von Ihnen eingerichteten Administratorkonto bei Teams an. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Holen Sie sich ein kostenloses Azure-Konto

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 zum Einrichten Ihres Kontos. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen! Wählen Sie die App aus, die Sie zuerst erstellen möchten.

Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App mit C sharp

Starten Sie die Entwicklung von Microsoft Teams-Apps, indem Sie Ihre erste App erstellen. Diese App verwendet die Registerkartenfunktion. Wenn die Voraussetzungen erfüllt sind, fangen wir an!

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.

   

3. Geben Sie im Suchfeld Teams ein.

4. Wählen Sie Microsoft 365 Agents>Weiter aus.

   

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 zum Speichern von Projektdateien und -ordnern aus.

8. Wählen Sie Erstellen aus.

   

9. Wählen Sie Registerkarte>Erstellen aus.

   

Die Teams-Registerkarten-App wird in wenigen Sekunden erstellt.

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

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

1. Klicken Sie im Projektmappen-Explorer unter Lösung MyTeamsApp mit der rechten Maustaste auf MyTeamsApp.

2. Wählen Sie Microsoft 365 Agents Toolkit>Microsoft 365-Konto auswählen aus.

   

3. Wählen Sie Microsoft 365-Konto>Weiter aus.

   

Lokales Erstellen und Ausführen Ihrer App in Visual Studio

So erstellen Sie Ihre App und führen sie lokal aus:

1. Wählen Sie Debuggen>Debuggen starten oder F5 aus.

   

   Visual Studio startet den Debugprozess und öffnet den Teams-Webclient in einem Browser. Wenn Sie dazu aufgefordert werden, melden Sie sich mit Ihrem Microsoft 365-Konto an.

2. Klicken Sie auf Hinzufügen.

   

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

Alternativ können Sie entweder den erforderlichen Bereich suchen und auswählen oder einen Kanal oder Chat aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.

Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Teams ausgeführt!

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.

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen von Registerkarten und Nachrichtenerweiterungen, die Microsoft Entra SSO-Authentifizierung ermöglichen. Die folgende Ausgabe wird angezeigt:

Voraussetzungen für das Hinzufügen von SSO zu Apps

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

Einrichten einer lokalen Umgebung

1. Öffnen Sie Microsoft-Teams-Samples.

2. Wählen Sie Code aus.

3. Wählen Sie im Dropdownmenü Mit GitHub Desktop öffnen aus.

   

4. Wählen Sie Klonen aus.

Registrieren 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 aktivieren.
• 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 Entwicklungstunnel einen Messagingendpunkt hinzu.

Hinzufügen der App-Registrierung

1. Navigieren Sie zum Azure-Portal.

2. Wählen Sie App-Registrierungen aus.

   

3. Wählen Sie + Neue Registrierung aus.

   

4. Geben Sie den Namen Ihrer App ein.

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

6. Wählen Sie Registrieren aus.

   

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

   

   Hinweis

   Speichern Sie die App-ID unter Anwendungs-ID (Client) und Verzeichnis-ID (Mandant) zur weiteren Verwendung.

Erstellen eines Tunnels

Wählen Sie eine der folgenden Möglichkeiten zum Erstellen eines Tunnels aus:

ngrok http --host-header=localhost xxxx

Hinzufügen einer Webauthentifizierung

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

2. Wählen SiePlattformweb>hinzufügenaus.

   

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

4. Aktivieren Sie unter Implizite Genehmigung und Hybridflows die Kontrollkästchen Zugriffstoken und ID-Token .

5. Wählen Sie Konfigurieren aus.

   

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

7. https://token.botframework.com/.auth/web/redirect eingeben.

8. Klicken Sie auf Speichern.

   

Erstellen eines geheimen Clientschlüssels

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

2. Wählen Sie unter Geheime Clientschlüsseldie Option + Neuer geheimer Clientschlüssel aus.

   

   Das Fenster Geheimen Clientschlüssel hinzufügen wird angezeigt.

3. Geben Sie Beschreibung ein.

4. Klicken Sie auf Hinzufügen.

   

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

   

API-Berechtigungen hinzufügen

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

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

   

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.

   

   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.

Hinzufügen des Anwendungs-ID-URI

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

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

   

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.

   

   Die folgende Abbildung zeigt den Domänennamen:

   

Hinzufügen eines Bereichs

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

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

   

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 restlichen Felder wie folgt:

   • Geben Sie teams can access the user's profile as Admin consent display name ein.

   • Geben Sie Erlaubt Teams das Aufrufen der Web-APIs der App als aktuellen Benutzer als Admin Einwilligungsbeschreibung ein.

   • Geben Sie Teams kann auf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers als Anzeigename für die Benutzereinwilligung stellen ein.

   • Geben Sie Teams aktivieren ein, um die APIs dieser App mit den gleichen Rechten wie der Benutzer als Beschreibung der Benutzereinwilligung aufzurufen.

6. Stellen Sie sicher, Zustand auf Aktiviert festgelegt ist.

7. Klicken Sie auf Bereich hinzufügen.

   Die folgende Abbildung zeigt die Felder und die Werte:

   

   Hinweis

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

   

Hinzufügen einer Clientanwendung

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

   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.

   

3. Fügen Sie Teams mobile oder Desktop- und Teams-Webanwendung hinzu.

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

      

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

      

4. Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .

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

   

   Die folgende Abbildung zeigt die Client-ID:

   

Aktualisieren des Manifests

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

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

   

Erstellen eines Bots

Erstellen einer Azure Botressource

1. Wechseln Sie zu 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.

   

7. Geben Sie den Botnamen im Bothandle ein.

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

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

   

   Wenn Sie nicht über eine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Führen Sie die folgenden Schritte aus, 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 in der Dropdownliste Neuer Ressourcengruppenstandort einen Standort aus.

   

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

    

11. Wählen Sie FO Free>Select aus.

    

12. Wählen Sie unter Microsoft App-IDdie Option App-Typ als mehrinstanzenfähig aus.

13. Wählen Sie unter Erstellungstyp die 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 aus.

    

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

    Die Bereitstellung des Bots dauert einige Minuten.

17. Wählen Sie Zu Ressource wechseln aus.

    

    Sie haben Ihren Azure Bot erfolgreich erstellt.

    

Hinzufügen eines Teams-Kanals

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

2. Wählen Sie unter Verfügbare Kanäledie Option Microsoft Teams aus.

   

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

4. Wählen Sie Zustimmen aus.

   

5. Wählen Sie Anwenden aus.

   

So fügen Sie einen Messagingendpunkt hinzu

Hinzufügen von OAuth-Verbindungseinstellungen

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 Botdienstcodes 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 der geheimen Clientschlüssel.
   • Tokenaustausch-URL: Aktualisieren Sie den Anwendungs-ID-URI.
   • Mandanten-ID: Geben Sie Allgemein ein.
   • Bereiche: Geben Sie User.Read ein.

4. Klicken Sie auf Speichern.

   

Einrichten von App-Einstellungen

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

   

2. Öffnen Sie die appsettings.json-Datei in Visual Studio.

3. Aktualisieren Sie die folgenden Informationen:

   • Ersetzen Sie durch "MicrosoftAppId" die Microsoft App-ID Ihres Bots.
   • Ersetzen Sie "MicrosoftAppPassword" durch den Wert geheimer Clientschlüssel Ihres Bots.
   • Ersetzen Sie durch "SiteUrl" Ihre ngrok-URL.
   • Ersetzen Sie durch "ConnectionName" den Namen der OAuth-Verbindungseinstellung.
   • Ersetzen Sie durch "TenantId" die Mandanten-ID des Mandanten, in dem die App verwendet wird.
   • Ersetzen Sie durch "ClientId" die Microsoft App-ID Ihres Bots.
   • Ersetzen Sie "AppSecret" durch den Wert geheimer Clientschlüssel Ihres Bots.
   • Ersetzen Sie "ApplicationIdURI" in Form von api://*******.ngrok.io/botid-{AppID}.

   

Einrichten der Manifestdatei

1. Wechseln Sie zur manifest.json-Datei im geklonten Repository.

   

2. Öffnen Sie die manifest.json-Datei in Visual Studio, und nehmen Sie die folgenden Änderungen vor:

   • Ersetzen Sie durch DOMAIN-NAME Ihre ngrok-URL.

   • Ersetzen Sie durch YOUR-MICROSOFT-APP-ID die Microsoft App-ID Ihres Bots.

     Hinweis

     Je nach Szenario [YOUR-MICROSOFT-APP-ID] können und [DOMAIN-NAME] mehrere Male auftreten.

   • Ersetzen Sie als resourceapi://*******.ngrok.io/botid-{AppID}.
     

     

Erstellen und Ausführen des Diensts

Verwenden Sie Visual Studio oder die Befehlszeile, um den Dienst zu erstellen und auszuführen.

dotnet run