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

GraphQL 用 API にアプリケーションを接続するには、 クライアント ID、 テナント ID、Fabric の GraphQL エンドポイントアドレス の 3 つのキーの詳細が必要です。次のセクションでは、サンプルの React アプリケーションを使用して、必要な詳細を作成して取得し、API にアクセスする方法について説明します。

その他の言語

このチュートリアルでは、React サンプルアプリケーションを GraphQL 用 Fabric API に接続する方法について説明します。 C#、Python、およびその他の言語サンプルは、 Microsoft Fabric Samples GitHub リポジトリにあります。

前提条件

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

Microsoft Entra アプリを作成する

次の手順では、Microsoft Entra で ReactJS アプリケーションのサポートを構成する方法について説明します。

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

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

この例では、サンプルのレイクハウスデータをクライアントに公開する GraphQL API を作成します。

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

サンプルデータレイクハウスオプションを選択した際のスクリーンショット。
「GraphQL 用 API を作成する」の手順に従って、新しい GraphQL API を作成し、作成した Lakehouse を選択します。クライアントがこのデータにアクセスできるように、祝日テーブルを追加します。

次のサンプルクエリを使用して、API エディターで GraphQL 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 をコピーします。

祝日 API にアクセスするように React アプリを構成する

注

次の手動手順をスキップする場合は、完全なアプリケーションで GitHub リポジトリを複製できます。手順 3 に従って、Microsoft Entra から取得した GraphQL エンドポイントと ID に関する具体的な詳細をファイル authConfig.jsに追加し、 npm install との依存関係をインストールし、手順 9 に進んでアプリケーションの実行のテストを続行します。

既存の React アプリを開始点として使用します。チュートリアル「React シングルページアプリケーションを作成する」の手順に従い、認証用に準備して、プロジェクト構造に追加する必要なファイルとフォルダーを含む、Microsoft Entra 認証が構成された React プロジェクトを作成します。 GraphQL のユースケースに合わせて 3 つのファイルを変更します。

src フォルダーで、authConfig.js ファイルを開き、ファイルの内容を次のコードスニペットに置き換えます。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const graphqlConfig = {
    graphqlEndpoint: "`Enter_the_GraphQL_Endpoint_Here"
};

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            }
        }
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in. 
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * [OpenID Connect scopes](/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes)
 */
export const loginRequest = {
    scopes: ["https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

上記のコードでわかるように、適切なスコープを使用してアプリケーションにアクセスすることが重要です。この例では、https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All です。

次の値を Microsoft Entra 管理センターから取得した値に置き換えます。
- clientId - アプリケーションの識別子。クライアントとも呼ばれます。 Enter_the_Application_Id_Hereを、以前に登録された Microsoft Entra アプリケーションの概要ページから記録したApplication(client) IDの値に置き換えます。
- authority - これは次の 2 つの部分で構成されます。
  - "インスタンス" はクラウドプロバイダーのエンドポイントです。各国のクラウドの利用可能なさまざまなエンドポイントで確認します。
  - "テナント ID" は、アプリケーションが登録されているテナントの識別子です。 Enter_the_Tenant_Info_Hereを、登録済みアプリケーションの概要ページから先ほど記録したディレクトリ (テナント) ID の値に置き換えます。
- graphQLEndpoint - GraphQL エンドポイント用のファブリック API。 Enter_the_GraphQL_Endpoint_Here を前に記録した GraphQL API エンドポイントに置き換えます。
ファイルを保存します。

同じ src フォルダーで、 App.js ファイルを開き、ファイルの内容を次のコードスニペットに置き換えます。

import React, { useState } from 'react';
import { PageLayout } from './components/PageLayout';
import { loginRequest, graphqlConfig } from './authConfig';
import { ProfileData } from './components/ProfileData';
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
import './App.css';
import Button from 'react-bootstrap/Button';
import Spinner from 'react-bootstrap/Spinner';

/**
* Renders information about the signed-in user or a button to retrieve data about the user
*/
const ProfileContent = () => {
  const { instance, accounts } = useMsal();
  const [graphqlData, setGraphqlData] = useState(null);
  const [display, setDisplay] = useState(false);

  function RequestGraphQL() {
      // Silently acquires an access token which is then attached to a request for GraphQL data
      instance
          .acquireTokenSilent({
              ...loginRequest,
              account: accounts[0],
          })
          .then((response) => {
              callGraphQL(response.accessToken).then((response) => setGraphqlData(response));
          });
  }

async function callGraphQL(accessToken) {
  setDisplay(true);
  const query = `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
      }
    }
  }`;
  fetch(graphqlConfig.graphqlEndpoint, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${accessToken}`,
          },
          body: JSON.stringify({ 
              query: query
          })
      })
      .then((res) => res.json())
      .then((result) => setGraphqlData(result));
}

  return (
      <>
          <h5 className="card-title">Welcome {accounts[0].name}</h5>
          <br/>
          {graphqlData ? (
              <ProfileData graphqlData={graphqlData} />
          ) : (
              <Button variant="primary" onClick={RequestGraphQL}>
                  Query Fabric API for GraphQL Data 
                  {display ? (
                        <Spinner
                            as="span"
                            animation="border"
                            size="sm"
                            role="status"
                            aria-hidden="true"
                        />
                    ) : null}
              </Button>
          )}
      </>
  );
};

/**
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
*/
const MainContent = () => {
  return (
      <div className="App">
          <AuthenticatedTemplate>
              <ProfileContent />
          </AuthenticatedTemplate>

          <UnauthenticatedTemplate>
              <h5>
                  <center>
                      Please sign-in to see your profile information.
                  </center>
              </h5>
          </UnauthenticatedTemplate>
      </div>
  );
};

export default function App() {
  return (
      <PageLayout>
          <center>
              <MainContent />
          </center>
      </PageLayout>
  );
}

ファイルを保存します。

最後に、 src/components フォルダーの下で、 ProfileData.jsx ファイルを開き、ファイルの内容を次のコードスニペットに置き換えます。

import React from "react";
import ListGroup from 'react-bootstrap/ListGroup'; 
import Table from 'react-bootstrap/Table';
/**
 * Renders information about the user obtained from MS Graph 
 * @param props
 */
export const ProfileData = (props) => {
  const holidays = props.graphqlData.data.publicholidays.items;
  return (
    <Table striped bordered hover responsive>
    <thead>
      <tr>
        <th>CountryOrRegion</th>
        <th>Holiday</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      {holidays.map((item,i) => (
      <tr key={i}>
        <td>{item.countryOrRegion}</td>
        <td>{item.holidayName}</td>
        <td>{item.date}</td>
      </tr>
      ))}
      </tbody>
    </Table>
)};

ファイルの変更をすべて保存します。
ターミナルアプリケーションで、React プロジェクトのルートフォルダーに移動し、コマンド npm start を実行して、アプリケーションをローカルでテストします。
アプリケーションがブラウザーに http://localhost:3000から読み込まれたら、チュートリアルの最後の部分の手順に従って、アプリケーションから API を呼び出します。
サインインした後、 GraphQL データ用の Query Fabric API ボタンを選択します。
Fabric の GraphQL API に対する認証された要求が成功すると、GraphQL クエリから React クライアントアプリケーションの Lakehouse にデータが返されます。