Erstellen einer benutzerdefinierten Proxyseite für die domänenübergreifende Bibliothek in SharePoint

Artikel
09/15/2021

Beim Erstellen von SharePoint-Add-Ins müssen in der Regel Daten von verschiedenen Quellen eingebunden werden. Aus Sicherheitsgründen gibt es jedoch Sperrmechanismen, die eine gleichzeitige Kommunikation mit mehr als einer Domäne verhindern.

Über die domänenübergreifende Bibliothek können Sie auf Daten in Ihrem Remote-Add-In zugreifen, wenn Sie eine benutzerdefinierte Proxyseite bereitstellen, die in der Infrastruktur des Remote-Add-Ins gehostet wird. Als Entwickler sind Sie für die Implementierung der benutzerdefinierten Proxyseite verantwortlich und müssen für die benutzerdefinierte Logik sorgen, also auch den Authentifizierungsmechanismus für das Remote-Add-In. Verwenden Sie die domänenübergreifende Bibliothek mit einer benutzerdefinierten Proxyseite, wenn die Kommunikation auf Clientebene erfolgen soll.

Voraussetzungen für die Verwendung der Beispiele in diesem Artikel

Sie benötigen eine Entwicklungsumgebung, wie unter Erste Schritte beim Erstellen von von einem Anbieter gehosteten SharePoint-Add-Ins erläutert.

Kernkonzepte, die Ihnen vor der Verwendung einer benutzerdefinierten Proxyseite mit SharePoint-Add-Ins bekannt sein sollten

In der folgenden Tabelle werden einige wichtige Artikel aufgelistet, in denen die relevanten Konzepte für ein domänenübergreifendes Szenario für SharePoint-Add-Ins erläutert werden.

Titel des Artikels	Beschreibung
SharePoint-Add-Ins	Hier finden Sie Informationen über das neue Add-In-Modell in SharePoint, das es Ihnen ermöglicht, Add-Ins als kompakte, einfach zu verwendende Lösungen für Endbenutzer zu erstellen.
Sicherer Datenzugriff und Clientobjektmodelle für SharePoint-Add-Ins	In diesem Artikel erhalten Sie Informationen über Zugriffsoptionen in SharePoint-Add-Ins. Zudem dient er als Leitfaden für Alternativen auf oberer Ebene, aus denen Sie bei der Arbeit mit Daten in Ihrem Add-In auswählen müssen.
Hostwebs, Add-In-Webs und SharePoint-Komponenten in SharePoint	In diesem Artikel erfahren Sie, welche Unterschiede zwischen Hostwebsites und Add-In-Websites bestehen. Sie erfahren zudem, welche SharePoint-Komponenten in eine SharePoint-Add-In aufgenommen werden können, welche Komponenten für die Hostwebsite und welche für die Add-In-Website bereitgestellt werden und wie die Add-In-Website in einer isolierten Domäne bereitgestellt wird.
Clientseitige domänenübergreifende Sicherheit	In diesem Artikel werden domänenübergreifende Bedrohungen und Anwendungsfälle sowie Sicherheitsprinzipien für ursprungsübergreifende Anforderungen beschrieben und die Risiken für Entwickler bewertet, die den domänenübergreifenden Zugriff von Webanwendungen, die im Browser ausgeführt werden, verbessern möchten.

Codebeispiel: Zugreifen auf Remotedaten unter Verwendung einer benutzerdefinierten Proxyseite für die domänenübergreifende Bibliothek

Führen Sie die folgenden Schritte aus, um Daten vom Remotedienst zu lesen:

Erstellen Sie ein SharePoint-Add-In-Projekt.
Ändern Sie das Add-In-Manifest, um die Kommunikation vom Remote-Add-In zu erlauben.
Erstellen Sie die benutzerdefinierte Proxyseite und eine Inhaltsseite im Webprojekt.
Erstellen Sie eine Seite, die die domänenübergreifende Bibliothek im SharePoint-Add-In-Projekt verwendet.

So erstellen Sie das SharePoint-Add-In-Projekt

Open Visual Studio as administrator. (To do this, right-click the Visual Studio icon on the Start menu, and select Run as administrator.)
Erstellen Sie das vom Anbieter gehostete SharePoint-Add-In wie unter Erste Schritte beim Erstellen von von einem Anbieter gehosteten SharePoint-Add-Ins erläutert, und nennen Sie es ProxyPageApp.

So bearbeiten Sie die App-Manifestdatei

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei AppManifest.xml, und wählen Sie Code anzeigen aus.

Ersetzen Sie das gesamte AppPrincipal-Element durch Folgendes.

<AppPrincipal>
    <Internal AllowedRemoteHostUrl="~remoteAppUrl"/>
</AppPrincipal>

Hinweis

The AllowedRemoteHostUrl attribute is used to specify the remote domain. The ~remoteAppUrl resolves to the remote add-in URL. For more information about tokens, see Explore the app manifest structure and the package of a SharePoint Add-in.

So erstellen Sie eine benutzerdefinierte Proxyseite

After the Visual Studio solution has been created, right-click the web application project (not the SharePoint Add-in project), and add a new Web Form by selecting Add > New Item > Web > Web Form. Name the form Proxy.aspx.

In the Proxy.aspx file, replace the entire HTML element and its children with the following HTML code. Leave all the markup above the HTML element as it is. The HTML code contains markup and JavaScript that performs the following tasks:

Es stellt einen Platzhalter für die Datei JavaScript der domänenübergreifenden Bibliothek bereit.
Es extrahiert die URL der Add-In-Website aus dem Verweiser.
Es lädt die JavaScript-Datei der domänenübergreifenden Bibliothek dynamisch in den Platzhalter.
Es stellt Einstellungen für das RequestExecutorMessageProcessor-Objekt bereit.
Es initialisiert das RequestExecutorMessageProcessor-Objekt.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <title>Custom Proxy Host Page</title>
    <script 
        src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" 
        type="text/javascript">
    </script>
    <script 
        type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
    </script>

    <!-- Script to load the cross-domain library js file -->
    <script type="text/javascript">
        var hostweburl;

        $(document).ready(function(){
            //Get the URI decoded host web URL.
            hostweburl =
                decodeURIComponent(
                    getQueryStringParameter("SPHostUrl")
            );

            // The cross-domain js file is in a URL in the form:
            // host_web_url/_layouts/15/SP.RequestExecutor.js
            var scriptbase = hostweburl + "/_layouts/15/";

            // Load the js file 
            $.getScript(scriptbase + "SP.RequestExecutor.js", initCustomProxy);
        });

        //Function to initialize the custom proxy page
        //  must set the appropriate settings and implement
        //  proper authentication mechanism
        function initCustomProxy() {
            var settings =
            {
                originAuthorityValidator: function (messageOriginAuthority) {
                    // This page must implement the authentication for the
                    //   remote add-in.
                    // You should validate if messageOriginAuthority is
                    //  an approved domain to receive calls from.
                    return true;
                }
            };
            SP.RequestExecutorMessageProcessor.init(settings);
        }

        // Function to retrieve a query string value.
        // For production purposes you may want to use
        //  a library to handle the query string.
        function getQueryStringParameter(paramToRetrieve) {
            var params =
                document.URL.split("?")[1].split("&amp;");
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
            }
        }
    </script>
</head>
<body>

</body>
</html>

Wichtig

In einem Produktions-SharePoint-Add-In müssen Sie die Autorisierungslogik bereitstellen und den entsprechenden Wert im originAuthorityValidator-Objekt der Einstellungen zurückgeben.

So erstellen Sie eine Inhaltsseite

Right-click the web application project in Solution Explorer, and add a new Web Form by selecting Add > New Item > Web > Web Form. Name the form Content.aspx.
Kopieren Sie den folgenden Code, und fügen Sie ihn in die Page_Load-Methode in der Code-Behind-Datei ein. Der Code führt die folgenden Aufgaben aus:
- Legt die Ausgabe content-type auf text/plain fest.
- Schreibt den Inhalt in den Ausgabepuffer
- Beendet die Verbindung
```
string content;
content = "Just some text.";
Response.ContentType="text/plain";
Response.Write(content);
Response.End();
```

So erstellen Sie eine SharePoint-Webseite, die die domänenübergreifende Bibliothek verwendet

Klicken Sie mit der rechten Maustaste auf das SharePoint-Add-In-Projekt, und wählen Sie Hinzufügen > Neues Element > Office/SharePoint > Modul aus.
Geben Sie dem Modul den Namen Pages, und wählen Sie dann Hinzufügen aus.
Klicken Sie mit der rechten Maustaste auf den Ordner „Pages“, und wählen Sie Hinzufügen > Neues Elemen > Office/SharePoint > Seite aus.
Geben Sie der Seite den Namen Home.aspx, und wählen Sie dann Hinzufügen aus.
Öffnen Sie die Seite „Home.aspx“, falls sie nicht automatisch geöffnet wird.

Kopieren Sie den folgenden Code, und fügen Sie ihn in das PlaceHolderMain-Inhaltstag ein.

<!-- The page dynamically loads the cross-domain library's
    js file, rescript acts as the placeholder. -->
<script 
    type="text/javascript"
    id="rescript"
    src="../_layouts/15/SP.RequestExecutor.js">
</script>
    Data from the remote domain: <span id="TextData"></span>

    <!-- Main script to retrieve the host web's title -->
    <script type="text/javascript">
    (function () {
        var executor;
        var hostweburl;
        var remotedomain;

        remotedomain = "<your_remote_add-in_domain>";

        //Get the URI decoded host web URL.
        hostweburl =
            decodeURIComponent(
                getQueryStringParameter("SPHostUrl")
        );

        // Initialize the RequestExecutor with the custom proxy URL.
        executor = new SP.RequestExecutor(remotedomain);
        executor.iFrameSourceUrl = "Proxy.aspx?SPHostUrl=" + hostweburl;

        // Issue the call against the remote endpoint.
        // The response formats the data in plain text.
        // The functions successHandler and errorHandler attend the
        //      sucess and error events respectively.
        executor.executeAsync(
            {
                url:
                    remotedomain + "Content.aspx",
                method: "GET",
                headers: { "Accept": "text/plain" },
                success: successHandler,
                error: errorHandler
            }
        );
    })();

    // Function to handle the success event.
    // Prints the data to the placeholder.
    function successHandler(data) {
        document.getElementById("TextData").innerText =
            data.body;
    }

    // Function to handle the error event.
    // Prints the error message to the page.
    function errorHandler(data, errorCode, errorMessage) {
        document.getElementById("TextData").innerText =
            "Could not complete cross-domain call: " + errorMessage;
    }

    // Function to retrieve a query string value.
    // For production purposes you may want to use
    //  a library to handle the query string.
    function getQueryStringParameter(paramToRetrieve) {
        var params =
            document.URL.split("?")[1].split("&amp;");
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve)
                return singleParam[1];
        }
    }
    </script>

In the preceding code that you pasted, find the line remotedomain = "<your_remote_add-in_domain>";, and replace the placeholder <your_remote_add-in_domain> with the "localhost" URL that your web application uses when you are running the add-in with F5 in Visual Studio. To find this value, select the web application project in Solution Explorer. The URL property is in the Properties pane. Use the entire value, including the protocol, the port, and the closing slash; for example http://localhost:45072.
Speichern und schließen Sie die Datei.
Öffnen Sie die Datei „appmanifest.xml", und legen Sie den Wert Startseite auf ProxyPageApp/Pages/Home.aspx fest.

So erstellen Sie die Lösung und führen Sie sie aus

Stellen Sie sicher, dass das "SharePoint-Add-In"-Projekt als Startprojekt festgelegt ist.
Wählen Sie die F5-Taste.

Hinweis

Wenn Sie F5 wählen, erstellt Visual Studio die Lösung, stellt das Add-In bereit und öffnet die Berechtigungsseite für das Add-In.
Wählen Sie die Schaltfläche Vertrauen.

The Home page opens and it should look like the following. It may take a few seconds for the phrase "Just some text" to appear because it is being fetched from the remote domain's Content.aspx page.

Problembehandlung für die Lösung

Problem	Lösung
Der Browser wird nicht geöffnet, nachdem Sie F5 gedrückt haben.	Legen Sie das SharePoint-Add-In-Projekt als Startprojekt fest.
Unbehandelte Ausnahme SP ist undefiniert.	Stellen Sie sicher, dass Sie in einem Browserfenster auf die Datei „SP.RequestExecutor.js“ zugreifen können.