Создание настраиваемой вкладки

Создание настраиваемой вкладки с помощью Node.js

1. В командной строке установите пакетыYeoman и gulp-cli, введя следующую команду после установки Node.js:

   npm install yo gulp-cli --global
   

2. В командной строке установите генератор приложений Microsoft Teams, введя следующую команду:

   npm install generator-teams --global
   

Создание приложения с настраиваемой вкладкой

1. В командной строке создайте каталог для настраиваемой вкладки.

2. Введите следующую команду в новом каталоге, чтобы запустить генератор приложений Microsoft Teams:

   yo teams
   

3. Укажите значения для ряда вопросов, которые генератор приложений Microsoft Teams предложит обновить manifest.json файл:

   

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

У вас должен быть пакет приложения для создания и запуска приложения в Teams. Пакет приложения создается с помощью задачи gulp, которая проверяет файл manifest.json и создает zip-папку в каталоге ./package. В командной строке введите следующую команду:

gulp manifest

Создайте и запустите приложение

Создание приложения

Введите следующую команду в командной строке, чтобы перенести решение в папку ./dist:

gulp build

Запустите приложение

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

   gulp serve
   

2. В браузере ведите http://localhost:3007/<yourDefaultAppNameTab>/ для просмотра домашней страницы приложения.

   

3. Чтобы просмотреть страницу конфигурации вкладки, перейдите в http://localhost:3007/<yourDefaultAppNameTab>/config.html.

   

Установите безопасный туннель к вашей вкладке

Чтобы установить безопасный туннель к своей вкладке, выйдите из локального хоста и введите следующую команду:

gulp ngrok-serve

Загрузите свое приложение в Teams

1. Перейдите в Teams и выберите Приложения .

2. Выберите Управление приложениями>Отправка приложения>Отправка пользовательского приложения.

3. Перейдите в каталог проекта, в папку ./package выберите папку zip пакета приложения и нажмите Открыть.

   

4. В диалоговом окне выберите Добавить. Вкладка загружена в Teams.

   Если добавить не отображается в диалоговом окне, удалите следующий код из манифеста zip-папки отправленного пакета приложения. Снова запакуйте папку и отправьте ее в Teams.

   "staticTabs": [],
   "bots": [],
   "connectors": [],
   "composeExtensions": [],
   

5. Следуйте указаниям по добавлению вкладки. Существует диалоговое окно настраиваемой конфигурации для настраиваемой вкладки.

6. Выберите Сохранить и вкладка будет добавлена на панель вкладок канала.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

Создание настраиваемой вкладки с ASP.NET Core

1. В командной строке создайте новый каталог для вашего проекта вкладок.

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

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Создание приложения с настраиваемой вкладкой

1. Откройте Visual Studio и выберите Открыть проект или решение.

2. Перейдите в папку Microsoft-Teams-Samples>samples>tab-channel-group>razor-csharp и откройте channelGroupTab.sln.

3. В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Установите безопасный туннель к вашей вкладке

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

ngrok http 3978 --host-header=localhost

Убедитесь, что командная строка с ngrok запущена и запишите URL-адрес.

Обновите приложение

1. Откройте Visual Studio Обозреватель решений, перейдите в папку Pages>Shared и откройте файл _Layout.cshtml, а затем добавьте в раздел тегов следующее:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Важно!

   Не копируйте и не вставляйте URL-адреса <script src="..."> с этой страницы, так как они не представляют собой последнюю версию. Чтобы получить последнюю версию TeamsJS, всегда перейдите к API JavaScript Microsoft Teams.

2. Вставьте вызов microsoftTeams.app.initialize(); в тег script.

3. В Visual Studio Обозреватель решений перейдите в папку Pages и откройте Файл Tab.cshtml.

   В Файле Tab.cshtml приложение предоставляет пользователю два варианта отображения вкладки с красным или серым значком. Кнопка "Выбрать серый" или "Выбрать красный" активирует saveGray() или saveRed() , соответственно, задает pages.config.setValidityState(true)и включает сохранить на странице конфигурации. Этот код сообщает Teams, что настройка требований завершена, и вы можете продолжить установку. Параметры pages.config.setConfig заданы. Наконец, saveEvent.notifySuccess() вызывается , чтобы указать, что URL-адрес содержимого успешно разрешен.

4. Обновите значения websiteUrl и contentUrl в каждой функции с помощью URL-адреса ngrok HTTPS на вкладке.

   Теперь ваш код должен включать следующее: y8rCgT2b с заменой на URL-адрес ngrok:

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Сохраните обновленный Tab.cshtml.

Создайте и запустите приложение

1. В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка.

2. Убедитесь, что ngrok работает правильно, открыв браузер и открыв страницу содержимого по URL-адресу HTTPS ngrok, который был указан в окне командной команды.

   Совет

   Для выполнения действий, которые предоставляются в этой статье, необходимо запускать как приложение в Visual Studio, так и ngrok. Если вам нужно остановить запуск приложения в Visual Studio для работы с приложением, не отключайте ngrok. Он прослушивает и возобновляет маршрутизировать запрос приложения при перезапуске в Visual Studio. Если вам нужно перезапустить службу ngrok, она возвращает новый URL-адрес и вам нужно обновить приложение с новым URL-адресом.

Обновите пакет приложения с помощью портала разработчика

1. Перейдите в Teams. Если вы используете веб-версию, вы можете проверить код интерфейсной части с помощью средств для разработчиков.

2. Перейдите на Портал разработчика.

3. Откройте Приложения и выберите Импорт приложений.

4. Имя пакета приложения — tab.zip. Он доступен по следующему пути:

   /bin/Debug/netcoreapp3.1/tab.zip
   

5. Выберите tab.zip и откройте его на портале разработчика.

6. По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.

7. Добавьте краткое и подробное описание для своего приложения в Описания.

8. В разделе Информация для разработчиков добавьте необходимые данные, а в разделеВеб-сайт (это должен быть действительный URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.

9. В URL-адресах приложений измените политику конфиденциальности на https://<yourngrokurl>/privacy и условия использования на https://<yourngrokurl>/tou и сохраните.

10. В разделе Функции приложения выберите Группирование и приложение канала. Обновите URL-адрес конфигурации с помощью https://<yourngrokurl>/tab и выберите для вкладки Область.

11. Нажмите кнопку Сохранить.

12. В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS <yourngrokurl>.ngrok.io.

Предварительный просмотр приложения в Teams

1. Выберите Предварительный просмотр в Teams на панели инструментов Портал разработчика. Портал разработчика сообщает, что пользовательское приложение успешно отправлено. Страница добавления отображается для вашего приложения в Teams.

2. Выберите Добавить в команду, чтобы настроить вкладку в команде. Настройте вкладку и выберите Сохранить. Теперь вкладка доступна в Teams.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

Создание настраиваемой вкладки с ASP.NET Core MVC

1. В командной строке создайте новый каталог для вашего проекта вкладок.

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

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Создание приложения с настраиваемой вкладкой

1. Откройте Visual Studio и выберите Открыть проект или решение.

2. Перейдите в папку Microsoft-Teams-Samples>samples>tab-channel-group>mvc-csharp и откройте ChannelGroupTabMVC.sln.

3. В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Установите безопасный туннель к вашей вкладке

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

ngrok http 3978 --host-header=localhost

Убедитесь, что командная строка с ngrok запущена и запишите URL-адрес.

Обновите приложение

1. Откройте Visual Studio Обозреватель решений, перейдите в папку Представления>общие, откройте файл _Layout.cshtml и добавьте в раздел теги следующее:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Важно!

   Не копируйте и не вставляйте URL-адреса <script src="..."> с этой страницы, так как они не представляют собой последнюю версию. Чтобы получить последнюю версию SDK, всегда переходите к API JavaScript для Microsoft Teams.

2. Вставьте вызов microsoftTeams.app.initialize(); в тег script.

3. В Visual Studio Обозреватель решений перейдите в папку Tab и откройте файл Tab.cshtml.

   В Файле Tab.cshtml приложение предоставляет пользователю два варианта отображения вкладки с красным или серым значком. Кнопка "Выбрать серый" или "Выбрать красный" активирует saveGray() или saveRed() , соответственно, задает pages.config.setValidityState(true)и включает сохранить на странице конфигурации. Этот код сообщает Teams, что настройка требований завершена, и вы можете продолжить установку. Параметры pages.config.setConfig заданы. Наконец, saveEvent.notifySuccess() вызывается, чтобы указать, что URL-адрес содержимого успешно разрешен.

4. Обновите значения websiteUrl и contentUrl в каждой функции с помощью URL-адреса ngrok HTTPS на вкладке.

   Теперь ваш код должен включать следующее: y8rCgT2b с заменой на URL-адрес ngrok:

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Обязательно сохраните обновленный Tab.cshtml.

Создайте и запустите приложение

1. В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка.

2. Убедитесь, что ngrok работает правильно, открыв браузер и открыв страницу содержимого по URL-адресу HTTPS ngrok, который был указан в окне командной команды.

   Совет

   Для выполнения действий, которые предоставляются в этой статье, необходимо запускать как приложение в Visual Studio, так и ngrok. Если вам нужно остановить запуск приложения в Visual Studio для работы с приложением, не отключайте ngrok. Он прослушивает и возобновляет маршрутизировать запрос приложения при перезапуске в Visual Studio. Если вам нужно перезапустить службу ngrok, она возвращает новый URL-адрес и вам нужно обновить приложение с новым URL-адресом.

Обновите пакет приложения с помощью портала разработчика

1. Перейдите в Teams. Если вы используете веб-версию, вы можете проверить код интерфейсной части с помощью средств для разработчиков.

2. Перейдите на Портал разработчика.

3. Откройте Приложения и выберите Импорт приложений.

4. Имя пакета приложения — tab.zip. Он доступен по следующему пути:

   /bin/Debug/netcoreapp3.1/tab.zip
   

5. Выберите tab.zip и откройте его на портале разработчиков.

6. По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.

7. Добавьте краткое и подробное описание для своего приложения в Описания.

8. В разделе Информация для разработчиков добавьте необходимые данные, а в разделеВеб-сайт (это должен быть действительный URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.

9. В URL-адресах приложений измените политику конфиденциальности на https://<yourngrokurl>/privacy и условия использования на https://<yourngrokurl>/tou и сохраните.

10. В разделе Функции приложения выберите Группирование и приложение канала. Обновите URL-адрес конфигурации с помощью https://<yourngrokurl>/tab и выберите для вкладки Область.

11. Нажмите кнопку Сохранить.

12. В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS <yourngrokurl>.ngrok.io.

Предварительный просмотр приложения в Teams

1. Выберите Предварительный просмотр в Teams на панели инструментов Портал разработчика. Портал разработчика сообщает, что пользовательское приложение успешно отправлено. Страница добавления отображается для вашего приложения в Teams.

2. Выберите Добавить в команду, чтобы настроить вкладку в команде. Настройте вкладку и выберите Сохранить. Теперь вкладка доступна в Teams.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

Blazor позволяет создавать интерактивные веб-интерфейсы с помощью C#, а не JavaScript. Вы можете создать приложение-вкладку и приложение бота с помощью Blazor и последней версии Visual Studio.

Ниже приведен список средств, необходимых для создания и развертывания приложения.

Подготовка среды разработки

После установки необходимых средств настройте среду разработки.

Установка набора средств Microsoft Teams

Набор средств Teams помогает упростить процесс разработки с помощью инструментов для подготовки и развертывания облачных ресурсов для приложения, публикации в Магазине Teams и многого другого. Набор средств можно использовать в Visual Studio или в качестве интерфейса командной строки (называется teamsfx).

npm install -g @microsoft/teamsfx-cli

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Настройка клиента разработки Teams

Клиент — это как пространство или контейнер для вашей организации в Teams, где вы общаетесь, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправлять и тестировать пользовательское приложение. Давайте проверим, готовы ли вы к разработке с помощью клиента.

Включить параметр отправки пользовательского приложения

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

У вас уже есть клиент и есть ли у вас доступ администратора? Давайте проверка, если вы действительно делаете!

Проверьте, можно ли отправить пользовательское приложение в Teams:

1. В клиенте Teams выберите Приложения.

2. Выберите Управление приложениями

3. Выберите Отправить пользовательское приложение. Если вы видите параметр Отправить пользовательское приложение, включена отправка пользовательского приложения.

   

   Примечание.

   Если вы не найдете параметр для отправки пользовательского приложения, обратитесь к администратору Teams.

Создание бесплатного клиента разработчика Teams (необязательно)

Если у вас нет учетной записи разработчика Teams, ее можно получить бесплатно. Присоединяйтесь к программе для разработчиков Microsoft 365!

1. Перейдите в программу для разработчиков Microsoft 365.

2. Выберите Присоединиться и следуйте инструкциям на экране.

3. На экране приветствия выберите Настроить подписку E5.

4. Настройте свою учетную запись администратора. После завершения отобразится следующий экран.

   

5. Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.

Получение бесплатной учетной записи Azure

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

Теперь у вас есть все инструменты и настроены учетные записи. Теперь давайте настроим среду разработки и приступим к сборке!

Создание рабочей области проекта для приложения вкладки

Запустите разработку приложений Teams, создав свое первое приложение. Это приложение использует возможность вкладки.

В этом руководстве описаны действия по созданию, запуску и развертыванию первого приложения Teams с помощью .NET/Blazor.

На этой странице вы узнаете:

1. Настройка нового проекта вкладки с помощью набора средств Teams
2. Сведения о структуре каталогов приложения

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

Используйте Набор средств Teams для создания первого проекта вкладки. Набор средств позволяет вам пройти по ряду страниц для создания и настройки проекта приложения Teams:

1. Страница создания проекта . Вы можете выбрать тип проекта.
2. Настройка страницы нового проекта. Вы можете ввести сведения о проекте.
3. Создание страницы приложения Teams. Вы можете выбрать возможности приложения Teams.

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

1. Откройте последнюю версию Visual Studio.

2. Выберите Создать новый проект.

   

   Откроется страница Создание проекта .

3. Выберите сведения о проекте.

   Выберите тип проекта:

   1. Выполните поиск По запросу Microsoft Teams из раскрывающегося списка шаблонов.

   2. Выберите Приложение Microsoft Teams в качестве шаблона.

   3. Нажмите кнопку Далее.

      

      Откроется страница Настройка нового проекта .

4. Настройте сведения о новом проекте.

   Выберите следующую конфигурацию проекта:

   1. Введите подходящее имя для проекта.

      Примечание.

      Можно отметить, что имя проекта, которое вы вводите, автоматически заполняется в качестве имени решения . При необходимости можно изменить имя решения, не влияя на имя проекта.

   2. Выберите путь к папке, в которой нужно создать рабочую область проекта.

   3. При необходимости введите другое имя решения.

   4. При необходимости установите флажок сохранить проект и решение в той же папке. В этом руководстве этот параметр не требуется.

   5. Нажмите Создать.

      

      Откроется страница Создание приложения Teams .

5. Выберите Компонент приложения Teams.

   Выберите функцию приложения:

   1. Выберите вкладку в качестве возможности для приложения.

   2. Нажмите Создать.

   

Приложение вкладки Teams будет создано за несколько секунд.

Создание и запуск первого приложения на вкладке Teams

После настройки рабочей области проекта с помощью Набора средств Teams создайте проект вкладки.

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

1. Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).

   

2. Выберите учетную запись Microsoft 365 или Добавить учетную запись для входа.

   

3. Выберите Отладка>Начать отладку или нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.

   Узнайте, что происходит при локальном запуске приложения в отладчике.

   При выборе F5 набор средств Teams:

   1. Регистрирует приложение с помощью Microsoft Entra ID.
   2. Регистрирует приложение для отправки в Teams.
   3. Запускает серверную часть приложения, запущенную локально.
   4. Запускает интерфейс приложения, размещенного локально.
   5. Запускает Teams в веб-браузере с помощью команды, чтобы указать Teams отправить пользовательское приложение (URL-адрес регистрируется в манифесте приложения).

4. Установите самозаверяющий SSL-сертификат для локальной отладки, если требуется.

   

   Teams загружается в веб-браузере.

5. Выберите Добавить в команду при появлении запроса на установку приложения в Teams.

   

   Поздравляем, ваше первое приложение вкладки работает в вашей локальной среде!

   

6. Перейдите по странице, чтобы просмотреть сведения о пользователе.

7. Выберите Авторизовать , чтобы разрешить приложению получать сведения о пользователе с помощью Microsoft Graph.

   Приложение запрашивает разрешение на предоставление доступа для отображения сведений о пользователе.

   

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

   

   Ваша фотография и сведения отображаются на вкладке канала.

   

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

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

   Для запуска приложения в Teams требуется учетная запись разработки Microsoft 365, которая позволяет отправлять пользовательские приложения. Дополнительные сведения об этом см. в разделе предварительных требований.

9. Остановите отладку в Visual Studio.

Предварительный просмотр первого приложения вкладки Teams

Вы научились создавать, создавать и запускать приложение Teams с возможностью вкладки. Для развертывания приложения в Azure и предварительной версии в Teams необходимо выполнить следующие действия:

1. Подготовка приложения вкладки в облаке. Вы можете подготовить приложение вкладки в облаке.

2. Развертывание приложения вкладки в облаке. Приложение вкладок можно развернуть в облаке.

3. Предварительный просмотр приложения вкладки в Teams. Вы можете просмотреть приложение вкладки в Teams.

   Давайте развернем первое приложение с возможностью вкладки в Azure с помощью набора средств Teams.

Подготовка приложения вкладки в облаке

1. Выберите Project Teams Toolkit Provision (Подготовканабора средств>Project> Teams) в облаке.

   

2. Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :

   1. Выберите имя подписки в раскрывающемся списке Имя подписки .
   2. Выберите группу ресурсов в раскрывающемся списке Группа ресурсов или нажмите кнопку Создать , чтобы добавить группу ресурсов, созданную для приложения.
   3. Выберите регион, если создана новая группа ресурсов.
   4. Выберите Подготовка.

   

   Отображается предупреждение о подготовке.

3. Выберите Подготовка.

   

   Подготовка группы ресурсов в облаке занимает несколько минут.

4. После завершения подготовки нажмите кнопку ОК.

   

5. Выберите Просмотреть подготовленные ресурсы, чтобы просмотреть портал Azure.

   

6. Войдите в учетную запись портал Azure в запросе на вход.

   Появится app-dev-rg.

   

   Ваши ресурсы подготовлены в портал Azure!

Развертывание приложения вкладки в облаке

1. Выберите Project Teams ToolkitDeploy to the Cloud (Развертываниенабора средств>Project> Teams в облаке).

   

2. Нажмите OK.

   

   Приложение вкладки успешно развернуто в облаке!

Предварительный просмотр приложения вкладки в Teams

1. ВыберитеПредварительная версия набора средств>Project> Teamsв Teams.

   

2. Выберите Добавить при появлении запроса на установку приложения в Teams.

   

   Поздравляем, ваше первое приложение вкладки работает в вашей среде Azure!

   

3. Перейдите по странице, чтобы просмотреть сведения о пользователе.

   

4. Выберите Авторизовать , чтобы разрешить приложению получать сведения о пользователе с помощью Microsoft Graph.

   Приложение запрашивает разрешение на предоставление доступа для отображения сведений о пользователе.

   

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

   Ваша фотография и сведения отображаются на вкладке "Личная".

   

Поздравляю

Вы завершили руководство по созданию приложения вкладки с помощью Blazor.