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

この記事では、SharePoint Framework ソリューションから、Azure Active Directory でセキュリティ保護されたマルチテナント エンタープライズ API に接続する方法を説明します。This article illustrates how you would connect to a multi-tenant 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 a multi-tenant enterprise API secured with Azure AD

まず、Azure Active Directory でセキュリティ保護されたマルチテナント エンタープライズ API を作成します。Start with creating a multi-tenant 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 で、新しい Function アプリを作成します。In the Azure Portal (, create a new Function App.

Azure で Function アプリを作成する方法について詳しくは、ヘルプ記事「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, select the Create new button.

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

次に、HTTP でトリガーされるカスタム関数を作成するために、[カスタム関数] リンクを選択します。Next, select 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, select 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 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.

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.

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 selection, by selecting the OK button.

Function App の認証と承認の設定を更新するために、[保存] ボタンを選択します。Update Function App authentication and authorization settings, by selecting 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 アプリケーションをマルチテナントに変更するMake the Azure AD application multi-tenant

既定では、Azure AD アプリケーションを使用して Azure 関数をセキュリティ保護すると、その Azure 関数を使用できるのは、そのアプリケーションが配置されている Azure AD に属するユーザーに制限されます。By default, when you secure an Azure Function using an Azure AD application, that Azure Function can be used only by users from the same Azure AD as where the application is located. 別のテナントでも API を使用できるようにするには、Azure AD アプリケーションをマルチテナントに変更する必要があります。If you would like to use the API in different tenants, you have to change the Azure AD application to multi-tenant.

アプリケーションをマルチテナントに変更するChange the application to be multi-tenant

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

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

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

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 アプリケーション] ブレードで、ツールバーから [設定] ボタンを選択します。On the Azure AD application blade, from the toolbar, select the Settings button.

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

[設定] ブレードで、[一般] グループから [プロパティ] オプションを選択します。On the Settings blade, from the General group, select the Properties option.

[設定] ブレードで強調表示された [プロパティ] オプション

[プロパティ] ブレードの [アプリ ID URI] フィールドで、Azure AD アプリの ID が https://yourtenant.onmicrosoft.com で始まるように変更します。例:On the Properties blade, in the App ID URI field, change the ID of your Azure AD app, so that it begins with https://yourtenant.onmicrosoft.com, eg. https://contoso.onmicrosoft.com/contoso-api. この変更は、Azure AD アプリが他のテナントで使用され、すべての Azure Active Directory でアプリの一意性を確保するために必要です。This change is required, because your Azure AD app will be used by other tenants, and it will be necessary to ensure its uniqueness across all Azure Active Directories.

次に、[マルチテナント] フィールドの値を [はい] に変更します。Next, switch the value of the Multi-tenanted field to Yes

Azure AD アプリケーションのプロパティに指定された新しいアプリ ID URI と、[はい] に切り替えられたマルチテナント設定

最後に、変更内容を確認するために、ツールバーから [保存] を選択します。Finally, confirm your changes by from the toolbar selecting the Save button.

他の Azure AD のユーザーにアプリケーションの使用を許可するAllows users from other Azure ADs to use your applications

Azure AD の簡易設定を使用して API をセキュリティ保護したため、この API を使用できるのは、アプリケーションが配置されている Azure AD に属するユーザーだけに制限されます。Because you secured your API using the Azure AD express settings, only users from the same Azure AD, as where the application is located, are allowed to use it. 他のテナントのユーザーも API を使用できるようにするためには、セキュリティ設定を調整する必要があります。Because you want the API to be used by users from other tenants as well, you have to adjust the security settings.

[認証/承認] ブレードに戻るまで、開いているすべてのブレードを閉じます。Close all open blades, until you are back on the Authentication / Authorization blade. 認証プロバイダーのリストから、[Azure Active Directory] を選択します。From the list of authentication providers, choose Azure Active Directory.

Function App の認証プロバイダーのリストで強調表示された [Azure Active Directory]

[Azure Active Directory の設定] ブレードで、[管理モード] オプションの値を [拡張] に切り替えます。On the Azure Active Directory Settings blade, switch the value of the Management mode option to Advanced.

Function App の [Azure Active Directory の設定] で強調表示された、[管理モード] の [拡張] 値

次に、[発行元の URL] フィールドの値をクリアします。Next, clear the value in the Issuer Url field. これにより、他の Azure Active Directory に属するユーザーが API に対して認証できるようになります。This will allow users from other Azure Active Directories to authenticate against your API.

Function App の [Azure Active Directory の設定] で空白にされた [管理モード] の値

変更内容を確認する前に、[クライアント ID] フィールドの値をコピーします。Before confirming your changes, copy the value from the Client ID field. この値は、API のアクセス トークンを要求するため、Web パーツを作成する際に必要になります。You will need it when building your web part, to request an access token for the API.

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

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, switch to the Platform features tab.

[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.

テナントのユーザーが他のテナントの API を使用できるようにするには、その前に API を承認する必要があります。Before users in your tenant will be able to use the API from another tenant, the API has to be approved. 承認 (同意とも呼ばれる) は、ユーザーと管理者 (組織) の 2 つのレベルで行うことができます。The approval, also known as consent, can be done on two levels: user and admin (organization). このシナリオでは、管理者の同意を使用して、組織全体での API の使用を承認します。In this scenario, you will use the admin consent to approve the API for use by the whole organization.

注意

通常は、API を公開するサイトで、テナントで API に同意するためのプロセスが行われます。Usually, the site exposing the API takes your through the process of consenting the API in your tenant. この例では、このプロセスの仕組みを十分に理解できるよう、必要なステップを手動で実行します。In this example, you will perform the necessary steps manually to better understand how the process works.

Function App ブレードで、対象の関数を選択します。On the Function App blade, select your function.

Function App ブレードの関数のリストで強調表示された Orders 関数

関数の URL を取得するために、ツールバーから [関数の URL の取得] オプションを選択します。To get the function's URL, from the toolbar, select the Get function URL option.

Function App ブレードのツールバーで強調表示された [関数の URL の取得] オプション

[関数の URL の取得] ダイアログで、[コピー] ボタンを使用して関数の URL をコピーします。In the Get function URL dialog, copy the URL of the function using the Copy button.

[関数の URL の取得] ダイアログで強調表示された [コピー] ボタン

新しいブラウザー ウィンドウで、コピーした関数の URL に移動します。In a new browser window, navigate to the function URL you have just copied. サインインするよう求められたら、API を使用できるようにする Office 365 テナントの管理者アカウントを使用してサインインします。When prompted to sign in, use the admin account from the Office 365 tenant, where you want to use the API.

サインインした後、この API の使用に同意するよう求められます。After signing in, you will be prompted to consent with the use of this API.

エンタープライズ API の使用に同意するよう求めるダイアログ

ただし、これはユーザーの同意です。This is however the user consent. 管理者の同意に切り替えて、組織全体での API の使用を承認するには、URL の末尾に &prompt=admin_consent を追加します。To switch to the admin consent and approve the API for use by the whole organization, append to the URL &prompt=admin_consent. 同意を求めるダイアログが再び表示されますが、この場合は、アプリで組織内のすべてのユーザーに対して指定のリソースにアクセスすることを許可し、それ以外のユーザーにはダイアログを表示しないことに同意します。Once again, you will be prompted with a consent dialog, but notice, that this time, the dialog states that the app will have access to the specified resources for all users in your organization and that no one else will be prompted.

エンタープライズ API の使用に対して管理者の同意を求めるダイアログ

[承諾] ボタンを選択して、組織内のユーザーが API を使用することを確認します。Confirm that you want users in your organization to use the API, by selecting the Accept 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
  • ファイルの配置場所: 現在のフォルダーを使用する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 selecting 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 selecting 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 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 から取得された最近の注文のリスト