GraphQL 用 Fabric API にアプリケーションを接続する

アプリケーションを Fabric の GraphQL 用 API に接続すると、Web アプリケーション、モバイルアプリケーション、バックエンドアプリケーションで、最新の効率的な API を使用して Fabric データソースに対してクエリを実行できます。この統合には、GraphQL エンドポイントを安全に呼び出すために、Microsoft Entra ID とアプリケーションの構成による適切な認証が必要です。

この記事では、次の方法で React アプリケーションを Fabric GraphQL API に接続する手順について説明します。

認証用の Microsoft Entra アプリの作成と構成
クエリを実行するデータを使用して Fabric でサンプル GraphQL API を設定する
GitHub からの完全な React アプリケーションの複製と構成
認証された接続のテスト

このチュートリアルでは React を使用しますが、認証の概念は任意の言語に適用されます。 C#、Python、またはその他の言語のサンプルについては、 Microsoft Fabric Samples GitHub リポジトリを参照してください。

アプリケーションを接続する必要があるユーザー

アプリケーション接続のセットアップは、次の場合に不可欠です。

Fabric レイクハウスとウェアハウスからのデータを使用するアプリケーションを構築するWebおよびモバイル開発者
Fabric データをカスタムアプリケーションと自動化されたワークフローに接続する統合開発者
Fabric の統合分析プラットフォームと統合するサービスを作成するバックエンド開発者
API を介して Fabric データを使用する自動データ処理ワークフローを設定するデータエンジニア

このガイドは、Fabric GraphQL API にアクセスするためにアプリケーションを認証および承認する必要がある場合に使用します。

前提条件

開発ツール: Node.js (LTS バージョン) と Visual Studio Code がコンピューターにインストールされている必要があります。
アプリケーションを接続する前に、Fabric に GraphQL 用 API があることを確認してください。詳細については、「Fabric で GraphQL 用 API を作成し、データを追加する」を参照してください。
GraphQL 用 API では、アプリケーションで認証に Microsoft Entra を使用する必要があります。 Fabric に対して API 呼び出しを実行するようにアプリケーションを登録して構成します。詳細については、「Azure で Microsoft Entra アプリを作成する」を参照してください。
API を呼び出す認証済みの資格情報 (ユーザープリンシパル、サービスプリンシパル、またはマネージド ID) には、GraphQL API の実行アクセス許可が必要です (直接アクセス許可を追加するときにクエリと変更を実行するオプション)。 API の接続オプションとしてシングルサインオン (SSO) を使用する場合は、選択したデータソースで資格情報に読み取りまたは書き込みアクセス許可があることを確認します。詳細については、「データソースに接続し、スキーマを作成する」を参照してください。

認証とアクセス許可の概要

GraphQL API にアクセスするには、API レベルと基になるデータソースレベルの両方で適切な認証と承認が必要です。 ユーザープリンシパル (個々のユーザーを表す) またはサービスプリンシパル (アプリケーションまたはサービスを表す) を使用して認証できます。データソース接続では、呼び出し元の ID がデータソースに渡される シングルサインオン (SSO) または事前構成された接続が使用される 保存された資格情報 を使用できます。

次の表は、サポートされているさまざまな認証シナリオと、GraphQL API にアクセスするクライアントに必要な最小限のアクセス許可をまとめたものです。

API 呼び出し元	データソース接続	必要な GraphQL API のアクセス許可	必要なデータソースのアクセス許可	Microsoft Entra アプリのスコープ
ユーザープリンシパル (UPN)	シングルサインオン (SSO)	API レベルでクエリと変更を実行する	データソースで UPN に付与された適切な読み取り/書き込みアクセス許可	GraphQLApi.Execute.All
サービスプリンシパル (SPN)	シングルサインオン (SSO)	API レベルでクエリと変更を実行する	データソースで SPN に付与された適切な読み取り/書き込みアクセス許可	該当なし
ユーザープリンシパル (UPN)	保存された資格情報	API レベルでクエリと変更を実行する	データソースで保存された資格情報 (接続) に付与された適切な読み取り/書き込みアクセス許可	GraphQLApi.Execute.All
サービスプリンシパル (SPN)	保存された資格情報	API レベルでクエリと変更を実行する	データソースで SPN に付与された適切な読み取り/書き込みアクセス許可	該当なし

Microsoft Entra アプリを作成する

アプリケーションで Fabric GraphQL API を呼び出すには、事前に Microsoft Entra ID に登録する必要があります。この登録により、アプリケーションの ID が作成され、必要なアクセス許可が定義されます。登録プロセスでは、クライアント ID (アプリケーション識別子) が生成され、アプリがアクセストークンを取得するために使用する認証フローが確立されます。

React アプリケーションの場合は、PKCE フローを使用するシングルページアプリケーション (SPA) 設定を構成します。これは、クライアントシークレットを安全に格納できないブラウザーベースのアプリ用に設計されたセキュリティで保護された認証方法です。

「クイックスタート: Microsoft ID プラットフォームにアプリケーションを登録する」で説明されている手順を使用してアプリケーションを登録します。
Microsoft Entra アプリ アプリケーション (クライアント) ID と ディレクトリ (テナント) ID の値が [概要] ボックスに表示されます。 React アプリケーションを構成するときに必要になるため、これらの値を記録します。
アプリケーションが Fabric GraphQL API にアクセスできるように API アクセス許可を構成します。 [管理] リストで、[API 権限] を選択し、[権限を追加] します。
PowerBI サービスを追加し、委任されたアクセス許可を選択し、GraphQLApi.Execute.All アクセス許可を選択します。このアクセス許可により、アプリケーションは、サインインしているユーザーに代わってクエリと変更を実行できます。管理者の同意が必要ないことを確認します。
[管理] ボックスの一覧に戻り、認証>プラットフォームの追加>Single-page アプリケーションを選択します。
ローカル開発の目的で、http://localhost:3000 にを追加し、Proof Key for Code Exchange (PKCE) を使用した認証コードフローに対してアプリケーションが有効になっていることを確認します。 [構成] ボタンを選択して、変更を保存します。アプリケーションでクロスオリジン要求に関連するエラーが発生した場合は、前の手順で同じリダイレクト URI を使用 して Mobile アプリケーションとデスクトップアプリケーション プラットフォームを追加します。
認証に戻り、下にスクロールして [詳細設定] をし、[パブリッククライアントフローのを許可する] の下にある [はい] を選択次のモバイルおよびデスクトップフローを有効にします。

アプリケーションアクセス用のサンプル GraphQL API を設定する

Microsoft Entra アプリが登録されている場合、クエリを実行するには Fabric の GraphQL API が必要です。このセクションでは、Fabric の祝日データセットを使用してサンプル API を作成する手順について説明します。これにより、独自のデータソースを構成する必要なく、認証とデータ取得をテストするための作業 API が提供されます。

サンプル API では、Lakehouse テーブルの休日データが公開されます。このテーブルでは、React アプリケーションが祝日を表示するためにクエリを実行します。

Fabric ポータルのホームページで、ワークロードの一覧から [Data Engineering] を選択します。
データエンジニアリングエクスペリエンスで、[ サンプルの使用] を選択し、[ Lakehouse] で [ 祝日 ] を選択して、祝日データを含む新しい Lakehouse を自動的に作成します。

サンプルデータレイクハウスオプションを選択した際のスクリーンショット。
「GraphQL 用 API を作成する」の手順に従って、新しい GraphQL API を作成し、作成した Lakehouse を選択します。クライアントがこのデータにアクセスできるように、祝日テーブルを追加します。
React アプリケーションをビルドする前に、API エディターで API をテストして、API が正しく動作することを確認します。次のクエリを使用します。これは、React アプリケーションが後で実行するのと同じクエリです。
```
 query {
 publicholidays (filter: {countryRegionCode: {eq:"US"}, date: {gte: "2024-01-01T00:00:00.000Z", lte: "2024-12-31T00:00:00.000Z"}}) {
     items {
       countryOrRegion
       holidayName
       date
     }
   }
 }
```
API 項目のツールバーで [エンドポイントのコピー] を選択します。
[リンクのコピー] 画面で、[コピー] を選択します。
Microsoft Entra アプリの クライアント ID と テナント ID とエンドポイント URI を記録します。これらの値は、 React アプリケーションを構成するときに必要です。

React アプリケーションを複製して構成する

Microsoft Entra アプリと GraphQL API を設定したら、それらに接続するように React アプリケーションを構成できます。アプリケーションは、Microsoft Authentication Library (MSAL) を使用して認証を処理し、ベアラートークンを使用して GraphQL 要求を行います。

GitHub からサンプルリポジトリを複製します。
```
git clone https://github.com/microsoft/fabric-samples.git
```
React アプリケーションフォルダーに移動します。
```
cd fabric-samples/docs-samples/data-engineering/GraphQL/React
```
フォルダーには、完全な React アプリケーションが含まれています。特定のエンドポイントと資格情報を構成するには、 src/authConfig.js を編集する必要があります。
コードエディターでプロジェクトを開きます。
```
code .
```
エディターで、 src フォルダーに移動し、 authConfig.jsを開きます。
次のプレースホルダー値を特定の詳細に置き換えます。
- Enter_the_GraphQL_Endpoint_Here- アプリケーションアクセス用のサンプルGraphQL APIの設定から、あなたのGraphQL APIエンドポイントに置き換えてください
- Enter_the_Application_Id_Here - Microsoft Entra アプリの作成から取得したアプリケーション (クライアント) IDで置き換える
- Enter_the_Tenant_Info_Here - Microsoft Entra アプリの作成から取得したあなたの ディレクトリ (テナント) ID に置き換える
Important

同じファイル内の loginRequest 定数には、スコープ https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.Allが含まれます。この正確なスコープは、Fabric GraphQL API にアクセスするために必要です。このスコープを削除または変更しないでください。それ以外の場合、認証は失敗します。
ファイルを保存します。
ターミナルで、プロジェクトのルートフォルダーに移動し、次のコマンドを実行します。
```
npm install
```
これにより、必要なすべての依存関係がインストールされます。

アプリケーションをテストする

アプリケーションを構成したら、ローカルで実行して、すべてが正しく動作することを確認します。

ターミナルで、次のコマンドを実行します。
```
npm start
```
このコマンドは、開発サーバーを起動し、ブラウザーでアプリケーションを開きます。
アプリケーションが http://localhost:3000で読み込まれたら、認証フローを完了します。チュートリアルセクションで説明されているサインイン手順に従って、アプリケーションから API を呼び出します。
正常にサインインしたら、[ GraphQL データのクエリファブリック API ] ボタンを選択します。これにより、認証フローがトリガーされ、アクセストークンが取得され、Fabric API に対して GraphQL クエリが実行されます。
すべてが正しく構成されている場合、アプリケーションはテーブルに祝日を表示します。これにより、次のことが確認されます:
- Microsoft Entra アプリに適切なアクセス許可がある
- アクセストークンが正常に取得されました
- GraphQL API が要求を認証しました
- Lakehouse データに対して実行されるクエリ

その他の npm コマンド

npm startとnpm install以外にも、次の一般的な npm コマンドをさまざまな開発シナリオに使用できます。

npm run dev - 開発サーバーを起動する別の方法
npm run build - アプリケーションの最適化された運用ビルドを作成する
npm run preview - デプロイする前に運用環境のビルドをローカルでテストする
npm test - 自動テストを実行してコードが正しく動作することを確認する

Fabric GraphQL API に接続された作業アプリケーションが作成されたので、次のリソースを調べて、より高度なソリューションを構築します。

Fabric で GraphQL 用 API を作成し、データを追加する - 独自のデータソースを公開する方法について説明します
Fabric API for GraphQL で複数のデータソースにクエリを実行する - 1 つのクエリで異なるソースのデータを結合する
GraphQL エディター用ファブリック API - クエリを対話形式でテストおよび開発する
Azure で Microsoft Entra アプリを作成する - 運用アプリ登録の詳細ガイド
Microsoft Fabric GraphQL サンプル - 複数の言語でサンプルを参照する

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-01-21