Voraussetzungen

  • Artikel

Stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen, während Sie Ihre persönliche und Kanal- oder Gruppenregisterkarte für Teams erstellen:

  • Lassen Sie zu, dass Ihre Tab-Seiten in einem iFrame erkannt werden, indem Sie die HTTP-Antwort-Header X-Frame-Options und Content-Security-Policy verwenden.

    • Legen Sie Inhaltssicherheitsrichtlinienheader fest, um Teams und alle anderen Hostanwendungen Ihrer App zuzulassen:

      Microsoft 365-App-Host Frame-Vorgängerberechtigung
      Teams teams.microsoft.com, *.teams.microsoft.com, *.skype.com
      Microsoft 365-App *.microsoft365.com, *.office.com
      Outlook outlook.live.com, outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

    • Legen Sie für die Kompatibilität mit Internet Explorer 11 X-Content-Security-Policy. Setzen Sie alternativ Header X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Dieser Header ist veraltet, wird aber von den meisten Browsern noch akzeptiert.

  • Anmeldeseiten werden nicht in iFrames gerendert, um sich vor Clickjacking zu schützen. Ihre Authentifizierungslogik muss eine andere Methode als die Umleitung verwenden. Verwenden Sie beispielsweise die tokenbasierte oder cookiebasierte Authentifizierung.

    Hinweis

    Es wird empfohlen, dass Sie die beabsichtigte Verwendung für Ihre Cookies festlegen, anstatt sich auf das Standardverhalten des Browsers zu verlassen. Weitere Informationen finden Sie unter SameSite-Cookie-Attribut.

  • Die Einschränkung der Richtlinie für den gleichen Ursprung des Browsers verhindert, dass Webseiten Anfragen an andere Domänen als die bereitgestellte Webseite senden. Sie können also die Konfigurations- oder Inhaltsseite auf eine andere Domain oder Subdomain umleiten. Ihre domänenübergreifende Navigationslogik muss es dem Teams-Client ermöglichen, beim Laden oder Kommunizieren mit der Registerkarte den Ursprung anhand einer statischen validDomains Liste im App-Manifest zu überprüfen.

  • Gestalten Sie Ihre Registerkarten basierend auf dem Design, dem Design und der Absicht des Teams-Clients. Registerkarten funktionieren am besten, wenn sie für einen bestimmten Bedarf erstellt wurden und sich auf eine kleine Gruppe von Aufgaben oder eine Teilmenge von Daten konzentrieren, die für die Kanalposition der Registerkarte relevant sind.

  • Fügen Sie auf Ihrer Inhaltsseite mithilfe von Skripttags einen Verweis auf die JavaScript-Clientbibliothek von Microsoft Teams hinzu. Nachdem die Seite geladen wurde, rufen Sie auf, app.initialize()andernfalls wird Ihre Seite nicht angezeigt.

  • Damit die Authentifizierung auf mobilen Clients funktioniert, müssen Sie ein Upgrade auf TeamsJS Version 1.4.1 oder höher durchführen.

  • Wenn Sie festlegen, dass Ihre Kanal- oder Gruppenregisterkarte auf dem mobilen Teams-Client angezeigt wird, muss die setConfig() Konfiguration einen Wert für die websiteUrl Eigenschaft aufweisen.

  • Die Registerkarte Microsoft Teams unterstützt nicht die Möglichkeit, Intranetwebsites zu laden, die selbstsignierte Zertifikate verwenden.

Hinweis

Dieses Thema enthält Version 2.0.x der Microsoft Teams JavaScript-Clientbibliothek (TeamsJS). Wenn Sie eine frühere Version verwenden, finden Sie in der Übersicht über die TeamsJS-Bibliothek Anleitungen zu den Unterschieden zwischen den neuesten Versionen von TeamsJS und früheren Versionen.

Tools zum Erstellen von Registerkarten

  Installieren Zum Benutzen...
Required    
  Node.js Back-End-JavaScript-Laufzeitumgebung. Verwenden Sie das neueste v16 LTS-Release.
  Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.
  Visual Studio Code Build-Umgebungen für JavaScript, TypeScript oder SharePoint Framework (SPFx).
  Workload "Visual Studio 2022, ASP.NET und Webentwicklung" .NET. Sie können die kostenlose Community-Edition von Visual Studio 2022 installieren.
  Git Git, um das Repository für Beispiel-Apps von GitHub zu verwenden.
  Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe – alles an einem Ort.
  ngrok Ngrok ist ein Reverse-Proxy-Softwaretool. Ngrok erstellt einen Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten Ihres lokal ausgeführten Webservers. Die Webendpunkte Ihres Servers sind während der aktuellen Sitzung auf Ihrem Computer verfügbar. Wenn der Computer heruntergefahren wird oder in den Energiesparmodus wechselt, ist der Dienst nicht mehr verfügbar.
  Entwicklerportal für Teams Webbasiertes Portal zum Konfigurieren, Verwalten und Verteilen Ihrer Teams-App, einschließlich in Ihrem organization oder dem Microsoft Teams Store.

Erstellen Sie Ihre Registerkarte "Teams".

Lassen Sie uns jetzt Ihren Tab erstellen. Aber wählen Sie zuerst die Registerkarte Ihrer Wahl aus, die Sie erstellen möchten:

Erstellen einer persönlichen Registerkarte

Erstellen Sie einen Kanal- oder Gruppen-Tab

Siehe auch