組織データ: ユーザーのサインインとアクセストークンの取得

2025-06-13

Microsoft Graph が組織データにアクセスするには、ユーザーが Microsoft Entra ID で認証する必要があります。この演習では、Microsoft Graph Toolkit の mgt-login コンポーネントを使用して、ユーザーを認証し、アクセストークンを取得する方法について説明します。その後、アクセストークンを使用して Microsoft Graph を呼び出すことができます。

注

Microsoft Graph を初めて使用する場合は、 Microsoft Graph の基礎ラーニングパスで詳細を確認できます。

この演習では、以下のことを行います。

Microsoft Entra ID アプリを Microsoft Graph Toolkit に関連付けてユーザーを認証し、組織データを取得する方法について説明します。
スコープの重要性について説明します。
Microsoft Graph Toolkit の mgt-login コンポーネントを使用してユーザーを認証し、アクセストークンを取得する方法について説明します。

前の演習では、Microsoft Entra ID でアプリ登録を作成し、アプリケーションサーバーと API サーバーを開始しました。また、 .env ファイル内の次の値も更新しました (TEAM_ID と CHANNEL_ID は省略可能です)。
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
続行する前に、前の演習を完了していることを確認します。
ブラウザー (http://localhost:4200) に戻り、ヘッダーで [サインイン ] を選択し、Microsoft 365 Developer テナントの管理者ユーザーアカウントを使用してサインインします。

ヒント

Microsoft 365 開発者テナント管理者アカウントでサインインします。 Microsoft 365 管理センターに移動すると、開発者テナント内の他のユーザーを表示できます。
アプリケーションに初めてサインインする場合は、アプリケーションによって要求されたアクセス許可に同意するように求められます。これらのアクセス許可 ("スコープ" とも呼ばれます) の詳細については、次のセクションでコードを調べる際に学習します。 [ 承諾] を選択して続行します。
サインインすると、ヘッダーに表示されるユーザーの名前が表示されます。

サインインしたので、ユーザーのサインインに使用するコードを見て、アクセストークンとユーザープロファイルを取得しましょう。 Microsoft Graph Toolkit の一部である mgt ログイン Web コンポーネントについて学習します。

ヒント

Visual Studio Code を使用している場合は、次を選択してファイルを直接開くことができます。

Windows/Linux: Ctrl + P
Mac: Cmd + P

次に、開くファイルの名前を入力します。

クライアント/package.json を開き、@microsoft/mgtパッケージと@microsoft/mgt-components パッケージが依存関係に含まれていることに注意してください。 @microsoft/mgt パッケージには、MSAL (Microsoft Authentication Library) プロバイダーの機能と、mgt-login などの Web コンポーネントが含まれており、ユーザーのサインインや組織データの取得と表示に使用できます。
client/src/main.ts を開き、@microsoft/mgt-components パッケージから次のインポートが行われます。インポートされたシンボルは、アプリケーションで使用される Microsoft Graph Toolkit コンポーネントを登録するために使用されます。
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
ファイルの一番下までスクロールし、次のコードを書き留めます。
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
このコードは、 mgt-login、 mgt-search-results、および mgt-person Web コンポーネントを登録し、アプリケーションで使用できるようにします。
mgt-login コンポーネントを使用してユーザーをサインインさせるには、Microsoft Entra ID アプリのクライアント ID ( ファイルに格納) を参照して使用する必要があります。
graph.service.tsを開き、init()関数を見つけます。ファイルの完全なパスは 、client/src/app/core/graph.service.ts です。次のインポートとコードが表示されます。
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
このコードは、新しい Msal2Provider オブジェクトを作成し、アプリの登録から Microsoft Entra ID クライアント ID と、アプリがアクセスを要求する scopes を渡します。 scopesは、アプリがアクセスする Microsoft Graph リソースへのアクセスを要求するために使用されます。 Msal2Provider オブジェクトが作成されると、Providers.globalProvider オブジェクトに割り当てられます。このオブジェクトは、Microsoft Graph Toolkit コンポーネントによって Microsoft Graph からデータを取得するために使用されます。
エディターで header.component.html を開き、 mgt-login コンポーネントを見つけます。ファイルへの完全なパスは client/src/app/header/header.component.htmlです。
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
mgt-login コンポーネントは、ユーザーのサインインを有効にし、Microsoft Graph で使用されるトークンへのアクセスを提供します。サインインに成功すると、 loginCompleted イベントがトリガーされ、 loginCompleted() 関数が呼び出されます。この例では 、mgt-login は Angular コンポーネント内で使用されますが、任意の Web アプリケーションと互換性があります。

mgt-login コンポーネントの表示は、featureFlags.microsoft365Enabledに設定されているtrue値によって異なります。このカスタムフラグは、 ENTRAID_CLIENT_ID 環境変数が存在することを確認して、アプリケーションが適切に構成され、Microsoft Entra ID に対して認証できることを確認します。このフラグは、ユーザーが一連の演習全体に従うのではなく、チュートリアル内で AI またはコミュニケーションの演習のみを完了することを選択した場合に対応するために追加されます。
header.component.tsを開き、loginCompleted関数を見つけます。この関数は、 loginCompleted イベントが生成されたときに呼び出され、 Providers.globalProviderを使用してサインインしているユーザーのプロファイルの取得を処理します。
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
この例では、Microsoft Graph me API に対してユーザーのプロファイルを取得する呼び出しが行われています (me は、現在サインインしているユーザーを表します)。 this.userLoggedIn.emit(me) コードステートメントは、親コンポーネントにプロファイルデータを渡すイベントをコンポーネントから出力します。この場合、親コンポーネントは app.component.ts ファイルであり、これはアプリケーションのルートコンポーネントです。

mgt ログイン コンポーネントの詳細については、Microsoft Graph Toolkit のドキュメントを参照してください。
アプリケーションにログインしたので、組織のデータを取得する方法を見てみましょう。

次の手順

組織データ: ファイルの取得、チャット、Teams へのメッセージの送信

次の方法で共有

組織データ: ユーザーのサインインとアクセス トークンの取得

サインイン機能の使用

サインイン コードの探索

次の手順

フィードバック

その他のリソース

組織データ: ユーザーのサインインとアクセストークンの取得

サインインコードの探索