Erste Schritte beim Erstellen eines von einem Anbieter gehosteten SharePoint-Add-InsGet started creating provider-hosted SharePoint Add-ins

Vom Anbieter gehostete Add-Ins sind eine der zwei Haupttypen von SharePoint-Add-Ins. Einen schnellen Überblick über SharePoint-Add-Ins und die zwei verschiedenen Typen finden Sie unter SharePoint Add-Ins.Provider-hosted add-ins are one of the two major types of SharePoint Add-ins. For an overview of SharePoint Add-ins and the two different types, see SharePoint Add-ins.

Es folgt eine Zusammenfassung zu vom Anbieter gehosteten Add-Ins:Here's a summary of provider-hosted add-ins:

  • Sie enthalten Webanwendungen, Dienste oder Datenbanken, die extern über eine SharePoint-Farm oder ein SharePoint Online-Abonnement gehostet werden.They include a web application, service, or database that is hosted externally from the SharePoint farm or SharePoint Online subscription. Sie können auch SharePoint-Komponenten enthalten.They may also include SharePoint components. Sie können die externen Komponenten in einem beliebigen Webhostingstapel, einschließlich des LAMP-Stapels (Linux, Apache, MySQL und PHP) hosten.You can host the external components on any web-hosting stack, including the LAMP (Linux, Apache, MySQL, and PHP) stack.
  • Die benutzerdefinierte Geschäftslogik im Add-In muss entweder in den externen Komponenten oder in JavaScript auf benutzerdefinierten SharePoint-Seiten ausgeführt werden.The custom business logic in the add-in has to run on either the external components or in JavaScript on custom SharePoint pages.

In diesem Artikel führen Sie die folgenden Schritte aus:In this article, you'll complete the following steps:

  • Einrichten der EntwicklungsumgebungSet up your dev environment
  • Erstellen des Add-In-ProjektsCreate the add-in project
  • Programmieren des Add-InsCode your add-in

Einrichten der EntwicklungsumgebungSet up your dev environment

Es gibt zahlreiche verschiedene Möglichkeiten, eine Entwicklungsumgebung für SharePoint-Add-Ins einzurichten. In diesem Abschnitt wird die einfachste von ihnen beschrieben.There are many ways to set up a development environment for SharePoint Add-ins. This section explains the simplest way. Informationen zu Alternativen, z. B. Einrichten einer lokalen Umgebung, finden Sie unter Tools.For alternatives, such as setting up an "all on-premises" environment, see Tools.

Installieren der ToolsGet the tools

Als Referenz dienen frühere Versionen von Visual Studio oder andere Visual Studio-Dokumentation.Reference earlier versions of Visual Studio or other Visual Studio documentation.

Registrieren für ein Office 365-EntwicklerabonnementSign up for an Office 365 developer subscription

Hinweis

Möglicherweise haben Sie bereits Zugriff auf ein Office 365-Entwicklerabonnement:You might already have access to an Office 365 developer subscription:

So erhalten Sie einen Office 365-Plan:To get an Office 365 plan:

Öffnen der EntwicklerwebsiteOpen your developer site

Klicken Sie oben links auf der Seite auf Add-Ins erstellen, um Ihre Entwicklerwebsite zu öffnen.Select the Build Add-ins link in the upper-left corner of the page to open your developer site. Nun sollten Sie eine Website sehen, die wie die folgende Abbildung aussieht.You should see a site that looks like the one in the following figure. Dass die Liste Add-Ins im Test auf der Seite angezeigt wird, ist der Beleg dafür, dass die Website auf Basis der Vorlage für SharePoint-Entwicklerwebsites erstellt wurde.The Add-ins in Testing list on the page confirms that the website was made with the SharePoint Developer Site template. Falls stattdessen eine normale Teamwebsite angezeigt wird: Warten Sie einige Minuten, und starten Sie dann die Website neu.If you see a regular team site instead, wait a few minutes and then restart your site.

Hinweis

Notieren Sie die URL der Website. Diese wird verwendet, wenn Sie SharePoint-Add-In-Projekte in Visual Studio erstellen.Make a note of the site's URL; it's used when you create SharePoint Add-in projects in Visual Studio.

Die Startseite Ihrer Entwicklerwebsite mit der Liste der Add-Ins im TestYour developer site home page with the Add-ins in Testing list

Screenshot, auf dem die Entwicklerwebsite-Startseite angezeigt ist

Erstellen des Add-In-ProjektsCreate the add-in project

  1. Starten Sie Visual Studio mit der Option Als Administrator ausführen.Start Visual Studio by using the Run as administrator option.

  2. Klicken Sie in Visual Studio auf Datei > Neu > Neues Projekt.In Visual Studio, select File > New > New Project.

  3. Erweitern Sie im Dialogfeld Neues Projekt den Knoten Visual C#, dann den Knoten Office/SharePoint, und wählen Sie den Knoten Add-Ins > SharePoint-Add-In aus.In the New Project dialog box, expand the Visual C# node, expand the Office/SharePoint node, and then select Add-ins > SharePoint Add-in.

  4. Geben Sie dem Projekt den Namen SampleAddIn, und wählen Sie dann OK.Name the project SampleAddIn, and then select OK.

  5. Gehen Sie im Dialogfeld Einstellungen für das SharePoint-Add-In angeben folgendermaßen vor:In the Specify the SharePoint Add-in Settings dialog box, do the following:

    • Geben Sie die komplette URL der SharePoint-Website an, die Sie für das Debugging Ihres Add-Ins verwenden möchten.Provide the full URL of the SharePoint site that you want to use to debug your add-in. Gemeint ist die URL der Entwicklerwebsite.This is the URL of the developer site. Verwenden Sie HTTPS und nicht HTTP in der URL.Use HTTPS, not HTTP in the URL. An einem bestimmten Punkt während dieses Vorgangs oder kurz nachdem dieser Vorgang abgeschlossen wurde, werden Sie aufgefordert, sich bei dieser Website anzumelden.At some point during this procedure, or shortly after it completes, you will be prompted to sign in to this site. Der Zeitpunkt der Aufforderung ist unterschiedlich.The timing of the prompt varies. Verwenden Sie die Administratoranmeldeinformationen (in der Domäne *.onmicrosoft.com), die Sie bei der Anmeldung bei Ihrer Entwicklerseite erstellt haben, z. B. MyName@contoso.onmicrosoft.com.Use the administrator credentials (in the *.onmicrosoft.com domain) that you created when you signed up for your developer site; for example MyName@contoso.onmicrosoft.com.

    • Wählen Sie unter Wie soll Ihr Add-In für SharePoint gehostet werden die Option Von Anbieter gehostet aus.Under How do you want to host your SharePoint Add-in, select Provider-hosted.

    • Wählen Sie Weiter aus.Select Next.

  6. Wählen Sie auf der Seite Ziel-SharePoint-Version angeben die Option SharePoint Online und dann Weiter aus.On the Specify the target SharePoint version page, select SharePoint Online, and then select Next.

  7. Wählen Sie unter Welchen Webanwendungsprojekttyp möchten Sie erstellen?**** ASP.NET Webformular-Anwendung. Wählen Sie dann Weiter aus.Under Which type of web application project do you want to create?, select ASP.NET Web Forms Application, and then select Next.

  8. Wählen Sie unter Wie soll Ihr Add-In authentifiziert werden?**** Microsoft Azure-Zugriffssteuerungsdienst verwenden aus.Under How do you want your add-in to authenticate?, select Use Windows Azure Access Control Service.

  9. Wählen Sie im Assistenten Fertig stellen aus.In the wizard, select Finish.

    Ein Großteil der Konfiguration wird beim Öffnen der Lösung ausgeführt.Much of the configuration is done when the solution opens. In der Visual Studio-Projektmappe werden zwei Projekte erstellt, eines für die SharePoint-Add-In und das andere für die ASP.NET-Webanwendung.Two projects are created in the Visual Studio solution: one for the SharePoint Add-in and the other for the ASP.NET web application.

Codieren Ihres Add-InsCode your add-in

  1. Öffnen Sie die Datei AppManifest.xml. Geben Sie auf der Registerkarte Berechtigungen den Bereich der Websitesammlung und die Leseberechtigungsstufe an.Open the AppManifest.xml file. On the Permissions tab, specify the Site Collection scope and the Read permission level.

  2. Löschen Sie alle Markups innerhalb des <body>-Tags der Datei „Pages/Default.aspx“ Ihrer Webanwendung, und fügen Sie dann die folgenden HTML- und ASP.NET-Steuerelemente in <body> ein.Delete any markup inside the <body> tag of the Pages/Default.aspx file of your web application, and then add the following HTML and ASP.NET controls inside the <body>. In diesem Beispiel wird das UpdatePanel-Steuerelement verwendet, um ein teilweises Seitenrendering zu aktivieren.This sample uses the UpdatePanel control to enable partial page rendering.

     <form id="form1" runat="server">
       <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server"
                 EnablePartialRendering="true" />
         <asp:UpdatePanel ID="PopulateData" runat="server" UpdateMode="Conditional">
           <ContentTemplate>      
             <table border="1" cellpadding="10">
              <tr><th><asp:LinkButton ID="CSOM" runat="server" Text="Populate Data" 
                                    OnClick="CSOM_Click" /></th></tr>
              <tr><td>
    
             <h2>SharePoint Site</h2>
             <asp:Label runat="server" ID="WebTitleLabel"/>
    
             <h2>Current User:</h2>
             <asp:Label runat="server" ID="CurrentUserLabel" />
    
             <h2>Site Users</h2>
             <asp:ListView ID="UserList" runat="server">     
                 <ItemTemplate >
                   <asp:Label ID="UserItem" runat="server" 
                                     Text="<%# Container.DataItem.ToString()  %>">
                   </asp:Label><br />
                </ItemTemplate>
             </asp:ListView>
    
             <h2>Site Lists</h2>
                    <asp:ListView ID="ListList" runat="server">
                        <ItemTemplate >
                          <asp:Label ID="ListItem" runat="server" 
                                     Text="<%# Container.DataItem.ToString()  %>">
                         </asp:Label><br />
                       </ItemTemplate>
                   </asp:ListView>
                 </td>              
               </tr>
              </table>
            </ContentTemplate>
          </asp:UpdatePanel>
       </div>
     </form>
    
  3. Fügen Sie in der Datei „Default.aspx.cs“ der Webanwendung folgende Deklarationen hinzu.Add the following declarations to the Default.aspx.cs file of your web application.

       using Microsoft.SharePoint.Client;
       using Microsoft.IdentityModel.S2S.Tokens;
       using System.Net;
       using System.IO;
       using System.Xml;
    
  4. Fügen Sie in der Datei „Default.aspx.cs“ der Webanwendung folgende Variablen in der Page-Klasse hinzu.In the Default.aspx.cs file of your web application, add these variables inside the Page class.

      SharePointContextToken contextToken;
      string accessToken;
      Uri sharepointUrl;
      string siteName;
      string currentUser;
      List<string> listOfUsers = new List<string>();
      List<string> listOfLists = new List<string>();
    
  5. Fügen Sie die RetrieveWithCSOM-Methode in der Page-Klasse hinzu.Add the RetrieveWithCSOM method inside the Page class. In dieser Methode wird SharePoint CSOM verwendet, um Informationen zu Ihrer Website abzurufen und auf der Seite anzuzeigen.This method uses the SharePoint CSOM to retrieve information about your site and display it on the page.

        // This method retrieves information about the host web by using the CSOM.
      private void RetrieveWithCSOM(string accessToken)
      {
    
          if (IsPostBack)
          {
              sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
          }            
    
          ClientContext clientContext =
                          TokenHelper.GetClientContextWithAccessToken(
                              sharepointUrl.ToString(), accessToken);
    
          // Load the properties for the web object.
          Web web = clientContext.Web;
          clientContext.Load(web);
          clientContext.ExecuteQuery();
    
          // Get the site name.
          siteName = web.Title;
    
          // Get the current user.
          clientContext.Load(web.CurrentUser);
          clientContext.ExecuteQuery();
          currentUser = clientContext.Web.CurrentUser.LoginName;
    
          // Load the lists from the Web object.
          ListCollection lists = web.Lists;
          clientContext.Load<ListCollection>(lists);
          clientContext.ExecuteQuery();
    
          // Load the current users from the Web object.
          UserCollection users = web.SiteUsers;
          clientContext.Load<UserCollection>(users);
          clientContext.ExecuteQuery();
    
          foreach (User siteUser in users)
          {
              listOfUsers.Add(siteUser.LoginName);
          }
    
          foreach (List list in lists)
          {
              listOfLists.Add(list.Title);
          }
      }
    
  6. Fügen Sie die CSOM_Click-Methode in der Page-Klasse hinzu.Add the CSOM_Click method inside the Page class. Diese Methode löst das Ereignis aus, das auftritt, wenn der Benutzer auf den Link Daten auffüllen klickt.This method triggers the event that occurs when the user clicks the Populate Data link.

      protected void CSOM_Click(object sender, EventArgs e)
    {
        string commandAccessToken = ((LinkButton)sender).CommandArgument;
        RetrieveWithCSOM(commandAccessToken);
        WebTitleLabel.Text = siteName;
        CurrentUserLabel.Text = currentUser;
        UserList.DataSource = listOfUsers;
        UserList.DataBind();
        ListList.DataSource = listOfLists;
        ListList.DataBind();    
     }
    
  7. Ersetzen Sie zunächst die vorhandene Page_Load-Methode durch diese.Replace the existing Page_Load method with this one. Die Page_Load-Methode verwendet Methoden in der Datei „TokenHelper.cs", um den Kontext aus dem Request-Objekt abzurufen und ein Zugriffstoken von Microsoft Azure Access Control Service (ACS) anzufordern.The Page_Load method uses methods in the TokenHelper.cs file to retrieve the context from the Request object and get an access token from Microsoft Azure Access Control Service (ACS).

      // The Page_load method fetches the context token and the access token. 
    // The access token is used by all of the data retrieval methods.
    protected void Page_Load(object sender, EventArgs e)
    {
         string contextTokenString = TokenHelper.GetContextTokenFromRequest(Request);
    
        if (contextTokenString != null)
        {
            contextToken =
                TokenHelper.ReadAndValidateContextToken(contextTokenString, Request.Url.Authority);
    
            sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
            accessToken =
                        TokenHelper.GetAccessToken(contextToken, sharepointUrl.Authority)
                        .AccessToken;
    
             // For simplicity, this sample assigns the access token to the button's CommandArgument property. 
             // In a production add-in, this would not be secure. The access token should be cached on the server-side.
            CSOM.CommandArgument = accessToken;
        }
        else if (!IsPostBack)
        {
            Response.Write("Could not find a context token.");
            return;
        }
    }
    
  8. Die Datei „Default.aspx.cs“ sollte wie folgt aussehen, wenn Sie fertig sind.The Default.aspx.cs file should look like this when you're finished.

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
    
      using Microsoft.SharePoint.Client;
      using Microsoft.IdentityModel.S2S.Tokens;
      using System.Net;
      using System.IO;
      using System.Xml;
    
      namespace SampleAddInWeb
      {
          public partial class Default : System.Web.UI.Page
          {
              SharePointContextToken contextToken;
              string accessToken;
              Uri sharepointUrl;
              string siteName;
              string currentUser;
              List<string> listOfUsers = new List<string>();
              List<string> listOfLists = new List<string>();
    
              protected void Page_PreInit(object sender, EventArgs e)
              {
                  Uri redirectUrl;
                  switch (SharePointContextProvider.CheckRedirectionStatus(Context, out redirectUrl))
                  {
                      case RedirectionStatus.Ok:
                          return;
                      case RedirectionStatus.ShouldRedirect:
                          Response.Redirect(redirectUrl.AbsoluteUri, endResponse: true);
                          break;
                      case RedirectionStatus.CanNotRedirect:
                          Response.Write("An error occurred while processing your request.");
                          Response.End();
                          break;
                  }
              }
    
              protected void CSOM_Click(object sender, EventArgs e)
              {
                  string commandAccessToken = ((LinkButton)sender).CommandArgument;
                  RetrieveWithCSOM(commandAccessToken);
                  WebTitleLabel.Text = siteName;
                  CurrentUserLabel.Text = currentUser;
                  UserList.DataSource = listOfUsers;
                  UserList.DataBind();
                  ListList.DataSource = listOfLists;
                  ListList.DataBind();
              }
    
              // This method retrieves information about the host web by using the CSOM.
              private void RetrieveWithCSOM(string accessToken)
              {
    
                  if (IsPostBack)
                  {
                      sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
                  }
    
                  ClientContext clientContext =
                          TokenHelper.GetClientContextWithAccessToken(
                              sharepointUrl.ToString(), accessToken);
    
                  // Load the properties for the web object.
                  Web web = clientContext.Web;
                  clientContext.Load(web);
                  clientContext.ExecuteQuery();
    
                  // Get the site name.
                  siteName = web.Title;
    
                  // Get the current user.
                  clientContext.Load(web.CurrentUser);
                  clientContext.ExecuteQuery();
                  currentUser = clientContext.Web.CurrentUser.LoginName;
    
                  // Load the lists from the Web object.
                  ListCollection lists = web.Lists;
                  clientContext.Load<ListCollection>(lists);
                  clientContext.ExecuteQuery();
    
                  // Load the current users from the Web object.
                  UserCollection users = web.SiteUsers;
                  clientContext.Load<UserCollection>(users);
                  clientContext.ExecuteQuery();
    
                  foreach (User siteUser in users)
                  {
                      listOfUsers.Add(siteUser.LoginName);
                  }
    
                  foreach (List list in lists)
                  {
                      listOfLists.Add(list.Title);
                  }
              }
    
              protected void Page_Load(object sender, EventArgs e)
              {
                  string contextTokenString = 
                       TokenHelper.GetContextTokenFromRequest(Request);
    
                  if (contextTokenString != null)
                  {
                      contextToken =
                          TokenHelper.ReadAndValidateContextToken(contextTokenString, Request.Url.Authority);
    
                      sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
                      accessToken =
                          TokenHelper.GetAccessToken(contextToken, sharepointUrl.Authority)
                                     .AccessToken;
                      CSOM.CommandArgument = accessToken;
                  }
                  else if (!IsPostBack)
                  {
                      Response.Write("Could not find a context token.");
                      return;
                  }
              }
          }
      }
    
    
  9. Drücken Sie auf die F5-TASTE, um Ihr Add-In bereitzustellen und auszuführen.Use the F5 key to deploy and run your add-in. Wenn ein Dialogfeld Sicherheitshinweis angezeigt wird, das Sie danach fragt, ob Sie dem selbstsignierten Localhost-Zertifikat vertrauen, klicken Sie auf Ja.If you see a Security Alert window that asks you to trust the self-signed Localhost certificate, select Yes.

  10. Wählen Sie Vertrauen auf der Zustimmungsseite, um die Berechtigungen für das Add-In zu erteilen.Select Trust It on the consent page to grant permissions to the add-in. Visual Studio installiert die Webanwendung in IIS Express, installiert dann das Add-In in Ihrer Test-SharePoint-Website und startet diese.Visual Studio will install the web application to IIS Express and then install the add-in to your test SharePoint site and launch it. Es wird eine Seite mit der im folgenden Screenshot gezeigten Tabelle angezeigt.You'll see a page that has the table shown in the following screen shot. Wenn Sie zusammenfassende Informationen zu Ihrer SharePoint-Website anzeigen möchten, wählen Sie Daten auffüllen.To see summary information about your SharePoint site, select Populate Data.

Startseite der selbst gehosteten Basis-App

Nächste SchritteNext steps

Um Ihre Add-Ins zu erstellen, führen Sie die folgenden Schritte in der folgenden Reihenfolge aus:To create your add-ins, walk through the following steps in this order:

  1. Übertragen des SharePoint-Aussehens und -Verhaltens auf Ihr vom Anbieter gehostetes Add-InGive your provider-hosted add-in the SharePoint look-and-feel
  2. Einfügen einer benutzerdefinierten Schaltfläche in das vom Anbieter gehostete Add-InInclude a custom button in the provider-hosted add-in
  3. Schnelle Übersicht über das SharePoint-ObjektmodellGet a quick overview of the SharePoint object model
  4. Hinzufügen von SharePoint-Schreibvorgängen zum vom Anbieter gehosteten Add-InAdd SharePoint write operations to the provider-hosted add-in
  5. Einfügen eines Add-In-Webparts in das vom Anbieter gehostete Add-InInclude an add-in part in the provider-hosted add-in
  6. Verarbeiten von Add-In-Ereignissen im vom Anbieter gehosteten Add-InHandle add-in events in the provider-hosted add-in
  7. Hinzufügen der Logik für die erste Ausführung zum vom Anbieter gehosteten Add-InAdd first-run logic to the provider-hosted add-in
  8. Programmgesteuertes Bereitstellen einer benutzerdefinierten Schaltfläche in anbietergehosteten Add-InsProgrammatically deploy a custom button in the provider-hosted add-in
  9. Verarbeiten von Listenelementereignissen in anbietergehosteten Add-InsHandle list item events in the provider-hosted add-in