Images multi-domaine dans les compléments SharePoint hébergés par le fournisseur
Utiliser des images sur plusieurs domaines dans des add-ins hébergés par un fournisseur.
S’applique à : SharePoint 2013 | Compléments SharePoint | SharePoint Online
Vous souhaitez peut-être afficher des images à partir d SharePoint site web dans vos add-ins hébergés par un fournisseur. Étant donné que les applications hébergées par un fournisseur s’exécutent sur un site web distant, les domaines de votre application hébergée par un fournisseur et de votre site SharePoint sont différents. Par exemple, votre add-in peut s’exécuter Microsoft Azure, et vous essayez d’afficher une image à partir de Office 365. Étant donné que votre add-in hébergé par un fournisseur croise les domaines pour accéder à l’image, SharePoint nécessite l’autorisation de l’utilisateur avant que le module hébergé par le fournisseur affiche l’image.
L’exemple de code Core.CrossDomainImages montre comment un add-in hébergé par un fournisseur peut utiliser un jeton d’accès SharePoint et un service REST pour récupérer des images à partir de SharePoint. Le service REST renvoie une chaîne codée en Base64, qui est utilisée pour afficher l’image dans le navigateur. Utilisez la solution de cet exemple pour afficher des images stockées dans SharePoint dans des add-ins hébergés par un fournisseur à l’aide de code côté serveur ou côté client.
Notes
Étant donné que l’exemple utilise un point de terminaison REST, vous pouvez utiliser du code côté serveur ou côté client pour récupérer votre image.
Avant de commencer
Pour commencer, téléchargez l’exemple de add-in Core.CrossDomainImages à partir du projet pratiques et modèles de développement Office 365 sur GitHub.
Utilisation de l’exemple de code Core.CrossDomainImages
Lorsque vous exécutez cet exemple, Default.aspx tente de charger ce qui suit :
Image 1, à l’aide de l’URL absolue.
Image 2, à l’aide d’un appel côté serveur vers un point de terminaison REST qui renvoie une chaîne codée en Base64.
Image 3, à l’aide d’un appel côté client à un point de terminaison REST qui renvoie une chaîne codée en Base64.
Notes
L’image 1 ne s’restituera pas, car le add-in croise les domaines pour obtenir l’image dans SharePoint. Notez que l’URL du add-in hébergé par un fournisseur s’exécute sur localhost. Ouvrez le menu raccourci (clic droit) de l’image 1, puis choisissez Propriétés. Notez que l’adresse (URL) tente de récupérer l’image à partir du site web du add-in, et non de l’url localhost. Étant donné que le add-in hébergé par un fournisseur croise les domaines pour atteindre le site web de l’application, l’authentification est requise pour accéder à l’image. Vérifiez que l’accès direct à l’URL d’Image 1, par opposition à l’appel entre domaines dans le module hébergé par un fournisseur, se résout sans erreur en copiant et en coller l’adresse (URL) dans une nouvelle fenêtre de navigateur. Notez que l’image 1 s’affiche sans erreur. Comparez la source de l’image 1 à la source de l’image 2. Notez que l’adresse (URL) pointe vers une chaîne codée en Base64.
Lorsque Default.aspx se charge, Page_Load s’exécute et exécute ce qui suit :
Définit Image1.ImageUrl sur le chemin d’accès absolu de l’image.
Insérise ImgService. ImgService est un point de terminaison REST qui s’exécute dans le même domaine que le add-in hébergé par un fournisseur.
Définit Image2.ImageUrl sur la chaîne codée en Base64 que renvoie ImgService.GetImage. Le jeton d’accès, le site, le dossier et le nom de fichier sont transmis en tant que paramètres à ImgService.GetImage.
Notes
Le code dans cet article est fourni tel quel, sans garantie d’aucune sorte, expresse ou implicite, y compris mais sans s’y limiter, aucune garantie implicite d’adéquation à un usage particulier, à une qualité marchande ou une absence de contrefaçon.
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 fait les choses suivantes :
Utilise l’URL pour stocker l’URI de point de terminaison REST GetFolderByServerRelativeUrl, qui sera utilisé pour récupérer l’image à partir SharePoint. Pour plus d’informations, voir la référence de l’API REST Fichiers et dossiers.
Insère un objet HttpWebRequest à l’aide de l’URL.
Ajoute un en-tête Authorization à l’objet HttpWebRequest qui contient le jeton d’accès.
Une fois l’appel GET passé à l’URI du point de terminaison, le flux renvoyé est une chaîne codée en Base64. La chaîne renvoyée est définie sur l’attribut src de l’image.
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);
}
}
}
}
Une Page_Load, Default.aspx exécute le code côté client dans Default.aspx, qui charge l’image 3. Le code côté client appelle GetImage à l’aide de jQuery Ajax. Lorsque GetImage renvoie la chaîne codée en Base64 avec succès, l’attribut src sur Image3 est définie sur la chaîne renvoyée.
...
$.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');
}
});
...