Eine Registerkarte mit App Studio erstellenCreate a tab using App Studio

Tipp

Suchen Sie nach einer schnelleren Möglichkeit für die ersten Schritte?Looking for a faster way to get started? Erstellen Sie mithilfe des Microsoft Teams-Toolkits eine persönliche oder eine Kanal-und Gruppen Registerkarte.Create a personal or channel and group tab using the Microsoft Teams Toolkit.

Über Registerkarten können Sie Webinhalte bereitstellen, die Sie für Ihren Kanal, Gruppenchat und persönliche Benutzer hosten.Tabs allow you to serve web content that you host to your channel, group chat, and personal users. Auf einer hohen Ebene müssen Sie die folgenden Schritte ausführen, um eine Registerkarte zu erstellen:At a high level, you'll need to complete the following steps to create a tab:

  1. Vorbereiten Ihrer Entwicklungsumgebung.Prepare your development environment.
  2. Erstellen Sie Ihre Seite (n).Create your page(s).
  3. Hosten Sie Ihren app-Dienst.Host your app service.
  4. Erstellen Sie Ihr App-Paket, und laden Sie es in Microsoft Teams hoch.Create your app package and upload to Microsoft Teams.

Vorbereiten der EntwicklungsumgebungPrepare your development environment

Das erste, was Sie tun müssen, ist die Vorbereitung Ihrer Entwicklungsumgebung.The first thing you'll need to do is prepare your development environment. Sie müssen sicherstellen, dass das Hochladen von benutzerdefinierten Apps für die Office 365 Organisation aktiviert ist, in der Sie Ihre APP erstellen möchten.You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. Wenn Sie einen dedizierten Entwicklungsmandanten benötigen, können Sie sich für das Office 365 Entwicklerprogrammregistrieren.If you need a dedicated development tenant, you can sign up for the Office 365 developer program. Weitere Informationen finden Sie unter Einrichten der Entwicklungsumgebung.For additional information see Setup your development environment.

Erstellen Ihrer Seite (n)Create your page(s)

Unabhängig davon, ob Sie die Registerkarte innerhalb des persönlichen oder des Kanals/Gruppenbereichs präsentieren, besteht Sie aus einer oder mehreren HTML-Seiten, die Sie hosten.Whether you present your tab within the personal or channel/group scope, it will consist of one or more HTML pages that you host. Registerkarten mit einem persönlichen Bereich bestehen aus einer einzelnen Inhaltsseite, während für Registerkarten mit einem Kanal oder Gruppenbereich eine Konfigurationsseite erforderlich ist, die die URL der Inhaltsseite basierend auf der Benutzereingabe zum Zeitpunkt der Installation festlegt.Tabs with a personal scope consist of a single content page, while tabs with a channel or group scope will require a configuration page that sets the URL of the content page based on user input at the time of installation.

Es gibt drei Arten von Registerkartenseiten.There are three types of tab pages. Ausführliche Informationen zum Erstellen dieser Website finden Sie auf der entsprechenden Dokumentationsseite.See the corresponding documentation page for full details on creating them.

  1. Inhaltsseite, die Seite, die auf einer Registerkarte angezeigt wird.Content page, the page displayed in a tab.
  2. Konfigurationsseite, die Seite, die zum Festlegen oder Aktualisieren der Inhaltsseiten-URL verwendet wird, und Sie einer Kanal-Gruppe-Registerkarte hinzufügen.Configuration page, the page used to set or update the content page URL, and add it to a channel/group tab.
  3. Entfernungs Seite, eine optionale Seite, die angezeigt wird, wenn ein Kanal/eine Gruppenregisterkarte entfernt wird.Removal page, an optional page that is displayed when a channel/group tab is removed.

Registerkarten AnforderungenTab requirements

Unabhängig vom Typ der Seite müssen Sie die folgenden Anforderungen erfüllen:Regardless of the type of page, you're tab will need to adhere to the following requirements:

  • Sie müssen zulassen, dass Ihre Seiten in einem IFRAME, über X-Frame-Options und/oder Inhalts-Security-Policy-HTTP-Antwortheader zugestellt werden.You must allow your pages to be served in an IFrame, via X-Frame-Options and/or Content-Security-Policy HTTP response headers.
    • Kopfzeile festlegen: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.comSet header: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com
    • Für Internet Explorer 11 Kompatibilität, legen Sie X-Content-Security-Policy ebenfalls fest.For Internet Explorer 11 compatibility, set X-Content-Security-Policy as well.
    • Alternativ können Sie Header festlegen X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/ .Alternatively, set header X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Dieser Header ist veraltet, wird von den meisten Browsern jedoch noch respektiert.This header is deprecated but still respected by most browsers.
  • In der Regel werden Anmeldeseiten als Schutz vor Klick-Jacking nicht in iframes gerendert.Typically, as a safeguard against click-jacking, login pages don't render in IFrames. Daher muss Ihre Authentifizierungslogik eine andere Methode als Redirect verwenden (beispielsweise die Token-basierte oder die Cookie-basierte Authentifizierung verwenden).Therefore, your authentication logic needs to use a method other than redirect (e.g., use token-based or cookie-based authentication).

Hinweis

In Chrome 80, das für die Veröffentlichung Anfang 2020 vorgesehen ist, werden neue Cookiewerte eingeführt und standardmäßig Cookie-Richtlinien auferlegt.Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. Es wird empfohlen, dass Sie die vorgesehene Verwendung für Ihre Cookies festlegen, anstatt sich auf das Standardbrowser Verhalten zu verlassen.It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. Siehe SameSite-Cookie-Attribut (2020 Update).See SameSite cookie attribute (2020 update).

  • Browser befolgen eine Richtlinie mit demselben Ursprung, die verhindert, dass eine Webseite Anforderungen an eine andere Domäne annimmt als die, die einer Webseite zugestellt ist.Browsers adhere to a same-origin policy restriction that prevents a webpage from making requests to a different domain than the one that served a web page. Möglicherweise müssen Sie die Konfigurations-oder Inhaltsseite jedoch an eine andere Domäne oder Unterdomäne umleiten.However, you may need to redirect the configuration or content page to a another domain or subdomain. Ihre domänenübergreifende Navigationslogik sollte es dem Microsoft Teams-Client ermöglichen, den Ursprung anhand einer statischen validDomains-Liste im App-Manifest zu überprüfen, wenn die Registerkarte geladen oder kommuniziert wird.Your cross-domain navigation logic should allow the Teams client to validate the origin against a static validDomains list in the app manifest when loading or communicating with the tab.

  • Um eine nahtlose Benutzeroberfläche zu erstellen, sollten Sie Ihre Registerkarten auf der Grundlage des Designs, des Designs und der Absicht des Teams-Clients formatieren.To create a seamless experience, you should style your tabs based on the Teams client's theme, design, and intent. Normalerweise funktionieren Registerkarten am besten, wenn Sie für einen bestimmten Bedarf erstellt wurden, und konzentrieren sich auf eine kleine Gruppe von Aufgaben oder eine Teilmenge der Daten, die für den Kanal Speicherort der Registerkarte relevant sind.Typically, tabs work best when they're built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location.

  • Fügen Sie auf der Inhaltsseite einen Verweis auf Microsoft Teams JavaScript Client SDK mithilfe von Skripttags hinzu.Within your content page, add a reference to Microsoft Teams JavaScript client SDK using script tags. Führen Sie nach dem Laden der Seite einen Anruf an microsoftTeams.initialize() .Following your page load, make a call to microsoftTeams.initialize(). Die Seite wird nicht angezeigt, wenn dies nicht der Fall ist.Your page will not be displayed if you do not.

Hosten des App-DienstsHost your app service

Ihre Inhalte müssen in einer öffentlich verfügbaren URL gehostet werden, die über HTTPS verfügbar ist.Your content needs to be hosted on a publicly available URL available using HTTPS. Für Tests können Sie einen Reverseproxy wie ngrokverwenden, um den lokalen Port für eine mit dem Internet verbundene URL verfügbar zu machen.For testing, you can use a reverse proxy, such as ngrok, to expose your local port to an internet-facing URL.

Erstellen eines App-Pakets mit App StudioCreate your app package with App Studio

Sie können die APP Studio-app innerhalb des Microsoft Teams-Clients verwenden, um das App-Manifest zu erstellen.You can use the App Studio app from within the Microsoft Teams client to help create your app manifest. Wenn das App-Studio nicht in Microsoft Teams installiert ist, wählen Sie apps  Store -app in der unteren linken Ecke der Teams-App aus, und suchen Sie nach App Studio.If you do not have App studio installed in Teams, select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Nachdem Sie die Kachel gefunden haben, wählen Sie Sie aus, und wählen Sie im Dialogfeld Popupfenster installieren aus.Once you find the tile, select it and choose install in the pop-up window dialog box.

  1. Öffnen Sie den Microsoft Teams-Client – mithilfe der webbasierten Version können Sie den Front-End-Code mithilfe der EntwicklertoolsIhres Browsers überprüfen.Open the Microsoft Teams client—using the web based version will enable you to inspect your front-end code using your browser's developer tools.
  2. Öffnen Sie App Studio, und wählen Sie die Registerkarte Manifest-Editor aus.Open App Studio and select the Manifest editor tab.
  3. Wählen Sie die Kachel neue APP erstellen aus.Choose the Create a new app tile.
  4. Fügen Sie Ihre APP-Details hinzu (siehe Manifest-Schema Definition für eine vollständige Beschreibung der einzelnen Felder).Add your app details (see the manifest schema definition for full description of each field).
  5. Wählen Sie im Abschnitt Funktionen die Option Registerkarten aus.In the capabilities section select Tabs .
    • Wählen Sie für eine persönliche Registerkarte persönliche Registerkarte hinzufügen aus, und wählen Sie Hinzufügen aus.For a personal tab, choose Add a personal tab and select Add . Ihnen wird ein Popup-Dialogfenster angezeigt, in dem Sie Ihre Registerkarten Details hinzufügen können.You will be presented with a pop-up dialogue window where you can add your tab details.
    • Wählen Sie für einen Kanal/eine Gruppe Registerkarte unter Team Tab die Registerkarte Details im Popupfenster Team Tab Hinzufügen aus, und füllen Sie die Felder aus.For a channel/group tab, under Team Tab select Add and complete the tab details fields in the Team tab pop-up window. Stellen Sie sicher, dass die Konfiguration aktualisiert werden kann? Team -und Gruppenchat Felder werden überprüft, und wählen Sie Speichern aus.Make sure the can update configuration? Team and Group chat boxes are checked and select Save .
  6. Im Abschnitt Domains and Permissions sollte die Domäne aus Ihrem Registerkarten Feld die Host-oder Reverse-Proxy-URL ohne das HTTPS-Präfix enthalten.In the Domains and permissions section, the Domains from your tabs field should contain your host or reverse proxy URL without the HTTPS prefix.
  7. Auf der Finish => Registerkarte Finish Test und Distribute können Sie Ihr App-Paket herunterladen , das Paket in einem Team Installieren oder sich zur Genehmigung an den App-Store von Teams senden .From the Finish => Test and distribute tab you can Download your app package, Install the package into a team, or Submit to the Teams app store for approval. Wenn Sie einen Reverseproxy verwenden, erhalten Sie eine Warnung im Feld Beschreibung auf der rechten Seite. Die Warnung kann beim Testen der Registerkarte ignoriert werden .If you are using a reverse proxy you will get a warning in the Description field on the right. The warning can be ignored while testing your tab .

Manuelles Erstellen Ihres App-PaketsCreate your app package manually

Wie bei Bots und Messaging-Erweiterungen aktualisieren Sie das App-Manifest Ihrer APP so, dass die Eigenschaften der Registerkarte enthalten sind.As with bots and messaging extensions, you update the app manifest of your app to include the tab properties. Diese Eigenschaften bestimmen die Bereiche, in denen die Registerkarte verfügbar ist, die zu verwendenden URLs und verschiedene andere Eigenschaften.These properties govern the scopes your tab is available in, the URLs to be used, and various other properties.

Persönliche RegisterkartenPersonal Tabs

Der angezeigte Inhalt für persönliche Registerkarten ist für alle Benutzer gleich und wird im Array konfiguriert staticTabs .The displayed content for personal tabs is the same for all users and is configured in the staticTabs array. Sie können bis zu sechzehn (16) persönliche Registerkarten in einer APP deklarieren.You may declare up to sixteen (16) personal tabs in an app.

NameName TypType Maximale GrößeMaximum size ErforderlichRequired BeschreibungDescription
entityId StringString 64 Zeichen64 characters Ein eindeutiger Bezeichner für die Entität, die auf der Registerkarte angezeigt wird.A unique identifier for the entity that the tab displays.
name ZeichenfolgeString 128 Zeichen128 characters Der Anzeigename der Registerkarte in der Kanalschnittstelle.The display name of the tab in the channel interface.
contentUrl ZeichenfolgeString 2048 Zeichen2048 characters Die https://-URL, die auf die Benutzeroberfläche der Entität zeigt, die im Canvas "Teams" angezeigt werden soll.The https:// URL that points to the entity UI to be displayed in the Teams canvas.
websiteUrl ZeichenfolgeString 2048 Zeichen2048 characters Die https://-URL, auf die verwiesen wird, wenn ein Benutzer sich für die Anzeige in einem Browser entscheidet.The https:// URL to point at if a user opts to view in a browser.
scopes Array von EnumerationenArray of enum 11 Statische Registerkarten unterstützen nur den personal Bereich, was bedeutet, dass Sie nur als Teil einer persönlichen App zur Verfügung gestellt werden können.Static tabs support only the personal scope, which means it can be provisioned only as part of a personal app.

Beispiel für einfaches persönliches Tab-ManifestSimple personal tab manifest example

Das folgende Beispiel zeigt nur das staticTabs Array aus einem App-Manifest.The example below shows just the staticTabs array from an app manifest.

...
"staticTabs": [
    {
      "entityId": "idForPage",
      "name": "Display name for tab",
      "contentUrl": "https:// yourURL.com/content ",
      "websiteUrl": "https://yourURL.com/website",
      "scopes": [ "personal" ]
    }
...

Kanal/GruppenregisterkartenChannel/group tabs

Im Array werden Kanäle/Gruppenregisterkarten hinzugefügt configurableTabs .Channel/group tabs are added in the configurableTabs array. Sie können im Array nur einen Kanal/eine Gruppe-Registerkarte deklarieren configurableTabs .You may declare only one channel/group tab in the configurableTabs array.

NameName TypType Maximale GrößeMaximum size ErforderlichRequired BeschreibungDescription
configurationUrl ZeichenfolgeString 2048 Zeichen2048 characters Die Seite https://URL to Configuration.The https:// URL to configuration page.
canUpdateConfiguration BooleschBoolean Ein Wert, der angibt, ob eine Instanz der Konfiguration der Registerkarte nach der Erstellung vom Benutzer aktualisiert werden kann.A value indicating whether an instance of the tab's configuration can be updated by the user after creation. Standard trueDefault: true
scopes Array von EnumerationenArray of enum 11 Konfigurierbare Registerkarten unterstützen nur die team und groupchat Bereiche.Configurable tabs support only the team and groupchat scopes.

Beispiel für einfaches Channel/Group-Registerkarten ManifestSimple channel/group tab manifest example

Das folgende Beispiel zeigt nur das configurableTabs Array aus einem App-Manifest.The example below shows just the configurableTabs array from an app manifest.

...
"configurableTabs": [
    {
      "configurationUrl": "https://yourURL.com/configure",
      "canUpdateConfiguration": true,
      "scopes": [ "team", "groupchat" ]
    }
...

Nachdem Sie Ihr manifest.json Bundle in einem ZIP-Ordner zusammen mit ihren beiden erforderlichen Symbolen abgeschlossen haben.Once you have completed your manifest.json bundle it in a zip folder along with your two required icons.

Direktes Hochladen des App-Pakets in ein TeamUpload app package directly to a team

  1. Öffnen Sie den Microsoft Teams-Client.Open the Microsoft Teams client. Wenn Sie die webbasierte Version verwenden, können Sie den Front-End-Code mithilfe der EntwicklertoolsIhres Browsers überprüfen.If you use the web based version you can inspect your front-end code using your browser's developer tools.
  2. Wählen Sie im YourTeams -Bereich auf der linken Seite das ... Menü neben dem Team aus, das Sie zum Testen der Registerkarte verwenden, und wählen Sie Team verwalten aus.In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team .
  3. Wählen Sie im Hauptbereich apps in der Registerkartenleiste aus, und wählen Sie eine benutzerdefinierte App hochladen , die sich in der unteren rechten Ecke der Seite befindet.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  4. Öffnen Sie Ihr Projektverzeichnis, navigieren Sie zum Ordner ./Paket , wählen Sie den ZIP-Ordner für das App-Paket aus, und wählen Sie Öffnen aus.Open your project directory, browse to the ./package folder, select the app package zip folder and choose Open . Ihre Registerkarte wird in Teams hochgeladen.Your tab will upload into Teams.

Anzeigen der Registerkarte in Microsoft TeamsView your tab in Teams

  1. Anzeigen Ihrer persönlichen Registerkarte:View your personal tab:

    • Wählen Sie in der navbar, die sich auf der linken Seite des Teams-Clients befindet, das ... Menü aus, und wählen Sie Ihre APP aus der Liste aus.In the navbar located at the far-left of the Teams client, select the ... menu and choose your app from the list.
  2. Zeigen Sie die Registerkarte Kanal/Gruppe an:View your channel/group tab:

    • Kehren Sie zu Ihrem Team zurück, wählen Sie den Kanal aus, in dem Sie die Registerkarte anzeigen möchten, wählen Sie in der Registerkartenleiste ➕ aus, und wählen Sie im Katalog die Registerkarte aus.Return to your team, choose the channel where you would like to display the tab, select ➕ from the tab bar, and choose your tab from the gallery.
    • Befolgen Sie die Anweisungen zum Hinzufügen einer Registerkarte. Beachten Sie, dass für die Registerkarte Kanal/Gruppe ein benutzerdefiniertes Konfigurationsdialogfeld vorhanden ist. Wählen Sie Speichern aus, und ihre Registerkarte wird der Registerkartenleiste des Kanals hinzugefügt.Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab. Select Save and your tab will be added to the channel's tab bar.

Mehr erfahrenLearn more