Междоменные изображения в надстройках SharePoint, размещаемых у поставщика
Используйте образы в разных доменах в надстройках, размещенных у поставщика.
Область применения: SharePoint 2013 | надстройки SharePoint | SharePoint Online
Вы можете отображать изображения с сайта SharePoint в надстройках, размещенных у поставщика. Так как надстройки, размещенные у поставщика, выполняются на удаленном веб-сайте, домены для надстройки с размещением у поставщика и сайта SharePoint отличаются. Например, надстройка может работать в Microsoft Azure, и вы пытаетесь отобразить изображение из Office 365. Так как надстройка, размещенная у поставщика, пересекает домены для доступа к образу, SharePoint требует авторизации пользователя, прежде чем надстройка, размещенная у поставщика, отобразит изображение.
В примере кода Core.CrossDomainImages показано, как надстройка, размещенная у поставщика, может использовать маркер доступа SharePoint и службу REST для получения изображений из SharePoint. Служба REST возвращает строку в кодировке Base64, которая используется для отображения изображения в браузере. Используйте решение в этом примере для отображения изображений, хранящихся в SharePoint, в надстройках, размещенных у поставщика, с помощью кода на стороне сервера или клиента.
Примечание.
Так как в примере используется конечная точка REST, для получения образа можно использовать код на стороне сервера или клиента.
Подготовка к работе
Чтобы приступить к работе, скачайте пример надстройки Core.CrossDomainImages из проекта шаблонов и методик для разработчиков Office 365 на сайте GitHub.
Использование примера кода Core.CrossDomainImages
При запуске этого примера Default.aspx пытается загрузить следующее:
Изображение 1 с использованием абсолютного URL-адреса.
Изображение 2. Использование вызова конечной точки REST на стороне сервера, которая возвращает строку в кодировке Base64.
Изображение 3. Использование вызова на стороне клиента к конечной точке REST, которая возвращает строку в кодировке Base64.
Примечание.
Изображение 1 не отображается, так как надстройка пересекает домены для доступа к образу в SharePoint. Обратите внимание, что URL-адрес надстройки, размещенной у поставщика, выполняется на localhost. Откройте контекстное меню (щелкните правой кнопкой мыши) для изображения 1 и выберите пункт Свойства. Обратите внимание, что адрес (URL-адрес) пытается получить образ из веб-сайта надстройки, а не из localhost. Так как надстройка, размещенная у поставщика, пересекает домены для доступа к веб-сайту надстройки, для доступа к образу требуется проверка подлинности. Убедитесь, что прямой доступ к URL-адресу образа 1, а не междоменный вызов в надстройке, размещенной у поставщика, разрешается без ошибок, копируя и вставляя адрес (URL-адрес) в новое окно браузера. Обратите внимание, что изображение 1 отображается без ошибок. Сравните источник изображения 1 с источником изображения 2. Обратите внимание, что адрес (URL-адрес) указывает на строку в кодировке Base64.
При загрузке Default.aspx Page_Load выполняется и выполняет следующие действия:
Задает для Image1.ImageUrl абсолютный путь к изображению.
Создает экземпляр ImgService. ImgService — это конечная точка REST, которая выполняется в том же домене, что и надстройка, размещенная у поставщика.
Задает в Image2.ImageUrl строку в кодировке Base64, которую возвращает ImgService.GetImage . Маркер доступа, сайт, папка и имя файла передаются в качестве параметров в ImgService.GetImage.
Примечание.
Код, приведенный в этой статье, предоставляется "как есть" без какой-либо явной или подразумеваемой гарантии, включая подразумеваемые гарантии пригодности для какой-либо цели, для продажи или гарантии отсутствия нарушения прав иных правообладателей.
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 выполняет следующие действия.
Использует URL-адрес для хранения URI конечной точки REST GetFolderByServerRelativeUrl, который будет использоваться для получения образа из SharePoint. Дополнительные сведения см. в статье Справочник по REST API файлов и папок.
Создает экземпляр объекта HttpWebRequest с помощью URL-адреса .
Добавляет заголовок Authorization в объект HttpWebRequest, содержащий маркер доступа.
После выполнения вызова GET к URI конечной точки возвращаемый поток представляет собой строку в кодировке Base64. Возвращаемая строка имеет атрибут src изображения.
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);
}
}
}
}
По завершении Page_Load Default.aspx запускает клиентский код в Default.aspx, который загружает образ 3. Клиентский код вызывает GetImage с помощью jQuery Ajax. Когда GetImage успешно возвращает строку в кодировке Base64, атрибут src в Image3 получает возвращаемую строку.
...
$.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');
}
});
...