Images multi-domaine dans les compléments SharePoint hébergés par le fournisseur
Utilisez des images dans des domaines dans des compléments hébergés par un fournisseur.
S’applique à : SharePoint 2013 | Compléments SharePoint | SharePoint Online
Vous souhaiterez peut-être afficher des images d’un site SharePoint dans vos compléments hébergés par un fournisseur. Étant donné que les compléments hébergés par un fournisseur s’exécutent sur un site web distant, les domaines de votre complément hébergé par un fournisseur et de votre site SharePoint sont différents. Par exemple, votre complément peut s’exécuter sur Microsoft Azure et vous essayez d’afficher une image de Office 365. Étant donné que votre complément hébergé par un fournisseur traverse des domaines pour accéder à l’image, SharePoint requiert l’autorisation de l’utilisateur avant que le complément hébergé par le fournisseur affiche l’image.
L’exemple de code Core.CrossDomainImages montre comment un complément 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 retourne une chaîne encodé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 compléments hébergés par un fournisseur à l’aide d’un code côté serveur ou côté client.
Remarque
É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 complément Core.CrossDomainImages à partir du projet modèles et pratiques Office 365 Développeur sur GitHub.
Utilisation de l’exemple de code Core.CrossDomainImages
Lorsque vous exécutez cet exemple, Default.aspx tente de charger les éléments suivants :
Image 1, à l’aide de l’URL absolue.
Image 2, à l’aide d’un appel côté serveur à un point de terminaison REST qui retourne une chaîne encodée en Base64.
Image 3, à l’aide d’un appel côté client à un point de terminaison REST qui retourne une chaîne encodée en Base64.
Remarque
L’image 1 ne s’affiche pas, car le complément croise les domaines pour accéder à l’image dans SharePoint. Notez que l’URL du complément hébergé par le fournisseur s’exécute sur localhost. Ouvrez le menu contextuel (cliquez avec le bouton droit) pour Image 1, puis choisissez Propriétés. Notez que l’Adresse (URL) tente de récupérer l’image à partir du site web de complément, et non localhost. Étant donné que le complément hébergé par le fournisseur traverse des domaines pour atteindre le site web de complément, l’authentification est requise pour accéder à l’image. Vérifiez que l’accès direct à l’URL de l’Image 1, par opposition à l’appel inter-domaines dans le complément hébergé par le fournisseur, se résout sans erreur en copiant et collant 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 encodée en Base64.
Lorsque Default.aspx se charge, Page_Load s’exécute et effectue les opérations suivantes :
Définit Image1.ImageUrl sur le chemin absolu de l’image.
Instancie ImgService. ImgService est un point de terminaison REST qui s’exécute dans le même domaine que le complément hébergé par le fournisseur.
Définit Image2.ImageUrl sur la chaîne encodée en Base64 retournée par ImgService.GetImage . Le jeton d’accès, le site, le dossier et le nom de fichier sont passés en tant que paramètres à ImgService.GetImage.
Remarque
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 effectue les opérations suivantes :
Utilise l’URL pour stocker l’URI de point de terminaison REST GetFolderByServerRelativeUrl, qui sera utilisé pour récupérer l’image à partir de SharePoint. Pour en savoir plus, consultez Informations de référence sur l’API REST Fichiers et dossiers.
Instancie 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 effectué à l’URI du point de terminaison, le flux retourné est une chaîne encodée en Base64. La chaîne retourné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 fois Page_Load terminé, Default.aspx exécute le code côté client dans Default.aspx, qui charge Image 3. Le code côté client appelle GetImage à l’aide de jQuery Ajax. Lorsque GetImage retourne correctement la chaîne encodée en Base64, l’attribut src sur Image3 est défini sur la chaîne retourné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');
}
});
...