Crear una página de proxy personalizada para la biblioteca entre dominios en SharePoint

Artículo
04/08/2023

Normalmente, al compilar Complementos de SharePoint, se deben incorporar datos de diversos orígenes. No obstante, por motivos de seguridad, existen mecanismos de bloqueo que evitan las comunicaciones con más de un dominio a la vez.

Puede usar la biblioteca entre dominios para obtener acceso a los datos del complemento remoto, si proporciona una página de proxy personalizada que se hospede en la infraestructura de complementos remotos. En su condición de desarrollador, su responsabilidad es implementar la página de proxy personalizada y ocuparse de la lógica personalizada como, por ejemplo, el mecanismo de autenticación para el complemento remoto. Use la biblioteca entre dominios con una página de proxy personalizada si desea que la comunicación se establezca en el nivel de cliente.

Requisitos previos para usar los ejemplos de este artículo

Necesita un entorno de desarrollo, tal y como se explica en Introducción a la creación de complementos de SharePoint hospedados por el proveedor.

Conceptos básicos que debe conocer antes de usar una página de proxy personalizada con complementos de SharePoint

En la tabla siguiente se muestran algunos artículos útiles que le permitirán comprender los conceptos propios de un escenario entre dominios de complementos de SharePoint.

Título del artículo	Descripción
Complementos de SharePoint	Obtenga información sobre el nuevo modelo de complementos de SharePoint, que permite crear complementos (pequeñas soluciones fáciles de usar para usuarios finales).
Acceso a datos seguro y modelos de objetos de cliente para complementos de SharePoint	Obtenga información sobre las opciones de acceso a datos en los Complementos de SharePoint. En este tema se orienta sobre las alternativas de alto nivel que se pueden elegir cuando se trabaja con datos en el complemento.
Hospedar webs, webs de complemento y componentes de SharePoint en SharePoint	Aprenda cuál es la diferencia entre una web de host y una web de complemento. Descubra qué componentes de SharePoint se pueden incluir en una Complemento de SharePoint, qué componentes se implementan en la web de host, qué componentes se implementan en la web de complemento y cómo se implementa la web de complemento en un dominio aislado.
Seguridad entre dominios del lado cliente	Explore las amenazas entre dominios, use casos y principios de seguridad para efectuar solicitudes entre orígenes y sopese los riesgos que encaran los desarrolladores que quieren mejorar el acceso entre dominios desde aplicaciones web que se ejecutan en el explorador.

Ejemplo de código: acceso a los datos remotos mediante una página proxy personalizada para la biblioteca entre dominios

Para leer datos desde el servicio remoto, siga este procedimiento:

Crear un proyecto de Complemento de SharePoint.
Modificar el manifiesto del complemento para permitir la comunicación desde el complemento remoto.
Crear la página proxy personalizada y una página de contenido en el proyecto web.
Crear una página que use la biblioteca entre dominios en el proyecto de la Complemento de SharePoint.

Para crear el proyecto de complemento de SharePoint

Abra Visual Studio como administrador. (Para ello, haga clic con el botón derecho en el icono de Visual Studio del menú Inicio y seleccione Ejecutar como administrador).
Cree el complemento de SharePoint hospedado por el proveedor, tal y como se explica en Introducción a la creación de complementos de SharePoint hospedados por el proveedor, y asígnele el nombre ProxyPageApp.

Para editar el archivo de manifiesto del complemento

En el Explorador de soluciones, haga clic con el botón derecho en el archivo AppManifest.xml y seleccione Ver código.

Reemplace todo el elemento AppPrincipal por lo siguiente.

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

Nota:

El atributo AllowedRemoteHostUrl se usa para especificar el dominio remoto. ~remoteAppUrl resuelve la dirección URL del complemento remoto. Para obtener más información sobre los tokens, vea Explorar la estructura del manifiesto de la aplicación y el paquete de un complemento de SharePoint.

Para crear una página de proxy personalizada

Una vez creada la solución de Visual Studio, haga clic con el botón derecho en el proyecto de aplicación web (no en el proyecto de complemento de SharePoint) y agregue un nuevo formulario web seleccionando Agregar> nuevo formularioweb>de elemento>. Dé al formulario el nombre Proxy.aspx.

En el archivo Proxy.aspx, reemplace todo el elemento HTML y sus elementos secundarios por el siguiente código HTML. Deje todo el marcado encima del elemento HTML tal y como está. El código HTML contiene marcado y JavaScript que realiza las siguientes tareas:

Proporcionará un marcador de posición para el archivo JavaScript de la biblioteca entre dominios.
Extraerá del origen de referencia la dirección URL de la web de complemento.
Carga de forma dinámica el archivo de JavaScript de la biblioteca entre dominios en el marcador de posición.
Proporcionará una configuración para el objeto RequestExecutorMessageProcessor.
Inicializará el objeto RequestExecutorMessageProcessor.

<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>

Importante

En un complemento de SharePoint de producción, debe proporcionarse la lógica de autorización y se devuelve el valor correspondiente en la configuración del objeto originAuthorityValidator.

Para crear una página de contenido

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.
Copie el código siguiente y péguelo en el método Page_Load en el archivo de código subyacente. El código realiza las siguientes tareas:
- Configura el content-type de salida en text/plain.
- Escribe el contenido en el búfer de salida.
- Finaliza la conexión.
```
string content;
content = "Just some text.";
Response.ContentType="text/plain";
Response.Write(content);
Response.End();
```

Para crear una página web de SharePoint que use una biblioteca entre dominios

Haga clic con el botón derecho en el proyecto del complemento de SharePoint y seleccione Agregar>Nuevo elemento>Office/SharePoint>Módulo.
Asigne al módulo el nombre Páginas y luego seleccione Agregar.
Haga clic con el botón derecho en la carpeta Páginas y seleccione Agregar>Nuevo elemento>Office/SharePoint>Página.
Asigne a la página el nombre Home.aspx y seleccione Agregar.
Abra la página Home.aspx (si no se abre automáticamente).

Copie el código siguiente y péguelo en la etiqueta de contenido PlaceHolderMain.

<!-- 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>

En el código anterior que pegó, busque la línea remotedomain = "<your_remote_add-in_domain>";y reemplace el marcador de posición <your_remote_add-in_domain> por la dirección URL "localhost" que usa la aplicación web al ejecutar el complemento con F5 en 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.
Guarde y cierre el archivo.
Abra el archivo appmanifest.xml y establezca el valor de Página de inicio a ProxyPageApp/Pages/Home.aspx.

Para crear y ejecutar la solución

Compruebe que el proyecto del Complemento de SharePoint esté configurado como proyecto de inicio.
Seleccione la tecla F5.

Nota:

Al seleccionar F5, Visual Studio compila la solución, implementa el complemento y abre la página de permisos del complemento.
Seleccione el botón Confiar.

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.

Solución de problemas

Problema	Solución
Visual Studio no abre el explorador después de seleccionar la tecla F5.	Establezca el proyecto de complemento de SharePoint como proyecto de inicio.
Excepción no controlada no se ha definido SP.	Asegúrese de que tiene acceso al archivo SP.RequestExecutor.js en una ventana del explorador.

Compartir a través de