Generación de un token de reunión
La aplicación de token de reunión ayuda a mejorar la experiencia de la reunión en Teams al permitir que los participantes de la reunión soliciten tokens y generen tokens. La aplicación genera tokens secuencialmente para que cada participante tenga la misma oportunidad de interactuar en la reunión. Por ejemplo, la aplicación es útil en las sesiones de Q&A y en las reuniones, como las reuniones de scrum.
Nota:
Las pestañas En reunión de la aplicación generador de tokens de reunión solo están disponibles para el cliente de escritorio de Teams.
Características clave del generador de tokens de reunión
- Muestra el token actual usado en la reunión.
- Muestra la lista de usuarios ordenada en función del número de token.
- Genera un token para el usuario a petición.
- Muestra el número de token del usuario actual.
- Permite al organizador omitir el token de reunión actual.
Diferentes formas de interacciones con el usuario
Token: solicita el token para el usuario.
Listo: confirma la generación de tokens para el usuario.
Omitir: omite el usuario actual y se mueve a la siguiente persona en línea para un token.
Nota:
Skip solo está disponible para los organizadores de reuniones.
Esta guía paso a paso le ayuda a generar un token de reunión para que todos los participantes interactúen en la reunión. Verá la siguiente salida:
Requisitos previos
Instale las siguientes herramientas y configure el entorno de desarrollo:
| Instalar | Para usar... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams para colaborar con todos los usuarios con los que trabaje a través de aplicaciones para chat, reuniones y llamadas a todos en un solo lugar. | |
|
Visual Studio 2022 |
Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo ASP.NET y desarrollo 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. | |
| SDK de .NET Core versión 3.1 | Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Si no ha instalado el SDK de .NET 3.1 (o posterior) globalmente, se puede instalar la versión portátil. | |
| Node.js y NPM | Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, vea Node.js tabla de compatibilidad de versiones para el tipo de proyecto. | |
| Túnel de desarrollo | Las características de aplicaciones de Teams (bots conversacionales, extensiones de mensajes y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo a Teams. Dev tunnel es una herramienta eficaz para abrir de forma segura tu host local a Internet y controlar quién tiene acceso. El túnel de desarrollo está disponible en Visual Studio 2022, versión 17.7.0 o posterior. o 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 en el directorio del proyecto (mediante npm devDependencies). |
Nota:
Después de descargar ngrok, regístrese e instale authtoken.
Debe tener conocimientos prácticos de las siguientes tecnologías:
Configuración del entorno local
Abra Microsoft-Teams-Samples.
Seleccione Código.
En el menú desplegable, seleccione Abrir con GitHub Desktop.
Seleccione Clonar.
Registro de la aplicación Microsoft Entra
Los pasos siguientes le ayudan a crear y registrar el bot en Azure Portal:
- Cree y registre la 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 a los puntos de conexión del servidor web mediante el túnel de desarrollo (recomendado) o ngrok.
- Agregue el punto de conexión de mensajería al túnel de desarrollo que ha creado.
Agregar registro de aplicación
Acceda a Portal Azure.
Seleccione Registros de aplicaciones.
Seleccione + Nuevo registro.
Escriba el nombre de la aplicación.
Seleccione Cuentas en cualquier directorio organizativo (cualquier inquilino de Microsoft Entra ID: multiinquilino).
Seleccione Registrar.
La aplicación está registrada en Microsoft Entra ID. Aparece la página de información general de la aplicación.
Nota:
Guarde el identificador de la aplicación desde el identificador de aplicación (cliente) y el identificador de directorio (inquilino) para su uso posterior.
Creación de un túnel
Abra Visual Studio.
Seleccione Crear un nuevo proyecto.
En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione ASP.NET Core Web App.
Seleccione Siguiente.
Escriba Nombre del proyecto y seleccione Siguiente.
Seleccione Crear.
Aparece una ventana de información general.
En la lista desplegable de depuración, seleccione Túneles de desarrollo (sin túnel activo)>Crear un túnel....
Aparecerá una ventana emergente.
Actualice los detalles siguientes en la ventana emergente:
- Cuenta: escriba una cuenta de Microsoft o GitHub.
- Nombre: escriba un nombre para el túnel.
- Tipo de túnel: en la lista desplegable, seleccione Temporal.
- Acceso: en la lista desplegable, seleccione Público.
Seleccione Aceptar.
Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.
Seleccione Aceptar.
Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:
Seleccione F5 para ejecutar la aplicación en el modo de depuración.
Si aparece un cuadro de diálogo Advertencia de seguridad , seleccione Sí.
Aparecerá una ventana emergente.
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 ya está activo.
Vaya a Visual Studio y seleccione Ver > salida.
En el menú desplegable Consola de salida , seleccione Túneles de desarrollo.
La consola de salida muestra la dirección URL del túnel de desarrollo.
Adición de una autenticación web
En el panel izquierdo, en Administrar, seleccione Autenticación.
Seleccione Agregar una plataforma>web.
Escriba el URI de redireccionamiento de la aplicación anexando
auth-endal nombre de dominio completo. Por ejemplo,https://your-devtunnel-domain/auth-endohttps://your-ngrok-domain/auth-end.En Flujos híbridos y de concesión implícita, seleccione las casillas Tokens de acceso y tokens de identificador .
Seleccione Configurar.
En Web, seleccione Agregar URI.
Escriba
https://token.botframework.com/.auth/web/redirect.Haga clic en Guardar.
Creación de un secreto de cliente
En el panel izquierdo, en Administrar, seleccione Certificados & secretos.
En Secretos de cliente, seleccione + Nuevo secreto de cliente.
Aparece la ventana Agregar un secreto de cliente .
Escriba Descripción.
Seleccione Agregar.
En Valor, seleccione Copiar en el Portapapeles para guardar el valor del secreto de cliente para su uso posterior.
Agregar permiso de API
En el panel izquierdo, en Administrar, seleccione Permisos de API.
Seleccione + Agregar un permiso.
Seleccione Microsoft Graph.
Seleccione Permisos delegados
Seleccione los permisos siguientes:
- Permisos >de OpenIdemail, offline_access, openid, profile.
- Usuario>User.Read.
Seleccione Agregar permisos.
Nota:
- Si a una aplicación no se le concede el consentimiento del administrador de TI, los usuarios deben proporcionar su consentimiento la primera vez que usen una aplicación.
- Los usuarios solo deben dar su consentimiento a los permisos de API si la aplicación Microsoft Entra está registrada en un inquilino diferente.
Agregar uri de identificador de aplicación
En el panel izquierdo, en Administrar, seleccione Exponer una API.
Junto a URI de id. de aplicación, seleccione Agregar.
Actualice el URI del identificador de aplicación en el
api://your-devtunnel-domain/botid-{AppID}formato oapi://your-ngrok-domain/botid-{AppID}y seleccione Guardar.
En la imagen siguiente se muestra el nombre de dominio:
Agregar un ámbito
En el panel izquierdo, en Administrar, seleccione Exponer una API.
Seleccione + Agregar un ámbito.
Escriba access_as_user como nombre del ámbito.
En ¿Quién puede dar su consentimiento?, seleccione Administradores y usuarios.
Actualice los valores del resto de los campos de la siguiente manera:
Escriba Teams para acceder al perfil del usuario como nombre para mostrar del consentimiento del administrador.
Entrar Permite a Teams llamar a las API web de la aplicación como el usuario actual como descripción del consentimiento del administrador.
Escriba Teams para acceder al perfil de usuario y realizar solicitudes en nombre del usuario como nombre para mostrar del consentimiento del usuario.
Escriba Habilitar Teams para llamar a las API de esta aplicación con los mismos derechos que el usuario que ladescripción del consentimiento del usuario.
Asegúrese de que Estado se establece en Habilitado.
Seleccione Agregar ámbito.
En la imagen siguiente se muestran los campos y los valores:
Nota:
El nombre del ámbito debe coincidir con el URI del identificador de aplicación con
/access_as_useranexado al final.
Agregar aplicación cliente
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.
Seleccione + Agregar una aplicación cliente.
Agregue aplicaciones web de Teams para dispositivos móviles o de escritorio y Teams.
Para equipos móviles o de escritorio de Teams: escriba el identificador de cliente como
1fec8e78-bce4-4aaf-ab1b-5451cc387264.
En Web de Teams: escriba el identificador de cliente como
5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Active la casilla Ámbitos autorizados .
Seleccione Agregar aplicación.
En la imagen siguiente se muestra el identificador de cliente:
Actualizar el manifiesto
En el panel izquierdo, seleccione Manifiesto.
Establezca el valor de en
accessTokenAcceptedVersion2y seleccione Guardar.
Creación del bot
Creación de un recurso de bot de Azure
Nota:
Si ya está probando el bot en Teams, cierre la sesión de esta aplicación y Teams. Para ver este cambio, vuelva a iniciar sesión.
Ve a Inicio.
Seleccione + Crear un recurso.
En el cuadro de búsqueda, escriba Azure Bot.
Seleccione Introducir.
Seleccione Bot de Azure.
Seleccione Crear.
Escriba el nombre del bot en Identificador de bot.
Seleccione su Suscripción en la lista desplegable.
Seleccione el Grupo de recursos en la lista desplegable.
Si no tiene un grupo de recursos existente, puede crear un nuevo grupo de recursos. Para crear un nuevo grupo de recursos, siga estos pasos:
- Seleccione Crear nuevo.
- Escriba el nombre del recurso y seleccione Aceptar.
- Seleccione una ubicación en la lista desplegable Nueva ubicación del grupo de recursos .
En Precios, seleccione Cambiar plan.
Seleccione FO FreeSelect (Seleccionar libre> de FO).
En Id. de aplicación de Microsoft, seleccione Tipo de aplicación como multiinquilino.
En Tipo de creación, seleccione Usar registro de aplicación existente.
Escriba el identificador de aplicación.
Nota:
No puede crear más de un bot con el mismo identificador de aplicación de Microsoft.
Seleccione Revisar y crear.
Una vez superada la validación, seleccione Crear.
El bot tarda unos minutos en aprovisionarse.
Seleccione Ir a recursos.
Ha creado correctamente el bot de Azure.
Agregar un canal de Teams
En el panel izquierdo, seleccione Canales.
En Canales disponibles, seleccione Microsoft Teams.
Active la casilla para aceptar los Términos de servicio.
Seleccione Aceptar.
Seleccione Aplicar.
Para agregar un punto de conexión de mensajería
Use la dirección URL del túnel de desarrollo en la consola de salida como punto de conexión de mensajería.
En el panel izquierdo, en Configuración, seleccione Configuración.
Actualice el punto de conexión de mensajería con el formato
https://your-devtunnel-domain/api/messages.
Seleccione Aplicar.
Ha configurado correctamente un bot en Azure Bot Service.
Nota:
Si la clave de instrumentación de Application Insights muestra un error, actualice con el identificador de aplicación.
Configuración de la aplicación
Vaya al archivo appsettings.json en el repositorio clonado.
Abra el archivo appsettings.json en Visual Studio Code y actualice la siguiente información:
- Establezca en
"MicrosoftAppId"el identificador de aplicación de Microsoft del bot. - Establezca en
"MicrosoftAppPassword"el valor del secreto de cliente del bot. - Establezca
"AzureAd"."TenantId"en el identificador de inquilino del inquilino donde se usa la aplicación.
Nota:
El ejemplo solo funciona en el inquilino actual.
- Establezca en
"AzureAd"."ApplicationId"el identificador de aplicación de Microsoft del bot. - Establézcalo
"ContentBubbleUrl"en la dirección URL(https://[WebAppDomain]/contentBubble.html)del iframe de la burbuja de contenido.
Nota:
WebAppDomaines el dominio ngrok, por lo que la dirección URL de la burbuja de contenido es similar ahttps://ae57****.ngrok.io/contentBubble.html.
- Establezca en
Configuración del archivo de manifiesto
Vaya al
manifest.jsonarchivo en el repositorio clonado.
Abra el
manifest.jsonarchivo en Visual Studio Code y realice los cambios siguientes:- Establezca
manifestVersionen la versión más reciente. - Establezca en
$schemahttps://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json. - Establezca en
resourceapi://[WebAppDomainName]/[MicrosoftAppId]. -
ContosoReemplace por[companyName]. - Reemplace las secciones siguientes por el nombre de dominio completo:
websiteUrlprivacyUrltermsOfUseUrl
- Reemplace todas las repeticiones de por el nombre de
WebAppDomainNamedominio ngrok. - Reemplace todas las repeticiones de
MicrosoftAppIdpor el identificador de aplicación de Microsoft del bot.
- Establezca
Compilación de una aplicación cliente mediante npm install
Vaya a la carpeta ClientApp del repositorio clonado.
Copie la ruta de acceso de la carpeta ClientApp .
Abra una nueva ventana del símbolo del sistema y cambie el directorio actual a la ruta de acceso clientApp copiada.
Ejecute el siguiente comando en el símbolo del sistema para descargar paquetes y dependencias.
npm installEjecute el siguiente comando en el símbolo del sistema para iniciar la aplicación.
npm start
Compilación y ejecución del servicio
Para compilar y ejecutar el servicio, use Visual Studio o la línea de comandos.
Abra Visual Studio.
Vaya a Archivo>Abrir>proyecto o solución....
Seleccione TokenApp.csproj file (Archivo TokenApp.csproj ) en la carpeta csharp .
Pulse F5 para ejecutar el proyecto.
Seleccione Sí si aparece el siguiente cuadro de diálogo:
Se abre una página web con un mensaje App is ready!.
Habilitar la versión preliminar para desarrolladores
Habilite la carga de aplicaciones en la consola de administración del inquilino.
Inicie sesión en el centro de administración de Microsoft 365 con sus credenciales de administrador.
En el panel izquierdo, seleccione Mostrar todo.
Seleccione Teams.
En el panel izquierdo, seleccione Aplicaciones de Teams.
Seleccione Directivas de instalación.
Seleccione Global.
Habilite La posición Activado en Cargar aplicaciones personalizadas.
Haga clic en Guardar.
El inquilino de prueba puede permitir la carga de aplicaciones personalizadas.
Nota:
La carga de aplicaciones personalizadas tarda algún tiempo en activarse.
Vaya a Microsoft Teams.
En la esquina superior derecha de la interfaz de Teams, seleccione Configuración y más (...).
Seleccione Acerca de> Versión preliminar para desarrolladores.
Seleccione Cambiar a la versión preliminar del desarrollador.
Adición de un token de reunión a Teams
En el repositorio clonado, vaya a csharp > AppManifest.
Cree un archivo .zip con los siguientes archivos presentes en la carpeta AppManifest :
- manifest.json
- outline.png
- color.png
Cree una reunión en Teams con algunos moderadores y asistentes.
Únase a la reunión.
Una vez iniciada la reunión, seleccione Aplicaciones.
En la ventana emergente, seleccione Administrar aplicaciones.
Seleccione Cargar una aplicación.
Seleccione el archivo .zip que ha creado en la carpeta AppManifest y seleccione Abrir.
Seleccione Agregar.
En la sección Administrar aplicaciones se muestra la lista de aplicaciones.
Vaya a la reunión de Teams.
Seleccione Icono de aplicación . En la página de selección de la aplicación, la aplicación se muestra como Aplicación de token de reunión.
Seleccione Aplicación de token de reunión.
Haga clic en Guardar.
La aplicación está visible en el chat de reunión.
Inicie la reunión.
El icono está visible en la barra de control de reunión.
Nota:
Cuando trabaje en su propio proyecto, asegúrese de usar un mecanismo de almacenamiento duradero para almacenar la información del token y la dirección URL del servicio para el inquilino.
Desafío completo
¿Se te ocurrió algo como esto?
¡Enhorabuena!
Ha completado el tutorial para empezar a trabajar con una aplicación generador de token de reunión.
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.