演習 – JavaScript アプリを Microsoft 365 に接続する

3 分

この演習では、Microsoft 365 に接続されている JavaScript アプリを作成します。 MSAL JS ライブラリを使用して、ユーザーが Microsoft 365 アカウントでアプリにサインインさせ、Microsoft Graph JavaScript SDK を使用してユーザーの名前を表示できるようにします。

アプリの実行

この演習で使用する最初のアプリコードを取得するには、次のいずれかのオプションを選択します。

Git を使用する場合は、git clone コマンドを使用してプロジェクトのクローンを作成します。
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
Git を使用しない場合は、Web ブラウザーで https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart に移動します。 [コード] ボタンを選択してから [ZIP をダウンロード] を選択します。 ZIP ファイルをマシンに解凍します。
コードエディターでフォルダーを開きます。
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 次のコードのようになります。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'
  }
};
```
ターミナルで次のコマンドを実行して、Web アプリを確認します。
```
npm start
```
既定のブラウザーが開き、http://localhost:8080 を指しているはずです。
[Microsoft アカウントでサインイン] ボタンを選択して、Microsoft 365 アカウントでサインインします。
アカウントでサインインし、アプリに同意すると、アプリにユーザー名が表示されます。
ターミナルウィンドウで CTRL+C を選び、Node.js サーバーを停止します。

続行

演習 – JavaScript アプリを Microsoft 365 に接続する

アプリの実行

フィードバック