Erstellen von Connectors für Microsoft 365-Gruppen

Mit Microsoft Teams-Apps können Sie Ihren vorhandenen Connector für Microsoft 365-Gruppen hinzufügen oder einen neuen in Teams erstellen. Weitere Informationen finden Sie unter Erstellen eines eigenen Connectors.

Im folgenden Video erfahren Sie, wie Sie Connectors für Microsoft 365-Gruppen erstellen:

Hinzufügen eines Connectors zur Teams-App

Sie können ein Paket erstellen und den Connector als Teil Ihrer AppSource-Übermittlung veröffentlichen. Sie können Ihren registrierten Connector als Teil Ihres Teams-App-Pakets veröffentlichen. Informationen zu Einstiegspunkten für die Teams-App finden Sie unter Funktionen. Sie können das Paket auch direkt für die Benutzer zum Hochladen in Teams bereitstellen.

Um Ihren Connector zu veröffentlichen, registrieren Sie ihn im Connectors Developer Dashboard.

Damit ein Connector nur in Teams funktioniert, befolgen Sie die Anweisungen zum Übermitteln des Connectors im Artikel Veröffentlichen Ihrer App im Microsoft Teams Store . Andernfalls funktioniert ein registrierter Connector in allen Microsoft 365-Produkten, die Anwendungen unterstützen, einschließlich Outlook und Teams.

Integrieren der Konfigurationserfahrung

Benutzer können die gesamte Connectorkonfiguration abschließen, ohne den Teams-Client verlassen zu müssen. Um die Erfahrung zu erhalten, kann Teams Ihre Konfigurationsseite direkt in einen iFrame einbetten. Die Abfolge der Vorgänge lautet wie folgt:

1. Der Benutzer wählt den Connector aus, um den Konfigurationsvorgang zu starten.

2. Der Benutzer interagiert mit der Weboberfläche, um die Konfiguration abzuschließen.

3. Der Benutzer wählt Speichern aus, wodurch ein Rückruf im Code ausgelöst wird.

   Hinweis

   • Der Code kann das Speicherereignis verarbeiten, indem er die Webhookeinstellungen abruft. Ihr Code speichert den Webhook, um später Ereignisse zu posten.
   • Die Konfigurationserfahrung wird inline in Teams geladen.

Sie können Ihre vorhandene Webkonfigurationserfahrung wiederverwenden oder eine separate Version erstellen, die speziell in Teams gehostet wird. Ihr Code muss die TeamsJS-Bibliothek enthalten. Dadurch erhält Ihr Code Zugriff auf die APIs, um allgemeine Vorgänge auszuführen, z. B. das Abrufen des Benutzer-, Kanal- oder Teamkontexts und das Initiieren von Authentifizierungsflows.

So integrieren Sie die Konfigurationserfahrung:

1. Initialisieren Sie TeamsJS, indem Sie aufrufen app.initialize().

2. Rufen Sie pages.config.setValidityState(true) auf, um Speichern zu aktivieren.

   Hinweis

   Sie müssen microsoftTeams.pages.config.setValidityState(true) als Antwort auf die Benutzerauswahl oder Feldaktualisierung aufrufen.

3. Registrieren des microsoftTeams.pages.config.registerOnSaveHandler() Ereignishandlers, der aufgerufen wird, wenn der Benutzer Speichern auswählt.

4. Rufen Sie microsoftTeams.pages.config.setConfig() auf, um die Connectoreinstellungen zu speichern. Die gespeicherten Einstellungen werden auch im Konfigurationsdialogfeld angezeigt, wenn der Benutzer versucht, eine vorhandene Konfiguration für Ihren Connector zu aktualisieren.

5. Rufen Sie microsoftTeams.pages.getConfig() auf, um Webhookeigenschaften abzurufen, einschließlich der URL.

   Hinweis

   Im Falle einer Neukonfiguration müssen Sie microsoftTeams.pages.getConfig() aufrufen, wenn Ihre Seite zum ersten Mal geladen wird.

6. Registrieren Sie den microsoftTeams.pages.config.registerOnRemoveHandler()-Ereignishandler, der aufgerufen wird, wenn der Benutzer den Connector entfernt.

Dieses Ereignis gibt Ihrem Dienst die Möglichkeit, Bereinigungsaktionen durchzuführen.

Der folgende Code stellt ein Beispiel-HTML bereit, um eine Connector-Konfigurationsseite ohne Kundendienst und Support zu erstellen:

<h2>Send notifications when tasks are:</h2>
<div class="col-md-8">
    <section id="configSection">
        <form id="configForm">
            <input type="radio" name="notificationType" value="Create" onclick="onClick()"> Created
            <br>
            <br>
            <input type="radio" name="notificationType" value="Update" onclick="onClick()"> Updated
        </form>
    </section>
</div>

<script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" integrity="sha384-Q2Z9S56exI6Oz/ThvYaV0SUn8j4HwS8BveGPmuwLXe4CvCUEGlL80qSzHMnvGqee" crossorigin="anonymous"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>

<script>
        function onClick() {
            pages.config.setValidityState(true);
        }

        await microsoftTeams.app.initialize();
        pages.config.registerOnSaveHandler(function (saveEvent) {
            var radios = document.getElementsByName('notificationType');

            var eventType = '';
            if (radios[0].checked) {
                eventType = radios[0].value;
            } else {
                eventType = radios[1].value;
            }

            await pages.config.setConfig({
                entityId: eventType,
                contentUrl: "https://YourSite/Connector/Setup",
                removeUrl:"https://YourSite/Connector/Setup",
                configName: eventType
                });

            pages.getConfig().then(async (config) {
                // We get the Webhook URL from config.webhookUrl which needs to be saved. 
                // This can be used later to send notification.
            });

            saveEvent.notifySuccess();
        });

        pages.config.registerOnRemoveHandler(function (removeEvent) {
            alert("Removed" + JSON.stringify(removeEvent));
        });

</script>

Wenn Sie die Anmeldung in Ihre eingebettete Seite integrieren möchten, um den Benutzer beim Laden der Seite zu authentifizieren, finden Sie weitere Informationen unter Authentifizierungsablauf für Registerkarten.

Eigenschaften der getConfig-Antwort

Die folgende Tabelle enthält die Parameter und die Details zu getConfig-Antworteigenschaften:

Behandeln von Bearbeitungen

Ihr Code muss Benutzer verarbeiten, die zurückkehren, um eine vorhandene Connectorkonfiguration zu bearbeiten. Rufen Sie microsoftTeams.pages.config.setConfig() dazu bei der Erstkonfiguration mit folgenden Parametern auf:

• entityId ist die benutzerdefinierte ID, die angibt, was der Benutzer konfiguriert hat und wird von Ihrem Dienst verstanden.
• configName ist ein Name, den der Konfigurationscode abrufen kann.
• contentUrl ist eine benutzerdefinierte URL, die geladen wird, wenn ein Benutzer eine vorhandene Connectorkonfiguration bearbeitet.

Dieser Aufruf wird im Rahmen des Speicherereignishandlers ausgeführt. Wenn dann geladen contentUrl wird, muss Ihr Code aufrufen getConfig() , um alle Einstellungen oder Formulare in ihrer Konfigurationsbenutzeroberfläche vorab aufzufüllen.

Behandeln von Entfernungen

Sie können einen Ereignishandler ausführen, wenn der Benutzer eine vorhandene Konnektorkonfiguration entfernt. Sie registrieren diesen Handler, indem Sie microsoftTeams.pages.config.registerOnRemoveHandler() aufrufen. Dieser Handler wird zum Ausführen von Bereinigungsvorgängen verwendet, z. B. zum Entfernen von Einträgen aus einer Datenbank.

Einschließen des Connectors in Ihr App-Manifest

Laden Sie das automatisch generierte App-Manifest (zuvor als Teams-App-Manifest bezeichnet) aus dem Entwicklerportal herunter. Führen Sie die folgenden Schritte aus, bevor Sie die App testen oder veröffentlichen:

1. Zwei Symbole einschließen.
2. Ändern Sie den icons Teil in der App-Manifestdatei, um die Dateinamen der Symbole anstelle von URLs einzuschließen.

Das folgende manifest.json Beispiel enthält die Elemente, die zum Testen und Übermitteln der App erforderlich sind:

Beispiel für manifest.json mit Connector

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "id": "e9343a03-0a5e-4c1f-95a8-263a565505a5",
  "version": "1.0",
  "developer": {
    "name": "Publisher",
    "websiteUrl": "https://www.microsoft.com",
    "privacyUrl": "https://www.microsoft.com",
    "termsOfUseUrl": "https://www.microsoft.com"
  },
  "description": {
    "full": "This is a small sample app we made for you! This app has samples of all capabilities Microsoft Teams supports.",
    "short": "This is a small sample app we made for you!"
  },
  "icons": {
    "outline": "sampleapp-outline.png",
    "color": "sampleapp-color.png"
  },
  "connectors": [
    {
      "connectorId": "e9343a03-0a5e-4c1f-95a8-263a565505a5",
      "scopes": [
        "team"
      ]
    }
  ],
  "name": {
    "short": "Sample App",
    "full": "Sample App"
  },
  "accentColor": "#FFFFFF",
  "needsIdentity": "true"
}

Testen des Connectors

Um Ihren Connector zu testen, laden Sie ihn mit einer beliebigen anderen App in ein Team hoch. Sie können ein .zip-Paket erstellen, indem Sie die App-Manifestdatei aus den beiden Symboldateien und dem Connectors-Entwicklerdashboard verwenden, das wie unter Einschließen des Connectors in Ihr App-Manifest beschrieben geändert wurde.

Nachdem Sie die App hochgeladen haben, öffnen Sie die Connectorliste von einem beliebigen Kanal aus. Scrollen Sie ganz nach unten bis zu Ihrer App im Abschnitt Hochgeladenen.

Um zu überprüfen, ob die HttpPOST-Aktion ordnungsgemäß funktioniert, senden Sie Nachrichten an Ihren Connector.

Befolgen Sie die Schritt-für-Schritt-Anleitung , um die Connectors in Ihren Teams zu erstellen und zu testen.

Veröffentlichen von Webhook und Connector

1. Erstellen Sie eingehende Webhooks direkt für Ihr Team.

2. Fügen Sie eine Konfigurationsseite hinzu, und veröffentlichen Sie Ihren eingehenden Webhook in einem Connector für Microsoft 365-Gruppen.

3. Verpacken und veröffentlichen Sie Ihren Connector als Teil Ihrer AppSource-Übermittlung.

Codebeispiel

Die folgende Tabelle enthält den Beispielnamen und die Beschreibung:

Schrittweise Anleitung

Befolgen Sie die Schritt-für-Schritt-Anleitung zum Erstellen und Testen von Connectors in Teams.

Siehe auch

• Webhooks und Connectors
• Erstellen eingehender Webhooks
• Erstellen ausgehender Webhooks
• Nachrichten erstellen und senden
• So können Administratoren Connectors aktivieren oder deaktivieren
• So können Administratoren benutzerdefinierte Connectors innerhalb ihrer Organisation veröffentlichen
• App-Manifestschema