Freigeben über

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:

  • Aktivieren Sie die Ermittlung Ihrer Registerkartenseiten in einem iFrame mithilfe der HTTP-Antwortheader "X-Frame-Options" und "Content-Security-Policy" .

  • Stellen Sie sicher, dass alle Teams-App-Seiten auf HTTPS-Endpunkten gehostet werden.

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

    Microsoft 365-App-Host Frame-Vorgängerberechtigung
    Alle Hosts (neu) *.cloud.microsoft
    Teams teams.microsoft.com, *.teams.microsoft.com
    Microsoft 365-App *.microsoft365.com, *.office.com,
    Outlook outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

    Warnung

    Die Clouddienste von Microsoft, einschließlich Webversionen von Teams, Outlook und Microsoft 365-Domänen, werden zur *.cloud.microsoft Domäne migriert. Führen Sie vor September 2024 die folgenden Schritte aus, um sicherzustellen, dass Ihre App weiterhin auf unterstützten Microsoft 365-Webclienthosts gerendert wird:

    1. Aktualisieren Sie die TeamsJS-Bibliothek auf v.2.19.0 oder höher. Weitere Informationen zur neuesten Version von TeamsJS finden Sie unter Microsoft Teams JavaScript-Clientbibliothek.

    2. Wenn Sie CSP-Header ( Content Security Policy ) für Ihre App definiert haben, aktualisieren Sie die Frame-Vorgängerdirektive , um die *.cloud.microsoft Domäne einzuschließen. Um die Abwärtskompatibilität während der Migration sicherzustellen, behalten Sie die vorhandenen frame-ancestors Werte in Ihren CSP-Headern bei. Dieser Ansatz stellt sicher, dass Ihre App weiterhin sowohl für vorhandene als auch für zukünftige Microsoft 365-Hostanwendungen funktioniert, und minimiert den Bedarf an nachfolgenden Änderungen.

    Aktualisieren Sie die folgende Domäne in der frame-ancestors -Direktive der CSP-Header Ihrer App:

    https://*.cloud.microsoft

    Hinweis

    Um die anderen Teams- oder Microsoft 365-Apps in Ihrer App zu hosten, aktualisieren Sie Ihre App auf eine Microsoft 365-Umgebung. Wenn Sie die App verwalten, die im geschachtelten Frame ausgeführt wird, können Sie ihren Code aktualisieren, um das SDK zu initialisieren, indem Sie Ihre Domäne angeben. Dadurch kann Ihr geschachtelter Frame als Proxy für Teams fungieren.

  • 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, aber die meisten Browser akzeptieren ihn immer noch.

  • Anmeldeseiten werden in iFrames nicht als Schutz vor Clickjacking gerendert. 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 werden und sich auf eine kleine Gruppe von Aufgaben oder eine Teilmenge von Daten konzentrieren, die für den Kanalspeicherort 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 Sie Ihr Gerät herunterfahren oder in den Energiesparmodus versetzen, ist der Dienst nicht mehr verfügbar.
  Entwicklerportal für Teams Webbasiertes Portal zum Konfigurieren, Verwalten und Veröffentlichen Ihrer Teams-App, einschließlich in Ihrem organization oder im 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