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

10 分

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

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

アプリを設定する

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

コンピューターでコンソールを開き、アプリを保存するフォルダーに移動します。
ソースコードを入手するには、GitHub リポジトリにアクセスして、次のいずれかのオプションを選択します。
- Git を使用する場合は、git clone コマンドを使用してプロジェクトのクローンを作成します。
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
- Git を使用しない場合は、[コード] ボタンを選択してから [ZIP をダウンロード] を選択します。 *.zip ファイルをコンピューターに抽出します。
ダウンロードまたは複製されたプロジェクトのルートフォルダー 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 で定義されているユーザーインターフェイス要素を処理します。
auth.js ファイルを開き、定数msalConfigを見つけます。
```
const msalConfig = {
    auth: { .. }
}
```
プロパティの値をclientId、先ほど登録した Microsoft Entra アプリケーション (spa-aad-app) からコピーしたアプリケーション (クライアント) ID の値に置き換えます。この値は、Microsoft Entra アプリケーション (spa-aad-app) の概要ページから取得できます。
同じ 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'
  }
};
```
適切な Microsoft Entra ID を auth.jsに追加したので、ファイル内のコードを調べるのに少し時間がかかります。次の関数が含まれていることに注意してください。
- signIn(): ユーザーにサインインします。
- getToken(): Microsoft Graph で使用できるアクセストークンの取得を処理します。
graph.js ファイルを開き、アクセストークンを取得し、Microsoft Graph の /me API を呼び出し、ユーザーの ID と displayName の値を選択することに注意してください。アクセストークンが取得され、要求とともに /me に送信される承認ヘッダーに追加される方法に注目してください。
最後に、ui.js を開き、少し時間を取ってdisplayUI() 関数を調べます。 index.html の要素を表示および非表示にし、サインイン後にユーザー名を表示する役割を果たします。

アプリを実行する

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

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

コンソールで、ソースコードがあるプロジェクトフォルダーに移動します。
コマンドラインで次のスクリプトを実行します。スクリプトはアプリをローカルで起動し、ブラウザーで http://localhost:8080 を開きます。
```
npm start
```
アプリが正しく構成されている場合は、サインインボタンが表示されます。
Microsoft Entra アプリケーションを登録したときに以前のユニットを使用したのと同じ Microsoft 365 開発者テナントのアカウントを使用してサインインします。
サインインに成功すると、同意を求めるプロンプトが表示されます。
アプリケーションがユーザーに代わって操作を実行することに同意するには、[同意する] を選択します。
同意すると、アプリケーションは検証済みのアカウント情報を使用してアクセストークンを取得しようとします。 MSAL ライブラリがこれを処理します。
トークンがアプリケーションに戻った後、Microsoft Graph /me エンドポイントに対して GET 要求が行われ、アクセストークンが承認ヘッダーで渡されます。 /me を呼び出すと、サービスからデータが安全に取得されます。
Microsoft Graph から応答を受信すると、サインインしたユーザーの名前がブラウザーに表示されます。

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

続行

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

アプリを設定する

アプリを実行する

フィードバック

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