Imágenes de dominios en complementos de SharePoint proporcionados por el servidor
Use imágenes entre dominios en complementos hospedados por el proveedor.
Se aplica a: SharePoint 2013 | Complementos de SharePoint | SharePoint Online
Es posible que desee mostrar imágenes de un sitio de SharePoint en los complementos hospedados por el proveedor. Dado que los complementos hospedados por el proveedor se ejecutan en una web remota, los dominios para el complemento hospedado por el proveedor y el sitio de SharePoint son diferentes. Por ejemplo, el complemento podría ejecutarse en Microsoft Azure y está intentando mostrar una imagen de Office 365. Dado que el complemento hospedado por el proveedor cruza dominios para acceder a la imagen, SharePoint requiere autorización de usuario antes de que el complemento hospedado por el proveedor muestre la imagen.
El ejemplo de código Core.CrossDomainImages muestra cómo un complemento hospedado por el proveedor puede usar un token de acceso de SharePoint y un servicio REST para recuperar imágenes de SharePoint. El servicio REST devuelve una cadena codificada en Base64, que se usa para mostrar la imagen en el explorador. Use la solución de este ejemplo para mostrar imágenes almacenadas en SharePoint en complementos hospedados por el proveedor mediante código del lado servidor o del lado cliente.
Nota:
Dado que el ejemplo usa un punto de conexión REST, puede usar código del lado servidor o del lado cliente para recuperar la imagen.
Antes de empezar
Para empezar, descargue el complemento de ejemplo Core.CrossDomainImages desde el proyecto de patrones y prácticas para desarrolladores de Office 365 en GitHub.
Uso del ejemplo de código Core.CrossDomainImages
Al ejecutar este ejemplo, Default.aspx intenta cargar lo siguiente:
Imagen 1, mediante la dirección URL absoluta.
Imagen 2, mediante una llamada del lado servidor a un punto de conexión REST que devuelve una cadena codificada en Base64.
Imagen 3, mediante una llamada del lado cliente a un punto de conexión REST que devuelve una cadena codificada en Base64.
Nota:
La imagen 1 no se representa porque el complemento cruza dominios para llegar a la imagen en SharePoint. Observe que la dirección URL del complemento hospedado por el proveedor se ejecuta en localhost. Abra el menú contextual (haga clic con el botón derecho) en Imagen 1 y, a continuación, elija Propiedades. Observe que la dirección (DIRECCIÓN URL) está intentando recuperar la imagen de la web del complemento, no localhost. Dado que el complemento hospedado por el proveedor cruza dominios para llegar a la web del complemento, se requiere autenticación para acceder a la imagen. Compruebe que el acceso a la dirección URL de la imagen 1 directamente, en lugar de la llamada entre dominios en el complemento hospedado por el proveedor, se resuelve sin ningún error copiando y pegando la dirección (URL) en una nueva ventana del explorador. Observe que la imagen 1 se muestra sin ningún error. Compare el origen de la imagen 1 con el origen de la imagen 2. Observe que la dirección (URL) apunta a una cadena codificada en Base64.
Cuando se carga Default.aspx, Page_Load se ejecuta y hace lo siguiente:
Establece Image1.ImageUrl en la ruta de acceso absoluta de la imagen.
Crea una instancia de ImgService. ImgService es un punto de conexión REST que se ejecuta en el mismo dominio que el complemento hospedado por el proveedor.
Establece Image2.ImageUrl en la cadena codificada en Base64 que devuelve ImgService.GetImage . El token de acceso, el sitio, la carpeta y el nombre de archivo se pasan como parámetros a ImgService.GetImage.
Nota:
El código de este artículo se proporciona tal cual, sin garantía de ningún tipo, expresa o implícita, incluidas las garantías implícitas de aptitud para un propósito particular, comerciabilidad o ausencia de infracción.
protected void Page_Load(object sender, EventArgs e)
{
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPAppWeb())
{
// Set the access token in a hidden field for client-side code to use.
hdnAccessToken.Value = spContext.UserAccessTokenForSPAppWeb;
// Set the URLs to the images.
Image1.ImageUrl = spContext.SPAppWebUrl + "AppImages/O365.png";
Services.ImgService svc = new Services.ImgService();
Image2.ImageUrl = svc.GetImage(spContext.UserAccessTokenForSPAppWeb, spContext.SPAppWebUrl.ToString(), "AppImages", "O365.png");
}
}
GetImage hace lo siguiente:
Usa url para almacenar el URI del punto de conexión REST GetFolderByServerRelativeUrl, que se usará para recuperar la imagen de SharePoint. Puede obtener más información en Referencia de la API REST de archivos y carpetas.
Crea una instancia de un objeto HttpWebRequest mediante la dirección URL .
Agrega un encabezado Authorization al objeto HttpWebRequest que contiene el token de acceso.
Una vez realizada la llamada GET al URI del punto de conexión, la secuencia devuelta es una cadena codificada en Base64. La cadena devuelta se establece en el atributo src de la imagen.
public string GetImage(string accessToken, string site, string folder, string file)
{
// Create the HttpWebRequest to call the REST endpoint.
string url = String.Format("{0}_api/web/GetFolderByServerRelativeUrl('{1}')/Files('{2}')/$value", site, folder, file);
HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
request.Headers.Add("Authorization", "Bearer" + " " + accessToken);
using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
{
using (var sourceStream = response.GetResponseStream())
{
using (var newStream = new MemoryStream())
{
sourceSteam.CopyTo(newStream);
byte[] bytes = newStream.ToArray();
return "data:image/png;base64, " + Convert.ToBase64String(bytes);
}
}
}
}
Una vez Page_Load finaliza, Default.aspx ejecuta el código del lado cliente en Default.aspx, que carga la imagen 3. El código del lado cliente llama a GetImage mediante jQuery Ajax. Cuando GetImage devuelve correctamente la cadena codificada en Base64, el atributo src de Image3 se establece en la cadena devuelta.
...
$.ajax({
url: '../Services/ImgService.svc/GetImage?accessToken=' + $('#hdnAccessToken').val() + '&site=' + encodeURIComponent(appWebUrl + '/') + '&folder=AppImages&file=O365.png',
dataType: 'json',
success: function (data) {
$('#Image3').attr('src', data.d);
},
error: function (err) {
alert('error occurred');
}
});
...