Imagens entre domínios em suplementos do SharePoint hospedados pelo provedor
Use imagens entre domínios em suplementos hospedados pelo provedor.
Aplicável a: suplementos do SharePoint | SharePoint 2013 | SharePoint Online
Talvez você queira exibir imagens de um site do SharePoint em seus suplementos hospedados pelo provedor. Como os suplementos hospedados pelo provedor são executados em uma Web remota, os domínios do suplemento hospedado pelo provedor e do site do SharePoint são diferentes. Por exemplo, seu suplemento pode ser executado no Microsoft Azure e você está tentando mostrar uma imagem de Office 365. Como o suplemento hospedado pelo provedor cruza domínios para acessar a imagem, o SharePoint requer autorização do usuário antes que o suplemento hospedado pelo provedor mostre a imagem.
O exemplo de código Core.CrossDomainImages mostra como um suplemento hospedado pelo provedor pode usar um token de acesso do SharePoint e um serviço REST para recuperar imagens do SharePoint. O serviço REST retorna uma cadeia de caracteres codificada base64, que é usada para mostrar a imagem no navegador. Use a solução neste exemplo para mostrar imagens armazenadas no SharePoint em suplementos hospedados pelo provedor usando o código do lado do servidor ou do lado do cliente.
Observação
Como o exemplo usa um ponto de extremidade REST, você pode usar o código do lado do servidor ou do lado do cliente para recuperar sua imagem.
Antes de começar
Para começar, baixe o suplemento de exemplo Core.CrossDomainImages do projeto de padrões e práticas do desenvolvedor Office 365 no GitHub.
Usando o exemplo de código Core.CrossDomainImages
Ao executar este exemplo, Default.aspx tenta carregar o seguinte:
Imagem 1, usando a URL absoluta.
Imagem 2, usando uma chamada do lado do servidor para um ponto de extremidade REST que retorna uma cadeia de caracteres codificada pelo Base64.
Imagem 3, usando uma chamada do lado do cliente para um ponto de extremidade REST que retorna uma cadeia de caracteres codificada pelo Base64.
Observação
A imagem 1 não é renderizada porque o suplemento cruza domínios para chegar à imagem no SharePoint. Observe que a URL do suplemento hospedado pelo provedor é executada em localhost. Abra o menu de atalho (clique com o botão direito do mouse) para Imagem 1 e escolha Propriedades. Observe que a URL (Endereço) está tentando recuperar a imagem do suplemento web, não localhost. Como o suplemento hospedado pelo provedor cruza domínios para alcançar o suplemento da Web, a autenticação é necessária para acessar a imagem. Verifique se acessar diretamente a URL da Imagem 1, em oposição à chamada entre domínios no suplemento hospedado pelo provedor, é resolvido sem um erro copiando e colando o Endereço (URL) em uma nova janela do navegador. Observe que a Imagem 1 é exibida sem um erro. Compare a origem da Imagem 1 com a origem da Imagem 2. Observe que a URL (Endereço) aponta para uma cadeia de caracteres codificada por Base64.
Quando Default.aspx é carregado, Page_Load é executado e faz o seguinte:
Define Image1.ImageUrl como o caminho absoluto da imagem.
Instancia o ImgService. ImgService é um ponto de extremidade REST que é executado no mesmo domínio que o suplemento hospedado pelo provedor.
Define Image2.ImageUrl como a cadeia de caracteres codificada base64 que ImgService.GetImage retorna. Token de acesso, site, pasta e nome do arquivo são passados como parâmetros para ImgService.GetImage.
Observação
The code in this article is provided as-is, without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.
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 faz o seguinte:
Usa url para armazenar o URI do ponto de extremidade REST GetFolderByServerRelativeUrl, que será usado para recuperar a imagem do SharePoint. Você pode saber mais em Arquivos e pastas referência de API REST.
Instancia um objeto HttpWebRequest usando a url .
Adiciona um cabeçalho de Autorização ao objeto HttpWebRequest que contém o token de acesso.
Depois que a chamada GET é feita para o URI do ponto de extremidade, o fluxo retornado é uma cadeia de caracteres codificada por Base64. A cadeia de caracteres retornada é definida como o atributo src da imagem.
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);
}
}
}
}
Depois que Page_Load termina, Default.aspx executa o código do lado do cliente em Default.aspx, que carrega a Imagem 3. O código do lado do cliente chama GetImage usando jQuery Ajax. Quando GetImage retorna a cadeia de caracteres codificada base64 com êxito, o atributo src na Image3 é definido como a cadeia de caracteres retornada.
...
$.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');
}
});
...