Cross-domain images in SharePoint provider-hosted add-ins

Use images across domains in provider-hosted compléments.

Dernière modification :jeudi 16 juillet 2015

S’applique à :SharePoint 2013 | SharePoint Add-ins | SharePoint Online

Note Remarque

Le nom « Applications pour SharePoint » est remplacé par « Compléments SharePoint ». Lors de la période de transition, il se peut que la documentation et l’interface utilisateur de certains produits SharePoint et outils Visual Studio utilisent toujours le terme « applications pour SharePoint ». Pour plus d’informations, voir Nouveau nom des applications pour Office et SharePoint.

You might want to display images from a SharePoint site in your provider-hosted compléments. Because provider-hosted compléments run on a remote web, the domains for your provider-hosted complément and your SharePoint site are different. For example, your complément might run on Microsoft Azure, and you're trying to show an image from Office 365. Because your provider-hosted complément crosses domains to access the image, SharePoint requires user authorization before the provider-hosted complément shows the image.

The Core.CrossDomainImages code sample shows how a provider-hosted complément can use a SharePoint access token and a REST service to retrieve images from SharePoint. The REST service returns a Base64-encoded string, which is used to show the image in the browser. Use the solution in this sample to show images stored in SharePoint in provider-hosted compléments by using either server-side or client-side code.

Remarque Remarque

Because the sample uses a REST endpoint, you can use either server-side or client-side code to retrieve your image.

Contribuer à ce contenu

Vous pouvez obtenir les dernières mises à jour ou contribuer à cet article sur Github. Vous pouvez également contribuer à cet article et d’autres exemples sur GitHub. Pour obtenir la liste complète des exemples, consultez le Centre des développeurs des pratiques et modèles. Nous accueillons avec plaisir vos contributions.

To get started, download the Core.CrossDomainImages sample complément from the Office 365 Developer patterns and practices project on GitHub.

When you run this sample, Default.aspx tries to load the following:

  • Image 1, by using the absolute URL.

  • Image 2, by using a server-side call to a REST endpoint that returns a Base64-encoded string.

  • Image 3, by using a client-side call to a REST endpoint that returns a Base64-encoded string.

Remarque Remarque

Image 1 does not render because the complément crosses domains to get to the image in SharePoint. Notice that the URL of the provider-hosted complément runs on localhost. Open the shortcut menu (right-click) for Image 1, and then choose Properties. Notice that the Address (URL) is trying to retrieve the image from the complément web, not localhost. Because the provider-hosted complément crosses domains to reach the complément web, authentication is required in order to access the image. Verify that accessing Image 1's URL directly, as opposed to the cross-domain call in the provider-hosted complément, resolves without an error by copying and pasting Address (URL) into a new browser window. Notice that Image 1 displays without an error.

Compare the source of Image 1 to the source of Image 2. Notice that the Address (URL) points to a Base64-encoded string.

When Default.aspx loads, Page_Load runs and does the following:

  1. Sets Image1.ImageUrl to the absolute path of the image.

  2. Instantiates ImgService. ImgService is a REST endpoint that runs in the same domain as the provider-hosted complément.

  3. Sets Image2.ImageUrl to the Base64-encoded string that ImgService.GetImage returns. Access token, site, folder, and file name are passed as parameters to ImgService.GetImage.

Remarque 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 does the following:

  1. Uses url to store the GetFolderByServerRelativeUrl REST endpoint URI, which will be used to retrieve the image from SharePoint. You can learn more at Fichiers et dossiers de référence API REST.

  2. Instantiates an HttpWebRequest object by using url.

  3. Adds an Authorization header to the HttpWebRequest object that contains the access token.

After the GET call is made to the endpoint URI, the returned stream is a Base64-encoded string. The returned string is set to the src attribute of the 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);
                    }
                }
            }
        }

After Page_Load finishes, Default.aspx runs the client-side code in Default.aspx, which loads Image 3. The client-side code calls GetImage by using jQuery Ajax. When GetImage returns the Base64-encoded string successfully, the src attribute on Image3 is set to the returned string.

  ...

	              $.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');
                }
            });

           ...

Afficher: