エクササイズ - MSAL を使用してアクセス トークンを取得する

  • 10 分

これまでに学んだすべての概念を使用して何かを構築する時が来ました。

この演習では、独自のアプリケーションを設定します。 アプリケーションは、Microsoft Graph を呼び出して、サインインしたユーザーのプロファイル情報を取得します。

アプリを設定する

この演習では、ユーザーにサインインしてMicrosoft Entra IDし、Microsoft Graph を呼び出すアプリケーションの実行を開始します。 GitHub リポジトリにアクセスしてから、マシン上でローカルに実行するようにアプリケーションを構成します。

  1. コンピューターでコンソールを開き、アプリを保存するフォルダーに移動します。

  2. ソース コードを入手するには、GitHub リポジトリ にアクセスして、次のいずれかのオプションを選択します。

    • Git を使用する場合は、git clone コマンドを使用してプロジェクトのクローンを作成します。

      git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    • Git を使用しない場合は、[コード] ボタンを選択してから [ZIP をダウンロード] を選択します。 *.zip ファイルをコンピューターに抽出します。

  3. ダウンロードまたは複製されたプロジェクトのルート フォルダー mslearn-retrieve-m365-data-with-msgraph-quickstart をお気に入りのエディターで開きます。

    アプリケーションには次のファイルが含まれます。

    • index.html: ユーザーが Web サイトにアクセスしたときに表示されるユーザー インターフェイスを定義します。 Microsoft Authentication Library (MSAL) スクリプトとカスタム アプリケーション スクリプトをロードし、ユーザーがサインインする方法を提供し、サインイン後にユーザーの名前を表示します。
    • auth.js: アプリケーションをMicrosoft Entra IDに関連付け、ユーザーをアプリケーションにサインインさせ、Microsoft Graph で使用できるアクセス トークンの取得を処理する MSAL 構成を定義します。
    • graph.js: サインインした /me プロファイルにアクセスするために Microsoft 365 を呼び出します。 auth.js に依存して、Microsoft Graph API 呼び出しに使用されるアクセス トークンを取得します。
    • ui.js: index.html で定義されているユーザー インターフェイス要素を処理します。

  4. auth.js ファイルを開き、定数msalConfigを見つけます。

    const msalConfig = {
    auth: { .. }
}

  5. clientId プロパティの値を、先ほど登録したMicrosoft Entra アプリケーション (spa-aad-app) からコピーしたアプリケーション (クライアント) ID の値に置き換えます。 この値は、Microsoft Entra アプリケーション (spa-aad-app) の概要ページから取得できます。

  6. 同じ auth.js ファイルで、 msalConfig.auth.authority プロパティを見つけます。 <your directory ID here>値を、先ほど登録したMicrosoft Entra アプリケーション (spa-aad-app) のディレクトリ (テナント) ID 値に置き換えます。 この値は、Microsoft Entra アプリケーション (spa-aad-app) の概要ページから取得できます。

    msalConfig定数は次のコードのようになります。一意の ID は、Microsoft Entra テナントと登録済みアプリケーションの ID です。

    const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};

  7. 適切なMicrosoft Entra ID を auth.jsに追加したので、ファイル内のコードを調べるのに少し時間がかかります。 次の関数が含まれていることに注意してください。

    • signIn(): ユーザーにサインインします。
    • getToken(): Microsoft Graph で使用できるアクセス トークンの取得を処理します。

  8. graph.js ファイルを開き、アクセス トークンを取得し、Microsoft Graph の /me API を呼び出し、ユーザーの ID と displayName の値を選択することに注意してください。 アクセス トークンが取得され、要求とともに /me に送信される承認ヘッダーに追加される方法に注目してください。

  9. 最後に、ui.js を開き、少し時間を取ってdisplayUI() 関数を調べます。 index.html の要素を表示および非表示にし、サインイン後にユーザー名を表示する役割を果たします。

アプリを実行する

この手順では、Node.js がマシンにインストールされていることを確認してください。

アプリケーションがローカルで実行できるかを確認するときが来ました。

  1. コンソールで、ソース コードがあるプロジェクト フォルダーに移動します。

  2. コマンド ラインで次のスクリプトを実行します。 スクリプトはアプリをローカルで起動し、ブラウザーで http://localhost:8080 を開きます。

    npm start

  3. アプリが正しく構成されている場合は、サインイン ボタンが表示されます。

    サインイン ボタンを示すスクリーンショット。

  4. Microsoft Entra アプリケーションを登録したときに前のユニットを使用したのと同じ Microsoft 365 開発者テナントのアカウントを使用してサインインします。

  5. サインインに成功すると、同意を求めるプロンプトが表示されます。

    同意ページのスクリーンショット。

  6. アプリケーションがユーザーに代わって操作を実行することに同意するには、[同意する] を選択します。

  7. 同意すると、アプリケーションは検証済みのアカウント情報を使用してアクセス トークンを取得しようとします。 MSAL ライブラリがこれを処理します。

  8. トークンがアプリケーションに戻った後、Microsoft Graph /me エンドポイントに対して GET 要求が行われ、アクセス トークンが承認ヘッダーで渡されます。 /me を呼び出すと、サービスからデータが安全に取得されます。

  9. Microsoft Graph から応答を受信すると、サインインしたユーザーの名前がブラウザーに表示されます。

    ウェルカム メッセージのスクリーンショット。

これで、Microsoft Graph を使用して Microsoft 365 データを取得するアプリケーションが正常に構築されました。