Краткое руководство: создание первого приложения с помощью VS Code

Применяется к: Для разработчиков

Установите расширение SharePoint Embedded для Visual Studio Code, чтобы создать тип контейнера, настроить приложение-владелец и выставление счетов, зарегистрировать тип контейнера, создать контейнеры и загрузить пример приложения из управляемого представления в редакторе:

Используйте расширение SharePoint Embedded Visual Studio Code для создания пробного типа контейнера для прототипа или стандартного типа контейнера для производственной разработки. Расширение также настраивает приложение-владелец, регистрирует тип контейнера и присоединяет выставление счетов Azure при выборе стандартного. Затем создается контейнер и запускается локальный пример приложения.

Эта статья начинает процесс сборки. Дополнительные инструкции по выставлению счетов см. в статье Создание и настройка типа контейнера.

Совет

Предпочитаете создавать с помощью агента программирования вместо управляемого представления? Используйте сервер SharePoint Embedded Model Context Protocol (MCP) для подготовки ресурсов и управления ими на естественном языке.

Другие клиенты:

Предварительные условия

Прежде чем начать, убедитесь, что у вас есть:

  • Установлен Visual Studio Code.
  • Административный доступ к клиенту Microsoft 365.
  • Клиент с доступным приложением SharePoint.
  • Для стандартного типа контейнера это подписка Azure и группа ресурсов, к которым доступна ваша учетная запись.
  • Для стандартного типа контейнера разрешите владельца или участника в подписке Azure.
  • Node.js и npm, установленные для примера приложения.
  • Разрешение на предоставление согласия администратора в Microsoft Entra ID.

Важно!

Вам необходим административный доступ к клиенту Microsoft 365. Если у вас нет клиента, воспользуйтесь программой для разработчиков Microsoft 365, Microsoft Customer Digital Experience или пробной версией Microsoft 365 E3.

Установка расширения

Установите расширение с помощью кнопки в верхней части этой статьи или из редактора:

  1. Откройте Visual Studio Code.
  2. Откройте расширения на панели действий.
  3. Найдите SharePoint Embedded.
  4. Нажмите кнопку Установить.
  5. Если расширение уже установлено, обновите его.
  6. Щелкните значок SharePoint Embedded на панели действий.

Вход

  1. В представлении SharePoint Embedded выберите действие входа.
  2. Используйте учетную запись администратора Microsoft 365.
  3. Пройдите проверку подлинности в браузере.
  4. Проверьте запрашиваемые разрешения.
  5. Выберите "Принять", чтобы предоставить согласие администратора.
  6. Возврат в Visual Studio Code при перенаправлении.

Важно!

Внимательно просмотрите запрос на продолжение. Для настройки ресурсов разработки расширению требуются разрешения клиента.

Снимок экрана: представление входа в SharePoint Embedded в Visual Studio Code.

После входа в расширение отобразится начальный вид SharePoint Embedded.

Снимок экрана: домашняя страница SharePoint Embedded в Visual Studio Code после входа в систему. В представлении перечислены действия по созданию типа контейнера и загрузке примера приложения.

Создание пробного или стандартного типа контейнера

Тип контейнера определяет отношение, права доступа, ответственность за выставление счетов и выбранное поведение для набора контейнеров SharePoint Embedded.

  1. Выберите "Создать тип контейнера".
  2. Для 30-дневного прототипа выберите пробную версию. Для производственной разработки, где платит владелец приложения, выберите стандартный.
  3. Введите имя типа контейнера.
  4. Следуйте инструкциям, пока создание не завершится.

Снимок экрана: поле ввода Visual Studio Code с запросом имени типа контейнера в ходе процесса

Пробный путь является однотенантным и не требует выставления счетов Azure. Клиент может иметь один пробный тип контейнера с пятью контейнерами, включая контейнеры в корзине. Для каждого контейнера предусмотрено хранилище объемом 1 ГБ. Пробную версию невозможно преобразовать в рабочую.

Используйте стандартный тип контейнера, если организация, владеющая приложением, оплачивает использование SharePoint Embedded. Для сквозного выставления счетов выберите directToCustomer классификацию выставления счетов; клиент-потребитель активирует оплату по мере использования после регистрации.

Создайте или выберите приложение-владелец

У каждого типа контейнеров есть одно приложение, владеющее Microsoft Entra ID.

  1. Создайте новое приложение Microsoft Entra ID или выберите существующий идентификатор приложения.
  2. Если вы создаете новое приложение, введите его имя.
  3. Настройте параметры разработки в расширении.

Снимок экрана: поле ввода Visual Studio Code с запросом имени приложения Microsoft Entra ID при создании приложения-владельца для типа контейнера.

Предостережение

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

Модель представлена в статье Архитектура приложения SharePoint Embedded.

Настройка стандартного выставления счетов

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

Для типов контейнеров Standard требуется выставление счетов в Azure. Расширение подключает выставление счетов с помощью подписки Azure и группы ресурсов, доступных для вашей учетной записи.

  1. Выберите подписку Azure.
  2. Выберите группу ресурсов.
  3. Дождитесь, пока расширение зарегистрирует поставщика ресурсов Microsoft.Syntex и присоединит выставление счетов.

Если вы пропустили настройку выставления счетов или у вас нет необходимых разрешений Azure, в дереве отображается надпись "Выставление счетов не настроено". Чтобы завершить настройку позже, щелкните правой кнопкой мыши тип контейнера. Затем выберите "Прикрепить выставление счетов".

Локальная регистрация типа контейнера

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

  1. После создания следуйте инструкциям, чтобы зарегистрировать тип контейнера в локальном клиенте.
  2. Если запрос не отображается, щелкните правой кнопкой мыши тип контейнера и выберите Зарегистрировать.
  3. Проверьте разрешения.
  4. Предоставьте согласие администратора в браузере.
  5. Вернитесь к Visual Studio Code.

Регистрация настраивает разрешения, которые приложение-владелец может использовать для контейнеров этого типа.

Снимок экрана расширения SharePoint Embedded, предлагающего зарегистрировать тип контейнера в локальном клиенте, с выделенным действием регистрации.

Создание первого контейнера

  1. В дереве SharePoint Embedded разверните контейнер типа.
  2. Щелкните контейнеры правой кнопкой мыши.
  3. Выберите "Создать контейнер".
  4. Введите имя контейнера.
  5. Убедитесь, что контейнер отображается в дереве.

Контейнер — это основное хранилище и граница безопасности в SharePoint Embedded.

Снимок экрана: дерево SharePoint Embedded в Visual Studio Code. Тип контейнера развертывается, переключается узел

Снимок экрана: поле ввода Visual Studio Code с запросом на имя контейнера.

Загрузка примера приложения

  1. В представлении SharePoint Embedded выберите "Загрузить пример приложения".
  2. Выберите пример SharePoint Embedded.

Снимок экрана: домашняя страница расширения SharePoint Embedded с действием

  1. Просмотрите предупреждение о секретах локального обычного текста.
  2. Если появится запрос на создание секрета клиента, нажмите кнопку "ОК" для локальной разработки.
  3. Пусть расширение заполнит файл конфигурации среды выполнения.

Важно!

Образец конфигурации предназначен только для разработки. Она хранит секреты проверки подлинности в виде обычного текста на локальном компьютере.

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

Откройте терминал и запустите образец приложения из каталога сгенерированного образца.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

Пример начинается:

  • Клиентское приложение React.
  • Сервер приложений Функции Azure.

Подождите, пока не появятся оба выхода консоли.

Затем:

  1. Откройте http://localhost:8080
  2. Войдите в систему, используя ту же учетную запись администратора Microsoft 365.
  3. Выберите "Контейнеры" на домашней странице.
  4. Создавайте контейнеры и отправляйте файлы из примера пользовательского интерфейса.

Примечание.

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

Устранение неполадок при запуске

Признак Проверка
Конфликт портов Приложение пробует следующий доступный порт, когда используется порт 8080.
Сбой зависимостей Запустите npm install, затем снова запустите npm run start его.
Ошибка проверки подлинности Убедитесь, что в приложении Microsoft Entra ID есть ожидаемые URI перенаправления.
Отказано в доступе Подтвердите регистрацию и согласие администратора.
Выставление счетов не настроено Убедитесь, что у вас есть разрешения владельца или участника для выбранной подписки Azure, а затем используйте "Прикрепить выставление счетов".

Очистка

По окончании тестирования:

  1. Удалите ненужные тестовые контейнеры.
  2. Просмотрите ресурсы выставления счетов Azure, созданные для этого краткого руководства.
  3. Удалите локальные образцы секретов, которые больше не нужны.

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

Дополнительные сведения о вариантах типов контейнеров см. в статье Создание и настройка типа контейнера.