Начало работы с Microsoft Graph Toolkit

  • Статья

Компоненты Microsoft Graph Toolkit можно легко добавить в веб-приложение, веб-часть SharePoint или вкладки Microsoft Teams. Компоненты основаны на веб-стандартах и могут использоваться как в простых проектах JavaScript, так и в популярных веб-платформах, таких как Reach, Angular и Vue.js.

Просмотрите это короткое видео, чтобы приступить к работе с набором средств.

Пошаговое руководство см. в модуле Начало работы с Microsoft Graph Toolkit .

Настройка клиента Microsoft 365

Чтобы использовать Microsoft Graph Toolkit для разработки приложения, необходим доступ к клиенту Microsoft 365. Если у вас нет клиента Microsoft 365, вы можете претендовать на него в рамках Программы разработчиков Microsoft 365. Дополнительные сведения см. в разделе Вопросы и ответы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.

Настройка среды разработки

Для разработки с помощью набора средств вам потребуется:

  • Текстовый редактор или интегрированная среда разработки. Вы можете использовать любой редактор или интегрированную среду разработки или установить и использовать Visual Studio Code бесплатно.
  • Современный веб-браузер, например Microsoft Edge, Google Chrome или Firefox.
  • Версия LTS Node.js, которую можно установить из nodejs.org.

Использование набора средств Microsoft Graph

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

Использование набора средств с помощью модулей ES6 обеспечивает полный контроль над процессом объединения и позволяет упаковать только код, необходимый для приложения. Чтобы использовать модули ES6, добавьте @microsoft/mgt-elementпакеты , @microsoft/mgt-componentsи @microsoft/mgt-msal2-provider в проект:

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

Чтобы использовать компоненты в качестве пользовательского элемента в HTML, их необходимо зарегистрировать. Чтобы использовать компоненты в коде, импортируйте и запустите необходимую функцию регистрации компонентов. В следующем примере показано, как это сделать для компонентов повестки дня и входа:

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

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

Если вы хотите зарегистрировать все компоненты из @microsoft/mgt-components, можно использовать вспомогательный registerMgtComponents() метод. Декларативное использование поставщиков по-прежнему требует отдельной регистрации соответствующего поставщика, так как они получаются из разных пакетов.

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

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

Важно!

При работе с встряхивающимся деревом вспомогательным пакетом, таким как Webpack или Rollup, вам потребуется импортировать и зарегистрировать отдельные компоненты. Это гарантирует, что все неиспользуемые компоненты будут вытряхивать из ваших сборок деревом.

Поставщик также можно настроить принудительно, как показано в следующем примере:

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>