React で Microsoft Graph Toolkit を使用する

Microsoft Graph Toolkit は、Microsoft Graph への接続を簡素化し、代わりにアプリケーションに集中できるようにする Web コンポーネントのセットです。 Microsoft Graph Toolkit は、@microsoft/mgt npmパッケージを通じて配布される Web コンポーネントの汎用セットとして利用できます。

React を使用してアプリを構築している場合は、@microsoft/mgt-reactパッケージを使用できます。これにより、Microsoft Graph Toolkit Web コンポーネントが React コンポーネントにラップされ、複雑なデータを簡単に渡すことができます。

この記事では、Microsoft Graph Toolkit を使用して React アプリを作成し、それをMicrosoft 365 に接続する方法を、手順ごとに説明します。 手順を完了すると、Microsoft 365 から現在サインインしているユーザーの今後の予定を表示する React アプリが表示されます。

ヒント

また、対話型のコード ツアーとしてこのチュートリアルに従うこともできます。 詳細については、 スターター プロジェクトを含む GitHub リポジトリを参照してください。

前提条件

この記事の手順を実行するには、Microsoft 365 開発環境といくつかのツールが必要です。 詳細については、「はじめに」を参照してください。

React アプリを作成する

次のコマンドを実行して、新しい React アプリを作成します。 これにより、Type Script を使用して新しい React アプリが作成され、より堅牢なコードを記述してランタイム エラーを回避できます。

npx create-react-app my-m365-app --template typescript --use-npm

作業ディレクトリを新しく作成したアプリに変更します。

cd my-m365-app

次に、Microsoft Graph Toolkit React コンポーネントを含む mgt-reactnpm パッケージをインストールします。

npm i @microsoft/mgt-react

mgt-msal2-provider MSAL2 認証プロバイダーを含む と mgt-element npm パッケージもインストールします。

npm i @microsoft/mgt-element @microsoft/mgt-msal2-provider

アプリを実行できることを確認します。

npm start

http://localhost:3000を介してブラウザでアプリを開くことができるはずです。

Azure Active Directory アプリを作成する

Microsoft 365 への接続に使用する APIで ある Microsoft Graph は、OAuth 2.0 で保護されています。 アプリを Microsoft 365 に接続するには、Azure Active Directory (Azure AD) でアプリを作成し、アプリを使用しているユーザーに代わって特定のリソースにアクセスするためのアクセス許可をこのアプリに付与する必要があります。

「Azure Active Directory アプリの作成」の記事の手順に従って、新しい Azure AD アプリを作成します。

React アプリを Microsoft 365 に接続する

アプリケーションを Azure Active Directory (Azure AD) に登録したので、React アプリを Microsoft 365 に接続できます。 まず、ユーザーが Microsoft アカウントを使用してアプリにサインインできるようにします。

Azure AD アプリケーションの登録 ID をコピーします

1. Azure Portal で、アプリケーションの登録に移動します。
2. 概要ページが表示されていることを確認します。
3. [Essentials] セクションから、アプリケーション (クライアント) IDプロパティの値をコピーします

Microsoft Graph Toolkit 認証プロバイダーを構成する

次に、Microsoft Graph Toolkit が使用する認証プロバイダーを構成します。 この場合、スタンドアロン アプリケーションを構築するための適切なデフォルトである MSAL を使用します。 Teams や SharePoint など、Microsoft 365 の拡張ポイントのいずれかを使用する場合は、他のプロバイダーを使用します。

注:

現在 MSAL プロバイダーを使用していて、MSAL2 プロバイダーに更新する場合は、 MSAL2 プロバイダー に関する記事の手順に従ってください。

1. コード エディターで src/index.tsx ファイルを開き、インポートの一覧に次を追加します。

   import { Providers } from '@microsoft/mgt-element';
   import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
   

2. 最後のimportステートメントの後で、MSALプロバイダーを使用してMicrosoft GraphToolkitを初期化します。

   Providers.globalProvider = new Msal2Provider({
     clientId: 'REPLACE_WITH_CLIENTID'
   });
   

   clientIdプロパティの値を、先ほど Azure Portal でコピーしたApplication (client) IDプロパティの値に置き換えます。

これらの変更により、src/index.tsx ファイルは次のようになります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';

import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';

Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID'
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

[サインイン] ボタンを追加します。

ログイン Microsoft Graph Toolkit React コンポーネントを追加します。これにより、ユーザーが Microsoft アカウントでアプリにサインインするために使用できるサインインボタンが表示されます。

1. コードエディタで src/App.tsxファイルを開き、インポートのリストに次を追加します。

   import { Login } from '@microsoft/mgt-react';
   

2. App関数で、return句の内容を Microsoft Graph Toolkit ログインコンポーネントを含む基本構造に置き換えます。

   <div className="App">
     <header>
       <Login />
     </header>
   </div>
   

これらの変更により、src/App.tsx ファイルは次のようになります。

import { Login } from '@microsoft/mgt-react';
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <Login />
      </header>
    </div>
  );
}

export default App;

アプリケーションへのサインインをテストする

これで、Microsoft アカウントを使用してアプリケーションにサインインできるようになります。

1. React アプリが実行されているブラウザーに戻ります。 [サインイン] ボタンが表示されます。
2. [サインイン] ボタンをクリックすると、Microsoft アカウントでサインインするように求められます (Azure ポータルにアクセスしたアカウントと同じアカウントを使用できます)。
3. この Azure AD アプリケーションを使用するのはこれが初めてであるため、組織での使用に同意する必要があります。
4. サインインすると、React アプリにリダイレクトされます。 [サインイン] ボタンが変更され、Microsoft の名前が表示されます。

Microsoft 365 からデータを読み込む

Microsoft Graph Toolkit は、Microsoft 365 への認証を簡素化するだけでなく、そのデータの読み込みも簡素化します。 この例では、サインインした人のカレンダーを表示します。

アプリケーションに必要な権限を指定する

Microsoft 365 からデータを読み込む前に、ユーザーのデータにアクセスするためにアプリケーションに付与する必要のあるアクセス許可スコープのリストを指定する必要があります。 これらのスコープは、表示する情報の種類によって異なります。 この場合、ユーザーのカレンダーへのアクセスと、カレンダーにも表示されているユーザーに関する情報への基本的なアクセスが必要になります。 各APIに必要なスコープは、Microsoft Graph API のドキュメントに記載されています。

1. コードエディターで、src/index.tsxファイルを開き、プロバイダー初期化コードを更新します。

   Providers.globalProvider = new Msal2Provider({
     clientId: 'REPLACE_WITH_CLIENTID',
     scopes: ['calendars.read', 'user.read', 'openid', 'profile', 'people.read', 'user.readbasic.all']
   });
   

サインイン後にユーザーのデータを表示する

次に、アプリケーションを拡張して、ユーザーのカレンダーのデータを表示します。 この情報にアクセスできるのは、ユーザーがサインインした後のみです。 これを行うには、ユーザーのサインイン状態を追跡し、ユーザーが Microsoft アカウントでサインインした後に予定表データを表示する必要があります。

ユーザーのサインイン状態を追跡する

アプリケーションでユーザーのサインイン状態を追跡するには、React useStateフックとuseEffectフックをプロバイダー イベント ハンドラーと組み合わせて使用します。

1. コードエディターで、src/App.tsx ファイルを開き、既存のReact import ステートメントを拡張します。

   import React, { useState, useEffect } from 'react';
   

2. インポートに追加して、mgt-elementからProvider type およびProviderState type をインポートします。

   import { Providers, ProviderState } from '@microsoft/mgt-element';
   

3. アプリケーションでユーザーのサインイン状態を追跡できるようにする useIsSignedIn という名前のカスタム関数を追加します。

   function useIsSignedIn(): [boolean] {
     const [isSignedIn, setIsSignedIn] = useState(false);
   
     useEffect(() => {
       const updateState = () => {
         const provider = Providers.globalProvider;
         setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
       };
   
       Providers.onProviderUpdated(updateState);
       updateState();
   
       return () => {
         Providers.removeProviderUpdatedListener(updateState);
       }
     }, []);
   
     return [isSignedIn];
   }
   

この関数は 2 つのことを行います。 まず、React useState フックを使用して、コンポーネント内の状態を追跡できるようにします。 状態が変化するたびに、React はコンポーネントを再レンダリングします。 次に、React useEffectフックを使用して、Microsoft Graph Toolkit プロバイダーの変更を追跡し、必要に応じてコンポーネントを更新することで、コンポーネントのライフサイクルを延長します。

ユーザーがサインインしている場合にユーザーのカレンダーを読み込む

アプリケーションでユーザーのサインイン状態を追跡できるようになったので、ユーザーがサインインした後にカレンダーを表示できます。

1. コード エディターで src/App.tsx ファイルを開き、Agenda コンポーネントを使用してコンポーネント import ステートメントを拡張します。

   import { Agenda, Login } from '@microsoft/mgt-react';
   

2. 次に、 App 関数内で次を追加します。

   const [isSignedIn] = useIsSignedIn();
   

   これは、ブールisSignedIn定数を定義します。これを使用して、ユーザーが現在アプリケーションにサインインしているかどうかを判別できます。

3. return句の内容を追加のdivおよび Microsoft Graph Toolkit Agenda コンポーネントで拡張します。

   <div>
     {isSignedIn &&
       <Agenda />}
   </div>
   

これらの変更により、src/App.tsx ファイルは次のようになります。

import { Providers, ProviderState } from '@microsoft/mgt-element';
import { Agenda, Login } from '@microsoft/mgt-react';
import React, { useState, useEffect } from 'react';
import './App.css';

function useIsSignedIn(): [boolean] {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    const updateState = () => {
      const provider = Providers.globalProvider;
      setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
    };

    Providers.onProviderUpdated(updateState);
    updateState();

    return () => {
      Providers.removeProviderUpdatedListener(updateState);
    }
  }, []);

  return [isSignedIn];
}

function App() {
  const [isSignedIn] = useIsSignedIn();

  return (
    <div className="App">
      <header>
        <Login />
      </header>
      <div>
        {isSignedIn &&
          <Agenda />}
      </div>
    </div>
  );
}

export default App;

サインイン後にユーザーのカレンダーを表示するテスト

これらの変更により、Microsoft アカウントでアプリケーションにサインインすると、カレンダーが表示されます。

1. 変更を確認するには、ブラウザを閉じてもう一度開き、http://localhost:3000に移動します。 これを行うのは、Azure AD に要求するアクセス トークンに影響する scopes プロパティの値を変更したためです。
2. [サインイン] ボタンを選択し、Microsoft アカウントを使用してサインインします。 同意プロンプトで要求されたアクセス許可のリストへの追加に注意してください。 これは、scopeプロパティに追加の権限を含めたためです。
3. アプリケーションの使用に同意すると、現在のユーザーとそのカレンダーに関する情報が表示されます。

次の手順

• 「Microsoft Graph Toolkit の内容」を参照してください。
• プレイグラウンドでさまざまなコンポーネントを試してみてください。
• Stack Overflow で質問をお待ちしています。
• バグを報告するか、GitHub に機能リクエストを残してください。