Создание веб-части SharePoint с помощью Microsoft Graph Toolkit

  • Статья

В этом разделе рассказывается, как использовать компоненты Microsoft Graph Toolkit в клиентской веб-части SharePoint. Начало работы с включает следующие действия:

  1. Настройка среды разработки и создание веб-части.
  2. Добавление пакета SharePoint Framework Microsoft Graph Toolkit.
  3. Добавление поставщика SharePoint.
  4. Добавление компонентов.
  5. Настройка разрешений.
  6. Развертывание пакета SharePoint Framework Microsoft Graph Toolkit.
  7. Создание и развертывание веб-части.
  8. Проверка веб-части.

Настройка среды разработки SharePoint Framework и создание новой веб-части

Следуйте инструкциям о том, Как настроить среду разработки SharePoint Framework, а затем создайте новую веб-часть.

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

Чтобы несколько компонентов SharePoint Framework не регистрировали собственный набор компонентов Microsoft Graph Toolkit на странице, необходимо развернуть пакет SharePoint Framework Microsoft Graph Toolkit в клиенте и ссылаться на компоненты Microsoft Graph Toolkit, которые вы используете в решении из этого пакета.

Пакет SharePoint Framework Microsoft Graph Toolkit содержит библиотеку SharePoint Framework, которая регистрирует один экземпляр компонентов Microsoft Graph Toolkit в SharePoint.

Установите пакет NPM SharePoint Framework Microsoft Graph Toolkit с помощью следующей команды:

npm install @microsoft/mgt-spfx

Добавление поставщика SharePoint

Поставщики Microsoft Graph Toolkit обеспечивают проверку подлинности и доступ к Microsoft Graph для компонентов. Дополнительные сведения см. в статье Использование поставщиков. Веб-части SharePoint всегда существуют в контексте с проверкой подлинности, так как пользователю уже пришлось войти в систему, чтобы перейти на страницу, на которой размещена веб-часть. Используйте этот контекст для инициализации поставщика SharePoint.

Сначала добавьте поставщика в веб-часть. Найдите файл src\webparts\<your-project>\<your-web-part>.ts в папке проекта и добавьте следующую строку в верхнюю часть файла прямо под существующими операторами import :

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

Затем необходимо инициализировать поставщика с контекстом проверки подлинности метода onInit() веб-части. В том же файле добавьте следующий код прямо перед строкой public render(): void {:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

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

Теперь можно приступить к добавлению компонентов в веб-часть. Просто добавьте компоненты в HTML-код внутри метода render(), и компоненты будут использовать контекст SharePoint для получения доступа к Microsoft Graph. Например, чтобы добавить компонент "Человек", код будет выглядеть следующим образом:

public render(): void {
    this.domElement.innerHTML = `
      <mgt-person person-query="me" view="twolines"></mgt-person>
    `;
}

Примечание.

При создании веб-части с помощью React, ознакомьтесь с документацией @microsoft/mgt-spfx, чтобы узнать, как использовать @microsoft/mgt-react.

Настройка разрешений

Чтобы вызвать Microsoft Graph из приложения SharePoint Framework, необходимо запросить необходимые разрешения в пакете решения, а администратор клиента Microsoft 365 должен утвердить запрошенные разрешения.

Чтобы добавить разрешения в пакет решения, найдите и откройте файл config\package-solution.json, а также настройте:

"isDomainIsolated": false,

Под этой строкой добавьте следующее:

"webApiPermissionRequests":[],

Определите необходимые разрешения API Microsoft Graph в зависимости от используемых компонентов. На странице документации каждого компонента содержится список разрешений, требуемых компоненту. Вам потребуется добавить каждое разрешение, необходимое для webApiPermissionRequests. Например, если вы используете компонент "Человек" и компонент "Повестка дня", webApiPermissionRequests может выглядеть следующим образом:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Развертывание пакета SharePoint Framework Microsoft Graph Toolkit

Перед развертыванием пакета SharePoint Framework в клиенте необходимо развернуть пакет SharePoint Framework Microsoft Graph Toolkit на клиенте. Вы можете скачать пакет, соответствующий версии Microsoft Graph Toolkit, использованной в проекте, из раздела Версии на GitHub.

Важно!

Поскольку в клиенте может быть установлена только одна версия библиотеки SharePoint Framework для Microsoft Graph Toolkit, перед использованием Microsoft Graph Toolkit в решении определите, развернута ли в вашей организации или клиенте версия библиотеки SharePoint Framework и используется ли она.

После загрузки пакета SPPKG SharePoint Framework Microsoft Graph Toolkit, загрузите его в каталог приложений SharePoint Online. Перейдите на страницу дополнительных функций Центра администрирования SharePoint. Выберите Открыть в разделе Приложения, а затем щелкните Каталог приложений и Распространение приложений для SharePoint. Загрузите файл .sppkg и нажмите кнопку Развернуть.

Создание и развертывание веб-части

Теперь вы создадите приложение и развернете его в SharePoint. Создайте приложение с помощью следующих команд:

gulp build
gulp bundle
gulp package-solution

В папке sharepoint/solution будет новый файл .sppkg. Вам потребуется отправить этот файл в каталог приложений SharePoint Online. Перейдите на страницу дополнительных функций Центра администрирования SharePoint. Выберите Открыть в разделе Приложения, а затем щелкните Каталог приложений и Распространение приложений для SharePoint. Загрузите файл .sppkg и нажмите кнопку Развернуть.

Затем необходимо утвердить разрешения как администратор.

Перейдите в Центр администрирования SharePoint. В области навигации слева выберите Дополнительно, а затем Доступ через API. Вы должны увидеть ожидающие запросы для каждого из разрешений, которые были добавлены в файл config\package-solution.json. Выберите и утвердите каждое разрешение.

Проверка веб-части

Теперь вы готовы добавить веб-часть на страницу SharePoint и протестировать ее. Для тестирования веб-частей, использующих Microsoft Graph Toolkit, необходимо использовать размещенное рабочее место, так как для вызова Microsoft Graph компонентам требуется контекст проверки подлинности. Размещенную рабочую среду можно найти в https://< YOUR_TENANT.sharepoint.com/_layouts/15/workbench.aspx>.

config\serve.json Откройте файл в проекте и замените значение initialPage url-адресом для размещенной workbench:

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

Сохраните файл и запустите следующую команду на консоли, чтобы создать и предварительно просмотреть веб-часть:

gulp serve

Размещенное рабочее место автоматически откроется в браузере. Добавьте веб-часть на страницу, и вы увидите ее вместе с компонентами Microsoft Graph Toolkit! Пока команда gulp serve все еще работает на консоли, можно продолжать вносить изменения в код, а затем просто обновлять браузер, чтобы увидеть изменения.

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