次の方法で共有

SharePoint のプロバイダー ホスト型アドインでのクロス ドメイン イメージ

  • [アーティクル]

プロバイダー向けのホスト型アドインでドメインを超えてイメージを使用します。

適用対象:SharePoint 2013 | SharePoint アドイン | SharePoint Online

プロバイダー ホスト型アドインの SharePoint サイトから画像を表示したい場合があります。プロバイダー ホスト型アドインは、リモート Web 上で実行されるため、プロバイダー ホスト型アドインと SharePoint サイトのドメインは異なります。 たとえば、アドインが Microsoft Azure 上で動作し、Office 365 から画像を表示しようとしているとします。 プロバイダー ホスト型アドインはドメインを越えて画像にアクセスするため、プロバイダー ホスト型アドインが画像を表示するには、SharePoint でユーザー認可が必要となります。

Core.CrossDomainImages コード サンプルは、プロバイダーホスト型アドインが SharePoint アクセス トークンと REST サービスを使用して SharePoint からイメージを取得する方法を示しています。 REST サービスは Base64 でエンコードされた文字列を返します。これは、ブラウザーでイメージを表示するために使用されます。 このサンプルのソリューションを使用して、サーバー側またはクライアント側のコードを使用して、SharePoint に格納されているイメージをプロバイダーホスト型アドインに表示します。

注:

このサンプルでは REST エンドポイントを使用しているため、サーバー側とクライアント側のどちらのコードを使用しても画像を取得できます。

はじめに

まず、Core.CrossDomainImages サンプル アドインを GitHub の Office 365 Developer パターンおよびプラクティス プロジェクトからダウンロードします。

Core.CrossDomainImages コード サンプルを使用する

このサンプルを実行すると、Default.aspx は次の対象を読み込もうとします。

  • イメージ 1 (絶対 URL を使用)。

  • イメージ 2 (Base64 エンコード文字列を返す、REST エンドポイントに対するサーバー側呼び出しを使用)。

  • 画像 3 (Base64 エンコード文字列を返す、REST エンドポイントに対するクライアント側呼び出しを使用)。

注:

アドインは SharePoint でドメインを越えて画像にアクセスするため、画像 1 はレンダリングされません。 プロバイダー ホスト型アドインの URL は localhost で実行されます。 画像 1 のショートカット メニュー (右クリックで表示) を開き、[プロパティ] を選択します。 アドレス (URL) が localhost ではなくアドイン Web から画像を取得しようとしていることに注意してください。 プロバイダー ホスト型アドインはドメインを超えてアドイン Web にアクセスするため、画像にアクセスするには認証が必要です。 プロバイダー ホスト型アドインのクロスドメイン呼び出しとは対照的に、アドレス (URL) をコピーして新しいブラウザー ウィンドウに貼り付けることで、画像 1 の URL への直接アクセスがエラーなしで解決されることを確認します。 画像 1 がエラーなしで表示されることを確認します。 画像 1 のソースと画像 2 のソースを比較します。 アドレス (URL) が Base64 でエンコードされた文字列を指していることに注意してください。

Default.aspx を読み込むと、Page_Load が実行され、以下が行われます。

  1. Image1.ImageUrl がイメージの絶対パスに設定されます。

  2. ImgService がインスタンス化されます。 ImgService は、プロバイダー ホスト型アドインと同じドメインで実行される REST エンドポイントです。

  3. Image2.ImageUrl が、ImgService.GetImage から返される Base64 エンコード文字列に設定されます。 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 は以下を実行します。

  1. url を使用して GetFolderByServerRelativeUrl REST エンドポイント URI を格納します。この URI は、SharePoint からのイメージを取得するときに使用されます。 詳細については、「ファイルおよびフォルダー REST API リファレンス」を参照してください。

  2. url を使用して、HttpWebRequest オブジェクトをインスタンス化します。

  3. アクセス トークンが含まれる HttpWebRequest オブジェクトに Authorization ヘッダーを追加します。

対象のエンドポイント URI に GET 呼び出しを行った後、戻されるストリームは 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 は画像 3 を読み込む Default.aspx 内のクライアント側コードを実行します。 クライアント側コードでは、jQuery Ajax を使用して GetImage を呼び出します。 GetImage が Base64 エンコード文字列を正常に戻すと、Image3 の src 属性には戻された文字列が設定されます。

  ...

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

           ...

関連項目