Incorporare una chat in un'app personalizzata di Microsoft Teams

2024-10-17

Questo articolo descrive come creare un'app personalizzata di Microsoft Teams per interagire con un'istanza di Servizi di comunicazione di Azure. Questa app di chat consente le funzioni di interazione tra i due sistemi, mantenendo al tempo stesso ambienti back-end e configurazioni di identità separati.

Casi d'uso

Supporto per vendita e post-vendita

I siti Web consumer possono fornire un accesso rapido a un canale di chat, sia a bot automatizzati che a partner di vendita o a entrambi. È consigliabile usare un'istanza isolata del servizio di comunicazione di Azure.

Analogamente, il supporto e il coordinamento post-vendita traggono vantaggio dalla possibilità di usare chat in modo indipendente durante l'incorporamento all'interno di Teams.
Servizi di consulenza remota protetti

Per applicazioni di telepresenza medica, servizi bancari e altri scenari sensibili alla privacy, la crittografia e la sicurezza fornita da Servizi di comunicazione di Azure permettono questi casi d'uso senza che i partecipanti remoti debbano usare Teams. È possibile personalizzare la soluzione in base alle esigenze e i dipendenti dell'organizzazione possono accedere alle consulte dalla loro installazione di Teams esistente.
Scenari relativi a requisiti di separazione dei dati

Per alcune aree, potrebbe essere necessario garantire la quarantena geografica dei dati in giurisdizioni specifiche. L'area di archiviazione dei dati legali di una società potrebbe essere diversa dalla posizione necessaria per archiviare i dati dei clienti. È possibile configurare questo scenario usando il percorso di archiviazione di Servizi di comunicazione di Azure al momento della creazione dell'istanza. La posizione può essere diversa dalla Posizione di archiviazione di Teams.

Architettura

Il diagramma seguente mostra la vista complessiva dell'app di chat di estendibilità di Teams.

Un'istanza di Servizi di comunicazione di Azure abilita la soluzione.
L'API Web fornisce la funzione del lato server per la soluzione, sia per le applicazioni interne che esterne.
I clienti Contoso usano applicazioni client (Web o per dispositivi mobili) per interfacciarsi con i dipendenti. Questo esempio mostra un'app Web usata per ospitare il contenuto.
I dipendenti Contoso usano l'app Teams all'interno del client Teams. Il client Teams è un'app Web ospitata in un'app personalizzata di Teams e distribuita in Teams tramite un iframe all'interno del client Teams.

L'istanza di Servizi di comunicazione di Azure non è direttamente connessa all'ambiente Teams. L'ambiente di Servizi di comunicazione viene illustrato tramite l'app personalizzata di Teams.

L'app personalizzata di Teams ottiene l'accesso Single Sign-On (SSO) di Teams, che fornisce l'ID utente di Teams all'app. L'app di messaggistica personalizzata usa l'ID utente di Teams per eseguire il mapping all'ID utente del servizio di comunicazione.

Compilare la soluzione

Per creare l'app di chat, sono necessari i componenti seguenti.

Un'istanza di Servizi di comunicazione di Azure.
- Per altre informazioni, vedere Avvio rapido: Creare e gestire risorse di Servizi di comunicazione.
- Configurare l'area di archiviazione per l'istanza durante la creazione.
Un server API per ospitare i componenti back-end. Il server API fornisce la logica back-end necessaria. I casi d'uso comuni includono l'autenticazione utente e le API di gestione dei thread di chat.
Un'istanza dell'app Web per ospitare i componenti front-end. I componenti front-end per il Web rivolto ai clienti e potenzialmente per guidare il layout dell'app personalizzata di Teams tramite iframe incorporato.
Un'app personalizzata di Teams che abbia Teams configurato per abilitare l'installazione dell'app. Per offrire l'esperienza per i dipendenti, configurare l'app personalizzata di Teams per usare contenuti Web basati su un'app Web o tramite una distribuzione di un'app personalizzata di Teams.

Progettare l'app

È possibile progettare il sito del portale rivolto ai clienti in base alle esigenze aziendali. Un'app Web di chiamata/chat semplice richiede in genere due funzionalità:

Autenticazione (registrazione/accesso)
Interfaccia utente di chat (e chiamata) primaria

L'accesso Single Sign-On (SSO) di Teams fornisce l'autenticazione nell'app personalizzata di Teams rivolta ai dipendenti. In questo caso, il dipendente deve visualizzare un ulteriore elenco di clienti prima di accedere all'esperienza principale di chat (e chiamata).

Altre considerazioni sul lavoro di progettazione all'interno di Teams includono linee guida per garantire un'esperienza coerente, inclusiva e accessibile. Per altre informazioni, vedere Progettazione dell'app Microsoft Teams.

Implementare l'app personalizzata di Teams

Iniziare il percorso dedicato con l'articolo Introduzione > Creare la prima app Teams.

Per ottenere il toolkit di sviluppo per Visual Studio Code, un riferimento rapido ai materiali di apprendimento, agli esempi di codice e ai modelli di progetto, vedere Panoramica di Microsoft Teams Toolkit.

In Microsoft Teams Toolkit, selezionare Nuovo progetto>Scheda.

Un'app Tab offre il framework più semplice, che può essere ulteriormente perfezionato per usare React con l'interfaccia utente Fluent.

È possibile creare rapidamente uno scheletro dell'app e provarlo in locale in Teams usando un account per sviluppatore di Microsoft 365. Usare la funzionalità React con l'interfaccia utente Fluent e seguire l'installazione di base in Visual Studio Code.

Questo progetto ha un'implementazione API standardizzata tramite Funzioni di Azure. A questo punto, è necessario creare l'implementazione back-end completa per una piattaforma di chat. L'opzione Scheda di base fornisce la struttura front-end dell'app Web. Abilita anche l'accesso SSO per l'app come descritto in Sviluppare un'esperienza di Single Sign-On in Teams | GitHub.

Altri metodi per implementare l'app personalizzata di Teams

È possibile creare un'app Tab che colleghi ognuna delle schede a un'app esterna usando il file manifest.json dell'app Teams. Per altre informazioni, vedere Manifesto dell'app campione.

È anche possibile usare un'app Microsoft Entra esistente, come descritto in Usare un'app Microsoft Entra esistente in un progetto TeamsFx.

Per altre informazioni sulle funzionalità di Schede, vedere Configurare la funzionalità Schede all'interno dell'app Teams | GitHub.

Compilare l'app di chat

Per compilare un'app di chat dotata di tutte le funzionalità, sono necessarie alcune funzioni chiave.

È necessaria un'istanza di Servizi di comunicazione di Azure per ospitare le chat e fornire la funzione per inviare e ricevere messaggi (e altri tipi di comunicazione). All'interno di questo sistema, ogni ID di comunicazione rappresenta un utente fornito dal servizio API per l'app. L'utente riceve un ID di comunicazione al termine del flusso di autenticazione utente.

Flusso di autenticazione

Gli endpoint di Servizi di comunicazione di Azure richiedono l'autenticazione, sotto forma di token di connessione. Il servizio di autenticazione fornisce un token per ciascun ID di comunicazione.

A seconda dei requisiti, potrebbe essere necessario fornire agli utenti un metodo per la registrazione o l'accesso o un altro tipo di link di autenticazione monouso.

È necessario creare identità ed emettere token di autenticazione all'interno di un servizio back-end per la sicurezza. Per altre informazioni, vedere Avvio rapido: Creare e gestire token di accesso.

Interfaccia utente di chat

Il metodo più rapido per fornire un riquadro di chat con la voce di messaggio per l'interfaccia utente Web consiste nell'usare i compositi della libreria dell'interfaccia utente Web React, dal pacchetto React communication-react di Azure. La documentazione di Storybook illustra l'integrazione di questi ultimi, nonché l'uso diretto all'interno dell'ambiente Storybook.

Composito di chat con l'elenco dei partecipanti

Il componente composito di chat richiede l'identificatore utente e il token del flusso di autenticazione, l'endpoint di Servizi di comunicazione e l'ID del thread a cui deve essere collegato.

Gli ID thread rappresentano conversazioni tra gruppi di identificatori di comunicazione. Prima di una conversazione, è necessario creare il thread e aggiungervi utenti. È possibile automatizzare questa procedura o fornire la funzione da una Scheda nell'app Teams per consentire ai dipendenti di eseguire la configurazione.

Chatbot

È possibile aggiungere bot all'app di chat. Per altre informazioni, vedere Avvio rapido: Aggiungere un bot all'app di chat.

Distribuire l'app di Teams

Perchè un'app Teams possa essere usata in un'organizzazione, deve essere approvata dall'amministratore di Teams. È possibile compilare un'app personalizzata di Teams e installare il pacchetto dell'app tramite l'interfaccia di amministrazione di Teams. Per altre informazioni, vedere Gestire app personalizzate nell'interfaccia di amministrazione di Microsoft Teams.

Passaggi successivi

Per altre informazioni sulla creazione di un'app con l'interoperabilità di Teams, vedere Centro contatti.