Erstellen einer benutzerdefinierten persönlichen Registerkarte mit ASP.Create a Custom Personal Tab with ASP. NET-Core-MVCNET Core MVC

In diesem Schnellstart werden Sie durch das Erstellen einer benutzerdefinierten persönlichen Registerkarte mit C# und ASP durchlaufen.In this quickstart we'll walk-through creating a custom personal tab with C# and ASP. NET-Kern-MVC.Net Core MVC. Wir verwenden auch App Studio für Microsoft Teams , um Ihr App-Manifest abzuschließen und die Registerkarte in Teams bereitzustellen.We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

VoraussetzungenPrerequisites

  • Um diesen Schnellstart abzuschließen, benötigen Sie einen Office 365 Mandanten und ein Team, das mit aktiviertem Hochladen benutzerdefinierter apps zulassen konfiguriert ist.To complete this quickstart you'll need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Weitere Informationen finden Sie unter Vorbereiten des Office 365 Mandanten.To learn more, see Prepare your Office 365 tenant.

    • Wenn Sie derzeit kein Office 365 Konto haben, können Sie sich über das Office 365-Entwicklerprogrammfür ein kostenloses Abonnement anmelden.If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. Das Abonnement bleibt aktiv, solange Sie es für die laufende Entwicklung verwenden.The subscription will remain active as long as you're using it for ongoing development.
  • Sie verwenden App Studio, um Ihre Anwendung in Microsoft Teams zu importieren.You'll use App Studio to import your application to Teams. Um App Studio zu installieren **** , wählen Sie Apps Store-App in der unteren linken Ecke der Teams-App aus, und suchen Sie nach App Studio.To install App Studio 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.

Dieses Projekt erfordert außerdem, dass in Ihrer Entwicklungsumgebung Folgendes installiert ist:In addition, this project requires that you have the following installed in your development environment:

  • Die aktuelle Version die Visual Studio-IDE mit installierter .net-Kern plattformübergreifender Entwicklungs Arbeitslast.The current version the Visual Studio IDE with the .NET CORE cross-platform development workload installed. Wenn Sie noch nicht über Visual Studio verfügen, können Sie die neueste Microsoft Visual Studio Community -Version kostenlos herunterladen und installieren.If you don't already have Visual Studio, you can download and install the latest Microsoft Visual Studio Community version for free.

  • Das ngrok -Reverseproxy-Tool.The ngrok reverse proxy tool. Sie verwenden ngrok, um einen Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten des lokal ausgeführten Webservers zu erstellen.You'll use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Sie können es hier herunterladen.You can download it here.

Abrufen des QuellcodesGet the source code

Öffnen Sie eine Eingabeaufforderung, und erstellen Sie ein neues Verzeichnis für Ihr Tab-Projekt.Open a command prompt and create a new directory for your tab project. Wir haben ein einfaches Projekt zur Verfügung gestellt, damit Sie loslegen können.We have provided a simple project to get you started. Zum Abrufen des Quellcodes können Sie den ZIP-Ordner herunterladen und die Dateien extrahieren oder das Beispiel-Repository in Ihr neues Verzeichnis kopieren:To retrieve the source code you can download the zip folder and extract the files or clone the sample repository into your new directory:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Nachdem Sie den Quellcode haben, öffnen Sie Visual Studio, und wählen Sie Projekt oder Lösung öffnenaus.Once you have the source code, open Visual Studio and select Open a project or solution. Navigieren Sie zum Anwendungsverzeichnis der Registerkarte, und öffnen Sie PersonalTabMVC. sln.Navigate to the tab application directory and open PersonalTabMVC.sln.

Drücken Sie zum Erstellen und Ausführen der Anwendung F5 , oder wählen Sie im Menü Debuggen die Option Debuggen starten aus.To build and run your application press F5 or choose Start Debugging from the Debug menu. Navigieren Sie in einem Browser zu den folgenden URLs, um zu überprüfen, ob die Anwendung ordnungsgemäß geladen wurde:In a browser navigate to the URLs below to verify that the application loaded properly:

  • http://localhost:44335
  • http://localhost:44335/privacy
  • http://localhost:44335/tou

Überprüfen des QuellcodesReview the source code

Startup.csStartup.cs

Dieses Projekt wurde aus einer ASP.This project was created from an ASP. NET Core 2,2-Webanwendung leere Vorlage, wobei das Kontrollkästchen Erweiterte-configure for HTTPS beim Setup aktiviert ist.NET Core 2.2 Web Application empty template with the Advanced - Configure for HTTPS check box selected at setup. Die MVC-Dienste werden von der Dependency Injection Framework- ConfigureServices() Methode registriert.The MVC services are registered by the dependency injection framework's ConfigureServices() method. Darüber hinaus wird die Bereitstellung statischer Inhalte nicht standardmäßig durch die leere Vorlage aktiviert, sodass der Methode die statische Datei Middleware hinzugefügt wird Configure() :Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the Configure() method:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

WWWRoot-Ordnerwwwroot folder

In ASP.In ASP. NET-Kern ist der Webstammordner der Ort, an dem die Anwendung nach statischen Dateien sucht.NET Core, the web root folder is where the application looks for static files.

AppManifest-OrdnerAppManifest folder

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:This folder contains the following required app package files:

  • Ein vollfarbiges Symbol , das 192 x 192 Pixel misst.A full color icon measuring 192 x 192 pixels.
  • Ein transparentes Umrisssymbol , das 32 x 32 Pixel misst.A transparent outline icon measuring 32 x 32 pixels.
  • Ein manifest.jsfür die Datei, die die Attribute Ihrer APP angibt.A manifest.json file that specifies the attributes of your app.

Diese Dateien müssen in einem App-Paket gezippt werden, damit Sie Ihre Registerkarte in Microsoft Teams hochladen können.These files need to be zipped in an app package for use in uploading your tab to Teams. Microsoft Teams lädt das contentUrl angegebene in ihrem Manifest, bettet es in einen iframe ein und rendert es in ihrer Registerkarte.Microsoft Teams will load the contentUrl specified in your manifest, embed it in an IFrame, and render it in your tab.

. csproj.csproj

Klicken Sie im Fenster Visual Studio Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeitenaus.In the Visual Studio Solution Explorer window right-click on the project and select Edit Project File. Unten in der Datei sehen Sie den Code, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:At the bottom of the file you'll see the code that creates and updates your zip folder when the application builds:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

ModelleModels

PersonalTab.cs zeigt ein Message-Objekt und Methoden, die von PersonalTabController aufgerufen werden, wenn ein Benutzer eine Schaltfläche in der PersonalTab -Ansicht auswählt.PersonalTab.cs presents a Message object and methods that will be called from PersonalTabController when a user selects a button in the PersonalTab View.

AnsichtenViews

HomeHome

ASP.ASP. NET Core werden Dateien mit dem Namen " Index " als Standard/Homepage für die Website behandelt.NET Core treats files called Index as the default/home page for the site. Wenn Ihre Browser-URL auf den Stamm der Website zeigt, wird Index. cshtml als Startseite für Ihre Anwendung angezeigt.When your browser URL points to the root of the site, Index.cshtml will be displayed as the home page for your application.

SharedShared

Das Markup _Layout. cshtml der partiellen Ansicht enthält die gesamte Seitenstruktur der Anwendung sowie freigegebene visuelle Elemente.The partial view markup _Layout.cshtml contains the application's overall page structure and shared visual elements. Außerdem wird auf die Microsoft Teams-Bibliothek verwiesen.It will also reference the Teams Library.

ControllerControllers

Die Controller verwenden die ViewBag-Eigenschaft, um Werte dynamisch zu den Ansichten zu übertragen.The controllers use the ViewBag property to transfer values dynamically to the Views.

Aktualisieren Ihrer AnwendungUpdate your application

_Layout. cshtml_Layout.cshtml

Damit Ihre Registerkarte in Teams angezeigt wird, müssen Sie das Microsoft Teams-JavaScript-Client-SDK einschließen und microsoftTeams.initialize() nach dem Laden einer Seite einen Anruf hinzufügen.For your tab to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. So kommunizieren Ihre Registerkarten und die Teams-App:This is how your tab and the Teams app communicate:

  • Navigieren Sie zum freigegebenen Ordner, öffnen Sie _Layout. cshtml, und fügen Sie dem <head> Abschnitt Tags Folgendes hinzu:Navigate to the Shared folder, open _Layout.cshtml, and add the following to the <head> tags section:
`<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>`
`<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>`

PersonalTab. cshtmlPersonalTab.cshtml

Öffnen Sie PersonalTab. cshtml , und aktualisieren <script> Sie die eingebetteten microsoftTeams.initialize()Tags durch Aufrufen von.Open PersonalTab.cshtml and update the embedded <script> tags by calling microsoftTeams.initialize().

Stellen Sie sicher, dass Sie Ihre aktualisierten PersonalTab. cshtmlspeichern.Make sure to save your updated PersonalTab.cshtml.

Einrichten eines sicheren Tunnels für die RegisterkarteEstablish a secure tunnel to your tab

Microsoft Teams ist ein vollständig Cloud-basiertes Produkt und erfordert, dass Ihre Registerkarteninhalte über HTTPS-Endpunkte in der Cloud verfügbar sind.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. In Microsoft Teams wird kein lokales Hosting zugelassen.Teams doesn't allow local hosting. Sie müssen entweder Ihre Registerkarte in einer öffentlichen URL veröffentlichen oder einen Proxy verwenden, der Ihren lokalen Port für eine mit dem Internet verbundene URL verfügbar macht.You'll need to either publish your tab to a public URL, or use a proxy that will expose your local port to an internet-facing URL.

Zum Testen der Registerkarte verwenden Sie ngrok.To test your tab you'll use ngrok. Die Webendpunkte Ihres Servers sind verfügbar, während ngrok auf Ihrem lokalen Computer läuft.Your server's web endpoints will be available while ngrok is running on your local machine. Wenn Sie ngrok schließen, sind die URLs unterschiedlich, wenn Sie das nächste Mal starten.If you close ngrok, the URLs will be different the next time you start it.

  • Öffnen Sie eine Eingabeaufforderung im Stammverzeichnis des Projektverzeichnisses, und führen Sie den folgenden Befehl aus:Open a command prompt in the root of your project directory and run the following command:
ngrok http https://localhost:44345 -host-header="localhost:44345"
  • Ngrok wird Anfragen aus dem Internet abhören und wird Sie an Ihre Anwendung weiterleiten, wenn Sie auf Port 44325 läuft.Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44325. Es sollte ähneln https://y8rPrT2b.ngrok.io/ , wo y8rPrT2b durch ihre ngrok Alpha-numerische HTTPS-URL ersetzt wird.It should resemble https://y8rPrT2b.ngrok.io/ where y8rPrT2b is replaced by your ngrok alpha-numeric HTTPS URL.

  • Achten Sie darauf, dass Sie die Eingabeaufforderung mit ngrok weiterhin ausführen, und notieren Sie sich die URL, die Sie später benötigen.Be sure to keep the command prompt with ngrok running, and to make a note of the URL — you'll need it later.

  • Stellen Sie sicher, dass ngrok ausgeführt wird und ordnungsgemäß funktioniert, indem Sie Ihren Browser öffnen und zu ihrer Inhaltsseite über die ngrok-HTTPS-URL wechseln, die in Ihrem Eingabeaufforderungsfenster bereitgestellt wurde.Verify that ngrok is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

[![! Tipp] Sie müssen sowohl Ihre Anwendung in Visual Studio als auch ngrok ausführen, um diesen Schnellstart abzuschließen.TIP] You need to have both your application in Visual Studio and ngrok running to complete this quickstart. Wenn Sie die Ausführung der Anwendung in Visual Studio beenden müssen, um Sie zu bearbeiten, halten Sie ngrok auf dem laufenden.If you need to stop running your application in Visual Studio to work on it, keep ngrok running. Sie wird weiterhin überwacht und setzt die Weiterleitung der Anforderung Ihrer Anwendung fort, wenn Sie in Visual Studio neu gestartet wird.It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. Wenn Sie den ngrok-Dienst neu starten müssen, wird eine neue URL zurückgegeben, und Sie müssen jeden Ort aktualisieren, der diese URL verwendet.If you have to restart the ngrok service it will return a new URL and you'll have to update every place that uses that URL.

Ausführen Ihrer AnwendungRun your application

  • Drücken Sie in Visual Studio F5 , oder klicken Sie im Menü Debuggen Ihrer Anwendung auf Debuggen starten .In Visual Studio press F5 or choose Start Debugging from your application's Debug menu.

Hochladen der Registerkarte in Microsoft Teams mit App StudioUpload your tab to Teams with App Studio

Hinweis

Wir verwenden App Studio, um Ihre Manifest. JSON -Datei zu bearbeiten und das abgeschlossene Paket in Microsoft Teams hochzuladen.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Sie können Manifest. JSON auch manuell bearbeiten, wenn Sie dies bevorzugen.You can also manually edit manifest.json if you prefer. Wenn Sie dies tun, müssen Sie die Lösung erneut erstellen, um die Datei "Tab. zip" zu erstellen, die hochgeladen werden soll.If you do, be sure to build the solution again to create the Tab.zip file to upload.

  • Ö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.

  • Öffnen Sie App Studio, und wählen Sie die Registerkarte Manifest-Editor aus.Open App studio and select the Manifest editor tab.

  • Wählen Sie die Kachel Importieren einer vorhandenen APP im Manifest-Editor aus, um mit der Aktualisierung des App-Pakets für Ihre Registerkarte zu beginnen. Der Quellcode enthält ein eigenes teilweise vollständiges Manifest.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Der Name Ihres App-Pakets lautet Tab. zip.The name of your app package is tab.zip. Es sollte hier gefunden werden:It should be found here:

/bin/Debug/netcoreapp2.2/Tab.zip
  • Upload Tab. zip in App Studio.Upload Tab.zip to App Studio.

Aktualisieren des App-Pakets mit dem Manifest-EditorUpdate your app package with Manifest editor

Nachdem Sie Ihr App-Paket in App Studio hochgeladen haben, müssen Sie die Konfiguration fertig stellen.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • Wählen Sie die Kachel für Ihre neu importierte Registerkarte im rechten Bereich der Willkommensseite des Manifest-Editors aus.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

Auf der linken Seite des Manifest-Editors finden Sie eine Liste mit Schritten und auf der rechten Seite eine Liste mit Eigenschaften, die für jeden dieser Schritte Werte enthalten müssen.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. Ein Großteil der Informationen wurde von Ihrem Manifest. JSON bereitgestellt, aber es gibt ein paar Felder, die Sie aktualisieren müssen:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Details: App-DetailsDetails: App details

Im Abschnitt App-Details :In the App details section:

  • Wählen Sie unter Identifikation generieren aus, um eine neue APP-ID für Ihre APP zu generieren.Under Identification select Generate to generate a new App Id for your app.

  • Aktualisieren Sie unter Entwickler Informationen die Website-URL mit Ihrer ngrok -HTTPS-URL.Under Developer information update the Website URL with your ngrok HTTPS URL.

  • Aktualisieren Sie unter App https://<yourngrokurl>/privacy -URLs die Datenschutzbestimmungen und Nutzungsbedingungen für https://<yourngrokurl>/tou>.Under App URLs update the Privacy statement to https://<yourngrokurl>/privacy and Terms of use to https://<yourngrokurl>/tou>.

Funktionen: RegisterkartenCapabilities: Tabs

Im Abschnitt Tabs :In the Tabs section:

  • Wählen Sie unter persönliche Registerkarte hinzufügen die Option Hinzufügenaus.Under Add a personal tab select Add. Ihnen wird ein Popup-Dialogfenster angezeigt.You will be presented with a pop-up dialogue window.

  • Füllen Sie das Feld Name aus.Complete the Name field.

  • Schließen Sie das Feld Entitäts-ID ab.Complete the Entity Id field.

  • Aktualisieren Sie das Feld Inhalts -URL https://<yourngrokurl>/personalTabmit auf.Update the Content URL field with to https://<yourngrokurl>/personalTab.

  • Lassen Sie das Feld Website-URL leer.Leave the Website URL field blank.

  • Klicken Sie auf Speichern.Select Save.

Fertig stellen: Domänen und BerechtigungenFinish: Domains and permissions

Im Abschnitt Domains and Permissions sollte die Domäne aus Ihrem Registerkarten Feld Ihre ngrok- <yourngrokurl>.ngrok.io/URL ohne das Präfix "https" enthalten.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Fertig stellen: Testen und verteilenFinish: Test and distribute

Wichtig

Im Feld Beschreibung auf der rechten Seite wird die folgende Warnung angezeigt:In the Description field on the right you'll see the following warning:

⚠ "das Array" validDomains "kann keine Tunneling-Website enthalten..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Diese Warnung kann beim Testen der Registerkarte ignoriert werden.This warning can be ignored while testing your tab.

Im Abschnitt Testen und verteilen :In the Test and distribute section:

  • Installieren auswählen.Select Install.

  • Stellen Sie im Popupfenster sicher, dass Add for you auf Ja festgelegt ist und zu einem Team oder Chat hinzufügen auf Neinfestgelegt ist.In the pop-up window make sure that Add for you is set to Yes and Add to a team or chat is set to No.

  • Installieren auswählen.Select Install.

  • Wählen Sie im nächsten Popupfenster die Option Öffnen aus, und ihre Registerkarte wird angezeigt.In the next pop-up window select Open and your tab will be displayed.

Anzeigen Ihrer persönlichen RegisterkarteView your personal tab

  • Wählen Sie in der Navigationsleiste, die sich in der Microsoft Teams-App ganz links ... befindet, das Menü aus.In the navigation bar located at the far-left of the Teams App, select the ... menu. Ihnen wird eine Liste mit persönlichen apps angezeigt.You'll be presented with a list of personal apps.

  • Wählen Sie die Registerkarte aus der Liste aus, die angezeigt werden soll.Select your tab from the list to view.