Создание веб-приложения с помощью Microsoft Graph Toolkit

  • Статья

В этом разделе описывается, как приступить к работе с Microsoft Graph Toolkit в веб-приложении, написанном на ванильной версии JavaScript. Пошаговые инструкции см. в модуле Начало работы с Microsoft Graph Toolkit. Чтобы узнать, как использовать Toolkit в веб-среде, см. статью Создание веб-приложения (React) или Создание веб-приложения (Angular).

Приступая к работе с набором средств, необходимо выполнить следующие действия.

  1. Добавление Microsoft Graph Toolkit в проект.
  2. Инициализация поставщика библиотеки проверки подлинности Майкрософт 2(MSAL2).
  3. Добавление компонентов.
  4. Тестирование приложения.

Добавление Microsoft Graph Toolkit в проект

Вы можете использовать Microsoft Graph Toolkit в приложении, установив пакеты npm или загрузив его из сети доставки содержимого (CDN).

Чтобы использовать набор средств через CDN, добавьте на HTML-страницу следующий скрипт и разметку:

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

Инициализация поставщика MSAL2

Поставщики Microsoft Graph Toolkit обеспечивают проверку подлинности и доступ к Microsoft Graph для компонентов. Дополнительные сведения см. в статье Использование поставщиков. Поставщик MSAL2 использует MSAL-браузер для входа пользователей и получения маркеров. Этот поставщик можно инициализировать в HTML-коде или JavaScript.

Примечание. Если в настоящее время вы используете поставщик MSAL и хотите обновить его до поставщика MSAL2, см. раздел Переход с поставщика MSAL на поставщик MSAL2. Если вы хотите использовать собственную серверную проверку подлинности, используйте поставщик прокси-сервера вместо поставщика MSAL2.

Вы можете инициализировать поставщик в коде JavaScript или HTML.

Чтобы инициализировать поставщика MSAL в JavaScript, добавьте следующий код в приложение:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

Идентификатор клиента — это единственное свойство, необходимое для инициализации поставщика, но можно задать дополнительные параметры. Полный список см. в разделе Поставщик MSAL2.

Создание идентификатора клиента/приложения

Чтобы получить идентификатор клиента, необходимо зарегистрировать приложение в Microsoft Entra ID.

Добавление компонентов

После инициализации поставщика MSAL2 можно приступить к использованию любого из компонентов набора средств.

В этом примере используются модули ES6, поставщик MSAL2, инициализированный Login в JavaScript, и компонент:

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

В следующем примере используются модули ES6, поставщик MSAL2, инициализированный Login в HTML, и компонент:

<script type="module">
  import { registerMgtMsal2Provider } from "node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js";
  import { registerMgtLoginComponent } from "node_modules/@microsoft/mgt-components/dist/es6/index.js";
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>

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

Чтобы протестировать приложение, MSAL требует, чтобы страница была размещена на веб-сервере для перенаправлений проверки подлинности.

Если вы только начинаете работать и хотите поэкспериментировать с, можно использовать Динамический сервер в Visual Studio Code или на любом похожем сервере облегченной разработки. Скачайте расширение и откройте HTML-файл с помощью динамического сервера.

Примечание. Убедитесь в том, что URI перенаправления в приложении регистрации настроен на порт localhost, на котором размещено приложение. Перейдите к регистрации приложения в Центр администрирования Microsoft Entra, щелкните Проверка подлинности в разделе управление и добавьте правильный URI перенаправления.

Отслеживание состояния входа пользователя

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

Пакет mgt-element предоставляет служебную isSignedIn функцию, которую можно вызвать, чтобы определить, выполнил ли пользователь вход.

Если вы используете набор средств через пакеты npm, вы можете импортировать Provider и ProviderState из @microsoft/mgt-element.

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

Дальнейшие действия