Упражнение — использование Microsoft Graph в веб-приложении для получения фотографии профиля пользователя

10 мин

Вы изучили все основные понятия, необходимые для доступа к профилю пользователя с помощью Microsoft Graph. Теперь пришло время создать клиентское приложение, которое будет извлекать и отображать фотографию вошедшего продавца.

Для успешного завершения этого урока необходима учетная запись пользователя (например, из клиента разработчика Microsoft 365) с аватаром, который можно использовать в приложении.

Настройка приложения

В этом упражнении вы получите доступ к репозиторию GitHub, добавите в приложение идентификаторы Microsoft Entra и добавите код для доступа к фотографии с помощью Microsoft Graph. Если вы еще не создали регистрацию приложения Microsoft Entra, выполните необходимый модуль, прежде чем продолжить.

Получить код первоначального приложения, используемого в этом упражнении, можно одним из указанных ниже способов.

Если вы используете Git, клонируйте проект с помощью команды git clone:
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
Если вы не используете Git, в веб-браузере перейдите по адресу https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart. Нажмите кнопку Код, а затем — Скачать ZIP. Извлеките ZIP-файл на компьютер.
Откройте папку проекта в редакторе кода.
Приложение содержит указанные ниже файлы.
- index.html: определяет интерфейс, демонстрируемый пользователю при доступе к веб-сайту. Он загружает сценарий библиотеки проверки подлинности Майкрософт (MSAL) и сценарии пользовательских приложений, предоставляет пользователю способ выполнения входа и отображает имя пользователя после его входа.
- auth.js: определяет конфигурацию MSAL для связывания приложения с идентификатором Microsoft Entra, входа пользователя в приложение и обработки получения маркера доступа, который может использовать Microsoft Graph.
- graph.js: вызовы в Microsoft 365 для доступа к вошедшему профилю /me. Он использует auth.js для получения маркера доступа, применяемого для вызова API Microsoft Graph.
- ui.js: обрабатывает элементы пользовательского интерфейса в index.html.
Откройте файл auth.js и найдите константу msalConfig:
```
const msalConfig = {
  auth: { .. }
}
```
Замените значение clientId свойства скопированным значением идентификатора приложения (клиента) из зарегистрированного ранее приложения Microsoft Entra (spa-aad-app). Это значение можно получить на странице обзора приложения Microsoft Entra (spa-aad-app).
В том же auth.js файле найдите msalConfig.auth.authority свойство . Замените <your directory ID here> значение значением идентификатора каталога (клиента) приложения Microsoft Entra (spa-aad-app), зарегистрированного ранее. Это значение можно получить на странице обзора приложения Microsoft Entra (spa-aad-app).

Константа msalConfig должна выглядеть примерно так, как показано в следующем коде с уникальными идентификаторами клиента Microsoft Entra и зарегистрированного приложения:
```
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() в файл, как показано в следующем коде. Эта функция получает фотографию вошедшего пользователя с помощью конечной точки API Microsoft Graph /me/photo/$value.
```
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 пользователя есть какие-нибудь файлы, а затем запустите приложение в локальной среде.

Просмотрите веб-приложение, выполнив следующую команду в терминале:
```
npm start
```
В браузере должен отображаться адрес http://localhost:8080.
Войдите в систему с помощью своей учетной записи Microsoft 365, нажав кнопку Войти с помощью учетной записи Майкрософт. Убедитесь, что в учетной записи, с помощью которого вы входите, есть фотография профиля.
Войдите с помощью учетной записи в том же клиенте разработчика Microsoft 365, где зарегистрировано приложение Microsoft Entra.
После успешного входа подтвердите, что отображается приветствие и кнопка для показа аватара.
Нажмите кнопку Показать аватар. Появится аватар вошедшего пользователя. Если с профилем не связана фотография, фотография не будет отображаться.

Продолжить

Упражнение — использование Microsoft Graph в веб-приложении для получения фотографии профиля пользователя

Настройка приложения

Запуск приложения

Обратная связь