Упражнение — изменение способа представления данных с помощью шаблонов

  • 2 мин

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

Перед началом работы

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

1. Настройка приложения Microsoft Entra

Для этого модуля требуется приложение со следующими параметрами:

  • Имя: My app
  • Платформа: одностраничное приложение (SPA)
  • Поддерживаемые типы учетных записей: учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox)
  • URI перенаправления: http://localhost:3000

Чтобы создать это приложение, выполните указанные ниже действия.

  1. В браузере перейдите в Центр администрирования Microsoft Entra, войдите в систему и перейдите к идентификатору Microsoft Entra.

  2. В расположенной слева области выберите пункт Регистрация приложений и щелкните Новая регистрация.

    Снимок экрана, на котором выбран пункт

  3. На экране Регистрация приложения введите следующие значения:

    • Имя: введите имя вашего приложения.
    • Поддерживаемые типы учетных записей: выберите Учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox).
    • URI перенаправления (необязательно): выберите Одностраничное приложение (SPA) и введите http://localhost:3000.
    • Нажмите Зарегистрировать.

    Снимок экрана: регистрация приложения в Идентификаторе Microsoft Entra.

2. Настройте свою среду

  1. На рабочем столе создайте папку customize-mgt.

  2. Откройте папку customize-mgt в Visual Studio Code.

  3. В Visual Studio Code в папке customize-mgt создайте файл index.html.

  4. Скопируйте следующий код в index.htmlи замените YOUR-CLIENT-ID скопированным идентификатором приложения (клиента) из созданного ранее приложения Microsoft Entra.

    <!DOCTYPE html>
<html lang="en">
    <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
    </head>
    <body>
      <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
      <mgt-login></mgt-login>
      <mgt-agenda></mgt-agenda>
    </body>
</html>

  5. Добавьте папку с именем .vscode в корневую папку проекта.

  6. Добавьте файл с именем settings.json в папку .vscode. Скопируйте и вставьте указанный ниже код в файл settings.json и сохраните этот файл.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Использование шаблонов в компоненте Login

Предположим, вам необходимо отображать электронный адрес пользователя в качестве содержимого кнопки "Выполнен вход в систему" в компоненте Login. Вы можете использовать тег template в компоненте <mgt-login> и добавить выражение signed-in-button-content в качестве значения параметра data-type. В шаблоне используйте выражение {{personDetails.mail}} для доступа и отображения электронного адреса пользователя. Компонент Login будет выглядеть, как в этом примере:

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.mail}}</div>
  </template>
</mgt-login>

Совет

Если вы используете Microsoft Graph Toolkit с библиотекой JavaScript, в которой уже используется {{ }}, можно настроить Microsoft Graph Toolkit таким образом, чтобы использовать другие символы, например [[ ]], для обозначения шаблонов и предотвращения конфликтов с платформой JavaScript.

Окончательная версия файла index.html будет выглядеть, как в этом примере:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

    <mgt-login>
      <template data-type="signed-in-button-content">
        <div>{{personDetails.mail}}</div>
      </template>
    </mgt-login>

    <mgt-agenda
        date="June 28, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>
  </body>
</html>

Тестирование приложения в браузере

  1. В Visual Studio Code нажмите указанные ниже клавиши и найдите Live Server.

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Запустите Live Server, чтобы протестировать приложение.

  2. В браузере перейдите по адресу http://localhost:3000. Если файл index.html открыт при запуске Live Server, браузер откроет http://localhost:3000/Index.html. Обязательно измените URL-адрес на http://localhost:3000, прежде чем входить с помощью учетной записи разработчика Microsoft 365. Если не обновить URL-адрес, появится следующая ошибка.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  3. Войдите в систему, используя свою учетную запись разработчика Microsoft 365. Предоставьте необходимые разрешения и нажмите кнопку Принять.

  4. Теперь после того как пользователь выполнит вход в систему, в содержимом кнопки "Выполнен вход в систему" будет отображаться электронный адрес этого пользователя.

Снимок экрана с результатом данного упражнения.