エクササイズ - Web アプリケーションで Microsoft Graph を使用して、ユーザーのプロファイル写真を取得する - Training

10 分

Microsoft Graph を使用してユーザーのプロファイルにアクセスするために必要なすべての概念を説明しました。次に、顧客アプリケーションを作成します。このアプリケーションは、サインインした営業担当者の写真を取得して表示します。

この単元を正常に完了するには、アプリケーションで使用できるプロファイル画像を含むユーザーアカウント (たとえば、Microsoft 365 開発者テナントから) が必要です。

アプリを設定する

この演習では、GitHub リポジトリにアクセスし、Microsoft Entra ID をアプリに追加し、Microsoft Graph を使用して写真にアクセスするコードを追加します。 Microsoft Entra アプリの登録をまだ作成していない場合は、続行する前に前提条件モジュールを完了してください。

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

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 ファイルをマシンに解凍します。
コードエディターでフォルダーを開きます。
エクスポートには次のファイルが含まれます。
- 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 次のコードのようになります。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'
  }
};
```

index.html ファイルを開きます。行 <h4>Welcome <span id="userName"></span></h4> を探し、その直後に以下のコードを追加します。

<div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

同じ index.html ファイルで、<head> タグを見つけます。次のコードを追加し、前のステップで追加した画像要素のスタイルを設定します。
```
<style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>
```
index.html ファイルを保存します。
graph.js ファイルを開きます。次のコードに示すように、getUserPhoto() という名前の新しい関数をファイルに追加します。この関数は、/me/photo/$value Microsoft Graph API エンドポイントを使用して、サインインしたユーザーの写真を取得します。
```
async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}
```
graph.js ファイルを保存します。

次のコードに示すように、ui.js ファイルを開き、displayProfilePhoto() という名前の新しい関数を追加します。この関数は、Microsoft Graph から受信した画像応答を前に作成した画像要素に表示します。

async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

ui.js ファイルを開き、既存の displayUI() 関数の最後に次のコードを追加します。このコードは、サインインしたユーザーがプロフィール写真を表示するために選択できるボタンを表示します。ユーザーがサインインしていない場合、ボタンは非表示のままになります。
```
var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";
```

サインインしたユーザーの写真を取得するための追加の関数とコードスニペットを追加したので、次のステップはアプリを実行することです。

アプリの実行

Microsoft Graph を使用して、ユーザーのファイルの一部を表示するようにアプリを拡張しました。ユーザーのインスタンスの OneDrive のルートフォルダーにいくつかのファイルがあることを確認してください。

ターミナルで次のコマンドを実行して、Web アプリを確認します。
```
npm start
```
既定のブラウザーが開き、http://localhost:8080 を指しているはずです。
[Microsoft アカウントでサインイン] ボタンを選択して、Microsoft 365 アカウントでサインインします。サインインするアカウントにプロフィール写真があることを確認します。
Microsoft Entra アプリケーションを登録したのと同じ Microsoft 365 開発者テナントのアカウントを使用してサインインします。
サインインに成功したら、ウェルカムメッセージとプロフィール写真を表示するボタンが表示されることを確認します。
[プロフィール写真を表示] ボタンを選択します。サインインしたユーザーのプロフィール写真が表示されます。プロファイルに写真が関連付けられていない場合、写真は表示されません。

続行

エクササイズ - Web アプリケーションで Microsoft Graph を使用して、ユーザーのプロファイル写真を取得する

アプリを設定する

アプリの実行

フィードバック