SharePoint Framework での、Azure AD でセキュリティ保護されたエンタープライズ API の使用Consume enterprise APIs secured with Azure AD in SharePoint Framework

この記事では、SharePoint Framework ソリューションから、Azure Active Directory でセキュリティ保護されたエンタープライズ API に接続する方法を説明します。This article illustrates how you would connect to an enterprise API secured with Azure Active Directory from a SharePoint Framework solution. API を作成してセキュリティで保護する方法と、SharePoint Framework ソリューションを構築する方法の両方について取り上げます。It covers both creating and securing the API as well building the SharePoint Framework solution.

Azure AD でセキュリティ保護されたエンタープライズ API を作成するCreate enterprise API secured with Azure AD

まず、Azure Active Directory でセキュリティ保護されたエンタープライズ API の作成から説明します。Start with creating an enterprise API secured with Azure Active Directory. SharePoint Framework では、API の実装方法に制約はありませんが、このチュートリアルでは、Azure Functions を使用して API を作成し、Azure App Service 認証を使用して API をセキュリティ保護します。While there are no restrictions how the API should be implemented from the SharePoint Framework point of view, in this tutorial, you will build the API using Azure Functions and secure it using Azure App Service Authentication.

組織のアプリケーションを公開する特定の API は、おそらく既に存在するはずですが、このセクションでは、実装および構成手順全体の概要を説明します。While your organization most likely already has specific APIs exposing their applications, this section is meant to give you a complete overview of the implementation and configuration steps.

Azure 関数を作成するCreate an Azure Function

Azure portal で、新しい関数アプリを作成します。In the Azure Portal (, create a new Function App.

Azure で関数アプリを作成する方法の詳細については、サポート記事「Azure Portal から関数アプリを作成する」を参照してください。For more information on creating Function Apps in Azure see the Create a function app from the Azure portal help article.

関数アプリで、HTTP でトリガーされる新しい関数を作成します。In the Function App, create new HTTP-triggered function. この例では C# を使用して関数を作成しますが、通常、使用できるプログラミング言語について制約はありません。In this example, you will build it using C#, but there is no restriction with regards to which programming language you can use.

関数アプリで、[新規作成] ボタンを押します。In the Function App, select the Create new button.

Azure portal で強調表示された [新規作成] ボタン

次に、[カスタム関数] リンクをクリックして、HTTP でトリガーされるカスタム関数を作成します。Next, choose on the Custom function link, to create a custom HTTP-triggered function.

Azure portal で強調表示された [カスタム関数] リンク

テンプレートの一覧から、[HTTP トリガー] を選択します。From the list of available function types, choose HTTP trigger.

Azure portal で強調表示された [HTTP トリガー] 関数のテンプレート

[新しい関数] パネルで、言語として [C#] を選択し、関数名を指定して、[承認レベル][匿名] に設定した後、[作成] ボタンをクリックします。In the New Function panel, choose C# as the language, specify the function name, set the Authorization level to Anonymous, and click the Create button:

Azure portal での新しい Azure 関数の設定

Azure 関数をセキュリティで保護する方法は、いくつかあります。Azure functions can be secured in a number of ways. Azure AD を使用して関数をセキュリティで保護する必要があるため、関数自体ではなく、基になる関数アプリをセキュリティで保護します。Because you want to secure the function using Azure AD, rather than securing the function itself, you will secure the underlying Function App. そのため、この段階では関数自体のセキュリティ保護は行わないように設定します。This is why, at this stage, you set not to secure the function itself. 関数アプリに適用される認証設定は、このアプリに含まれるすべての関数に適用されます。Authentication settings applied to the Function App, apply to all functions inside that app.

関数を作成したら、その内容を次のスニペットに置き換えます。Once the function is created, replace its contents with the following snippet:

using System.Net;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
    log.Info("C# HTTP trigger function processed a request.");

    return req.CreateResponse(HttpStatusCode.OK, new List<object> {
        new {
            Id = 1,
            OrderDate = new DateTime(2016, 1, 6),
            Region = "east",
            Rep = "Jones",
            Item = "Pencil",
            Units = 95,
            UnitCost = 1.99,
            Total = 189.05
        },
        new {
            Id = 2,
            OrderDate = new DateTime(2016, 1, 23),
            Region = "central",
            Rep = "Kivell",
            Item = "Binder",
            Units = 50,
            UnitCost = 19.99,
            Total = 999.50
        },
        new {
            Id = 3,
            OrderDate = new DateTime(2016, 2, 9),
            Region = "central",
            Rep = "Jardine",
            Item = "Pencil",
            Units = 36,
            UnitCost = 4.99,
            Total = 179.64
        },
        new {
            Id = 4,
            OrderDate = new DateTime(2016, 2, 26),
            Region = "central",
            Rep = "Gill",
            Item = "Pen",
            Units = 27,
            UnitCost = 19.99,
            Total = 539.73
        },
        new {
            Id = 5,
            OrderDate = new DateTime(2016, 3, 15),
            Region = "west",
            Rep = "Sorvino",
            Item = "Pencil",
            Units = 56,
            UnitCost = 2.99,
            Total = 167.44
        }
    });
}

関数が正常に機能することを確認するには、[保存して実行] ボタンを押します。Verify, that the function is working correctly, by selecting the Save and run button.

Azure portal で強調表示された [保存して実行] ボタン

関数が正常に実行されると、テスト ウィンドウに [ステータス: 200 OK] ラベルとリストの順序が表示されます。If the function executed correctly, you should see a Status: 200 OK label and the list orders displayed in the test pane.

Azure 関数をセキュリティで保護するSecure Azure function

Azure 関数が機能することが確認されたので、次のステップでは、その関数を Azure Active Directory でセキュリティ保護するために、組織のアカウントでサインインして、アクセスできるようにする必要があります。Now that the Azure function is working, the next step is for you to secure it with Azure Active Directory so that in order to access it, you need to sign in with your organizational account.

サイド パネルの関数アプリ ブレードで、目的の関数アプリを選択します。On the Function App blade, from the side panel, select the function app.

Azure portal のサイド パネルにある関数アプリ ブレードで強調表示された関数アプリ

最上部のセクションで、[プラットフォーム機能] タブに切り替えます。In the top section, switch to the Platform features tab.

Azure portal の関数アプリ ブレードで強調表示された [プラットフォーム機能] タブ

次に、[ネットワーク] グループから [認証/承認] リンクを選択します。Next, from the Networking group, select the Authentication / Authorization link.

Azure portal の関数アプリ ブレードで強調表示された [認証/承認] リンク

[認証/承認] ブレードで、[App Service 認証] トグル ボタンを [オン] にして、App Service 認証を有効にします。On the Authentication / Authorization blade, enable App Service Authentication by switching the App Service Authentication toggle button to On.

Azure portal の関数アプリの認証の設定で強調表示された、[App Service 認証] トグル ボタンの [オン] オプション

[要求が認証されない場合に実行するアクション] ドロップダウンで、値を [Azure Active Directory でのログイン] に変更します。In the Action to take when request not authenticated drop down, change the value to Login with Azure Active Directory. この設定により、API に対する匿名要求は許可されなくなります。This setting ensures that anonymous requests to the API are not allowed.

Function App 認証設定のブレードで強調表示された、[要求が認証されない場合に実行するアクション] ドロップダウンの [Azure Active Directory でのログイン] オプション

次に、認証プロバイダーの一覧から [Azure Active Directory] を選択します。Next, in the list of authentication providers select Azure Active Directory.

関数アプリの認証プロバイダーの一覧で強調表示された [Azure Active Directory]

[Azure Active Directory の設定] ブレードで、[管理モード] オプションを [簡易] に切り替えます。On the Azure Active Directory Settings blade, for the first Management mode option, choose Express. 2 番目の [管理モード] オプションを [新しい AD アプリを作成する] に設定します。For the second Management mode option, choose Create new AD App.

Azure portal の関数アプリで開いた [Azure Active Directory の設定] ブレード

重要

続行する前に、[アプリの作成] フィールドの値をメモします。Before you continue, note the value in the Create App field. この値は、API をセキュリティで保護するために使用する Azure AD アプリケーションの名前を表します。後で、SharePoint Framework プロジェクトから API へのアクセス許可を要求する際に、この値が必要になります。This value represents the name of the Azure AD application that you will use to secure the API, and which you will need later, to request permissions to access the API from the SharePoint Framework project.

[OK] ボタンを押して、選択した内容を確認します。Confirm your selection, by chooseing the OK button.

[認証/承認] ブレードに戻り、[保存] ボタンを押して、関数アプリの認証と承認の設定を更新します。Back in the Authentication / Authorization blade, update the Function App's authentication and authorization settings by pressing the Save button:

Azure portal の関数アプリの [認証/承認] ブレードで強調表示された [保存] ボタン

API が適切にセキュリティ保護されていることを確認するには、新しいブラウザー ウィンドウをプライベート モードで開いて API に移動します。Confirm, that the API is correctly secured, by opening a new browser window in private mode and navigating to the API. 関数アプリの URL は、関数アプリ ブレードの [概要] セクションにあります。The URL for your Function App can be found in the Overview section of the Function App blade. 認証設定が正しく適用されている場合は、Azure AD のログイン ページにリダイレクトされます。If the authentication settings have been applied correctly, you should be redirected to the Azure AD login page.

Azure AD のログイン ページ

Azure AD アプリケーション ID を取得するGet Azure AD application ID

API に接続するためのアクセス トークンを要求するためには、API をセキュリティで保護するために使用されている Azure AD アプリケーションのアプリケーション ID が必要です。To be able to request an access token to connect to the API, you will need the application ID of the Azure AD application used to secure that API.

関数アプリで、[認証] 設定に移動します。In the Function App, navigate to the Authentication settings. [構成済みの機能] ヘッダーで [認証] リンクが利用できない場合は、左側のパネルの関数アプリの横にある [最新の情報に更新] ボタンを押します。If the Authentication link is not available under the Configured features header, press the Refresh button next to the Function App in the left panel:

関数アプリ ページで強調表示された [認証] リンク

認証プロバイダーの一覧から、[Azure Active Directory] を選択します。From the list of authentication providers, select Azure Active Directory.

関数アプリの認証プロバイダーの一覧で強調表示された [Azure Active Directory]

[Azure Active Directory の設定] ブレードで、[アプリケーションの管理] ボタンを押します。On the Azure Active Directory Settings blade, choose the Manage Application button.

[Azure Active Directory の設定] ブレードで強調表示された [アプリケーションの管理] ボタン

Azure AD アプリケーションのブレードで、[アプリケーション ID] プロパティの値をコピーします。On the Azure AD application blade, copy the value of the Application ID property.

Azure AD アプリケーションのブレードで強調表示された、[アプリケーション ID] プロパティの横にある [コピー] ボタン

CORS を有効にするEnable CORS

Function App は、SharePoint ページで実行されている JavaScript から呼び出されます。The Function App will be called from JavaScript running on a SharePoint page. この API は SharePoint Portal とは異なるドメインでホストされているため、API 呼び出しには、クロスドメイン セキュリティの制約事項が適用されます。Because the API is hosted on a different domain than the SharePoint portal, cross-domain security constraints will apply to the API call. 既定では、Azure 関数アプリを使用して実装された API を他のドメインから呼び出すことはできません。By default, APIs implemented using Azure Function Apps cannot be called from other domains. 他のドメインから呼び出せるようにするには、関数アプリの CORS 設定を調整します。You can change it, by adjusting the Function App's CORS settings.

重要

OAuth ではなく SharePoint Online Cookie を使用して API で認証する場合は、Azure portal から CORS 設定を構成することはできません。If you're authenticating with the API using the SharePoint Online cookie instead of OAuth, you cannot configure CORS settings through the Azure portal. 認証が機能するには、Azure portal のすべての CORS 設定をクリアして、代わりに API で指定する必要があります。For the authentication to work, you have to clear all CORS settings in the Azure portal and specify them in your API instead.

関数アプリで、[プラットフォーム機能] タブに切り替えます。In the Function App, switch to the Platform features tab.

[API] グループから、[CORS] リンクを選択します。From the API group, select the CORS link.

関数アプリの [プラットフォーム機能] タブで強調表示された [CORS] リンク

許可されたオリジンの一覧に、SharePoint テナントの URL を追加します。例:To the list of allowed origins, add the URL of your SharePoint tenant, eg. https://contoso.sharepoint.com:

関数アプリの CORS 設定で許可されたオリジンの一覧に追加された SharePoint テナントの URL

[保存] ボタンを使用して変更内容を確認します。Confirm your changes using the Save button.

SharePoint Framework から、Azure AD でセキュリティ保護されたエンタープライズ API を使用するConsume enterprise API secured with Azure AD from the SharePoint Framework

API を構成して機能するようになったら、次のステップは、この API を使用する SharePoint Framework ソリューションの構築です。With the API configured and working, the next step is to build the SharePoint Framework solution that will consume this API.

続行する前に、バージョン 1.4.1 以上の SharePoint Framework Yeoman ジェネレーターがインストールされていることを確認してください。Before you proceed, ensure that you have installed version 1.4.1 or higher of the SharePoint Framework Yeoman generator. このジェネレーターをグローバルにインストールしている場合は、コマンド ラインで npm ls -g --depth=0 を実行することによって、インストールされているバージョンを確認できます。If you have installed the generator globally, you can check the installed version by executing in the command line: npm ls -g --depth=0.

新しい SharePoint Framework プロジェクトを作成するCreate new SharePoint Framework project

次に、API を使用するための新しい SharePoint Framework プロジェクトを作成します。Next, you'll create a new SharePoint Framework project to consume the API.

コマンド ラインで次のコマンドを実行して、プロジェクトの新しいフォルダーを作成します。In the command line create new folder for your project:

md contoso-api

作業ディレクトリを変更します。Change the working directory:

cd contoso-api

新しいプロジェクトを作成するには、SharePoint Framework Yeoman ジェネレーターを起動します。To create new project, execute the SharePoint Framework Yeoman generator:

yo @microsoft/sharepoint

ダイアログが表示されたら、次の値を使用します。When prompted, use the following values:

  • ソリューション名: contoso apicontoso-api as the solution name
  • ベースライン パッケージ: SharePoint Online のみ (最新)SharePoint Online only (latest) as the baseline packages
  • ファイルの配置場所: 現在のフォルダーを使用するUse the current folder as the location to place files
  • テナント全体で展開を有効化するかどうか: YY as the choice for enabling tenant-wide deployment
  • 作成するコンポーネントの種類: Web パーツWebPart as the type of component to create
  • 作成する Web パーツの名前: OrdersOrders as the name of the web part to create
  • Web パーツの説明: 最近の注文を表示Shows recent orders as the web part description
  • 使用するフレームワーク: JavaScript フレームワークは使用しないNo JavaScript framework as the framework to use

ターミナル ウィンドウでの SharePoint Framework Yeoman ジェネレーターのダイアログ

プロジェクトを作成したら、コード エディターでプロジェクトを開きます。After the project is created, open it in the code editor. このチュートリアルでは、Visual Studio Code を使用します。In this tutorial you will use Visual Studio Code.

Visual Studio Code で開かれた SharePoint Framework プロジェクト

エンタープライズ API へのアクセス許可を要求するRequest permissions to the enterprise API

既定では、SharePoint Framework は、Office 365 と同じ Azure Active Directory に登録されている場合でも、エンタープライズ API にはアクセスできません。By default, SharePoint Framework has no access to enterprise APIs, even though they are registered in the same Azure Active Directory as Office 365. これは意図的な設定であり、SharePoint に展開されたスクリプトやクライアント側のソリューションに公開する API を、組織が意識的に選択できるようにすることを目的としています。This is by design and allows organizations to consciously choose which APIs should be exposed to scripts and client-side solutions deployed to SharePoint. エンタープライズ API にアクセスできるようにするには、作成中の SharePoint Framework プロジェクトからアクセス許可要求を発行する必要があります。To get access to your enterprise APIs, you need to issue a permission request from the SharePoint Framework project that you're building.

コード エディターで、config/package-solution.json ファイルを開きます。In the code editor, open the config/package-solution.json file.

Visual Studio Code で開かれたパッケージ ソリューション ファイル

[solution] プロパティに、webApiPermissionRequests という名前の新しいプロパティを追加し、API をセキュリティ保護するために使用している Azure AD アプリケーションへの参照を設定します。To the solution property, add a new section named webApiPermissionRequests with a reference to the Azure AD application used to secure your API:

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "contoso-api-client-side-solution",
    "id": "8cbc01fb-bab6-48fc-afec-2c2053759771",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "webApiPermissionRequests": [
      {
        "resource": "contoso-api",
        "scope": "user_impersonation"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/contoso-api.sppkg"
  }
}

[resource] プロパティの値は、API をセキュリティ保護するために使用している Azure AD アプリケーションの名前または ID のいずれかを表します。The value of the resource property refers to either the name or the ID of the Azure AD application used to secure the API. 名前を使用すると読みやすくなり、長期的に見て保守が容易になります。Using the name is more readable and easier to maintain over time. [scope] プロパティの値は、ソリューションが API と通信するために必要なアクセス許可の適用範囲を指定します。The value of the scope property specifies the permission scope that your solution needs in order to communicate with the API. このチュートリアルでは、API を保護する目的でのみ Azure AD を使用するため、適用範囲として user_impersonation を使用します。In this tutorial, Azure AD is used only to secure the API, so user_impersonation is the scope that you will use.

注意

作成済みのエンタープライズ API に接続する必要がある場合は、管理者に連絡して、その API をセキュリティ保護するために使用している Azure AD アプリケーションの詳細を入手してください。If you want to connect to an enterprise API that has been created previously, contact your administrator to provide you with details for the Azure AD application used to secure it. 必要となる情報は、アプリケーション ID、アプリケーションが公開しているアクセス許可、アプリケーション構成の対象となっているユーザーなどです。You will need information such as the application ID, permissions the application exposes and the audience it's configured to.

エンタープライズ API に接続するConnect to the enterprise API

最後に残された作業は、エンタープライズ API への実際の接続を実装することです。The last part left is to implement the actual connection to the enterprise API.

コード エディターで、src\webparts\orders\OrdersWebPart.ts ファイルを開きます。In the code editor, open the src\webparts\orders\OrdersWebPart.ts file.

Visual Studio Code で開かれた OrdersWebPart.ts ファイル

ファイルの最上部のセクションに次のコード スニペットを追加して、AadHttpClient クラスと HttpClientResponse クラスを参照します。In the top section of the file, reference the AadHttpClient and HttpClientResponse classes, by adding the following code snippet:

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

OrdersWebPart クラスに、ordersClient という名前の新しいクラス変数を追加します。To the OrdersWebPart class, add a new class variable named ordersClient:

export default class OrdersWebPart extends BaseClientSideWebPart<IOrdersWebPartProps> {
  private ordersClient: AadHttpClient;

  // shortened for brevity
}

次に、AadHttpClient のインスタンスを作成するために、OrdersWebPart クラスに含まれる onInit メソッドを次のように上書きします。Next, in the OrdersWebPart class, override the onInit method to create an instance of the AadHttpClient:

export default class OrdersWebPart extends BaseClientSideWebPart<IOrdersWebPartProps> {
  private ordersClient: AadHttpClient;

  protected onInit(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.context.aadHttpClientFactory
        .getClient('594e83da-9618-438f-a40a-4a977c03bc16')
        .then((client: AadHttpClient): void => {
          this.ordersClient = client;
          resolve();
        }, err => reject(err));
    });
  }

  // shortened for brevity
}

AadHttpClient コンストラクターの 2 番目のパラメーターとして渡される GUID は、エンタープライズ API をセキュリティ保護するために使用している Azure AD アプリケーションのアプリケーションの ID です。The GUID passed as the second parameter of the AadHttpClient constructor, is the application ID of the Azure AD application used to secure the enterprise API.

最後に、エンタープライズ API から取得した注文を読み込んで表示するように render メソッドを拡張します。Finally, extend the render method to load and display orders retrieved from the enterprise API:

export default class OrdersWebPart extends BaseClientSideWebPart<IOrdersWebPartProps> {
  private ordersClient: AadHttpClient;

  protected onInit(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.context.aadHttpClientFactory
        .getClient('594e83da-9618-438f-a40a-4a977c03bc16')
        .then((client: AadHttpClient): void => {
          this.ordersClient = client;
          resolve();
        }, err => reject(err));
    });
  }

  public render(): void {
    this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'orders');

    this.ordersClient
      .get('https://contoso-apis.azurewebsites.net/api/Orders', AadHttpClient.configurations.v1)
      .then((res: HttpClientResponse): Promise<any> => {
        return res.json();
      })
      .then((orders: any): void => {
        this.context.statusRenderer.clearLoadingIndicator(this.domElement);
        this.domElement.innerHTML = `
          <div class="${ styles.orders}">
            <div class="${ styles.container}">
              <div class="${ styles.row}">
                <div class="${ styles.column}">
                  <span class="${ styles.title}">Orders</span>
                  <p class="${ styles.description}">
                    <ul>
                      ${orders.map(o => `<li>${o.Rep} $${o.Total}</li>`).join('')}
                    </ul>
                  </p>
                  <a href="https://aka.ms/spfx" class="${ styles.button}">
                    <span class="${ styles.label}">Learn more</span>
                  </a>
                </div>
              </div>
            </div>
          </div>`;
      }, (err: any): void => {
        this.context.statusRenderer.renderError(this.domElement, err);
      });
  }

  // shortened for brevity
}

ソリューションを SharePoint アプリ カタログに展開するDeploy the solution to SharePoint app catalog

SharePoint Framework ソリューションの実装が完了したら、次のステップは、このソリューションを SharePoint に展開することです。After completing the implementation of the SharePoint Framework solution, the next step is to deploy it to SharePoint.

まず、コマンド ラインを使用して、プロジェクトを構築し、パッケージ化します。First, build and package the project, by executing in the command line:

gulp bundle --ship && gulp package-solution --ship

次に、エクスプローラーでプロジェクト フォルダーを開き、sharepoint/solution フォルダーに移動します。Next, in the explorer, open the project folder and navigate to the sharepoint/solution folder.

macOS Finder で開かれた 'sharepoint/solution' プロジェクト フォルダー

Web ブラウザーで、Office 365 テナントのテナント アプリ カタログに移動します。In your web browser, navigate to the tenant app catalog in your Office 365 tenant.

Web ブラウザーに表示されたテナント アプリ カタログ

新しく生成された .sppkg ファイルをエクスプローラーからテナント アプリ カタログにドラッグ アンド ドロップして追加します。Add the newly generated .sppkg file by dragging and dropping it from explorer to the tenant app catalog.

Web ブラウザーの最上部に表示された、テナント アプリ カタログを表示する macOS Finder ウィンドウ

ダイアログが表示されたら、[このソリューションを組織内のすべてのサイトで使用できるようにする] チェック ボックスをオンにします。When prompted, select the Make this solution available to all sites in the organization checkbox. また、[サービス プリンシパル アクセス許可管理ページ] に移動して、保留中のアクセス許可を承認する必要があることにも注意してください。Also, take note of the remark, that you should go to the Service Principal Permissions Management Page to approve pending permission requests. [展開] ボタンを押して、展開を確認します。Confirm the deployment by chooseing the Deploy button.

Web ブラウザーに表示された、SharePoint Framework ソリューション パッケージの展開を確認するよう求めるダイアログ

エンタープライズ API へのアクセスを許可するGrant access to the enterprise API

Web ブラウザーで、Office 365 アプリ起動ツールの [管理] オプションを選択して、テナント管理サイトに移動します。In the web browser, navigate to the tenant admin site by choosing from the Office 365 app launcher, the Admin option.

Office 365 アプリ起動ツールのメニューで強調表示された [管理] オプション

メニューの [管理センター] グループから、[SharePoint] を選択します。In the menu, from the Admin centers group, choose SharePoint.

Office 365 管理センターのメニューで強調表示された [SharePoint] オプション

SharePoint 管理センターで、[新しい SharePoint 管理センター プレビューをお試しください] リンクを使用して、新しい SharePoint 管理センターのプレビューに移動します。In the SharePoint admin center, navigating to the new SharePoint admin center preview using the Try the new SharePoint admin center preview link.

SharePoint 管理センターで強調表示された [新しい SharePoint 管理センター プレビューをお試しください] リンク

新しい管理センターで、メニューから [API の管理] オプションを選択します。In the new admin center, from the menu, choose the API management option.

新しい SharePoint Online 管理センターのメニューで強調表示された [API の管理] オプション

[API の管理] ページの [承認待ち] グループで、contoso-api API にアクセスするために新しく追加されたアクセス許可要求を選択します (API 名が表示されます)。On the API management page, in the Pending approval group, select the newly added permission request to access the contoso-api API.

新しい SharePoint Online 管理センターの [API の管理] ページで強調表示された、アクセス許可要求の横の選択ボタン

次に、ツールバーから [承認または拒否する] ボタンを押します。Next, from the toolbar, select the Approve or reject option.

新しい SharePoint Online 管理センターの [API の管理] ページのツールバーで強調表示された [承認または拒否する] オプション

サイド パネルで [承認] ボタンを押して、API へのアクセスを許可します。In the side panel, grant the access to the API by chooseing the Approve button.

新しい SharePoint Online 管理センターで API 要求を管理するためのサイド パネルで強調表示された [承認] ボタン

Orders Web パーツをページに追加するAdd the Orders web part to the page

すべてが正常に動作していることを確認するには、前の手順で作成した Orders Web パーツをページに追加します。To verify that everything is working as expected, add the previously created Orders web part to the page.

Web ブラウザーで、テナント内のサイトに移動します。In the web browser, navigate to a site in your tenant. ツールバーから [編集] オプションを選択します。From the toolbar, select the Edit option.

モダン チーム サイトのツールバーで強調表示された [編集] ボタン

キャンバスで、Web パーツを追加するセクションを選択します。In the canvas, select a section to add the web part to.

Web ブラウザーで強調表示されたページのセクション

+ オプションを選択してツールボックスを開きます。Select the + option to open the toolbox. Orders Web パーツをすばやく見つけるために、検索ボックスに Orders と入力します。In the search box type Orders to quickly find the Orders web part.

ツールボックスに入力された 'Orders'。

Orders Web パーツを選択してページに追加します。Select the Orders web part to add it to the page. エンタープライズ API から取得された注文の一覧が表示されます。You should see the list of orders retrieved from the enterprise API.

SharePoint ページに表示された、エンタープライズ API から取得された最近の注文の一覧

エラーが発生し、「ポップアップ ウィンドウを開けませんでした」という技術的な説明が表示された場合は、ポップアップ ブロッカーが有効になっています。If you receive an error with the technical details of "Failed to open pop-up window", you have a pop-up blocker enabled. ページを正しく表示するには、サイトのブラウザのポップアップ ブロッカーを無効にする必要があります。You will need to disable the browser's pop-up blocker for your site in order to show the page correctly.