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:

    Warnung

    Die Clouddienste von Microsoft, einschließlich der Webversionen von Teams (teams.microsoft.com), Outlook (outlook.com) und Microsoft 365 (microsoft365.com), werden zur Domäne cloud.microsoft migriert. Führen Sie vor Juni 2024 die folgenden Schritte aus, um sicherzustellen, dass Ihre App weiterhin auf dem Teams-Webclient gerendert wird:

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

    2. Aktualisieren Sie die Header ihrer Inhaltssicherheitsrichtlinie in Ihrer Teams-App, damit Ihre App auf die Domäne teams.cloud.microsoft zugreifen kann. Wenn Sich Ihre Teams-App über Outlook und Microsoft 365 erstreckt, stellen Sie sicher, dass Sie Ihrer App den Zugriff auf die Domänen teams.cloud.microsoft, outlook.cloud.microsoft und m365.cloud.microsoft gestatten.

    Microsoft 365-App-Host Frame-Vorgängerberechtigung
    Teams teams.microsoft.com, *.teams.microsoft.com, teams.cloud.microsoft
    Microsoft 365-App *.microsoft365.com, *.office.com, m365.cloud.microsoft
    Outlook outlook.live.com, outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com, outlook.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 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