Inserte el chat en una aplicación personalizada de Microsoft Teams

En este artículo se describe cómo crear una aplicación personalizada de Microsoft Teams para interactuar con una instancia de Azure Communication Services. Esta aplicación de chat habilita las funciones para interoperar entre los dos sistemas al tiempo que mantiene los entornos de back-end separados y las configuraciones de identidad.

Casos de uso

• Soporte técnico de punto de ventas y postventas

  Los sitios web de consumidores pueden proporcionar un acceso rápido a un canal de chat, ya sea con bots automatizados o asociados de ventas o ambos. Se recomienda usar una instancia aislada de Azure Communication Service.

  Del mismo modo, el soporte técnico postventas y la coordinación se benefician de la capacidad de usar chat de forma independiente mientras están incorporados en Teams.

• Servicios de consulta remota protegidos

  En el caso de las aplicaciones de telepresencia médica, los servicios bancarios y otros escenarios sensibles a la privacidad, el cifrado y la seguridad proporcionados por Azure Communication Services permite estos casos de uso sin necesidad de que los participantes remotos usen Teams. Puede emplear su marca en la solución según sea necesario y los empleados de su organización pueden acceder a las consultas desde su instalación de Teams existente.

• Escenarios de requisitos de separación de datos

  En algunas áreas, es posible que tenga que garantizar la cuarentena geográfica de los datos a jurisdicciones específicas. El área de almacenamiento de datos legales de una empresa podría ser diferente de la ubicación requerida para almacenar los datos del cliente. Puede configurar este escenario mediante la ubicación de almacenamiento de Azure Communications Services en la creación de la instancia. La ubicación puede ser diferente de la ubicación de almacenamiento de Teams.

  

Arquitectura

En el diagrama siguiente se muestra la vista general de la aplicación de extensibilidad de chat de Teams.

1. Una instancia de Azure Communications Services habilita la solución.

2. La API web proporciona una función del lado servidor para la solución, tanto para aplicaciones orientadas internas o externas.

3. Los clientes de Contoso usan aplicaciones cliente (web o móviles) para interactuar con los empleados. En este ejemplo se muestra una aplicación web que se usa para hospedar el contenido.

4. Los empleados de Contoso usan la aplicación Teams dentro de su cliente de Teams. El cliente de Teams es una aplicación web hospedada dentro de una aplicación personalizada de Teams e implementada en Teams a través de un iframe dentro del cliente de Teams.

   La instancia de Azure Communication Services no está conectada directamente al entorno de Teams. El entorno de Communications Services se muestra a través de la aplicación personalizada de Teams.

   La aplicación personalizada de Teams obtiene el inicio de sesión único (SSO) de Teams que proporciona el identificador de usuario de Teams a la aplicación. La aplicación de mensajería personalizada usa el identificador de usuario de Teams para asignarlo al identificador de usuario del servicio de comunicación.

Compile la solución

Necesita los siguientes componentes para crear la aplicación de chat.

1. Una instancia de Azure Communication Services.

   • Para más información, consulte Inicio rápido: Creación y administración de recursos de Communication Services.
   • Configure el área de almacenamiento para la instancia durante la creación.

2. Un servidor de API para hospedar los componentes de back-end. El servidor de API proporciona la lógica de back-end necesaria. Entre los casos de uso comunes se incluyen la autenticación de usuarios y las API de administración de conversaciones de chat.

3. Una instancia de aplicación web para hospedar los componentes de front-end. Los componentes de front-end para la web orientada al cliente y potencialmente para impulsar el diseño de la aplicación personalizada de Teams a través de iframe incrustado.

4. Una aplicación personalizada de Teams configuró Teams para habilitar esta instalación de la aplicación. Para proporcionar la experiencia a los empleados, configure la aplicación personalizada de Teams para usar el contenido web impulsado desde una aplicación web o a través de una implementación de la aplicación personalizada de Teams.

Diseñar la aplicación

Puede diseñar el sitio del portal orientado al cliente según sea necesario para satisfacer sus necesidades empresariales. Normalmente, una aplicación web simple de llamada o chat requiere dos características:

• Autenticación (registro o inicio de sesión)
• Interfaz principal de usuario de chat (y llamada)

El inicio de sesión único (SSO) de Teams proporciona autenticación en la aplicación personalizada de Teams orientada a los empleados. En este caso, el empleado necesita ver una lista adicional de clientes antes de la experiencia principal de chat (y llamada).

Algunas otras consideraciones para el trabajo de diseño dentro de Teams incluyen instrucciones para garantizar una experiencia coherente, inclusiva y accesible. Para obtener más información, consulte Diseño de la aplicación de Microsoft Teams.

Implemente la aplicación personalizada de Teams

Inicie su recorrido dedicado en Introducción>Compile la primera aplicación de Teams.

Para obtener el kit de herramientas de desarrollo para Visual Studio Code, una referencia rápida a materiales de aprendizaje, ejemplos de código y plantillas de proyecto, consulte Introducción al kit de herramientas de Microsoft Teams.

En el Kit de herramientas de Microsoft Teams, seleccione Nuevo Proyecto> Pestaña.

Una aplicación como Pestaña proporciona el marco más sencillo, que puede refinar aún más para usar React con la interfaz de usuario de Fluent.

Puede crear rápidamente un esqueleto de la aplicación y probarlo localmente en Teams mediante una cuenta de desarrollador de Microsoft 365. Use la funcionalidad de React con la interfaz de usuario de Fluent y siga la instalación básica en Visual Studio Code.

Este proyecto tiene una implementación de API con plantilla a través de Azure Functions. En este momento, debe crear la implementación de back-end completa para una plataforma de chat. La opción Pestaña básica proporciona la estructura de front-end de la aplicación web. También habilita el inicio de sesión único para la aplicación, tal como se describe en Desarrollo de la experiencia de inicio de sesión único en Teams | GitHub.

Otras formas de implementar la aplicación personalizada de Teams

Puede crear una aplicación como Pestaña que vincule cada una de las pestañas a una aplicación externa mediante el archivo manifest.json de aplicación de Teams. Para más información, consulte este Ejemplo de manifiesto de la aplicación.

También puede usar una aplicación de Microsoft Entra existente, como se describe en Uso de una aplicación de Microsoft Entra existente en el proyecto TeamsFx.

Para obtener más información sobre las funcionalidades de Pestañas, vea Configurar la funcionalidad de Pestaña en la aplicación Teams | GitHub.

Compile la aplicación de chat

Para crear una aplicación de chat con las características completas, necesita algunas funciones clave.

Necesita una instancia de Azure Communication Services para hospedar los chats y proporcionar la función para enviar y recibir mensajes (y otros tipos de comunicación). Dentro de este sistema, cada identificador de comunicación representa a un usuario, proporcionado por el servicio de API para la aplicación. El usuario recibe un identificador de comunicación una vez completado el flujo de autenticación de usuario.

Flujo de autenticación

Los puntos de conexión de Azure Communication Services requieren autenticación que se proporciona en forma de token de portador. El servicio de autenticación proporciona un token por identificador de comunicación.

Según sus requisitos, es posible que tenga que proporcionar un medio para que los usuarios se registren, inicien sesión o resuelvan algún otro tipo de vínculo de autenticación única.

Debe crear identidades y emitir tokens de autenticación dentro de un servicio back-end para la seguridad. Para más información, consulte Inicio rápido: Creación y administración de tokens de acceso.

Interfaz de usuario de chat

El método más rápido para proporcionar un panel de chat con entrada de mensaje para la interfaz de usuario web es usar los compuestos de la biblioteca de interfaz de usuario web de React, desde el paquete de comunicación-React de Azure. La documentación de Storybook explica la integración de estos y también el uso directo dentro del entorno de Storybook.

Compuesto de chat con la lista de participantes

El componente compuesto de chat requiere el identificador de usuario y el token del flujo de autenticación, el punto de conexión de Communication Services y el identificador de conversación al que se debe adjuntar.

Los identificadores de conversación representan conversaciones entre grupos de identificadores de comunicación. Antes de una conversación, debe crear la conversación y agregar usuarios. Puede automatizar este procedimiento o proporcionar la función desde una Pestaña en la aplicación Teams para que los empleados la configuren.

Bots de chat

Puede agregar bots a la aplicación de chat. Para obtener más información, consulte Inicio rápido: Adición de un bot a la aplicación de chat.

Distribuya la aplicación Teams

Para usar una aplicación de Teams en una organización, el administrador de Teams debe aprobarla. Puede crear una aplicación personalizada de Teams e instalar el paquete de la aplicación a través del Centro de administración de Teams. Para obtener más información, consulteAdministrar aplicaciones personalizadas en el Centro de administración de Microsoft Teams.

Pasos siguientes

• Inicio rápido: Adición de un bot a la aplicación de chat
• Habilitar el uso compartido de archivos mediante la biblioteca de interfaz de usuario en el chat de interoperabilidad de Teams

Artículos relacionados

• Para obtener más información sobre cómo crear una aplicación con interoperabilidad de Teams, consulte Centro de contacto.