Tutoriales

En este artículo, obtenga más información sobre cómo crear funcionalidades de aplicaciones de Teams. Esta es una lista de las guías paso a paso disponibles para las funcionalidades de la plataforma de Teams.

#	Capacidad	Guía paso a paso
1.	Bot (en inglés)	- Depurar el bot de chat de IA con Microsoft 365 Agents Playground - Enviar mensajes proactivos
2.	Extensión de mensaje	- Crear extensión de mensaje basada en API - Crear extensión de mensaje basada en acciones - Crear su primera aplicación de extensión de mensaje con JavaScript
3.	TAB	Crear la primera aplicación de pestaña con C sostenido
4.	SSO	- Crear un bot con autenticación SSO - Agregar SSO a la aplicación de extensión de pestañas y mensajes

Crear su primera aplicación de bot

Inicie el desarrollo de aplicaciones de Microsoft Teams con su primera aplicación de Teams. Puede crear una aplicación de bot con Teams con Javascript.

Crear su primer bot

La aplicación tiene una funcionalidad, que viene con su propia interfaz de usuario y experiencia de usuario:

En este tutorial, aprenderá a:

• Cómo configurar un nuevo proyecto con el Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams).
• Cómo crear una aplicación de bot.
• Cómo implementar la aplicación.

Requisitos previos

Asegúrese de instalar las siguientes herramientas para crear e implementar las aplicaciones.

	Instalar	Para usar...
Obligatorio
	Kit de herramientas de agentes de Microsoft 365	Una extensión de Microsoft Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use la versión más reciente.
	Microsoft Teams	Microsoft Teams colabore con todas las personas con las que trabaja a través de aplicaciones para chat, reuniones y llamadas, todo en un solo lugar.
	Node.js	Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, consulte Node.js tabla de compatibilidad de versiones para el tipo de proyecto.
	Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas para desarrolladores.
	Visual Studio Code	JavaScript, TypeScript o SharePoint Framework (SPFx) entornos de compilación. Use la versión más reciente.
Opcional
	Herramientas de Azure para Visual Studio Code y CLI de Azure	las herramientas de Azure para acceder a los datos almacenados o para implementar un back-end basado en la nube para la aplicación de Teams en Azure.
	Herramientas para desarrolladores de React para Chrome O herramientas para desarrolladores de React para Microsoft Edge	Una extensión de DevTools del explorador para la biblioteca de código abierto React JavaScript.
	Microsoft Graph Explorer	Microsoft Graph Explorer, una herramienta basada en explorador que le permite ejecutar una consulta a partir de datos de Microsoft Graph.
	Portal para desarrolladores de Teams	Portal basado en web para configurar, administrar y publicar su aplicación de Teams, incluso en su organización o en la tienda de Microsoft Teams.

Recomendación

Si trabaja con datos de Microsoft Graph, debe obtener información acerca de Microsoft Graph Explorer y marcarlo. Esta herramienta basada en explorador le permite consultar Microsoft Graph fuera de una aplicación.

Configurar los requisitos previos

Después de instalar las herramientas necesarias, configure el entorno de desarrollo.

Instalar el Kit de herramientas de agentes de Microsoft 365

El Kit de herramientas para agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams) ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para su aplicación y publicarlos en la Tienda Teams.

Puede usar Agents Toolkit con Visual Studio Code o una interfaz de línea de comandos denominada Microsoft 365 Agents Toolkit CLI (anteriormente conocida como CLI de TeamsFx).

Visual Studio Code

1. Abra Visual Studio Code y seleccione Extensiones (Ctrl+Mayús+X o Ver>extensiones).

2. En el cuadro de búsqueda, escriba Kit de herramientas de agentes de Microsoft 365.

3. Seleccione Instalar.

   

   El icono del Kit de herramientas de agentes de Microsoft 365 aparecerá en la barra de actividades de Visual Studio Code.

También puede instalar Agents Toolkit desde el catálogo de herramientas de Visual Studio Code.

Línea de comandos

Para instalar la CLI del kit de herramientas de agentes, utilice el npm administrador de paquetes e introduzca el siguiente comando en el símbolo del sistema:

npm install -g @microsoft/m365agentstoolkit-cli

En función de la configuración, es posible que tenga que usar sudo para instalar la CLI:

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

Esta condición es más común en sistemas Linux y macOS.

Asegúrese de agregar la caché global de npm a la ruta de acceso. Este paso se realiza normalmente como parte del instalador de Node.js.

Puede usar la CLI con el atk comando. Compruebe que el comando está funcionandoatk -h.

Precaución

Para poder ejecutar TeamsFx en terminales de PowerShell, debe habilitar la directiva de ejecución firmada remota para PowerShell.

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es un espacio o un contenedor para su organización en Teams, donde puede chatear, compartir archivos y llevar a cabo reuniones. Este espacio también es el lugar donde se carga y se prueba la aplicación. Vamos a comprobar si está listo para desarrollar con el inquilino.

Comprobar si se carga una opción de aplicación

Después de crear la aplicación personalizada, debe cargarla en Teams con la opción Cargar una aplicación personalizada . Inicie sesión en su cuenta de Microsoft 365 para comprobar si esta opción está habilitada.

Los siguientes pasos le ayudarán a comprobar si puede cargar aplicaciones en Teams:

1. En el cliente de Teams, seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación.

4. Busque la opción Cargar una aplicación personalizada. Si la opción está visible, puede cargar aplicaciones personalizadas.

   

Nota

Si no encuentra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.

Crear un inquilino de desarrollador gratuito de Teams

Si no tiene una cuenta de desarrollador de Teams, únase al programa para desarrolladores de Microsoft 365. Este paso es opcional.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, seleccione Configurar suscripción E5.

4. Configure su cuenta de administrador. Cuando termine, aparecerá la siguiente pantalla:

   

5. Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Obtener una cuenta de Azure gratuita

Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción de Azure. Cree una cuenta gratuita antes de comenzar.

Ahora tiene todas las herramientas para configurar su cuenta. A continuación, configuremos su entorno de desarrollo y comencemos a construir. Seleccione la aplicación que desea crear en primer lugar.

Crear un área de trabajo de proyecto para la aplicación de bot

Vamos a crear su primera aplicación de bot.

La funcionalidad de bot de una aplicación de Teams crea un bot de chat o un bot de conversación. Lo usa para ejecutar tareas simples y automatizadas, como brindar servicio al cliente. Un bot se comunica con un servicio web y le ayuda a usar sus ofertas. Puede obtener el pronóstico del tiempo, hacer reservas o cualquier otro servicio ofrecido mediante un bot conversacional.

Como ya se ha preparado para crear estas aplicaciones, puede configurar un nuevo proyecto de Teams para crear la aplicación de bot.

En este tutorial, aprenderá a:

1. Cómo configurar un nuevo proyecto de bot con Agents Toolkit.
2. Acerca de la estructura de directorios de su proyecto de aplicación.

Importante

Los bots están disponibles en Government Community Cloud (GCC), GCC High, Departamento de Defensa (DoD) y Teams operados por entornos de 21Vianet .

Crear el área de trabajo del proyecto de bot

Si los requisitos previos están en su lugar, ¡comencemos!

Nota

La interfaz de usuario de Visual Studio Code que se muestra es de Mac. Puede variar en función del sistema operativo, la versión del kit de herramientas de agentes y el entorno.

Visual Studio Code

1. Abra Visual Studio Code.

2. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

3. Seleccione Crear una nueva aplicación de Teams para agente o aplicación>.

   

4. Seleccione Bot para crear un nuevo proyecto de bot.

   

5. Asegúrese de que Bot básico está seleccionado como la característica de la aplicación que desea compilar en la aplicación.

   

6. Seleccione JavaScript como lenguaje de programación.

   

7. Seleccione la carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.

   

   También puedes cambiar la ubicación predeterminada siguiendo estos pasos:

   1. Seleccione Examinar.

      

   2. Seleccione la ubicación del área de trabajo del proyecto.

   3. Seleccione la carpeta Seleccionar.

      

8. Escriba un nombre adecuado para la aplicación y, a continuación, seleccione Entrar.

   

Aparece un cuadro de diálogo en el que se le pedirá que elija sí o no para confiar en los autores de los archivos de esta carpeta.

La aplicación de Teams con funcionalidad de bot se crea en pocos segundos.

Una vez creada la aplicación, el Kit de herramientas de agentes muestra el siguiente mensaje:

Seleccione Depuración local para obtener una vista previa del proyecto.

Un resumen rápido de la creación de una aplicación de Teams.

Vea este breve resumen para crear una aplicación de Teams.

Línea de comandos

Use la CLI "atk" para crear su primer proyecto. Empiece desde la carpeta en la que desea crear la carpeta del proyecto.

atk new

Puede usar la CLI para crear una nueva aplicación de Teams. La CLI lo guía a través de una serie de preguntas. Cada pregunta incluye una instrucción para responderla.

Por ejemplo, use las teclas de dirección para seleccionar una opción. Después de realizar la elección, seleccione Entrar para confirmarla.

1. Seleccione Crear una nueva aplicación de Teams.
2. Seleccione Bot y anule la selección de la pestaña.
3. Seleccione JavaScript como lenguaje de programación.
4. Seleccione Entrar para seleccionar la carpeta del área de trabajo predeterminada.
5. Escriba un nombre adecuado para la aplicación, como HelloBot. El nombre de la aplicación solo debe constar de caracteres alfanuméricos.

Después de haber respondido a todas las preguntas, se crea el proyecto.

Paseo por el código fuente de la aplicación de bot

Una vez completado el scaffolding, vea los directorios y archivos del proyecto en el Explorador en Visual Studio Code.

Carpeta / Archivo	Contenido
m365agents.yml	Archivo de proyecto principal
m365agents.local.yml	Esto se reemplaza m365agents.yml con acciones que permiten la ejecución y la depuración locales.
.vscode/	VSCode para la depuración local.
appPackage/	Plantillas para el manifiesto de aplicación de Teams.
adaptiveCards/	Tarjetas adaptables enviadas por el bot.
infra/	Plantillas para aprovisionar recursos de Azure.
index.js	Punto de entrada y express controlador de la aplicación.
teamsBot.js	Controlador de actividades de Teams.

Recomendación

Familiarícese con los bots fuera de Teams antes de integrar el primer bot dentro de Teams.

Crear y ejecutar su primera aplicación de bot

Después de configurar el área de trabajo del proyecto con Agents Toolkit, cree el proyecto del bot. Debe iniciar sesión en su cuenta de Microsoft 365.

Inicie sesión en su cuenta de Microsoft 365

Use esta cuenta para iniciar sesión en Teams. Si usa un inquilino del Programa para desarrolladores de Microsoft 365, la cuenta de administrador que configuró al registrarse es su cuenta de Microsoft 365.

Visual Studio Code

1. Abra Visual Studio Code.

2. Seleccione el icono del Kit de herramientas de agentes de Microsoft 365 en la barra lateral.

3. Seleccione Iniciar sesión en M365 con sus credenciales.

   Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.

4. Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.

5. Vuelva a Agents Toolkit en Visual Studio Code.

   Use esta cuenta para iniciar sesión en Teams. Si usa un inquilino del Programa para desarrolladores de Microsoft 365, la cuenta de administrador que configuró al registrarse es su cuenta de Microsoft 365.

   

Ahora ya está listo para compilar la aplicación y ejecutarla localmente.

Línea de comandos

1. Inicie sesión en Microsoft 365 con la CLI del Kit de herramientas de agentes de Microsoft 365 (anteriormente conocida como CLI de TeamsFx):

atk account login m365

Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta. Inicie sesión en su cuenta de Azure con sus credenciales. Cierre el explorador cuando se le solicite.

Los inicios de sesión de la cuenta se comparten entre Visual Studio Code y la CLI de Agents Toolkit.

Ahora que el entorno de desarrollo está configurado, puede crear, compilar e implementar su primera aplicación de Teams.

Crear y ejecutar su primera aplicación de bot de forma local

Para crear y ejecutar la aplicación en el entorno local:

1. Selecciona F5 en Visual Studio Code para ejecutar la aplicación en modo de depuración.

   Nota

   Si el Kit de herramientas de agentes no puede comprobar un requisito previo concreto, le pedirá que lo compruebe.

   Obtén información sobre lo que ocurre cuando ejecutas la aplicación localmente en el depurador.

   En caso de que se lo pregunte, cuando presiona la tecla F5 , Agents Toolkit:

   1. Comprueba todos los requisitos previos siguientes:

   • Ha iniciado sesión con una cuenta de Microsoft 365.
   • La carga de aplicaciones personalizadas está habilitada para su cuenta de Microsoft 365.
   • Compatible Node.js versión está instalada.
   • El puerto requerido por la aplicación de bot está disponible.

   2. Instale paquetes npm.
   3. Inicia el túnel de desarrollo para crear un túnel HTTP.
   4. Registra la aplicación en Microsoft Entra ID y configura la aplicación.
   5. Registra la aplicación bot en Bot Framework y configura la aplicación bot.
   6. Registra la aplicación en el Portal para desarrolladores de Teams y configura la aplicación.
   7. Inicia la aplicación del bot.
   8. Inicia Teams en un explorador web y carga la aplicación de bot personalizada.

   

   Nota

   Cuando ejecutas la aplicación por primera vez, se descargan todas las dependencias y se compila la aplicación. Una vez completada la compilación, se abrirá automáticamente una ventana del explorador. Este proceso puede tardar de tres a cinco minutos en completarse.

   Teams ejecuta la aplicación en un explorador web.

2. Inicie sesión con su cuenta de Microsoft 365 si se le solicita.

3. Seleccione Agregar para cargar la aplicación de bot personalizada en Teams.

   

4. Seleccione Abrir para abrir la aplicación en el ámbito personal.

   Como alternativa, puede buscar y seleccionar el ámbito requerido o seleccionar un canal, un chat o una reunión de la lista y desplazarse por el cuadro de diálogo para seleccionar Ir.

   

   Ahora el bot se ejecuta correctamente en Teams. Una vez cargada la aplicación, se abre una sesión de chat con el bot.

   

   Puedes escribir welcome para mostrar una tarjeta de introducción y escribir learn para ir a la documentación de comandos de la tarjeta adaptativa y del bot.

   

   Puede realizar actividades normales de depuración, como establecer puntos de interrupción, como con cualquier otra aplicación web. Abra el bot/teamsBot.js archivo y localice el onMessage() método. Establezca un punto de interrupción en cualquier caso. A continuación, escribe texto.

   Aprende a solucionar los problemas si la aplicación no se ejecuta localmente.

   Para ejecutar correctamente la aplicación en Teams, asegúrese de que ha habilitado la carga de aplicaciones personalizadas en su cuenta de Teams. Puede obtener más información sobre la carga de aplicaciones personalizadas en la sección de requisitos previos.

   Importante

   La carga de aplicaciones personalizadas está disponible en Government Community Cloud (GCC) y no es compatible con GCC High, DoD y Teams operado por 21Vianet.

   Recomendación

   Comprueba si hay problemas antes de cargar una aplicación personalizada con la herramienta de validación de aplicaciones. Esta herramienta se incluye en el kit de herramientas. Corrija los errores para cargar la aplicación.

Implementar la primera aplicación de Teams

Ha aprendido a crear, compilar y ejecutar aplicaciones de Teams con capacidad de bot. El paso final será implementar la aplicación en Azure.

Vamos a implementar la primera aplicación con funcionalidad de bot en Azure mediante el Kit de herramientas de agentes.

Inicie sesión en su cuenta de Azure

Use esta cuenta para acceder a Microsoft Azure Portal y aprovisionar nuevos recursos en la nube para admitir su aplicación.

Visual Studio Code

1. Abra Visual Studio Code.

2. Abra la carpeta del proyecto en la que creó la aplicación de bot.

3. Seleccione el icono del Kit de herramientas de agentes de Microsoft 365 en la barra lateral.

4. Seleccione Iniciar sesión en Azure con sus credenciales.

   Recomendación

   Si tiene instalada la extensión AZURE ACCOUNT y está usando la misma cuenta, puede omitir este paso. Use la misma cuenta que usa en otras extensiones.

   Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.

5. Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.

   La sección CUENTAS de la barra lateral muestra las dos cuentas por separado. También muestra el número de suscripciones de Azure disponibles para usted. Asegúrese de que tiene disponible al menos una suscripción de Azure que se pueda usar. Si no es así, cierre la sesión y use otra cuenta.

Enhorabuena, ha creado una aplicación para Teams. Ahora sigamos adelante y aprendamos a implementar una de las aplicaciones en Azure mediante el Kit de herramientas de agentes.

Línea de comandos

1. Iniciar sesión en Microsoft 365 con la CLI del kit de herramientas de agentes:

atk account login m365

Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta. Inicie sesión en su cuenta de Azure con sus credenciales. Cierre el explorador cuando se le solicite.

2. Inicie sesión en Azure con la CLI de Agents Toolkit:

atk account login azure

Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta. Inicie sesión en su cuenta de Azure con sus credenciales. Cierre el explorador cuando se le solicite.

Los inicios de sesión de la cuenta se comparten entre Visual Studio Code y la CLI de Agents Toolkit.

Enhorabuena, ha iniciado sesión en su cuenta de Azure. Ahora sigamos adelante y aprendamos a implementar una de las aplicaciones en Azure mediante el Kit de herramientas de agentes.

Aprovisionar e implementar la aplicación en Azure

La implementación consta de dos pasos. En primer lugar, Azure crea los recursos en la nube necesarios (también conocidos como aprovisionamiento). A continuación, Azure copia el código de la aplicación en los recursos en la nube creados. En este tutorial, implementará la aplicación bot.

¿Cuál es la diferencia entre aprovisionar e implementar?

El paso de aprovisionamiento crea recursos en Azure y Microsoft 365 para la aplicación, pero no copia código (HTML, CSS o JavaScript) a los recursos. El paso de implementación copia el código de la aplicación en los recursos creados durante el paso de aprovisionamiento. Es habitual implementar varias veces sin aprovisionar recursos nuevos. Dado que el paso de aprovisionamiento puede tardar algún tiempo en completarse, es independiente del paso de implementación.

Visual Studio Code

Seleccione el icono de Kit de herramientas de agentes de Microsoft 365 en la barra lateral de Visual Studio Code.

1. Seleccione Aprovisionamiento.

   

2. Seleccione una suscripción para usar para los recursos de Azure.

   

   La aplicación se hospeda con recursos de Azure.

   Un cuadro de diálogo le advierte de que se puede incurrir en costos al ejecutar recursos en Azure.

3. Seleccione Aprovisionamiento.

   

   El proceso de aprovisionamiento crea recursos en la nube de Azure. Esto puede tardar algún tiempo. Puede supervisar el progreso observando los cuadros de diálogo de la esquina inferior derecha. Al cabo de unos minutos, aparecerá el aviso siguiente:

   

   Si lo desea, puede ver los recursos aprovisionados. Para este tutorial, no es necesario que vea los recursos.

   El recurso aprovisionado aparece en la sección ENTORNO .

   

4. Seleccione Implementar en el panel CICLO DE VIDA una vez completado el aprovisionamiento.

   

   Al igual que con el aprovisionamiento, la implementación lleva algún tiempo. Puede supervisar el proceso observando los cuadros de diálogo en la esquina inferior derecha. Después de unos minutos, verá un aviso de finalización.

Ahora, puede usar el mismo proceso para implementar las aplicaciones Bot y Extensión de mensaje en Azure.

Línea de comandos

En la ventana de su terminal:

1. Ejecutar atk provision

   atk provision
   

   Cuando se le solicite, seleccione una suscripción de Azure para usar los recursos de Azure.

   La aplicación se hospeda con recursos de Azure.

2. Ejecutar atk deploy

   atk deploy
   

Ejecutar la aplicación implementada

Una vez completados los pasos de aprovisionamiento e implementación:

1. Abre el panel de depuración (Ctrl+Mayús+D / ⌘⇧-D o Ver > ejecución) desde Visual Studio Code.

2. Seleccione Iniciar remoto (Edge) en la lista desplegable de configuración de inicio.

3. Seleccione el botón Iniciar depuración (F5). Se le pedirá que cargue la aplicación de bot personalizada en Teams.

   

4. Seleccione Agregar.

   

5. Seleccione Abrir para abrir la aplicación en el ámbito personal.

   Como alternativa, puede buscar y seleccionar el ámbito requerido o seleccionar un canal, un chat o una reunión de la lista y desplazarse por el cuadro de diálogo para seleccionar Ir.

   

   Agregó correctamente la aplicación de bot al cliente de Teams.

   

Conozca lo que ocurre cuando implementa su aplicación en Azure

Antes de la implementación, la aplicación se ejecutaba localmente:

• El back-end se ejecuta mediante las herramientas principales de Azure Functions.
• El punto de conexión HTTP de la aplicación, donde Microsoft Teams carga la aplicación, se ejecuta localmente.

La implementación es un proceso de dos pasos. Aprovisiona los recursos en una suscripción activa de Azure y, a continuación, implementa o carga el código de back-end y front-end de la aplicación en Azure.

• Si está configurado, el back-end usa varios servicios de Azure, incluidos Azure App Service y Azure Storage de Azure.
• La aplicación front-end se implementa en una cuenta de almacenamiento de Azure configurada para hospedaje web estático.

¡Enhorabuena!

¡Lo has hecho!

Ha creado una aplicación de bot.

Ahora que ha aprendido a crear una aplicación básica, puede pasar a crear aplicaciones más complejas. Ha completado el tutorial para crear un bot con JavaScript.

Tutoriales

Depurar el bot de chat de IA con Microsoft 365 Agents Playground

Inicie el desarrollo de aplicaciones de Microsoft Teams con la aplicación de bot de chat de IA de Teams y depure con Microsoft 365 Agents Playground (anteriormente conocido como Herramienta de prueba de aplicaciones de Teams). Agents Playground facilita la depuración de aplicaciones basadas en bots. No necesita una cuenta de desarrollador de Microsoft 365, tunelización ni registro de bots y aplicaciones de Teams para usar Agents Playground.

Tutorial: Depurar el bot de chat de IA

Requisitos previos

Puedes chatear con tu bot y ver los mensajes y las tarjetas adaptables tal y como aparecen en Teams. También puede simular una actividad en Agents Playground usando activadores de actividades.

Nota

• Área de juegos de agentes solo está disponible en la versión 5.4.0 del Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams).
• Agents Playground solo es compatible con clientes de escritorio y web.

Esta guía paso a paso le ayuda a crear un bot de chat de IA con el Kit de herramientas de agentes y a depurarlo con la herramienta de prueba. Verá el siguiente resultado después de completar esta guía, donde el usuario puede acceder y usar el bot de chat de IA:

Instalar	Para usar...
Visual Studio Code o Visual Studio	JavaScript, TypeScript o entornos de compilación de C#. Use la versión más reciente.
Kit de herramientas de agentes de Microsoft 365	Extensión de Microsoft Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use Agents Toolkit v5.4.0. Para obtener más información, consulte Instalación del kit de herramientas de agentes.
Node.js	Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, consulte Node.js tabla de compatibilidad de versiones para el tipo de proyecto.
OpenAI o Azure OpenAI	En primer lugar, cree su clave API de OpenAI para utilizar la GPT de OpenAI. Si desea hospedar la aplicación o acceder a los recursos en Azure, debe crear un servicio de Azure OpenAI.
Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas para desarrolladores.

Crear un área de trabajo del proyecto para la aplicación de bot de chat de IA

La funcionalidad de bot de una aplicación de Teams crea un bot de chat o un bot de conversación. Se comunica con un servicio web, facilitando el uso de sus servicios. El bot puede ejecutar tareas simples y automatizadas, como brindar servicio al cliente. Puede obtener el pronóstico del tiempo, hacer reservas o cualquier otro servicio ofrecido mediante un bot conversacional.

Como ya se ha preparado para crear estas aplicaciones, puede configurar un nuevo proyecto de Teams para crear la aplicación de bot de chat de IA.

Crear el área de trabajo del proyecto de bot

Si los requisitos previos están en su lugar, ¡comencemos!

1. Abra Visual Studio Code.

2. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

3. Seleccione Crear un nuevo agente o aplicación.

   

4. Seleccionar agentes para Teams>: Azure OpenAI> Introduzca una entrada en la entrada Clave de servicio de API de Azure ahora

   

5. Seleccione Agentes básicos para Teams. Si necesita una funcionalidad diferente para el bot, seleccione la opción necesaria.

   

6. Seleccione el lenguaje de programación como JavaScript.

   

7. Seleccione la carpeta predeterminada.

   

   Para cambiar la ubicación predeterminada, siga estos pasos:

   1. Seleccione Examinar.

      

   2. Seleccione la ubicación del área de trabajo del proyecto.

   3. Seleccione Seleccionar carpeta.

      

8. Escriba un nombre adecuado para la aplicación y, a continuación, seleccione la tecla Entrar .

   

   Aparecerá un cuadro de diálogo en el que deberá elegir sí o no para confiar en los autores de los archivos de esta carpeta.

   

Ahora, ha creado correctamente el área de trabajo del proyecto del bot de chat de IA.

Paseo por el código fuente de la aplicación de bot

Cuando termine de crear scaffolding, explore los directorios y archivos del proyecto en la sección EXPLORER de Visual Studio Code.

Nombre de carpeta o archivo	Contenido
env/.env.playground	El archivo de configuración con variables de entorno que se pueden confirmar en Git.
env/.env.playground.user	El archivo de configuración con variables de entorno, incluidas las credenciales, que no están confirmadas en Git de forma predeterminada.
appPackage	Archivos de plantilla de manifiesto de aplicación e iconos de aplicación (color.png y outline.png).
appPackage/manifest.json	Manifiesto de aplicación para ejecutar la aplicación en un entorno local y remoto.
src/app.js	Controla la lógica empresarial del bot de chat de IA.
m365agents.yml	Este es el archivo de proyecto principal del Kit de herramientas de agentes. El archivo del proyecto define dos cosas principales: propiedades y configuración y definiciones de etapas.
m365agents.local.yml	Esto se reemplaza m365agents.yml con acciones que permiten la ejecución y la depuración locales.
m365agents.playground.yml	Esto se reemplaza con acciones que habilitan la ejecución local y la m365agents.yml depuración en la herramienta de prueba.

Crear y ejecutar la aplicación de bot de chat de IA

Crear una clave y un punto de conexión de OpenAI para el bot de chat de IA

1. Vaya a Azure Portal.

2. Seleccione Crear un recurso y busque Azure OpenAI.

3. Seleccione Azure OpenAI y seleccione Crear.

   

4. Rellene los detalles requeridos y seleccione Siguiente.

   

5. Seleccione Todas las redes, incluso Internet, pueden acceder a este recurso y seleccione Siguiente.

   

6. Rellene los detalles requeridos y seleccione Siguiente.

   

7. Seleccione Crear.

   

Ha creado correctamente la clave y el punto de conexión para el bot de chat de IA.

Nota

También puede obtener la clave de API de OpenAI para depurar el bot de chat de IA.

Obtener claves y puntos de conexión de Azure OpenAI

1. Seleccione Ir a recursos.

   

2. Seleccione Claves y punto de conexión en el panel izquierdo y copie la clave y el punto de conexión. Puede copiar la CLAVE 1 o la CLAVE 2.

   

   Guarde la clave y el punto de conexión para su uso posterior.

3. Seleccione Implementaciones de modelo en el panel izquierdo y seleccione Administrar implementaciones.

   

   Aparece la ventana de Azure OpenAI Studio.

4. Selecciona Implementaciones en el panel izquierdo y elige + Crear nueva implementación.

   

5. Selecciona los siguientes detalles:

   1. Seleccione gpt-35-turbo en la lista desplegable Seleccionar un modelo .

      Nota

      Solo se admite el modelo gpt-35-turbo para el bot de chat de IA.

   2. Seleccione 0301 (predeterminado) en la lista desplegable Versión del modelo .

   3. Escriba el nombre de la implementación y seleccione Crear.

      

   4. Copie y guarde el nombre de la implementación para su uso posterior.

      

Actualización de la clave y los puntos de conexión de Azure OpenAI

1. Abra el proyecto en Visual Studio Code.

2. En EXPLORADOR, vaya al archivo env.env.playground.user>.

3. Escriba su SECRET_AZURE_OPENAI_API_KEY y SECRET_AZURE_OPENAI_ENDPOINT.

   ...
   SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
   SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>
   

4. Vaya al archivo src>app.js .

5. Comente el código y quite los OpenAI comentarios del Azure OpenAI código.

6. Escriba el nombre de la implementación de Azure OpenAI en azureDefaultDeployment.

   
   // Use OpenAI
   // apiKey: config.openAIKey,
   // defaultModel: "gpt-3.5-turbo",
   
   azureApiKey: config.azureOpenAIKey,
   azureDefaultDeployment: "gpt-35-turbo",
   azureEndpoint: config.azureOpenAIEndpoint,
   
   

Depurar y ejecutar la aplicación de bot de chat de IA

1. En el panel izquierdo, seleccione EJECUTAR y DEPURAR (Ctrl+Mayús+D) y, a continuación, seleccione Depurar en Agents Playground en la lista desplegable.

   

2. Agents Playground abre el bot de chat de IA en una página web.

   

Desencadenadores de actividad

Hay dos tipos de desencadenadores de actividad:

Desencadenadores de actividad predefinidos

Agents Playground proporciona activadores de actividad predefinidos para probar las funcionalidades de su bot.

Categoría	Actividad	Controlador
Desencadenar actividad de actualización de instalación	Install bot Desinstalar bot	onInstallationUpdate onInstallationUpdateAdded onInstallationUpdate onInstallationUpdateRemove
Desencadenar actividad de actualización de conversación	Agregar usuario Agregar bot Agregar canal	onMembersAdded onTeamsMembersAddedEvent onMembersAdded onTeamsMembersAddedEvent onTeamsChannelCreatedEvent
	Quitar usuario Quitar bot Quitar canal Quitar equipo	onMembersRemoved onTeamsMembersRemovedEvent onMembersRemoved onTeamsMembersRemovedEvent onTeamsChannelDeletedEvent onTeamsTeamDeletedEvent
	Cambiar nombre de canal Cambiar el nombre del equipo	onTeamsChannelRenamedEvent onTeamsTeamRenamedEvent

Nota

No todos los tipos de actividades están disponibles en todos los ámbitos. Por ejemplo, no puede agregar o quitar un canal en un chat personal o grupal.

Los activadores de actividad predefinidos están disponibles en el menú Simular una actividad en Agents Playground.

Para simular una actividad Agregar usuario , siga estos pasos:

1. En Agents Playground, vaya a Simular unusuario de Activity >Add.

   

   Aparece un cuadro de diálogo para obtener una vista previa del controlador de actividades.

2. Seleccione Enviar actividad.

   

   El bot envía la siguiente respuesta:

   

Desencadenadores de actividad personalizados

Puede usar la actividad personalizada para personalizar los desencadenadores de actividad, por ejemplo, reactionsAdded para cumplir con los requisitos de la aplicación de bot. Agents Playground rellena automáticamente las propiedades necesarias de la actividad. También puede modificar el tipo de actividad y agregar más propiedades.

1. Seleccione Simular una actividad>personalizada de actividad.

   

2. Agregue messageReaction para personalizar la actividad en la type propiedad:

   {
       "type": "messageReaction",
       "reactionsAdded": [
       {
           "type": "like"
       }
       ],
       "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
   }
   

3. Seleccione Enviar actividad.

   

   El bot envía un onReactionsAdded controlador en respuesta.

   

Completa el desafío

¿Se te ocurrió un resultado como este?

¡Enhorabuena! Ha creado correctamente una aplicación de bot de chat de IA. Ahora, ha aprendido a depurar su aplicación de bot de chat de IA en Agents Playground.

Área de juegos de Microsoft 365 Agents

Volver arriba

Enviar mensajes proactivos

Un mensaje proactivo es un mensaje enviado por un bot en respuesta a comandos simples enviados en el chat por un usuario.

Tutorial: Envío de mensajes proactivos

La respuesta al mensaje puede ser en uno de los siguientes formatos:

• Mensajes de bienvenida
• Mensajes programados
• Notificaciones

Esta guía paso a paso le ayuda a enviar un mensaje proactivo desde un bot. Verá el siguiente resultado:

Requisitos previos

Asegúrese de instalar las siguientes herramientas para crear e implementar las aplicaciones.

	Instalar	Para usar
	Microsoft Visual Studio Code	JavaScript o TypeScript, entornos de compilación. Use la versión más reciente.
	Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams)	Extensión de Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use la versión más reciente.
	Node.js	Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, consulte Node.js tabla de compatibilidad de versiones para el tipo de proyecto.
	Microsoft Teams	Teams para colaborar con todas las personas con las que trabaja a través de aplicaciones para chat, reuniones, llamadas y todo en un solo lugar.
	Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas para desarrolladores.
	Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación.

Preparar el entorno de desarrollo

Después de instalar las herramientas necesarias, configure el entorno de desarrollo.

Instalar el Kit de herramientas de agentes de Microsoft 365

El Kit de herramientas para agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams) ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para su aplicación y publicarlos en la Tienda Teams.

Puede usar Agents Toolkit con Visual Studio Code o una interfaz de línea de comandos denominada Microsoft 365 Agents Toolkit CLI (anteriormente conocida como CLI de TeamsFx).

Visual Studio Code

1. Abra Visual Studio Code y seleccione Extensiones (Ctrl+Mayús+X o Ver>extensiones).

2. En el cuadro de búsqueda, escriba Kit de herramientas de agentes de Microsoft 365.

3. Seleccione Instalar.

   

   El icono del Kit de herramientas de agentes de Microsoft 365 aparecerá en la barra de actividades de Visual Studio Code.

También puede instalar Agents Toolkit desde el catálogo de herramientas de Visual Studio Code.

Línea de comandos

Para instalar la CLI del kit de herramientas de agentes, utilice el npm administrador de paquetes e introduzca el siguiente comando en el símbolo del sistema:

npm install -g @microsoft/m365agentstoolkit-cli

En función de la configuración, es posible que tenga que usar sudo para instalar la CLI:

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

Esta condición es más común en sistemas Linux y macOS.

Asegúrese de agregar la caché global de npm a la ruta de acceso. Este paso se realiza normalmente como parte del instalador de Node.js.

Puede usar la CLI con el atk comando. Compruebe que el comando está funcionandoatk -h.

Precaución

Para poder ejecutar TeamsFx en terminales de PowerShell, debe habilitar la directiva de ejecución firmada remota para PowerShell.

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es un espacio o un contenedor para su organización en Teams, donde puede chatear, compartir archivos y llevar a cabo reuniones. Este espacio también es el lugar donde se carga y se prueba la aplicación. Vamos a comprobar si está listo para desarrollar con el inquilino.

Comprobar si se carga una opción de aplicación

Después de crear la aplicación personalizada, debe cargarla en Teams con la opción Cargar una aplicación personalizada . Inicie sesión en su cuenta de Microsoft 365 para comprobar si esta opción está habilitada.

Los siguientes pasos le ayudarán a comprobar si puede cargar aplicaciones en Teams:

1. En el cliente de Teams, seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación.

4. Busque la opción Cargar una aplicación personalizada. Si la opción está visible, puede cargar aplicaciones personalizadas.

   

   Nota

   Si no encuentra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.

Crear un inquilino de desarrollador gratuito de Teams (opcional)

Si no tiene una cuenta de desarrollador de Teams, únase al programa para desarrolladores de Microsoft 365.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, seleccione Configurar suscripción E5.

4. Configure su cuenta de administrador. Cuando termine, aparecerá la siguiente pantalla:

   

5. Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Crear un bot de mensaje proactivo

Para crear un bot de mensajes proactivo con Visual Studio Code, siga estos pasos:

1. Abra Visual Studio Code.

2. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

3. En el panel izquierdo, seleccione Ver ejemplos.

   

4. En la lista de ejemplos, seleccione Mensajería proactiva. Se abrirá una muestra precompilada que está lista para la depuración.

   

5. Seleccione Crear.

   

6. Seleccione la carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.

   

   Si quiere cambiar la ubicación predeterminada, siga estos pasos:

   1. Seleccione Examinar.

      

   2. Seleccione la ubicación del área de trabajo del proyecto.

   3. Seleccione Seleccionar carpeta.

      

   El bot de mensajes proactivos se crea en unos segundos y muestra el cuadro de diálogo correcto del bot de mensajes proactivos en la esquina inferior derecha con la opción de depurar:

   :::

7. Seleccione el icono Ejecutar y depurar en la esquina superior izquierda.

8. Seleccione Depurar (Edge) o Depurar (Chrome) en la lista desplegable.

   

   Si la depuración se realiza correctamente, se le pedirá que cargue el bot de mensajes proactivos en Teams en el equipo local.

9. Seleccione Agregar.

   

10. Busque y seleccione el ámbito requerido o seleccione un canal, chat o reunión de la lista y desplácese por el cuadro de diálogo para seleccionar Ir.

    

    La aplicación del bot de mensajes proactivos se carga en el cliente de Teams y aparece el siguiente mensaje en respuesta al mensaje enviado.

    

11. Copie y pegue la dirección URL o vaya a la dirección URL en el explorador. Se desencadena un mensaje de saludo proactivo y se comparte en el chat.

    

12. Vaya a Teams. Recibirá un mensaje de saludo proactivo del bot.

    

Recorrido por el código fuente

El kit de herramientas de agentes proporciona componentes para crear una aplicación. Después de crear el proyecto, puede ver las carpetas y los archivos del proyecto en el área EXPLORADOR de Visual Studio Code.

La nueva carpeta del proyecto contiene el siguiente contenido:

Carpeta / Archivo	Contenido
.vscode/	Archivos de Visual Studio Code para la depuración.
appManifest/	Plantillas para el manifiesto de la aplicación (anteriormente llamado manifiesto de la aplicación de Teams).
env/	Los pares nombre/valor se almacenan en archivos de entorno y se usan para m365agents.yml personalizar las reglas de aprovisionamiento e implementación.
manifest.json	El manifiesto de la aplicación para su publicación a través del portal para desarrolladores de Teams se almacena en Properties/manifest.json.
m365agents.yml	El archivo de proyecto principal describe la configuración de la aplicación y define el conjunto de acciones que se ejecutarán en cada fase del ciclo de vida.
m365agents.local.yml	Esto se reemplaza m365agents.yml con acciones que permiten la ejecución y la depuración locales.

Implementar el bot de mensajes proactivos

Ha aprendido a crear y ejecutar aplicaciones de Teams con la capacidad de bot de mensajes proactivo. Implementaremos la primera aplicación con capacidad de bot de mensajes proactivos en Azure mediante el Kit de herramientas de agentes.

Inicie sesión en su cuenta de Azure

Use su cuenta para acceder al portal de Microsoft Azure Portal y aprovisionar nuevos recursos en la nube para admitir su aplicación.

1. Abra Visual Studio Code.

2. Abra la carpeta del proyecto donde creó la aplicación del bot de mensajes proactivo.

3. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

4. Seleccione Iniciar sesión en Azure con sus credenciales.

   Recomendación

   Si tiene instalada la extensión AZURE ACCOUNT y está usando la misma cuenta, puede omitir este paso.

   Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.

5. Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.

La sección CUENTAS de la barra lateral muestra las dos cuentas por separado. También muestra el número de suscripciones de Azure disponibles para usted. Asegúrese de que tiene disponible al menos una suscripción de Azure que se pueda usar. Si no es así, cierre la sesión y use otra cuenta.

Implementación de la aplicación en Azure

La implementación consta de dos pasos. En primer lugar, se crean los recursos de nube necesarios (también conocido como aprovisionamiento). A continuación, el código de la aplicación se copia en los recursos en la nube creados. En este tutorial, implementará la aplicación bot.

¿Cuál es la diferencia entre aprovisionar e implementar?

Provision crea recursos en Azure y Microsoft 365 para la aplicación, pero no se copia ningún código (HTML, CSS y JavaScript) en los recursos.
Deploy copia el código de la aplicación en los recursos que creó durante el aprovisionamiento. Es habitual implementar varias veces sin aprovisionar recursos nuevos. Dado que el aprovisionamiento puede tardar algún tiempo en completarse, es independiente de la implementación.

Visual Studio Code

1. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

2. Seleccione Aprovisionar en CICLO DE VIDA.

   

3. Selecciona una de las suscripciones existentes.

   

4. Seleccione un grupo de recursos existente o cree un grupo de recursos. Para obtener más información, consulte Creación de un grupo de recursos.

   

   Nota

   Aparece un cuadro de diálogo en el que se menciona que se pueden producir costes al ejecutar recursos en Azure.

5. Seleccione Aprovisionamiento.

   

   El proceso de aprovisionamiento crea recursos en la nube de Azure. Puede supervisar el progreso en los cuadros de diálogo que aparecen en la esquina inferior derecha. Al cabo de unos minutos, aparece el siguiente cuadro de diálogo:

   

6. Seleccione Implementar en CICLO DE VIDA.

   

7. Seleccione Implementar.

   

   La implementación tarda algún tiempo. Puede supervisar el progreso en los cuadros de diálogo que aparecen en la esquina inferior derecha. Después de unos minutos, aparece el siguiente cuadro de diálogo.

   

8. Abre el panel de depuración (Ctrl+Mayús+D / ⌘⇧-D o Ver>ejecución) desde Visual Studio Code.

9. Seleccione Iniciar remoto (Edge) en la lista desplegable de configuración de inicio.

   

   Si la depuración se realiza correctamente, se le pedirá que cargue la aplicación de bot de mensajes proactivos en Teams.

10. Seleccione Agregar.

    

11. Busque y seleccione el ámbito requerido o seleccione un canal, chat o reunión de la lista y desplácese por el cuadro de diálogo para seleccionar Ir.

    

    La aplicación del bot de mensajes proactivos se carga en el cliente de Teams y aparece el siguiente mensaje en respuesta al mensaje enviado.

    

12. Copie y pegue la dirección URL o vaya a la dirección URL en el explorador. Se desencadena un mensaje de saludo proactivo y se comparte en el chat.

    

13. Vaya a Teams. Recibirá un mensaje de saludo proactivo del bot.

    

Línea de comandos

En la ventana de su terminal:

1. Ejecutar atk new para crear un nuevo proyecto.

atk new

1. Ejecutar atk provision para crear el recurso de Azure.

atk provision

1. Ejecutar atk deploy para implementar la aplicación.

atk deploy

1. Ejecutar atk preview para ejecutar la aplicación.

atk preview

Completa el desafío

¿Se te ocurrió algo como esto?

Ha completado el escenario.

• Puede enviar notificaciones a diario o solicitar comentarios de los usuarios de forma periódica.
• Puede controlar los límites para evitar varias notificaciones.

Enviar mensajes proactivos

Volver arriba

Crear extensión de mensaje basada en API

Las extensiones de mensajes creadas mediante API (basadas en API) mejoran significativamente la funcionalidad de sus aplicaciones de Teams al permitirles interactuar con servicios externos. Las extensiones de mensajes basadas en API pueden ayudar a simplificar los flujos de trabajo al reducir la necesidad de cambiar entre diferentes aplicaciones.

Tutorial: Creación de extensiones de mensajes basadas en API

Nota

Las extensiones de mensajes basadas en API solo admiten comandos de búsqueda.

Puede usar extensiones de mensaje basadas en API para integrar servicios externos que se usan habitualmente en el flujo de trabajo empresarial. Por ejemplo, una empresa que usa con frecuencia un sistema CRM para la administración de clientes podría usar una extensión de mensaje para capturar y mostrar datos de clientes directamente desde Teams. Esta aplicación ayuda a ahorrar tiempo y mejora la eficiencia al reducir la necesidad de cambiar entre diferentes aplicaciones. Esta característica es compatible con todas las plataformas en las que Teams está disponible, incluidos escritorio, web y móvil.

Requisitos previos para crear una extensión de mensaje

Aquí tiene una lista de herramientas que necesita para crear e implementar las aplicaciones.

Instalar	Para usar...
Microsoft Teams	Microsoft Teams para colaborar con todas las personas con las que trabaja a través de aplicaciones para chat, reuniones o llamadas, todo en un solo lugar.
Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas para desarrolladores.
Visual Studio Code	JavaScript, TypeScript o SharePoint Framework (SPFx) entornos de compilación. Use la versión 1.55 o posterior.
Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación.
Cuenta de Azure	Acceso a los recursos de Azure.
Documento de descripción de OpenAPI (OAD)	Un documento que describe las capacidades de la API. Para obtener más información, consulte Descripción de OpenAPI.

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es como un espacio o un contenedor para su organización en Teams, donde puede chatear, compartir archivos y llevar a cabo reuniones. Este espacio también es donde carga y prueba su aplicación personalizada. Vamos a comprobar si está listo para desarrollar con el inquilino.

Comprobar la opción de carga de aplicaciones personalizadas

Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones personalizadas. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.

Nota

La carga de aplicaciones personalizadas es necesaria para obtener una vista previa y probar aplicaciones en el entorno local de Teams. Si no está habilitada, no podrá obtener una vista previa ni probar la aplicación en el entorno local de Teams.

¿Ya tiene un inquilino y tiene acceso de administrador? ¡Comprobemos si realmente lo haces!

Compruebe si puede cargar una aplicación personalizada en Teams:

1. En el cliente de Teams, seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación.

4. Busque la opción Cargar una aplicación personalizada. Si ves la opción, la carga de aplicaciones personalizadas está habilitada.

   

Nota

Póngase en contacto con su administrador de Teams si no encuentra la opción para cargar una aplicación personalizada.

Crear un inquilino de desarrollador gratuito de Teams (opcional)

Si no tiene una cuenta de desarrollador de Teams, puede obtenerla de forma gratuita. Únase al programa para desarrolladores de Microsoft 365.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, seleccione Configurar suscripción E5.

4. Configure su cuenta de administrador. Cuando termine, aparecerá la siguiente pantalla.

   

5. Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Obtener una cuenta de Azure gratuita

Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción de Azure. Cree una cuenta gratuita antes de comenzar.

Tienes todas las herramientas para configurar tu cuenta. A continuación, configuremos su entorno de desarrollo y comencemos a construir. Seleccione la aplicación que desea compilar primero.

Crear documento de descripción de OpenAPI

OpenAPI Description (OAD) es la especificación estándar de la industria que describe cómo se estructuran y delinean los archivos OpenAPI. Es un formato independiente del lenguaje y legible para describir las API. Es fácil leer y escribir tanto para humanos como para máquinas. El esquema es legible por máquina y se representa en YAML o JSON.

Para interactuar con las API, es necesario un documento de descripción de OpenAPI. El documento de descripción de OpenAPI debe cumplir con los siguientes criterios:

• No se debe especificar la auth propiedad.

• JSON y YAML son los formatos admitidos.

• Se admiten las versiones 2.0 y 3.0.x de OpenAPI.

• Teams no admite las construcciones oneOf, anyOf, allOf y not (swagger.io).

• No se admite la creación de matrices para la solicitud, pero sí se admiten objetos anidados dentro de un cuerpo de solicitud JSON.

• El cuerpo de la solicitud, si está presente, debe ser application/JSON para garantizar la compatibilidad con una amplia gama de API.

• Defina una dirección URL de servidor de protocolo HTTPS para la servers.url propiedad.

• Solo se admite la búsqueda de un solo parámetro.

• Solo se permite un parámetro necesario sin un valor predeterminado.

• Solo se admiten los métodos POST y GET HTTP.

• El documento de descripción de OpenAPI debe tener un operationIdnombre .

• La operación no debe requerir parámetros de encabezado o cookie sin los valores predeterminados.

• Un comando debe tener exactamente un parámetro.

• Asegúrese de que no haya referencias remotas en el documento de descripción de OpenAPI.

• Un parámetro obligatorio con un valor predeterminado se considera opcional.

  Utilizamos la siguiente descripción de OpenAPI como ejemplo para este tutorial:

  Descripción de OpenAPI

      openapi: 3.0.1
      info:
      title: OpenTools Plugin
      description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
      version: 'v1'
      servers:
          - url: https://gptplugin.opentools.ai
      paths:
      /tools:
      get:
      operationId: searchTools
      summary: Search for AI Tools
          parameters:
          - in: query
            name: search
            required: true
            schema:
            type: string
            description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
          responses:
          "200":
            description: OK
            content:
            application/json:
              schema:
              $ref: '#/components/schemas/searchToolsResponse'
          "400":
            description: Search Error
            content:
            application/json:
              schema:
              ref: '#/components/schemas/searchToolsError'
          components:
          schemas:
          searchToolsResponse:
          required:
          - search
          type: object
          properties:
          tools:
          type: array
          items:
          type: object
          properties:
          name:
          type: string
          description: The name of the tool.
          opentools_url:
          type: string
          description: The URL to access the tool.
          main_summary:
          type: string
          description: A summary of what the tool is.
          pricing_summary:
          type: string
          description: A summary of the pricing of the tool.
          categories:
          type: array
          items:
          type: string
          description: The categories assigned to the tool.
          platforms:
          type: array
          items:
          type: string
          description: The platforms that this tool is available on.
          description: The list of AI tools.
          searchToolsError:
          type: object
          properties:
          message:
          type: string
          description: Message of the error.
  
  

  Nota

  Asegúrese de que la required: true propiedad esté disponible solo para un parámetro. Si hay más de un parámetro obligatorio, puede actualizar la propiedad necesaria para required: false los demás parámetros.

Puede validar si el documento de descripción de OpenAPI es válido. Para comprobarlo, siga estos pasos:

1. Vaya a Swagger o al validador de OpenAPI y valide el documento de descripción de OpenAPI.

2. Guarde el documento de descripción de OpenAPI.

3. Vaya a Swagger Editor.

4. En el panel izquierdo, pegue la descripción de OpenAPI en el editor.

5. En el panel derecho, seleccione GET.

6. Selecciona Pruébalo.

7. Introduce los valores del parámetro de búsqueda como Herramienta para crear música.

8. Seleccione Ejecutar. El editor de Swagger muestra una respuesta con una lista de productos.

   

9. Vaya a Respuesta> del servidorCuerpo de respuesta.

10. En products, copie el primer producto de la lista y guárdelo para futuras consultas.

    

Crear plantilla de representación de respuesta

Un documento de descripción de OpenAPI requiere una plantilla de representación de respuesta para que la aplicación responda a las solicitudes GET o POST. La plantilla de representación de respuesta consta de una plantilla de tarjeta adaptable, una plantilla de tarjeta de vista previa y metadatos.

Plantilla de tarjeta adaptativa

Para crear una plantilla de tarjeta adaptable, sigue estos pasos:

1. Vaya a ChatGPT y formule la siguiente consulta en el área de redacción de mensajes:

   
   Create an Adaptive Card Template that binds to the following response:
       "categories": [
           "Music Generation",
           "AI Detection"
       ],
       "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
       "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
       "name": "AI Music Generator",
       "opentools_url": "https://goto.opentools.ai/ai-music-generator",
       "platforms": [
           "Web",
           "App",
           "API"
       ]
   

2. Seleccione Enviar mensaje.

3. ChatGPT genera una respuesta con una plantilla de tarjeta adaptativa que se enlaza a los datos de ejemplo. Guarde la plantilla de tarjeta adaptativa para futuras consultas.

   A continuación se muestra un ejemplo de la plantilla de tarjeta adaptable:

   Plantilla de tarjeta adaptativa

   
   {
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
   "type": "AdaptiveCard",
   "version": "1.4",
   "body": [
       {
       "type": "TextBlock",
       "text": "AI Music Generator",
       "weight": "Bolder",
       "size": "Large"
       },
       {
       "type": "TextBlock",
       "text": "Categories",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
        "text": "Music Generation, AI Detection",
        "wrap": true
       },
       {
       "type": "TextBlock",
       "text": "Description",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
       "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
       "wrap": true
       },
       {
       "type": "TextBlock",
       "text": "Platform",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
       "text": "Web, App, API",
       "wrap": true
       }
   ],
   "actions": [
       {
       "type": "Action.OpenUrl",
       "title": "Learn More",
       "url": "https://goto.opentools.ai/ai-music-generator"
       },
       {
       "type": "Action.OpenUrl",
       "title": "Try It",
       "url": "https://goto.opentools.ai/c/ai-music-generator"
       }
   ]
   }
   
   

4. Para comprobar si la tarjeta adaptativa generada enlaza con los datos de ejemplo, sigue estos pasos:

   1. Ve a Adaptive Card Designer.

   2. Vaya a Seleccionar aplicación host y, a continuación, seleccione Microsoft Teams en la lista desplegable.

   3. Ve al EDITOR DE CARGAS DE TARJETAS y pega el código de la plantilla de tarjeta adaptable.

   4. Vaya a SAMPLE DATA EDITOR y pegue la respuesta GET API que guardó anteriormente.

      

   5. Seleccione el modo de vista previa. El diseñador de tarjetas adaptables muestra una tarjeta adaptativa con los datos que enlazan la respuesta a la plantilla.

      

Crear una plantilla de tarjeta de vista previa

La plantilla de tarjeta de vista previa puede contener un title, subtitley image propiedades. Si la respuesta de la API no tiene una imagen, puede quitar la propiedad image.

A continuación se muestra un ejemplo de una plantilla de tarjeta de vista previa:

Plantilla de tarjeta de vista previa

   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 

Cree una condición if para and titlesubtitle, donde:

• Si name existe, el bot usa el nombre.
• Si el nombre no existe, el bot usa NA.

Por ejemplo, "title": "Name: ${if(name, name, 'N/A')}". Guarde la plantilla de tarjeta de vista previa para futuras consultas.

Plantilla de representación de respuesta

La plantilla de representación de respuesta debe ajustarse al esquema hospedado en https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json.

Para crear una plantilla de representación de respuesta, siga estos pasos:

1. Cree un archivo JSON y agréguele el siguiente código:

   { 
     "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
     "version": "1.0", 
     "jsonPath": "", 
     "responseLayout": "", 
     "responseCardTemplate": { 
    },
    "previewCardTemplate": {
        }
    }
   

2. Actualice las propiedades de la plantilla de representación de respuesta de la siguiente manera:

   #	Nombre de propiedad	Valor
   1.	"$schema"	"https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
   2.	"version"	"1.0" version es la versión de la plantilla de representación que se va a usar.
   3.	"jsonPath"	"tools" jsonPath es la ruta de acceso a uno o varios resultados en la respuesta JSON. Agréguelo jsonPath a la matriz de datos o datos relevante de la lista de productos en la respuesta de la API. En este caso, las jsonPath herramientas es. Para obtener más información sobre cómo determinar la ruta JSON, consulte Consultar JSON con la ruta JSON.
   4.	"responseLayout"	"list" responseLayout Especifica el diseño de los datos adjuntos. Se usa para respuestas de tipo resultado. Los tipos admitidos son lista y cuadrícula. Si el cuerpo de la respuesta contiene un objeto con varios elementos como texto, título e imagen, entonces el diseño de la respuesta debe establecerse en list. Si la respuesta de la API contiene solo imágenes o miniaturas, el diseño de la respuesta debe establecerse en grid.
   5.	"responseCardTemplate"	Pega el código de la plantilla de tarjeta adaptativa que guardaste anteriormente. responseCardTemplate es una plantilla de tarjeta adaptable para asignar la respuesta JSON a una tarjeta adaptable.
   6.	"previewCardTemplate"	Pegue el código de la plantilla de tarjeta de vista previa que guardó anteriormente. previewCardTemplate es una plantilla de tarjeta de vista previa se usa para mostrar una vista previa de los resultados en el control flotante de la extensión de mensaje.

3. Guarde la plantilla de representación de respuestas en la misma carpeta en la que guardó el documento de descripción de OpenAPI.

El código siguiente es un ejemplo de una plantilla de representación de respuesta:

Plantilla de representación de respuesta

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

Crear manifiesto de aplicación

Ahora, debe crear un manifiesto de aplicación (antes llamado manifiesto de aplicación de Teams). El manifiesto de la aplicación describe cómo se integra la aplicación en el producto Microsoft Teams.

Crear un manifiesto de aplicación de Teams

Para crear el manifiesto, siga estos pasos:

1. Cree un nuevo archivo JSON. El manifiesto de la aplicación debe ajustarse a la versión 1.20 del esquema definido en el esquema del manifiesto de la aplicación.

2. Agregue el siguiente código al archivo JSON:

   Manifiesto de la aplicación

   {
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
    "manifestVersion": "1.20",
    "version": "1.0.3",
    "id": "<<YOUR-MICROSOFT-APP-ID>>",
    "packageName": "com.microsoft.teams.extension",
    "developer": {
        "name": "Teams App, Inc.",
        "websiteUrl": "https://www.example.com",
        "privacyUrl": "https://www.example.com/termofuse",
        "termsOfUseUrl": "https://www.example.com/privacy"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Search ME API",
        "full": "Search ME API full"
    },
    "description": {
        "short": "product app for testing API Message Extensions",
        "full": "product app for testing API Message Extensions"
    },
    "accentColor": "#FFFFFF",
    "composeExtensions": [
        {
            "composeExtensionType": "",
            "apiSpecificationFile": "",
            "commands": [
                {
                    "context": [
                        "compose"
                    ],
                    "type": "query",
                    "title": "API for fetching Klarna.",
                    "id": "",
                    "parameters": [
                        {
                            "name": "",
                            "title": "",
                            "description": ""
                        }
                    ],
                    "description": "",
                    "apiResponseRenderingTemplateFile": ""
                }
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": []
   }
   

3. Actualiza las propiedades del manifiesto de la aplicación de la siguiente manera:

   • Reemplazar <<YOUR-MICROSOFT-APP-ID>> con el id. de aplicación de Microsoft del bot.
   • Actualiza el valor de composeExtensionType a apiBased.
   • Actualice el valor de apiSpecificationFile la ruta de acceso del archivo de descripción de OpenAPI.
   • Actualiza el valor de commands.id a searchTools.
   • Actualiza el valor de commands.title a Search for AI Tools.
   • Actualiza el valor de commands.description a Search for AI Tools.
   • Actualiza el valor de parameters.name a search. Si no hay parámetros, los valores deben ser parámetros de consulta o properties.name si hacen referencia a una propiedad en el esquema del cuerpo de la solicitud.
   • Actualice la apiResponseRenderingTemplateFile ruta de acceso del archivo de plantilla de representación de respuestas.
   • Actualice el valor del validDomainsservice URL punto final definido en el archivo de descripción de OpenAPI.

4. Guarde el manifiesto de la aplicación de Teams en la misma carpeta en la que guardó el documento de descripción de OpenAPI y la plantilla de representación de respuesta.

   • Necesita una imagen en color y una imagen de contorno. Estas imágenes deben incluirse en la carpeta y se debe hacer referencia a ellas en el manifiesto de la aplicación de Teams.

   • Comprima el contenido de la carpeta. El archivo zip debe incluir los siguientes archivos:

     • Documento de descripción de OpenAPI
     • Plantilla de representación de respuesta
     • Manifiesto de la aplicación
     • Icono de color
     • Icono Esquema

Cargar una aplicación personalizada en Teams

Inicie sesión en el entorno de prueba de Teams para probar la aplicación en Teams. Para cargar una aplicación personalizada en Teams, siga estos pasos:

1. Vaya a Microsoft Teams e inicie sesión con sus credenciales de inquilino de prueba.

2. Vaya a Aplicaciones>Administrar la aplicación>Cargar una aplicación.

3. Seleccione Cargar una aplicación personalizada.

4. Seleccione el archivo zip creado y seleccione Abrir.

5. Seleccione Agregar.

   

6. Seleccione Abrir.

   

7. Ve a un chat, selecciona + en el área de redacción de mensajes y busca tu aplicación.

8. Seleccione la aplicación y realice una consulta de búsqueda.

   

9. La aplicación responde con una tarjeta adaptativa en la ventana de chat.

10. Seleccione Enviar.

    

¡Enhorabuena! ¡Lo ha conseguido! Aprendió a crear una extensión de mensaje basada en API utilizando el documento de descripción de OpenAPI.

Crear una extensión de mensaje basada en API

Volver arriba

Crear extensión de mensaje basada en acciones

Las extensiones de mensajes basados en acciones de Teams permiten a los usuarios interactuar con los servicios web en el cliente de Microsoft Teams. Las extensiones de mensaje ayudan a iniciar acciones en un sistema externo desde el área de redacción de mensajes, el cuadro de comandos o directamente desde un mensaje.

Tutorial: Creación de extensiones de mensajes basadas en acciones

Características principales de la extensión de mensajes basados en acciones:

• Presenta al usuario una ventana emergente modal para recopilar o mostrar información.
• Desencadena los comandos de acción desde el área redactar mensaje, el cuadro de comandos o desde un mensaje.

Esta guía paso a paso le ayuda a crear una extensión de mensaje basada en acciones de Teams para iniciar acciones desde la redacción de mensajes y el área de mensajes. Al final de este tutorial, puede lograr el siguiente resultado:

Requisitos previos

Asegúrese de instalar las siguientes herramientas y de configurar el entorno de desarrollo:

	Instalar	Para usar...
	Microsoft Teams	Microsoft Teams colabore con todas las personas con las que trabaja a través de aplicaciones para chat, reuniones y llamadas, todo en un solo lugar.
	Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo de desarrollo ASP.NET y web. Use la versión más reciente.
	SDK de .NET Core	Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Si no ha instalado la versión más reciente, instale la versión portátil.
	Túnel de desarrollo	Las características de la aplicación Teams (bots conversacionales, extensiones de mensaje y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo con Teams. Dev tunnel es una poderosa herramienta para abrir de forma segura su localhost a Internet y controlar quién tiene acceso. Dev Tunnel está disponible en Visual Studio 2022 versión 17.7.0 o posterior. También puede usar ngrok como túnel para conectar el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala dentro del directorio del proyecto (mediante npm devDependencies).

Nota

Después de descargar ngrok, regístrese e instale authtoken.

Configurar entorno local

1. Abra microsoft-teams-samples.

2. Seleccione Código.

3. En el menú desplegable, selecciona Abrir con GitHub Desktop.

   

4. Seleccione Clonar.

Registro de la aplicación Microsoft Entra

Los siguientes pasos le ayudan a crear y registrar su bot en Azure Portal:

• Cree y registre su aplicación de Azure.
• Cree un secreto de cliente para habilitar la autenticación SSO del bot.
• Agregue el canal de Teams para implementar el bot.
• Cree un túnel hasta los puntos de conexión de su servidor web mediante dev tunnel (recomendado) o ngrok.
• Agregue el punto de conexión de mensajería al túnel de desarrollo que ha creado.

Agregar registro de la aplicación

1. Vaya a Azure Portal.

2. Seleccione Registros de aplicaciones.

   

3. Seleccione + Nuevo registro.

   

4. Escriba el nombre de la aplicación.

5. Seleccione Cuentas en cualquier directorio organizativo (cualquier inquilino de Microsoft Entra ID: multiinquilino).

6. Seleccione Registrar.

   

   Su aplicación está registrada en Microsoft Entra ID. Aparece la página de información general de la aplicación.

   

   Nota

   Guarde el id. de aplicación del id. de aplicación (cliente) y el id. de directorio (inquilino) para su uso posterior.

Crear un túnel

Siga uno de los dos métodos siguientes para crear un túnel.

Túnel de desarrollo

1. Abra Visual Studio.

2. Seleccione Crear un nuevo proyecto.

   

3. En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione aplicación web de ASP.NET Core.

4. Seleccione Siguiente.

   

5. Escriba el nombre del proyecto y seleccione Siguiente.

   

6. Seleccione Crear.

   

   Aparecerá una ventana de información general.

   

7. En la lista desplegable de depuración, seleccione Dev Tunnels (no active tunnel)>Create a Tunnel....

   

   Aparecerá una ventana emergente.

8. Actualiza los siguientes detalles en la ventana emergente:

   1. Cuenta: escriba una cuenta de Microsoft o GitHub.
   2. Nombre: introduzca un nombre para el túnel.
   3. Tipo de túnel: En la lista desplegable, seleccione Temporal.
   4. Acceso: En la lista desplegable, seleccione Público.

9. Seleccione Aceptar.

   

   Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.

10. Seleccione Aceptar.

    

    Puede encontrar el túnel que creó en la lista desplegable de depuración de la siguiente manera:

    

11. Seleccione F5 para ejecutar la aplicación en modo de depuración.

12. Si aparece un cuadro de diálogo de advertencia de seguridad , seleccione Sí.

    

    Aparecerá una ventana emergente.

13. Seleccione Continuar.

    

    La página principal del túnel de desarrollo se abre en una nueva ventana del explorador y el túnel de desarrollo ahora está activo.

    

14. Vaya a Visual Studio y seleccione Ver > salida.

15. En el menú desplegable de la consola de salida , seleccione Dev Tunnels.

    La consola de salida muestra la dirección URL del túnel de desarrollo.

    

ngrok

Utilice ngrok o el símbolo del sistema para crear un túnel hacia los puntos de conexión HTTPS disponibles públicamente del servidor web que se ejecuta localmente. Ejecute el siguiente comando en ngrok:

ngrok http --host-header=localhost 3978

Recomendación

Si encuentra ERR_NGROK_4018, siga los pasos que se proporcionan en el símbolo del sistema para registrarse y autenticar ngrok. A continuación, ejecute el ngrok http --host-header=localhost 3978 comando.

La ventana muestra la dirección URL HTTPS.

Agregar autenticación web

1. En el panel izquierdo, en Administrar, seleccione Autenticación.

2. Seleccione Agregar una plataforma>Web.

   

3. Escriba el URI de redireccionamiento de la aplicación anexando auth-end al nombre de dominio completo. Por ejemplo, https://your-devtunnel-domain/auth-end o https://your-ngrok-domain/auth-end.

4. En Flujos híbridos y de concesión implícita, active las casillas Tokens de acceso y tokens de identificación .

5. Seleccione Configurar.

   

6. En Web, seleccione Agregar URI.

7. Entrar https://token.botframework.com/.auth/web/redirect.

8. Selecciona Guardar.

   

Crear un secreto de cliente

Nota

Si encuentra el error, los secretos de cliente están bloqueados por la directiva de todo el espacio empresarial. Póngase en contacto con el administrador de inquilinos para obtener más información., puede crear un certificado en su lugar. Para obtener instrucciones paso a paso, consulte Creación de un certificado para el registro de aplicaciones.

1. En el panel izquierdo, en Administrar, seleccione Certificados & secretos.

2. En Secretos de cliente, seleccione + Nuevo secreto de cliente.

   

   Aparece la ventana Agregar un secreto de cliente .

3. Escriba la descripción.

4. Seleccione Agregar.

   

5. En Valor, seleccione Copiar en el portapapeles para guardar el valor del secreto de cliente para su uso posterior.

   

Agregar permisos de API

1. En el panel izquierdo, seleccione Permisos de API.

2. Seleccione + Agregar un permiso.

   

3. Seleccione Microsoft Graph.

4. Seleccione Permisos delegados.

5. Select User>User.Read.

6. Seleccione Agregar permisos.

   

   Nota

   • Si no se concede el consentimiento del administrador de TI a una aplicación, los usuarios deben dar su consentimiento la primera vez que usan una aplicación.
   • Los usuarios deben dar su consentimiento a los permisos de API solo si la aplicación Microsoft Entra está registrada en un inquilino diferente.

Agregar el URI de identificador de aplicación

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Junto al URI de identificador de aplicación, seleccione Agregar.

   

3. Actualice el URI de identificador de aplicación en el api://botid-{AppID} formato y seleccione Guardar.

   

Agregar un ámbito

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Seleccione + Agregar un ámbito.

   

3. Escriba access_as_user como nombre del ámbito.

4. En ¿Quién puede dar su consentimiento?, selecciona Administradores y usuarios.

5. Actualice los valores del resto de los campos de la siguiente manera:

   • Escriba Teams puede acceder al perfil del usuario como nombre para mostrar de consentimiento de Administración.

   • Entrar Permite a Teams llamar a las API web de la aplicación como el usuario actual como descripción de consentimiento delAdministración.

   • Entre Teams puede acceder al perfil de usuario y realizar solicitudes en su nombre como Nombre para mostrar de consentimiento del usuario.

   • Escriba Permitir que Teams llame a las API de esta aplicación con los mismos derechos que el usuario como Descripción del consentimiento del usuario.

6. Asegúrese de que Estado esté establecido en Habilitado.

7. Seleccione Agregar ámbito.

   En la imagen siguiente se muestran los campos y los valores:

   

   Nota

   El nombre del ámbito debe coincidir con el URI de identificador de aplicación anexado /access_as_user al final.

   

Agregar aplicación cliente

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

   En Aplicaciones cliente autorizadas, identifique las aplicaciones que desea autorizar para la aplicación web de la aplicación.

2. Seleccione + Agregar una aplicación cliente.

   

3. Agregue Teams para móvil o de escritorio y la aplicación web de Teams.

   1. Para Teams para dispositivos móviles o de escritorio: escriba el id. de cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para la web de Teams: escriba el id. de cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Active la casilla Ámbitos autorizados .

5. Seleccione Agregar aplicación.

   

   En la imagen siguiente se muestra el identificador de cliente:

   

Crear un bot

Crear un recurso de bot de Azure

Nota

Si ya está probando el bot en Teams, cierre la sesión de esta aplicación y de Teams. Para ver este cambio, vuelve a iniciar sesión.

1. Ir a Inicio.

2. Seleccione + Crear un recurso.

3. En el cuadro de búsqueda, escriba Azure Bot.

4. Seleccione Entrar.

5. Seleccione Bot de Azure.

6. Seleccione Crear.

   

7. Escriba el nombre del bot en Controlador del bot.

8. Selecciona tu suscripción en la lista desplegable.

9. Seleccione su grupo de recursos en la lista desplegable.

   

   Si no tiene un grupo de recursos existente, puede crear uno nuevo. Para crear un nuevo grupo de recursos, siga estos pasos:

   1. Seleccione Create new.
   2. Escriba el nombre del recurso y seleccione Aceptar.
   3. Seleccione una ubicación en la lista desplegable Nueva ubicación de grupo de recursos .

   

10. En Precios, selecciona Cambiar plan.

    

11. Seleccionar FO Libre>Selección.

    

12. En Id. de aplicación de Microsoft, seleccione Tipo de aplicación como Multiinquilino.

13. En el tipo de creación, seleccione Usar el registro de aplicaciones existente.

14. Escriba el id. de la aplicación.

    Nota

    No se puede crear más de un bot con el mismo id. de aplicación de Microsoft.

15. Selecciona Revisar + crear.

    

16. Una vez superada la validación, seleccione Crear.

    El bot tarda unos minutos en aprovisionarse.

17. Seleccione Ir al recurso.

    

    Ha creado correctamente el bot de Azure.

    

Agregar un canal de Teams

1. En el panel izquierdo, seleccione Canales.

2. En Canales disponibles, seleccione Microsoft Teams.

   

3. Active la casilla para aceptar los Términos de servicio.

4. Seleccione Aceptar.

   

5. Selecciona Aplicar.

   

Agregar un punto de conexión de mensajería

Use una de las siguientes maneras para agregar un punto de conexión de mensajería:

Túnel de desarrollo

1. Use la dirección URL del túnel de desarrollo en la consola de salida como punto de conexión de mensajería.

   

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-devtunnel-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualícela con el id. de aplicación.

ngrok

1. Desde ngrok, copie la dirección URL HTTPS.

   

   Nota

   La dirección URL HTTPS en ngrok es un nombre de dominio completo. Es WebAppDomain un nombre de dominio completo que no incluye https:// en él.

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-ngrok-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualiza el problema con el id. de aplicación.

Configuración de la configuración de la aplicación y de los archivos de manifiesto

1. Vaya al archivo appsettings.json del repositorio clonado.

   

2. Abra el archivo appsettings.json y actualice la siguiente información:

   • Establezca "MicrosoftAppId" en el id. de aplicación de Microsoft del bot.
   • Establezca "MicrosoftAppPassword" el valor de identificador de secreto de cliente del bot.
   • Establecer ConnectionName como nombre de conexión OAuth.
   • Establecer "MicrosoftAppType" en MultiTenant.
   • Establézcalo "MicrosoftAppTenantId" en común.

   

3. Vaya al archivo manifest.json del repositorio clonado.

   

4. Abra el archivo manifest.json y actualice los cambios siguientes:

   • Reemplace todas las apariciones de con su id. de aplicación de "{TODO: MicrosoftAppId}" Microsoft.
   • Establezca "<<domain-name>>" en el dominio de túnel de desarrollo o de ngrok.

   

Compilar y ejecutar el servicio

Para generar y ejecutar el servicio, use Visual Studio o la línea de comandos.

Visual Studio

1. Abra Visual Studio.

2. Ir a archivo>Abrir>proyecto/solución.....

   

3. En la carpeta csharp , seleccione el archivo TeamsMessagingExtensionsAction.csproj .

   

4. Presione F5 para ejecutar el proyecto.

5. Seleccione Sí si aparece el cuadro de diálogo siguiente:

   

   Aparecerá una página web con un mensaje ¡El bot está listo!.

   

Línea de comandos

Vaya a samples>msgext-action>csharp en la ventana del símbolo del sistema e introduzca el siguiente comando:

    dotnet run

Agregar aplicación de extensión de mensajes de acción a Teams

1. En el repositorio clonado, vaya a samples>msgext-action>csharp>TeamsAppManifest.

2. Cree un .zip con los siguientes archivos presentes en la carpeta Manifiesto :

   • manifest.json
   • icon-outline.png
   • icon-color.png

   

3. En el cliente de Teams, seleccione el icono Aplicaciones .

4. Seleccione Administrar las aplicaciones.

5. Seleccione Cargar una aplicación.

6. Busque la opción Cargar una aplicación personalizada. Si ves la opción, la carga de aplicaciones personalizadas está habilitada.

   

   Nota

   Póngase en contacto con el administrador de Teams si no encuentra la opción para cargar una aplicación personalizada.

7. Seleccione Abrir para cargar el archivo messaging.zip que creó en la carpeta TeamsAppManifest.

   

8. Seleccione Agregar.

   

9. Seleccione Abrir para abrir la aplicación en el ámbito personal.

   Como alternativa, puede buscar y seleccionar el ámbito requerido o seleccionar un canal, un chat o una reunión de la lista y desplazarse por el cuadro de diálogo para seleccionar Ir.

   

Interactuar con la aplicación en Teams

1. Seleccione el comando Crear tarjeta en la lista de comandos del cuadro de redacción.

   

2. Introduce tu información en la ventana emergente modal.

   

3. Seleccione Enviar.

   

4. Seleccione Más opciones (...) en el menú de desbordamiento.

5. Seleccione Más acciones>Compartir mensaje.

   

6. Si desea incluir una imagen, active la casilla Incluir imagen en la tarjeta de héroe y, a continuación, seleccione Enviar.

   

Completa el desafío

¿Se te ocurrió algo como esto?

Ha completado el tutorial para empezar con una aplicación de extensión de mensaje de acción .

Comandos de acción

Volver arriba

Crear un bot con autenticación SSO

Los bots conversacionales en Microsoft Teams realizan tareas automatizadas repetitivas iniciadas por los usuarios, como el servicio al cliente. El usuario debe iniciar sesión varias veces sin la autenticación de inicio de sesión único (SSO). Con los métodos de autenticación SSO, los usuarios no necesitan iniciar sesión en el bot varias veces.

Tutorial: Crear un bot con autenticación SSO

Un bot se comporta de forma diferente en función de la conversación en la que participa:

• Los bots en conversaciones de chat grupal y de canal requieren que los usuarios usen @mention el bot.
• Los bots en una conversación uno a uno no requieren un @mentionarchivo . Todos los mensajes enviados por el usuario se dirigen al bot.

Esta guía paso a paso le ayuda a crear un bot con autenticación SSO. Verá el siguiente resultado:

Requisitos previos para crear un bot

Asegúrese de instalar las siguientes herramientas y de configurar el entorno de desarrollo:

Instalar	Para usar...
Microsoft Teams	Microsoft Teams colabore con todos los usuarios con los que trabaja a través de aplicaciones para chat, reuniones y llamadas, todo en un solo lugar.
Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo de desarrollo ASP.NET y web. Use la versión más reciente.
Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación.
Túnel de desarrollo	Las características de la aplicación Teams (bots conversacionales, extensiones de mensaje y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo con Teams. Dev tunnel es una poderosa herramienta para abrir de forma segura su localhost a Internet y controlar quién tiene acceso. Dev Tunnel está disponible en Visual Studio 2022 versión 17.7.0 o posterior. También puede usar ngrok como túnel para conectar el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala dentro del directorio del proyecto (mediante npm devDependencies).

Nota

Después de descargar ngrok, regístrese e instale authtoken.

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es como un espacio o un contenedor donde puede chatear, compartir archivos y organizar reuniones para su organización en Teams. También puede cargar y probar la aplicación personalizada.

Buscar una opción de carga de aplicación personalizada

Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones personalizadas. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.

Nota

La carga de aplicaciones personalizadas es necesaria para obtener una vista previa y probar aplicaciones en el entorno local de Teams. Habilite la carga de aplicaciones para obtener una vista previa y probar la aplicación en Teams localmente.

¿Ya tiene un inquilino y tiene acceso de administrador? ¡Comprobemos si realmente lo haces!

Para comprobar la carga de aplicaciones personalizadas en Teams:

1. En el cliente de Teams, seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación

4. Busque la opción Cargar una aplicación personalizada. Si ves la opción, la carga de aplicaciones personalizadas está habilitada.

   

Nota

Póngase en contacto con el administrador de Teams si no tiene la opción de cargar una aplicación personalizada.

Crear un inquilino de desarrollador gratuito de Teams

Si no tiene una cuenta de desarrollador de Teams, puede obtenerla de forma gratuita. Únase al programa para desarrolladores de Microsoft 365.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, selecciona Configuración de suscripción E5.

4. Configure una cuenta de administrador. Después de terminar, se muestra la siguiente pantalla.

   

5. Inicie sesión en Teams con la nueva cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Configurar entorno local

Siga estos pasos para clonar el repositorio:

1. Abra microsoft-teams-samples.

2. Seleccione Código.

3. En el menú desplegable, selecciona Abrir con GitHub Desktop.

   

4. Seleccione Clonar.

Registro de la aplicación Microsoft Entra

Los siguientes pasos le ayudan a crear y registrar su bot en Azure Portal:

• Cree y registre su aplicación de Azure.
• Cree un secreto de cliente para habilitar la autenticación SSO del bot.
• Agregue el canal de Teams para implementar el bot.
• Cree un túnel hasta los puntos de conexión de su servidor web mediante dev tunnel (recomendado) o ngrok.
• Agregue el punto de conexión de mensajería al túnel de desarrollo que ha creado.

Agregar registro de la aplicación

1. Vaya a Azure Portal.

2. Seleccione Registros de aplicaciones.

   

3. Seleccione + Nuevo registro.

   

4. Escriba el nombre de la aplicación.

5. Seleccione la opción de inquilino, según sea necesario.

6. Seleccione Registrar.

   

   Su aplicación está registrada en Microsoft Entra ID. Aparece la página de información general de la aplicación.

   

   Nota

   Guarde el id. de aplicación del id. de aplicación (cliente) y el id. de directorio (inquilino) para su uso posterior.

Crear un túnel

Siga uno de los dos métodos siguientes para crear un túnel.

Túnel de desarrollo

1. Abra Visual Studio.

2. Seleccione Crear un nuevo proyecto.

   

3. En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione aplicación web de ASP.NET Core.

4. Seleccione Siguiente.

   

5. Escriba el nombre del proyecto y seleccione Siguiente.

   

6. Seleccione Crear.

   

   Aparecerá una ventana de información general.

   

7. En la lista desplegable de depuración, seleccione Dev Tunnels (no active tunnel)>Create a Tunnel....

   

   Aparecerá una ventana emergente.

8. Actualiza los siguientes detalles en la ventana emergente:

   1. Cuenta: escriba una cuenta de Microsoft o GitHub.
   2. Nombre: introduzca un nombre para el túnel.
   3. Tipo de túnel: En la lista desplegable, seleccione Temporal.
   4. Acceso: En la lista desplegable, seleccione Público.

9. Seleccione Aceptar.

   

   Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.

10. Seleccione Aceptar.

    

    Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:

    

11. Seleccione F5 para ejecutar la aplicación en modo de depuración.

12. Si aparece un cuadro de diálogo de advertencia de seguridad , seleccione Sí.

    

    Aparecerá una ventana emergente.

13. Seleccione Continuar.

    

    La página principal del túnel de desarrollo se abre en una nueva ventana del explorador y el túnel de desarrollo ahora está activo.

    

14. Vaya a Visual Studio y seleccione Ver > salida.

15. En el menú desplegable de la consola de salida , seleccione Dev Tunnels.

    La consola de salida muestra la dirección URL del túnel de desarrollo.

    

ngrok

Utilice ngrok o el símbolo del sistema para crear un túnel hacia los puntos de conexión HTTPS disponibles públicamente del servidor web que se ejecuta localmente. Ejecute el siguiente comando en ngrok:

ngrok http --host-header=localhost 3978

Recomendación

Si encuentra ERR_NGROK_4018, siga los pasos que se proporcionan en el símbolo del sistema para registrarse y autenticar ngrok. A continuación, ejecute el ngrok http --host-header=localhost 3978 comando.

La ventana muestra la dirección URL HTTPS.

Agregar autenticación web

1. En el panel izquierdo, en Administrar, seleccione Autenticación.

2. Seleccione Agregar una plataforma>Web.

   

3. Escriba el URI de redireccionamiento de la aplicación anexando auth-end al nombre de dominio completo. Por ejemplo, https://your-devtunnel-domain/auth-end o https://your-ngrok-domain/auth-end.

4. En Flujos híbridos y de concesión implícita, active las casillas Tokens de acceso y tokens de identificación .

5. Seleccione Configurar.

   

6. En Web, seleccione Agregar URI.

7. Entrar https://token.botframework.com/.auth/web/redirect.

8. Selecciona Guardar.

   

Crear un secreto de cliente

Nota

Si encuentra el error, los secretos de cliente están bloqueados por la directiva de todo el espacio empresarial. Póngase en contacto con el administrador de inquilinos para obtener más información., puede crear un certificado en su lugar. Para obtener instrucciones paso a paso, consulte Creación de un certificado para el registro de aplicaciones.

1. En el panel izquierdo, en Administrar, seleccione Certificados & secretos.

2. En Secretos de cliente, seleccione + Nuevo secreto de cliente.

   

   Aparece la ventana Agregar un secreto de cliente .

3. Escriba la descripción.

4. Seleccione Agregar.

   

5. En Valor, seleccione Copiar en el portapapeles para guardar el valor del secreto de cliente para su uso posterior.

   

Agregar permisos de API

1. En el panel izquierdo, seleccione Permisos de API.

2. Seleccione + Agregar un permiso.

   

3. Seleccione Microsoft Graph.

4. Seleccione Permisos delegados.

5. Select User>User.Read.

6. Seleccione Agregar permisos.

   

   Nota

   • Si no se concede el consentimiento del administrador de TI a una aplicación, los usuarios deben dar su consentimiento la primera vez que usan una aplicación.
   • Los usuarios deben dar su consentimiento a los permisos de API solo si la aplicación Microsoft Entra está registrada en un inquilino diferente.

Agregar el URI de identificador de aplicación

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Junto al URI de identificador de aplicación, seleccione Agregar.

   

3. Actualice el URI de identificador de aplicación en el api://botid-{AppID} formato y seleccione Guardar.

   

Agregar un ámbito

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Seleccione + Agregar un ámbito.

   

3. Escriba access_as_user como nombre del ámbito.

4. En ¿Quién puede dar su consentimiento?, selecciona Administradores y usuarios.

5. Actualice los valores del resto de los campos de la siguiente manera:

   1. Escriba Teams puede acceder al perfil del usuario como nombre para mostrar de consentimiento de Administración.

   2. Entrar Permite a Teams llamar a las API web de la aplicación como el usuario actual como descripción de consentimiento delAdministración.

   3. Entre Teams puede acceder al perfil de usuario y realizar solicitudes en su nombre como Nombre para mostrar de consentimiento del usuario.

   4. Escriba Permitir que Teams llame a las API de esta aplicación con los mismos derechos que el usuario como Descripción del consentimiento del usuario.

6. Asegúrese de que Estado esté establecido en Habilitado.

7. Seleccione Agregar ámbito.

   En la imagen siguiente se muestran los campos y los valores:

   

   Nota

   El nombre del ámbito debe coincidir con el URI de identificador de aplicación anexado /access_as_user al final.

   

Agregar aplicación cliente

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

   En Aplicaciones cliente autorizadas, identifique las aplicaciones que desea autorizar para la aplicación web de la aplicación.

2. Seleccione + Agregar una aplicación cliente.

   

3. Agregue Teams para móvil o de escritorio y la aplicación web de Teams.

   1. Para Teams para dispositivos móviles o de escritorio: escriba el id. de cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para la web de Teams: escriba el id. de cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Active la casilla Ámbitos autorizados .

5. Seleccione Agregar aplicación.

   

   En la imagen siguiente se muestra el identificador de cliente:

   

Actualizar el manifiesto

1. En el panel izquierdo, seleccione Manifiesto.

2. Establezca el valor de to requestedAccessTokenVersion2 y seleccione Guardar.

   

Crear un bot

Crear un recurso de bot de Azure

Nota

Si ya está probando el bot en Teams, cierre la sesión de esta aplicación y de Teams. Para ver este cambio, vuelve a iniciar sesión.

1. Ir a Inicio.

2. Seleccione + Crear un recurso.

3. En el cuadro de búsqueda, escriba Azure Bot.

4. Seleccione Entrar.

5. Seleccione Bot de Azure.

6. Seleccione Crear.

   

7. Escriba el nombre del bot en Controlador del bot.

8. Selecciona tu suscripción en la lista desplegable.

9. Seleccione su grupo de recursos en la lista desplegable.

   

   Si no tiene un grupo de recursos existente, puede crear uno nuevo. Para crear un nuevo grupo de recursos, siga estos pasos:

   1. Seleccione Create new.
   2. Escriba el nombre del recurso y seleccione Aceptar.
   3. Seleccione una ubicación en la lista desplegable Nueva ubicación de grupo de recursos .

   

10. En Precios, selecciona Cambiar plan.

    

11. Seleccionar FO Libre>Selección.

    

12. En Id. de aplicación de Microsoft, seleccione Tipo de aplicación como Multiinquilino.

13. En el tipo de creación, seleccione Usar el registro de aplicaciones existente.

14. Escriba el id. de la aplicación.

    Nota

    No se puede crear más de un bot con el mismo id. de aplicación de Microsoft.

15. Selecciona Revisar + crear.

    

16. Una vez superada la validación, seleccione Crear.

    El bot tarda unos minutos en aprovisionarse.

17. Seleccione Ir al recurso.

    

    Ha creado correctamente el bot de Azure.

    

Agregar un canal de Teams

1. En el panel izquierdo, seleccione Canales.

2. En Canales disponibles, seleccione Microsoft Teams.

   

3. Active la casilla para aceptar los Términos de servicio.

4. Seleccione Aceptar.

   

5. Selecciona Aplicar.

   

Agregar un punto de conexión de mensajería

Use una de las siguientes maneras para agregar un punto de conexión de mensajería:

Túnel de desarrollo

1. Use la dirección URL del túnel de desarrollo en la consola de salida como punto de conexión de mensajería.

   

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-devtunnel-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualícela con el id. de aplicación.

ngrok

1. Desde ngrok, copie la dirección URL HTTPS.

   

   Nota

   La dirección URL HTTPS en ngrok es un nombre de dominio completo. Es WebAppDomain un nombre de dominio completo que no incluye https:// en él.

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-ngrok-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualiza el problema con el id. de aplicación.

Agregar una configuración de conexión de OAuth

1. En el panel izquierdo, seleccione Configuración.

2. Seleccione Agregar configuración de conexión OAuth.

3. En Nueva configuración de conexión, actualiza los siguientes detalles:

   • Nombre: escriba un nombre para la nueva configuración de conexión. Puede usar el nombre en la configuración del código del servicio del bot.
   • Proveedor de servicios: En la lista desplegable, seleccione Azure Active Directory v2.
   • Id. de cliente: actualice el id. de la aplicación de Microsoft.
   • Secreto de cliente: actualice el valor de secretos de cliente.
   • URL de intercambio de tokens: actualice el URI de identificador de aplicación.
   • Id. del espacio empresarial: Escriba Common.
   • Ámbitos: escriba User.Read.

4. Selecciona Guardar.

   

Configuración de la configuración de la aplicación y de los archivos de manifiesto

1. Vaya al archivo appsettings.json del repositorio clonado.

   

2. Abra el archivo appsettings.json y actualice la siguiente información:

   • Establezca "MicrosoftAppId" en el id. de aplicación de Microsoft del bot.
   • Establezca "MicrosoftAppPassword" el valor de identificador de secreto de cliente del bot.
   • Establecer ConnectionName como nombre de conexión OAuth.
   • Establecer "MicrosoftAppType" en MultiTenant.
   • Establézcalo "MicrosoftAppTenantId" en común.

   

3. Vaya al archivo manifest.json del repositorio clonado.

   

4. Abra el archivo manifest.json y actualice los cambios siguientes:

   • Reemplace todas las apariciones de con su id. de aplicación de "{TODO: MicrosoftAppId}" Microsoft.
   • Establezca "<<domain-name>>" en el dominio de túnel de desarrollo o de ngrok.

   

Compilar y ejecutar el servicio

1. Abra Visual Studio.

2. Vaya a Archivo>Abrir>Proyecto/Solución....

   

3. En bot-conversation-sso-quickstart>csharp_dotnetcore carpeta y seleccione BotConversationSsoQuickstart.sln archivo.

   

4. Seleccione F5 para ejecutar el proyecto.

5. Si aparece un cuadro de diálogo de advertencia de seguridad , seleccione Sí.

   

   Una página web se abre con un mensaje ¡El bot está listo!.

   Nota

   Esta página solo aparece cuando navega a la dirección URL del host local.

   

   Solución de problemas

   Si obtiene el error No se puede encontrar el paquete , siga estos pasos:

   1. Vaya a Herramientas>, Administrador> de paquetes NuGet, Configuración del Administrador de paquetes.
   2. En la ventana Opciones que aparece, seleccione Administrador de paquetes NuGetPackage Origins>.
   3. Seleccione Agregar.
   4. En Nombre, escriba nuget.org y en Origen, escriba https://api.nuget.org/v3/index.json.
   5. Seleccione Actualizar y Aceptar.
   6. Recompile el proyecto.

Cargar el bot en Teams

1. En el repositorio clonado, vaya a Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart>csharp_dotnetcore>TeamsApp>appPackage.

2. Cree un archivo .zip con los siguientes archivos presentes en la carpeta appPackage :

   • manifest.json
   • outline.png
   • color.png

   

3. Vaya a Microsoft Teams.

   1. En el cliente de Teams, seleccione Aplicaciones.
   2. Seleccione Administrar las aplicaciones.
   3. Seleccione Cargar una aplicación.
   4. Busque la opción Cargar una aplicación personalizada.

   

4. Seleccione Abrir para cargar el archivo .zip que ha creado en la carpeta Manifiesto .

   

5. Seleccione Agregar para agregar el bot al chat.

   

6. Seleccione Abrir.

   

   Puede interactuar con el bot enviándole un mensaje. El bot intercambia un token SSO y llama a la Graph API en su nombre. Le mantiene conectado a menos que envíe un mensaje para cerrar la sesión.

7. Envíe un mensaje al bot. El bot de conversación pide consentimiento por primera vez.

8. Para escritorio: seleccione Continuar para conceder permisos al cliente de Teams para acceder al bot.

   

   Nota

   Ahora que ya ha configurado el SSO con la aplicación de bot y es la única vez que tendrá que dar su consentimiento.

9. Para móviles: seleccione Aceptar.

   Nota

   Ahora que has configurado el SSO con tu aplicación de bot en móviles, y es la única vez que tendrás que dar tu consentimiento.

   

¿Se te ocurrió algo como esto?

Ha completado el tutorial para empezar a compilar un bot con autenticación SSO.

Habilitar SSO para el bot

Volver arriba

Crear su primera aplicación de extensión de mensaje con JavaScript

Inicie el desarrollo de aplicaciones de Microsoft Teams con su primera aplicación de Teams con JavaScript.

En este tutorial, aprenderá a:

• Cómo configurar un nuevo proyecto con el Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams).
• Cómo crear una aplicación de extensión de mensajes.
• Cómo implementar la aplicación.

Tutorial: Creación de la primera aplicación de extensión de mensajes con JavaScript

Esta guía paso a paso le ayuda a crear una aplicación de Teams de extensión de mensaje con el Kit de herramientas de agentes en Visual Studio Code. Verás el siguiente resultado después de completar esta guía:

Requisitos previos

Asegúrese de instalar las siguientes herramientas para crear e implementar las aplicaciones.

	Instalar	Para usar...
Obligatorio
	Visual Studio Code	JavaScript o entornos de compilación de TypeScript. Use la versión más reciente.
	Kit de herramientas de agentes de Microsoft 365	Extensión de Microsoft Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use la versión más reciente.
	Node.js	Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, consulte Node.js tabla de compatibilidad de versiones.
	Microsoft Teams	Colabore con las personas con las que trabaja a través de aplicaciones para chats, reuniones y llamadas en un solo lugar.
	Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas de desarrollo esenciales para la depuración y las pruebas.
	Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación personalizada.
Opcional
	Herramientas de Azure para Visual Studio Code y CLI de Azure	las herramientas de Azure para acceder a los datos almacenados o para implementar un back-end basado en la nube para la aplicación de Teams en Azure.
	Herramientas para desarrolladores de React para Chrome o Herramientas para desarrolladores de React para Microsoft Edge	Una extensión de DevTools del explorador para la biblioteca de código abierto React JavaScript.

Preparar el entorno de desarrollo

Después de instalar las herramientas necesarias, configure el entorno de desarrollo.

Instalar el Kit de herramientas de agentes de Microsoft 365

El Kit de herramientas para agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams) ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para su aplicación y publicarlos en la Tienda Teams.

Puede usar Agents Toolkit con Visual Studio Code o una interfaz de línea de comandos denominada Microsoft 365 Agents Toolkit CLI (anteriormente conocida como CLI de TeamsFx).

Visual Studio Code

1. Abra Visual Studio Code y seleccione Extensiones (Ctrl+Mayús+X o Ver>extensiones).

2. En el cuadro de búsqueda, escriba Kit de herramientas de agentes de Microsoft 365.

3. Seleccione Instalar.

   

   El icono del Kit de herramientas de agentes de Microsoft 365 aparecerá en la barra de actividades de Visual Studio Code.

También puede instalar Agents Toolkit desde el catálogo de herramientas de Visual Studio Code.

Línea de comandos

Para instalar la CLI del kit de herramientas de agentes, utilice el npm administrador de paquetes e introduzca el siguiente comando en el símbolo del sistema:

npm install -g @microsoft/m365agentstoolkit-cli

En función de la configuración, es posible que tenga que usar sudo para instalar la CLI:

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

Esta condición es más común en sistemas Linux y macOS.

Asegúrese de agregar la caché global de npm a la ruta de acceso. Este paso se realiza normalmente como parte del instalador de Node.js.

Puede usar la CLI con el atk comando. Compruebe que el comando está funcionandoatk -h.

Precaución

Para poder ejecutar TeamsFx en terminales de PowerShell, debe habilitar la directiva de ejecución firmada remota para PowerShell.

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es un espacio o un contenedor para su organización en Teams, donde puede chatear, compartir archivos y llevar a cabo reuniones. Este espacio también es el lugar donde se carga y se prueba la aplicación. Vamos a comprobar si está listo para desarrollar con el inquilino.

Comprobar si se carga una opción de aplicación

Después de crear la aplicación personalizada, debe cargarla en Teams con la opción Cargar una aplicación personalizada . Inicie sesión en su cuenta de Microsoft 365 para comprobar si esta opción está habilitada.

Los siguientes pasos le ayudarán a comprobar si puede cargar aplicaciones en Teams:

1. En el cliente de Teams, seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación.

4. Busque la opción Cargar una aplicación personalizada. Si la opción está visible, puede cargar aplicaciones personalizadas.

   

   Nota

   Si no encuentra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.

Crear un inquilino de desarrollador gratuito de Teams (opcional)

Si no tiene una cuenta de desarrollador de Teams, únase al programa para desarrolladores de Microsoft 365.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, seleccione Configurar suscripción E5.

4. Configure su cuenta de administrador. Cuando termine, aparecerá la siguiente pantalla:

   

5. Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Obtener una cuenta de Azure gratuita

Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción de Azure. Cree una cuenta gratuita antes de comenzar.

Crear un área de trabajo de proyecto para la aplicación de extensión de mensajes

Ahora, vamos a crear su primera aplicación de extensión de mensajería.

La funcionalidad de la extensión de mensaje le permite interactuar con un servicio web a través de botones y formularios. Use el área de redacción de mensajes, el cuadro de comandos o un mensaje directamente en el cliente de Teams para buscar e iniciar acciones en un sistema externo. Las extensiones de mensajes se basan en bots para proporcionar un cuadro de diálogo entre el usuario y el código.

Hay dos tipos de extensiones de mensaje de Teams:

• Comandos de búsqueda: puede buscar en sistemas externos e insertar los resultados en un mensaje en forma de tarjeta.
• Comandos de acción: Puede presentar a sus usuarios una ventana emergente modal para recopilar o mostrar información. Después, puede procesar su interacción y enviar la información de vuelta a Teams.

Vamos a crear una aplicación de extensión de mensajes con un comando de búsqueda. En primer lugar, configure un nuevo proyecto de Teams para crear la aplicación de extensión de mensajes.

En este tutorial, aprenderá a:

1. Cómo configurar un nuevo proyecto de extensión de mensajes con el Kit de herramientas de agentes.
2. Acerca de la estructura de directorios de su proyecto de aplicación.

Crear el área de trabajo del proyecto de extensión de mensajes

Si los requisitos previos están en su lugar, ¡comencemos!

Nota

La interfaz de usuario de Visual Studio Code que se muestra puede diferir en función del sistema operativo, la versión del kit de herramientas, el tema y el entorno.

Visual Studio Code

1. Abra Visual Studio Code.

2. Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

3. Seleccione Crear una nueva aplicación de Teams para agente o aplicación>.

   

4. Seleccione la extensión de mensaje.

   

5. Seleccione Resultados de búsqueda personalizados.

   

6. Seleccione Empezar con un bot.

   

7. Selecciona JavaScript.

   

8. Seleccione la carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.

   

   También puedes cambiar la ubicación predeterminada siguiendo estos pasos:

   1. Seleccione Examinar.

      

   2. Seleccione la ubicación del área de trabajo del proyecto.

   3. Seleccione Seleccionar carpeta.

      

9. Escriba un nombre adecuado para la aplicación. Seleccione Entrar.

   

   Agents Toolkit crea la aplicación en unos segundos.

   

   Una vez creada la aplicación, el Kit de herramientas de agentes muestra el siguiente mensaje:

   

Línea de comandos

Use la CLI "atk" para crear su primer proyecto.

1. Vaya a la carpeta donde desea crear la carpeta del proyecto y abra el símbolo del sistema.

2. Escriba el siguiente comando para crear una nueva aplicación de Teams:

   atk new
   

3. CLI le proporciona una serie de opciones entre las que elegir. Use las teclas de dirección para seleccionar una opción. Después de realizar la elección, seleccione Entrar para confirmar.

   1. Seleccione la extensión de mensaje para el nuevo proyecto.
   2. Seleccione resultados de búsqueda personalizados para las características de la aplicación con una extensión de mensajería.
   3. Seleccione Empezar con un bot para la arquitectura de la extensión de mensajes basada en búsqueda.
   4. Selecciona JavaScript para lenguaje de programación.
   5. Seleccione Entrar para seleccionar la carpeta de área de trabajo predeterminada para la aplicación.
   6. Escriba un nombre adecuado para la aplicación. El nombre de la aplicación solo debe constar de caracteres alfanuméricos.

CLI crea el proyecto después de que responda a todas las preguntas.

Visita guiada el código fuente de la aplicación de extensión de mensajes

Una extensión de mensajería usa Bot Framework para interactuar con el servicio a través de una conversación. Después del scaffolding, vea los directorios y archivos del proyecto en EXPLORER.

Carpeta / Archivo	Contenido
m365agents.yml	El archivo de proyecto principal describe la configuración de su aplicación y define el conjunto de acciones que se ejecutarán en cada etapa del ciclo de vida.
m365agents.local.yml	Reemplaza m365agents.yml con acciones que permiten la ejecución y la depuración locales.
.vscode/	Archivos de Visual Studio Code para la depuración local.
appPackage/	Plantillas para el manifiesto de aplicación de Teams.
infra/	Plantillas para aprovisionar recursos de Azure.
index.js	Punto de entrada y express controlador de la aplicación.

Recomendación

Familiarícese con los bots y la extensión de mensajes fuera de Teams antes de integrar su aplicación en Teams.

Creación y ejecución de su primera aplicación de extensión de mensajes

Después de configurar el área de trabajo de su proyecto con Agents Toolkit, es hora de compilar su proyecto. Debe iniciar sesión en su cuenta de Microsoft 365.

Inicie sesión en su cuenta de Microsoft 365

Inicia sesión con la cuenta de administrador que creaste al unirte al programa para desarrolladores de Microsoft 365.

Visual Studio Code

1. Abra Visual Studio Code.

2. Seleccione el icono del Kit de herramientas de agentes de Microsoft 365 en la barra de actividades.

3. Seleccione Iniciar sesión en Microsoft 365 con sus credenciales. Se abrirá el explorador web predeterminado para permitirle iniciar sesión.

   

4. Cierre el explorador después de iniciar sesión con sus credenciales.

5. Vuelva a Agents Toolkit en Visual Studio Code.

La sección CUENTAS de la barra lateral muestra el nombre de su cuenta de Microsoft 365. Si está habilitada la carga de aplicaciones personalizadas para su cuenta de Microsoft 365, el Kit de herramientas de agentes muestra la carga de aplicaciones personalizadas habilitada.

Ahora ya está listo para compilar la aplicación y ejecutarla localmente.

Línea de comandos

1. Vaya a la carpeta del proyecto de la aplicación de extensión de mensaje y abra el símbolo del sistema.

2. Inicie sesión en Microsoft 365 con el comando CLI del Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como CLI de TeamsFx):

   atk account login m365
   

Se abrirá el explorador web predeterminado para permitirle iniciar sesión. Inicie sesión en su cuenta de Azure con sus credenciales. Cierre el explorador cuando se le solicite.

Compila y ejecuta tu aplicación en el entorno local

Ahora puede compilar y depurar su primera aplicación de extensión de mensajes de Teams localmente.

Crear y ejecutar la aplicación localmente

1. Seleccione la tecla F5 en Visual Studio Code para ejecutar la aplicación en modo de depuración.

   Nota

   Si el Kit de herramientas de agentes no puede comprobar un requisito previo concreto, le pedirá que lo compruebe.

   
   
   Obtén información sobre lo que ocurre cuando ejecutas la aplicación localmente en el depurador.

   Cuando selecciona F5, el Kit de herramientas de agentes realiza las siguientes funciones:

   1. Comprueba los siguientes requisitos previos:

      1. Ha iniciado sesión con una cuenta de Microsoft 365.
      2. La carga de aplicaciones personalizadas está habilitada para su cuenta de Microsoft 365.
      3. Compatible Node.js versión está instalada.
      4. El puerto requerido por la aplicación de bot está disponible.

   2. Instala paquetes npm

   3. Inicia el túnel de desarrollo para crear un túnel HTTP.

   4. Registra la aplicación en Microsoft Entra ID y configura la aplicación.

   5. Registra la aplicación bot en Bot Framework y configura la aplicación.

   6. Registra la aplicación en el Portal para desarrolladores de Teams y configura la aplicación.

   7. Inicia la aplicación de extensión de mensajes hospedada localmente.

   8. Inicia Teams en un explorador web y carga la aplicación Teams.

   

   Cuando depura la aplicación por primera vez, Teams descarga las dependencias y compila la aplicación. Este proceso puede tardar de 3 a 5 minutos en completarse.

2. Teams se abre en una ventana del explorador cuando se completa la compilación. Inicie sesión con su cuenta de Microsoft 365 si se le solicita.

3. Se abre un cuadro de diálogo que le permite agregar la aplicación de extensión de mensajes a Teams. Seleccione Agregar.

   

   Teams carga la aplicación de extensión de mensaje.

   

   Como las aplicaciones de extensión de mensajes dependen de bots para permitir la comunicación entre el usuario y el servicio web, la aplicación se carga en una característica de chat de un bot.

   • Si creó una aplicación de bot antes de crear la aplicación de extensión de mensaje, Teams carga la extensión de mensaje en la aplicación de bot que creó. Los mensajes de chat anteriores de la aplicación bot son visibles.
   • Si creó primero una extensión de mensaje, Teams carga la aplicación en el chat más reciente abierto en Teams.

Probar la aplicación

La primera vez que se cargue la aplicación, la aplicación de extensión de mensaje estará abierta para que la pruebe. Esta aplicación de ejemplo le permite buscar paquetes npm de código abierto desde el Registro de software.

Cómo ejecutar una consulta de búsqueda

Extensión de mensaje

1. Escriba el nombre de un paquete npm de código abierto en el cuadro de búsqueda de la extensión de mensaje, como cli. La extensión de mensaje muestra una lista de los elementos coincidentes.

   

2. Seleccione uno de los elementos de la lista. La aplicación crea una tarjeta adaptable con el elemento en el área de redacción del mensaje para que pueda enviarlo en un chat o canal.

   

3. Seleccione Entrar. La aplicación de extensión de mensajes envía la tarjeta adaptativa con el elemento en el chat o canal.

   

Cuadro de comandos

1. Entrar / seguido del nombre de la aplicación de extensión de mensajes en el cuadro de comandos.

   

   La aplicación de extensión de mensaje se abre en el cuadro de comandos.

2. Escriba el nombre de un paquete npm de código abierto y seleccione uno de los resultados de la búsqueda.

   

   La extensión de mensaje muestra el resultado de la búsqueda como una tarjeta adaptativa en el cuadro de comandos.

   

3. Copie la tarjeta adaptativa para pegarla en el área de redacción del mensaje.

   

4. Seleccione Entrar. La aplicación de extensión de mensajes envía la tarjeta adaptativa con el resultado de la búsqueda en el chat más reciente.

   

Cómo abrir la aplicación de extensión de mensajes

Probó la característica de búsqueda de la aplicación de extensión de mensaje en el paso anterior. Ahora, obtenga información sobre las diferentes formas de abrir la aplicación de extensión de mensajes.

Abrir la aplicación desde el cuadro de comandos

1. Entrar / seguido del nombre de la aplicación de extensión de mensajes en el cuadro de comandos.

   

   La aplicación se abre en el cuadro de comandos y puedes usarla para ejecutar una consulta.

   Nota

   • Abrir / la aplicación de extensión de mensajes desde el cuadro de comandos solo funciona en el nuevo cliente de Teams.
   • Úsela @ para abrir la aplicación de extensión de mensajes desde el cuadro de comandos del cliente de Teams clásico.

Abrir la aplicación desde el área de redacción de mensajes

1. Seleccione los tres puntos en la parte inferior del área de redacción del mensaje.

2. Seleccione la aplicación de extensión de mensajes.

   

   La aplicación de extensión de mensaje se carga con las opciones para ejecutar una búsqueda.

Abrir la aplicación desde aplicaciones personalizadas cargadas

1. Seleccione Aplicaciones>Administrar las aplicaciones.

2. Seleccione el menú desplegable de la aplicación de la lista de aplicaciones y seleccione Aplicación personal.

   

3. Aparecerá un cuadro de diálogo que le sugerirá que pruebe la aplicación. Si selecciona Entendido, el cuadro de diálogo desaparece. Seleccione Probarlo.

   

4. Aparecerá una lista de las aplicaciones de extensión de mensajes en el chat de Teams más reciente. Seleccione su aplicación de extensión de mensajes de la lista.

Aprende a solucionar los problemas si la aplicación no se ejecuta localmente

Para ejecutar la aplicación en Teams, debe tener una cuenta de desarrollo de Microsoft 365 que permita la carga personalizada de aplicaciones. Puede obtener más información sobre la carga de aplicaciones personalizadas en la sección Requisitos previos.

Implementar la primera aplicación de Teams

Implementaremos su primera aplicación de extensión de mensajes en Azure mediante el Kit de herramientas de agentes.

Inicie sesión en su cuenta de Azure

Inicie sesión en su cuenta de Azure para acceder al Microsoft Azure Portal y aprovisionar nuevos recursos en la nube para admitir su aplicación.

Visual Studio Code

1. Abra Visual Studio Code.

2. Abra la carpeta del proyecto en la que creó la aplicación de extensión de mensaje.

3. Seleccione el icono del Kit de herramientas de agentes de Microsoft 365 en la barra de actividades.

4. Seleccione Iniciar sesión en Azure con sus credenciales. Se abrirá el explorador web predeterminado para permitirle iniciar sesión.

   Recomendación

   Si tiene instalada la extensión AZURE ACCOUNT y está usando la misma cuenta, puede omitir este paso.

5. Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.

En la sección CUENTAS de la barra lateral se muestra el número de suscripciones de Azure disponibles para su uso. Asegúrese de que tiene disponible al menos una suscripción de Azure que se pueda usar. Si no es así, cierre la sesión y use otra cuenta.

Línea de comandos

1. Vaya a la carpeta del proyecto de la aplicación de extensión de mensaje y abra el símbolo del sistema.

2. Inicie sesión en Azure con el comando de la CLI del kit de herramientas de agentes:

   atk account login azure
   

3. Se abrirá el explorador web predeterminado para permitirle iniciar sesión. Inicie sesión en su cuenta de Azure con sus credenciales. Cierre el explorador cuando se le solicite.

Ahora, aprenderemos a implementar la aplicación en Azure mediante el Kit de herramientas de agentes.

Implementación de la aplicación en Azure

La implementación consta de dos pasos. En primer lugar, se crean los recursos de nube necesarios (también conocido como aprovisionamiento). A continuación, el código de la aplicación se copia en los recursos en la nube creados. En este tutorial, implementará la aplicación de extensión de mensajes.

¿Cuál es la diferencia entre aprovisionar e implementar?

El paso de aprovisionamiento crea recursos en Azure y Microsoft 365 para la aplicación, pero no se copia ningún código (como HTML, CSS o JavaScript) en los recursos. El paso de implementación copia el código de la aplicación en los recursos creados durante el paso de aprovisionamiento. Es habitual implementar varias veces sin aprovisionar recursos nuevos. Dado que el paso de aprovisionamiento tarda algún tiempo en completarse, es independiente del paso de implementación.

Visual Studio Code

Seleccione el icono Kit de herramientas de agentes de Microsoft 365 en la barra de actividades de Visual Studio Code.

1. Seleccione Aprovisionamiento.

   

2. Seleccione una suscripción.

   

3. Seleccione un grupo de recursos.

   

   Si no tiene ningún grupo de recursos para seleccionar, puede crear uno con los pasos siguientes:

   1. Seleccione + Nuevo grupo de recursos.

      

   2. Seleccione el nombre predeterminado o escriba un nombre adecuado para el grupo de recursos.

      

   3. Seleccione la ubicación de su grupo de recursos.

      

4. Un cuadro de diálogo le advierte de que se puede incurrir en costos al ejecutar recursos en Azure. Seleccione Aprovisionamiento.

   

   El proceso de aprovisionamiento crea recursos en la nube de Azure. Puede tardar algún tiempo. Transcurridos unos minutos, verá el mensaje siguiente:

   

   Si lo desea, puede ver los recursos aprovisionados. Para este tutorial, no es necesario que vea los recursos.

   El recurso aprovisionado aparece en ENTORNO.

   

5. En CICLO DE VIDA, seleccione Implementar.

   

6. Aparece un cuadro de diálogo que le pregunta si desea implementar recursos en el entorno de desarrollo. Seleccione Implementar.

   

   Al igual que con el aprovisionamiento, la implementación lleva algún tiempo. Después de unos minutos, verá un mensaje de finalización.

Línea de comandos

1. Vaya a la carpeta donde creó la aplicación de extensión de mensajes y abra el símbolo del sistema.

2. Ejecutar atk provision

   atk provision
   

   Cuando se le solicite, seleccione una suscripción de Azure y un grupo de recursos para usar los recursos de Azure. La aplicación se hospeda con recursos de Azure.

3. Ejecutar atk deploy

   atk deploy
   

   La aplicación de extensión de mensajes está implementada.

Ejecutar la aplicación implementada

Una vez completados los pasos de aprovisionamiento e implementación, vaya a Ejecutar y depurar (Ctrl+Mayús+D o Ver > ejecutar) en el Kit de herramientas de agentes.

1. Seleccione el menú desplegable EJECUTAR Y DEPURAR .

2. Seleccione Iniciar de forma remota en Teams (Edge).

3. Selecciona el botón ▷ .

   

4. Se abre un cuadro de diálogo para instalar la aplicación implementada en Teams. Seleccione Agregar.

   

   Teams abre la aplicación de extensión de mensajes en el chat más reciente.

   

Conozca lo que ocurre cuando implementa su aplicación en Azure

Antes de la implementación, la aplicación se ejecuta localmente.

• El back-end se ejecuta mediante las herramientas principales de Azure Functions.
• El punto de conexión HTTP de la aplicación, donde Microsoft Teams carga la aplicación, se ejecuta localmente.

La implementación es un proceso de dos pasos. Aprovisiona los recursos en una suscripción activa de Azure y, a continuación, implementa o carga el código de back-end y front-end de la aplicación en Azure.

• Si está configurado, el back-end usa varios servicios de Azure, incluidos Azure App Service y Azure Storage de Azure.
• La aplicación front-end se implementa en una cuenta de Azure Storage configurada para hospedaje web estático.

Felicitaciones

Completó el tutorial para crear una aplicación de extensión de mensajes con JavaScript.

¿Se te ocurrió algo como esto?

Crear una aplicación de extensión de mensajes

Volver arriba

Crear la primera aplicación de pestaña con C sostenido

Inicie el desarrollo de aplicaciones de Microsoft Teams creando su primera aplicación de Teams con una funcionalidad de pestaña.

En este tutorial, aprenderá a:

• Cómo configurar un nuevo proyecto.
• Cómo crear aplicaciones con capacidad de pestañas mediante C# y Microsoft Visual Studio 2022.

Tutorial: Creación de la primera aplicación de pestaña con C#

Esta guía paso a paso le ayuda a crear una pestaña con el Kit de herramientas de agentes de Microsoft 365 (anteriormente conocido como Kit de herramientas de Teams). Verás el siguiente resultado después de completar esta guía:

Requisitos previos para crear su aplicación

Aquí tiene una lista de herramientas que necesita instalar para crear e implementar una aplicación de Teams.

Instalar	Para usar...
Microsoft Teams	Microsoft Teams colabore con todas las personas con las que trabaja a través de aplicaciones para chat, reuniones y llamadas, todo en un solo lugar.
Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo de desarrollo ASP.NET y web. Use la versión más reciente.
Kit de herramientas de agentes de Microsoft 365	Una extensión de Visual Studio que crea un scaffolding de proyecto para la aplicación. Use la versión más reciente.

Kit de herramientas de instalación de agentes

Agents Toolkit ayuda a simplificar el proceso de desarrollo con herramientas para crear un scaffolding de proyecto para su aplicación. Crea la estructura de directorios necesaria para todas las funcionalidades seleccionadas con los archivos necesarios en su lugar, listos para compilar el proyecto.

Puede descargar la versión más reciente del instalador de Visual Studio. El Kit de herramientas de agentes está disponible como una extensión en Visual Studio.

Después de abrir el instalador de Visual Studio en la ventana emergente de cargas de trabajo:

1. Seleccione ASP.NET y desarrollo web.

2. En Detalles> de la instalaciónOpcional, seleccione Herramientas de desarrollo de Microsoft Teams.

3. Seleccione Instalar.

   

4. Seleccione Iniciar. Aparece la ventana de la aplicación de Visual Studio 2022.

   

5. Ve a Extensiones>Administrar extensiones.

   

   Aparece la ventana Administrar extensión:

   

6. En el panel izquierdo, selecciona Instalado. La extensión del Kit de herramientas de agentes de Microsoft 365 está disponible.

   

Configurar el inquilino de desarrollo de Teams

Un espacio empresarial es como un espacio o un contenedor para su organización en Teams, donde puede chatear, compartir archivos y llevar a cabo reuniones. Este espacio también es donde se carga y se prueba la aplicación personalizada. Vamos a comprobar si está listo para desarrollar con el inquilino.

Comprobar la opción de carga de aplicaciones personalizadas

Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones personalizadas. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.

Nota

La carga de aplicaciones personalizadas es necesaria para obtener una vista previa y probar aplicaciones en el entorno local de Teams. Si no está habilitada, no podrá obtener una vista previa ni probar la aplicación en el entorno local de Teams.

¿Ya tiene acceso de inquilino y administrador? ¡Comprobemos si lo haces!

Compruebe si puede cargar aplicaciones personalizadas en Teams:

1. Abra Microsoft Teams y seleccione el icono Aplicaciones .

2. Seleccione Administrar las aplicaciones.

3. Seleccione Cargar una aplicación.

4. Busque la opción Cargar una aplicación personalizada . Si ves la opción, la carga de aplicaciones personalizadas está habilitada.

   

Nota

Si no encuentra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.

Crear un inquilino de desarrollador gratuito de Teams (opcional)

Si no tiene una cuenta de Teams, puede obtenerla de forma gratuita. Únase al programa para desarrolladores de Microsoft 365.

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, selecciona Configuración de suscripción E5.

4. Configure su cuenta de administrador. Cuando termine, aparecerá la siguiente pantalla:

   

5. Inicie sesión en Teams con la cuenta de administrador que configuró. Compruebe que existe la opción Cargar una aplicación personalizada en Teams.

Obtener una cuenta de Azure gratuita

Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción de Azure. Cree una cuenta gratuita antes de comenzar.

Ahora tiene todas las herramientas para configurar su cuenta. A continuación, configuremos su entorno de desarrollo y comencemos a construir. Seleccione la aplicación que desea crear en primer lugar.

Cree un área de trabajo de proyecto para la aplicación de pestañas con C sostenido

Inicie el desarrollo de aplicaciones de Microsoft Teams creando su primera aplicación. Esta aplicación usa la funcionalidad de tabulación. Si los requisitos previos están en su lugar, ¡comencemos!

Los siguientes pasos le ayudan a crear un área de trabajo de proyecto para la aplicación de pestañas en Visual Studio:

1. Abra Visual Studio.

2. Seleccione Nuevo proyecto.

   

3. En el cuadro de búsqueda, escriba Teams.

4. Seleccione Agentes de >Microsoft 365a continuación.

   

5. Escriba los siguientes detalles para configurar el nuevo proyecto.

6. Escriba el nombre del proyecto requerido en Nombre del proyecto.

7. Seleccione la ubicación necesaria para guardar los archivos y carpetas del proyecto.

8. Seleccione Crear.

   

9. Seleccionela opción Crearcon pestañas>.

   

La aplicación de pestaña de Teams se crea en unos segundos.

Creación y ejecución de la primera aplicación de pestaña con C sostenido

Después de configurar el área de trabajo del proyecto con Agents Toolkit, cree su aplicación de pestañas.

Inicie sesión en su cuenta de Microsoft 365

Use su cuenta de Microsoft 365 para iniciar sesión en Teams. Si usa un inquilino del Programa para desarrolladores de Microsoft 365, la cuenta de administrador que configuró al registrarse es su cuenta de Microsoft 365.

1. En el Explorador de soluciones, en Solución MyTeamsApp, haga clic con el botón derecho en MyTeamsApp.

2. Seleccionar Kit de herramientas> de agentes de Microsoft365 Seleccione una cuenta de Microsoft 365.

   

3. Seleccione Continuar con la cuenta> de Microsoft 365.

   

Cree y ejecute la aplicación localmente en Visual Studio

Para crear y ejecutar la aplicación localmente:

1. Seleccione Depurar>,Iniciar depuración o seleccione F5.

   

   Visual Studio inicia el proceso de depuración y abre el cliente web de Teams en un explorador. Si se le solicita, inicie sesión con su cuenta de Microsoft 365.

2. Seleccione Agregar.

   

3. Seleccione Abrir para abrir la aplicación en el ámbito personal.

Como alternativa, puede buscar y seleccionar el ámbito requerido o seleccionar un canal o chat de la lista y desplazarse por el cuadro de diálogo para seleccionar Ir.

Enhorabuena, su primera aplicación de pestañas se está ejecutando en Teams.

Aprende a solucionar los problemas si la aplicación no se ejecuta localmente.

Para ejecutar correctamente la aplicación en Teams, asegúrese de que ha habilitado la carga de aplicaciones personalizadas en su cuenta de Teams. Puede obtener más información sobre la carga de aplicaciones personalizadas en la sección de requisitos previos .

Ha creado correctamente una aplicación de pestañas con C#. Agents Toolkit ha agregado el andamiaje necesario a la estructura de directorios de la aplicación. El tutorial ya está completo.

Crear una pestaña

Crear un nuevo proyecto de Teams con el Kit de herramientas de agentes de Microsoft 365

Volver arriba

Agregar SSO a la aplicación de extensión de pestañas y mensajes

El inicio de sesión único (SSO) de Microsoft Entra permite la autenticación de usuario sin problemas en Teams.

Aspectos clave del SSO de Microsoft Entra:

• Permite que el usuario inicie sesión automáticamente después del primer inicio de sesión.
• Permite al usuario iniciar sesión en otros dispositivos sin tener que escribir las credenciales de nuevo.
• Obtiene el token para el usuario que ha iniciado sesión.

Tutorial: Agregar SSO a la aplicación de extensión de pestañas y mensajes

Esta guía paso a paso le ayuda a crear pestañas y extensiones de mensajes que habiliten la autenticación SSO de Microsoft Entra. Verá el siguiente resultado:

Requisitos previos para agregar SSO a aplicaciones

Asegúrese de instalar las siguientes herramientas y de configurar el entorno de desarrollo:

#	Instalar	Para usar...
1.	Microsoft Teams	Microsoft Teams colabore con todos los usuarios con los que trabaja a través de aplicaciones para chat, reuniones y llamadas, todo en un solo lugar.
2.	Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación.
3.	SDK de .NET Core	Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Si no ha instalado la versión más reciente, instale la versión portátil.
4.	Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo de desarrollo ASP.NET y web. Use la versión más reciente.
5.	Túnel de desarrollo	Las características de la aplicación Teams (bots conversacionales, extensiones de mensaje y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo con Teams. Dev tunnel es una poderosa herramienta para abrir de forma segura su localhost a Internet y controlar quién tiene acceso. Dev Tunnel está disponible en Visual Studio 2022 versión 17.7.0 o posterior. También puede usar ngrok como túnel para conectar el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala dentro del directorio del proyecto (mediante npm devDependencies).

Nota

Después de descargar ngrok, regístrese e instale authtoken.

Configurar entorno local

1. Abra microsoft-teams-samples.

2. Seleccione Código.

3. En el menú desplegable, selecciona Abrir con GitHub Desktop.

   

4. Seleccione Clonar.

Registro de la aplicación Microsoft Entra

Los siguientes pasos le ayudan a crear y registrar su bot en Azure Portal:

• Cree y registre su aplicación de Azure.
• Cree un secreto de cliente para habilitar la autenticación SSO del bot.
• Agregue el canal de Teams para implementar el bot.
• Cree un túnel hasta los puntos de conexión de su servidor web mediante dev tunnel (recomendado) o ngrok.
• Agregue el punto de conexión de mensajería al túnel de desarrollo que ha creado.

Agregar registro de la aplicación

1. Vaya a Azure Portal.

2. Seleccione Registros de aplicaciones.

   

3. Seleccione + Nuevo registro.

   

4. Escriba el nombre de la aplicación.

5. Seleccione Cuentas en cualquier directorio organizativo (cualquier inquilino de Microsoft Entra ID: multiinquilino).

6. Seleccione Registrar.

   

   Su aplicación está registrada en Microsoft Entra ID. Aparece la página de información general de la aplicación.

   

   Nota

   Guarde el id. de aplicación del id. de aplicación (cliente) y el id. de directorio (inquilino) para su uso posterior.

Crear un túnel

Seleccione una de las siguientes formas para crear un túnel:

Túnel de desarrollo

1. Abra Visual Studio.

2. Seleccione Crear un nuevo proyecto.

   

3. En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione aplicación web de ASP.NET Core.

4. Seleccione Siguiente.

   

5. Escriba el nombre del proyecto y seleccione Siguiente.

   

6. Seleccione Crear.

   

   Aparecerá una ventana de información general.

   

7. En la lista desplegable de depuración, seleccione Dev Tunnels (no active tunnel)>Create a Tunnel....

   

   Aparecerá una ventana emergente.

8. Actualiza los siguientes detalles en la ventana emergente:

   1. Cuenta: escriba una cuenta de Microsoft o GitHub.
   2. Nombre: introduzca un nombre para el túnel.
   3. Tipo de túnel: En la lista desplegable, seleccione Temporal.
   4. Acceso: En la lista desplegable, seleccione Público.

9. Seleccione Aceptar.

   

   Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.

10. Seleccione Aceptar.

    

    Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:

    

11. Seleccione F5 para ejecutar la aplicación en modo de depuración.

12. Si aparece un cuadro de diálogo de advertencia de seguridad , seleccione Sí.

    

    Aparecerá una ventana emergente.

13. Seleccione Continuar.

    

    La página principal del túnel de desarrollo se abre en una nueva ventana del explorador y el túnel de desarrollo ahora está activo.

    

14. Vaya a Visual Studio y, a continuación, seleccione Ver > salida.

15. En el menú desplegable de la consola de salida , seleccione Dev Tunnels.

    La consola de salida muestra la dirección URL del túnel de desarrollo.

    

ngrok

Utilice ngrok o el símbolo del sistema para crear un túnel hacia los puntos de conexión HTTPS disponibles públicamente del servidor web que se ejecuta localmente. Ejecute el siguiente comando en ngrok:

ngrok http --host-header=localhost xxxx

Recomendación

Si encuentra ERR_NGROK_4018, siga los pasos que se proporcionan en el símbolo del sistema para registrarse y autenticar ngrok. A continuación, ejecute el ngrok http --host-header=localhost xxxx comando.

La ventana muestra la dirección URL HTTPS.

Agregar una autenticación web

1. En el panel izquierdo, en Administrar, seleccione Autenticación.

2. Seleccione Agregar una plataforma>Web.

   

3. Escriba el URI de redireccionamiento de la aplicación anexando auth-end al nombre de dominio completo. Por ejemplo, https://your-devtunnel-domain/auth-end o https://your-ngrok-domain/auth-end.

4. En Flujos híbridos y de concesión implícita, active las casillas Tokens de acceso y tokens de identificación .

5. Seleccione Configurar.

   

6. En Web, seleccione Agregar URI.

7. Entrar https://token.botframework.com/.auth/web/redirect.

8. Selecciona Guardar.

   

Crear un secreto de cliente

Nota

Si encuentra el error, los secretos de cliente están bloqueados por la directiva de todo el espacio empresarial. Póngase en contacto con el administrador de inquilinos para obtener más información., puede crear un certificado en su lugar. Para obtener instrucciones paso a paso, consulte Creación de un certificado para el registro de aplicaciones.

1. En el panel izquierdo, en Administrar, seleccione Certificados & secretos.

2. En Secretos de cliente, seleccione + Nuevo secreto de cliente.

   

   Aparece la ventana Agregar un secreto de cliente .

3. Escriba la descripción.

4. Seleccione Agregar.

   

5. En Valor, seleccione Copiar en el portapapeles para guardar el valor del secreto de cliente para su uso posterior.

   

Agregar permisos de API

1. En el panel izquierdo, seleccione Permisos de API.

2. Seleccione + Agregar un permiso.

   

3. Seleccione Microsoft Graph.

4. Seleccione Permisos delegados.

5. Select User>User.Read.

6. Seleccione Agregar permisos.

   

   Nota

   • Si no se concede el consentimiento del administrador de TI a una aplicación, los usuarios deben dar su consentimiento la primera vez que usan una aplicación.
   • Los usuarios deben dar su consentimiento a los permisos de API solo si la aplicación Microsoft Entra está registrada en un inquilino diferente.

Agregar URI de id. de aplicación

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Junto al URI de identificador de aplicación, seleccione Agregar.

   

3. Actualice el URI del identificador de aplicación en el api://your-devtunnel-domain/botid-{AppID} formato o api://your-ngrok-domain/botid-{AppID} y seleccione Guardar.

   

   La siguiente imagen muestra el nombre de dominio:

   

Agregar un ámbito

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

2. Seleccione + Agregar un ámbito.

   

3. Escriba access_as_user como nombre del ámbito.

4. En ¿Quién puede dar su consentimiento?, selecciona Administradores y usuarios.

5. Actualice los valores del resto de los campos de la siguiente manera:

   • Escriba Teams puede acceder al perfil del usuario como nombre para mostrar de consentimiento de Administración.

   • Entrar Permite a Teams llamar a las API web de la aplicación como el usuario actual como descripción de consentimiento delAdministración.

   • Entre Teams puede acceder al perfil de usuario y realizar solicitudes en su nombre como Nombre para mostrar de consentimiento del usuario.

   • Escriba Permitir que Teams llame a las API de esta aplicación con los mismos derechos que el usuario como Descripción del consentimiento del usuario.

6. Asegúrese de que Estado esté establecido en Habilitado.

7. Seleccione Agregar ámbito.

   En la imagen siguiente se muestran los campos y los valores:

   

   Nota

   El nombre del ámbito debe coincidir con el URI de identificador de aplicación anexado /access_as_user al final.

   

Agregar aplicación cliente

1. En el panel izquierdo, en Administrar, seleccione Exponer una API.

   En Aplicaciones cliente autorizadas, identifique las aplicaciones que desea autorizar para la aplicación web de la aplicación.

2. Seleccione + Agregar una aplicación cliente.

   

3. Agregue Teams para móvil o de escritorio y la aplicación web de Teams.

   1. Para Teams para dispositivos móviles o de escritorio: escriba el id. de cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para la web de Teams: escriba el id. de cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Active la casilla Ámbitos autorizados .

5. Seleccione Agregar aplicación.

   

   En la imagen siguiente se muestra el identificador de cliente:

   

Actualizar el manifiesto

1. En el panel izquierdo, seleccione Manifiesto.

2. Establezca el valor de to requestedAccessTokenVersion2 y seleccione Guardar.

   

Crear un bot

Crear un recurso de bot de Azure

Nota

Si ya está probando el bot en Teams, cierre la sesión de esta aplicación y de Teams. Para ver este cambio, vuelve a iniciar sesión.

1. Ir a Inicio.

2. Seleccione + Crear un recurso.

3. En el cuadro de búsqueda, escriba Azure Bot.

4. Seleccione Entrar.

5. Seleccione Bot de Azure.

6. Seleccione Crear.

   

7. Escriba el nombre del bot en Controlador del bot.

8. Selecciona tu suscripción en la lista desplegable.

9. Seleccione su grupo de recursos en la lista desplegable.

   

   Si no tiene un grupo de recursos existente, puede crear uno nuevo. Para crear un nuevo grupo de recursos, siga estos pasos:

   1. Seleccione Create new.
   2. Escriba el nombre del recurso y seleccione Aceptar.
   3. Seleccione una ubicación en la lista desplegable Nueva ubicación de grupo de recursos .

   

10. En Precios, selecciona Cambiar plan.

    

11. Seleccionar FO Libre>Selección.

    

12. En Id. de aplicación de Microsoft, seleccione Tipo de aplicación como Multiinquilino.

13. En el tipo de creación, seleccione Usar el registro de aplicaciones existente.

14. Escriba el id. de la aplicación.

    Nota

    No se puede crear más de un bot con el mismo id. de aplicación de Microsoft.

15. Selecciona Revisar + crear.

    

16. Una vez superada la validación, seleccione Crear.

    El bot tarda unos minutos en aprovisionarse.

17. Seleccione Ir al recurso.

    

    Ha creado correctamente el bot de Azure.

    

Agregar un canal de Teams

1. En el panel izquierdo, seleccione Canales.

2. En Canales disponibles, seleccione Microsoft Teams.

   

3. Active la casilla para aceptar los Términos de servicio.

4. Seleccione Aceptar.

   

5. Selecciona Aplicar.

   

Para agregar un punto de conexión de mensajería

Túnel de desarrollo

1. Use la dirección URL del túnel de desarrollo en la consola de salida como punto de conexión de mensajería.

   

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-devtunnel-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualícela con el id. de aplicación.

ngrok

1. Desde ngrok, copie la dirección URL HTTPS.

   

   Nota

   La dirección URL HTTPS en ngrok es un nombre de dominio completo. Es WebAppDomain un nombre de dominio completo que no incluye https:// en él.

2. En el panel izquierdo, en Configuración, seleccione Configuración.

3. Actualice el punto de conexión de mensajería en el formato https://your-ngrok-domain/api/messages.

   

4. Selecciona Aplicar.

   Ha configurado correctamente un bot en el servicio de bot de Azure.

   Nota

   Si la clave de instrumental de Application Insights muestra un error, actualiza el problema con el id. de aplicación.

Agregar una configuración de conexión de OAuth

1. En el panel izquierdo, seleccione Configuración.

2. Seleccione Agregar configuración de conexión OAuth.

3. En Nueva configuración de conexión, actualiza los siguientes detalles:

   • Nombre: escriba un nombre para la nueva configuración de conexión. Puede usar el nombre en la configuración del código del servicio del bot.
   • Proveedor de servicios: En la lista desplegable, seleccione Azure Active Directory v2.
   • Id. de cliente: actualice el id. de la aplicación de Microsoft.
   • Secreto de cliente: actualice el valor de secretos de cliente.
   • URL de intercambio de tokens: actualice el URI de identificador de aplicación.
   • Id. del espacio empresarial: Escriba Common.
   • Ámbitos: escriba User.Read.

4. Selecciona Guardar.

   

Configurar las opciones de la aplicación

1. Vaya al archivo appsettings.json del repositorio clonado.

   

2. Abra el archivo appsettings.json en Visual Studio.

3. Actualiza la siguiente información:

   • Reemplácelo "MicrosoftAppId" en el id. de aplicación de Microsoft del bot.
   • Reemplace "MicrosoftAppPassword" el valor de los secretos de cliente del bot.
   • Reemplace "SiteUrl" la dirección URL de ngrok.
   • Reemplácelo "ConnectionName" por el nombre de la configuración de conexión de OAuth.
   • Reemplácelo "TenantId" por el identificador de inquilino del espacio empresarial donde se usa la aplicación.
   • Reemplácelo "ClientId" en el id. de aplicación de Microsoft del bot.
   • Reemplace "AppSecret" el valor de los secretos de cliente del bot.
   • Reemplazar "ApplicationIdURI" con el formato de api://*******.ngrok.io/botid-{AppID}.

   

Configurar archivo de manifiesto

1. Vaya al archivo manifest.json del repositorio clonado.

   

2. Abra el archivo manifest.json en Visual Studio y realice los cambios siguientes:

   • Reemplácelo DOMAIN-NAME por la dirección URL de ngrok.

   • Reemplácelo YOUR-MICROSOFT-APP-ID por el id. de Microsoft App del bot.

     Nota

     Según el escenario [YOUR-MICROSOFT-APP-ID] y [DOMAIN-NAME] puede producirse varias veces.

   • Reemplazar resource como api://*******.ngrok.io/botid-{AppID}.
     

     

Compilar y ejecutar el servicio

Para generar y ejecutar el servicio, use Visual Studio o la línea de comandos.

Visual Studio

1. Abra Visual Studio.

2. Seleccione Archivo>Abrir> *Proyecto/Solución...

   

3. En la carpeta csharp , seleccione el archivo SSO Sample.csproj de la aplicación.

   

4. Presione F5 para ejecutar el proyecto.

5. Seleccione Sí si aparece el cuadro de diálogo siguiente:

   

Aparece una página web con un mensaje El bot está listo.

Línea de comandos

Vaya a la carpeta csharp en una ventana del símbolo del sistema y escriba el siguiente comando:

dotnet run

Cargar la aplicación SSO en Teams

1. En el repositorio clonado, vaya aTeamsAppManifestde ejemplo> de SSO de la aplicación csharp>.

2. Cree un archivo .zip con los siguientes archivos presentes en la carpeta Manifiesto :

   • manifest.json
   • icon-outline.png
   • icon-color.png

   

3. En el cliente de Teams, seleccione el icono Aplicaciones .

4. Seleccione Administrar las aplicaciones.

5. Seleccione Cargar una aplicación.

6. Busque la opción Cargar una aplicación personalizada. Si ves la opción, la carga de aplicaciones personalizadas está habilitada.

   

   Nota

   Póngase en contacto con el administrador de Teams si no encuentra la opción para cargar una aplicación personalizada.

7. Seleccione Abrir para cargar el archivo .zip que creó en la carpeta Manifiesto .

   

8. Seleccione Agregar.

   

9. Seleccione Abrir y enviar un mensaje al bot.

   

10. El bot realiza el inicio de sesión único y muestra la tarjeta de perfil junto con una opción para ver el token.

    

11. Seleccione Sí para ver el token o No para continuar con el chat.

    

12. Si no se realiza el SSO, el bot realiza el método de autenticación predeterminado para la pestaña.

    

13. Para iniciar sesión, si no se realiza el SSO:

    1. En el panel izquierdo de Teams, seleccione Más aplicaciones añadidas (●●●).

    2. Seleccione la nueva aplicación de SSO.

       

    3. Seleccione iniciar sesión.

       

    4. Escriba sus credenciales en la ventana de inicio de sesión y seleccione Siguiente.

       

    5. Seleccione Aceptar.

       

    6. Selecciona tu perfil en el cuadro de búsqueda. Verá el siguiente resultado:

       

14. Envíe https://profile.botframework.com a la aplicación para obtener una tarjeta de perfil.

    

¿Se te ocurrió un resultado como este?

Ha completado el tutorial para empezar a usar SSO para la aplicación de extensión de pestañas y mensajes.

Habilitar SSO para la aplicación de pestaña

Habilitar SSO para la aplicación

Volver arriba