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

重要

AadHttpClient クラスは、現在プレビュー段階であり、変更される可能性があります。The AadHttpClient is currently in preview and is subject to change. 運用環境では使用しないでください。Do not use them in a production environment. また、package-solution.jsonwebApiPermissionRequests プロパティも運用テナントでサポートされていません。Also note that the webApiPermissionRequests properties in package-solution.json are not supported in production tenants.

この記事では、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 Azure function

Azure Portal (https://portal.azure.com)) で、新しい Function App を作成します。In the Azure Portal (https://portal.azure.com), create a new Function App.

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

Function App で、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.

Function App で、[新規作成] ボタンを選択します。In the Function App, choose 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 settings of the function, choose C# as the language, specify the function name and set the Authorization level to Anonymous.

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

Azure 関数をセキュリティで保護する方法は、いくつかあります。Azure functions can be secured in a number of ways. ここでは、Azure AD を使用して関数をセキュリティ保護するため、関数自体ではなく、基になる Function App をセキュリティ保護します。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. Function App に適用される認証設定は、このアプリに含まれるすべての関数に適用されます。Authentication settings applied to the Function App, apply to all functions inside that app.

設定内容を確認して関数を作成するために、[作成] ボタンを選択します。To confirm your settings and create the function, choose the Create button.

関数が作成されたら、その内容を次のスニペットで置き換えます。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 chooseing 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.

Function App ブレードの作業ウィンドウで、対象の Function App を選択します。On the Function App blade, from the side panel, select the function app.

Azure Portal の Function App ブレードの作業ウィンドウで強調表示された Function App

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

Azure Portal の Function App ブレードで強調表示された [プラットフォーム機能] タブ

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

Azure Portal の Function App ブレードで強調表示された [認証/承認] リンク

[認証/承認] ブレードで、[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 の Function App 認証設定で強調表示された、[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.

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

この設定により、API に対する匿名要求は許可されなくなります。This setting ensures that anonymous requests to the API are not allowed.

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

Function App の認証プロバイダーのリストで強調表示された [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 の Function App で開いた [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 choice by clicking the OK button.

Function App の認証と承認の設定を更新するために、[保存] ボタンを選択します。Update Function App authentication and authorization settings, by chooseing the Save button.

Azure Portal の Function App の [認証/承認] ブレードで強調表示された [保存] ボタン

API が適切にセキュリティ保護されていることを確認するには、新しいブラウザー ウィンドウをプライベート モードで開いて API に移動します。Confirm, that the API is correctly secured, by opening a new browser window in private mode and navigating to the API. 認証設定が正しく適用されている場合は、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.

Function App で、[認証] 設定に移動します。In the Function App, navigate to the Authentication settings.

Function App ページで強調表示された [認証] リンク

認証プロバイダーのリストから、[Azure Active Directory] を選択します。In the list of authentication providers, select Azure Active Directory to configure it.

Function App の認証プロバイダーのリストで強調表示された [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 Function App を使用して実装された API を他のドメインから呼び出すことはできません。By default, APIs implemented using Azure Function Apps cannot be called from other domains. 他のドメインから呼び出せるようにするには、Function App の CORS 設定を調整します。You can change it, by adjusting the Function App's CORS settings.

Function App で、[プラットフォーム機能] タブに切り替えます。In the Function App settings, go back to the Platform features blade.

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

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

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

Function App の 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

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

md contoso-api

コマンド ラインで次のコマンドを実行して、作業ディレクトリを変更します。Change the working directory by executing in the command line:

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 version
  • ファイルの配置場所: 現在のフォルダーを使用するUse the current folder for the location to place the files
  • テナント全体で展開を有効化するかどうか: YY as the choice for enabling tenant-wide deployment
  • 作成するコンポーネントの種類: Web パーツWebPart as the type of client-side 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/greeting/GreetingWebPart.manifest.json 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> {
    this.ordersClient = new AadHttpClient(this.context.serviceScope, '594e83da-9618-438f-a40a-4a977c03bc16');

    return Promise.resolve();
  }

  // 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> {
    this.ordersClient = new AadHttpClient(this.context.serviceScope, '594e83da-9618-438f-a40a-4a977c03bc16');

    return Promise.resolve();
  }

  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 アプリ カタログに展開するDeployment of the solution package to the 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, if you trust the hellograph-webpart-client-side-solution, select Make this solution available to all sites in the organization, and select Deploy. また、[サービス プリンシパル アクセス許可管理ページ] に移動して、保留中のアクセス許可を承認する必要があることにも注意してください。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 管理センターのメニューで強調表示された [API 管理] オプション

[API 管理] ページの [承認待ち] グループで、contoso-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 管理センターの [API 管理] ページで強調表示された、アクセス許可要求の横の選択ボタン

次に、ツールバーから [承認または拒否する] オプションを選択します。Next, from the toolbar, select the Approve or reject option.

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

作業ウィンドウで [承認] ボタンを選択して、API へのアクセスを許可します。In the side panel, grant the access to the API by chooseing the Approve button.

新しい SharePoint 管理センターで 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 HelloWorld to add the web part to the page. エンタープライズ API から取得された注文のリストが表示されるはずです。You should see the list of orders retrieved from the enterprise API.

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