Creare dinamicamente un'identità e un token di Servizi di comunicazione di Azure

Aprire local.settings.json e aggiornare il ACS_CONNECTION_STRING valore con la stringa di connessione ACS salvata in un esercizio precedente.

Aprire Startup.cs in Visual Studio ed esplorare la seconda AddSingleton() chiamata all'interno del metodo ConfigureServices().

var host = new HostBuilder()
    .ConfigureFunctionsWebApplication()
    .ConfigureServices(services => {

        ...

        services.AddSingleton(static p =>
        {
            var config = p.GetRequiredService<IConfiguration>();
            var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
            return new CommunicationIdentityClient(connectionString);
        });

        ...

    })
    .Build();
}

La AddSingleton() chiamata crea un CommunicationIdentityClient oggetto usando il ACS_CONNECTION_STRING valore di local.settings.json.

Aprire ACSTokenFunction.cs e individuare il costruttore e le definizioni dei campi.

• Viene definito un campo denominato Scopes che include l'ambito CommunicationTokenScope.VoIP . Questo ambito viene usato per creare il token di accesso per la videochiamata.

  private static readonly CommunicationTokenScope[] Scopes =
  [
      CommunicationTokenScope.VoIP,
  ];
  

• L'istanza CommunicationIdentityClient singleton creata in Startup.cs viene inserita nel costruttore e assegnata al _tokenClient campo.

  private readonly CommunicationIdentityClient _tokenClient;
  
  public ACSTokenFunction(CommunicationIdentityClient tokenClient)
  {
      _tokenClient = tokenClient;
  }
  

Esplora il Run() metodo in ACSTokenFunction.cs:

[Function("HttpTriggerAcsToken")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var user = await _tokenClient.CreateUserAsync();
    var userToken = await _tokenClient.GetTokenAsync(user, Scopes);

    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteAsJsonAsync(
        new
        {
            userId = user.Value.Id,
            userToken.Value.Token,
            userToken.Value.ExpiresOn
        }
    );
    return response;
}

• Definisce una funzione denominata di HttpTriggerAcsToken che può essere chiamata con una richiesta HTTP GET.
• Un nuovo utente ACS viene creato chiamando il _tokenClient.CreateUserAsync() metodo .
• Un token di accesso usato per le videochiamate viene creato chiamando il _tokenClient. GetTokenAsync() metodo .
• L'ID utente e il token vengono restituiti dalla funzione come oggetto JSON.

Eseguire il programma premendo F5 in Visual Studio o selezionando Debug -> Avvia debug dal menu. Verrà avviato il progetto di Azure Functions e rendere ACSTokenFunction disponibile per le chiamate.

Ora che le Funzioni di Azure sono in esecuzione in locale, il client deve essere in grado di chiamarle per ottenere l'identità utente ACS e i valori del token.

Aprire il file samples/acs-to-teams-meeting/client/react/App.tsx nell'editor.

Individuare le userId variabili di stato e token nel componente. Rimuovere i valori hardcoded e sostituirli con virgolette vuote:

const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');

Individuare la useEffect funzione e modificarla in modo che sia simile alla seguente per abilitare la chiamata alla funzione di Azure per recuperare un'identità utente e un token ACS:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Salvare il file prima di continuare.

Aprire una finestra del terminale ed eseguire npm start nella react cartella . Dopo la compilazione e il caricamento, verrà visualizzata l'interfaccia utente chiamante ACS ed è possibile chiamare la riunione di Teams creata dinamicamente da Microsoft Graph.

Arrestare l'app React premendo CTRL+C nella finestra del terminale.

Arresta il progetto Funzioni di Azure.

Eseguire il commit delle modifiche Git ed eseguirne il push nel repository GitHub usando Visual Studio Code:

• Selezionare l'icona Controllo del codice sorgente (terza giù nella barra degli strumenti di Visual Studio Code).
• Immettere un messaggio di commit e selezionare Commit.
• Seleziona Sincronizza modifiche.

Aprire local.settings.json e aggiornare il ACS_CONNECTION_STRING valore con la stringa di connessione ACS salvata in un esercizio precedente.

Aprite server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. Ha il codice seguente:

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import { CommunicationIdentityClient } from '@azure/communication-identity';

export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    // Get ACS connection string from local.settings.json (or App Settings when in Azure)
    const connectionString = process.env.ACS_CONNECTION_STRING;
    let tokenClient = new CommunicationIdentityClient(connectionString);
    const user = await tokenClient.createUser();
    const userToken = await tokenClient.getToken(user, ["voip"]);
    return {
        jsonBody: { userId: user.communicationUserId, ...userToken }
    };
}

app.http('httpTriggerAcsToken', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerAcsToken
});

export default httpTriggerAcsToken;

La funzione esegue le attività seguenti:

• Importazioni CommunicationIdentityClient che verranno usate per creare l'identità utente e il token.

  import { CommunicationIdentityClient } from '@azure/communication-identity';
  

• Ottiene la stringa di connessione ACS da una variabile di ambiente denominata ACS_CONNECTION_STRING.

  const connectionString = process.env.ACS_CONNECTION_STRING;
  

• Crea una nuova CommunicationIdentityClient istanza e passa la stringa di connessione ACS.

  let tokenClient = new CommunicationIdentityClient(connectionString);
  

• Crea un utente ACS e ottiene un token Voice Over IP.

  const user = await tokenClient.createUser();
  const userToken = await tokenClient.getToken(user, ["voip"]);
  

• Invia i valori userId e token al chiamante.

  return {
      jsonBody: { userId: user.communicationUserId, ...userToken }
  };
  

Passare alla cartella server/typescript in una finestra del terminale ed eseguire npm start.

Ora che le Funzioni di Azure sono in esecuzione in locale, il client deve essere in grado di chiamarle per ottenere l'identità utente ACS e i valori del token.

Aprire il file client/react/App.tsx nell'editor.

Individuare le userId variabili di stato e token nel componente. Rimuovere i valori hardcoded e sostituirli con virgolette vuote:

const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');

Individuare la useEffect funzione e modificarla in modo che sia simile alla seguente per abilitare la chiamata alla funzione di Azure per recuperare un'identità utente e un token ACS:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Salvare il file prima di continuare.

Aprire un terminale separato ed eseguire npm start nella cartella react . Dopo la compilazione e il caricamento, verrà visualizzata l'interfaccia utente chiamante ACS ed è possibile chiamare la riunione di Teams creata dinamicamente da Microsoft Graph.

Arrestare entrambi i processi del terminale (React e Funzioni di Azure) selezionando CTRL+C.

Eseguire il commit delle modifiche Git ed eseguirne il push nel repository GitHub usando Visual Studio Code:

• Selezionare l'icona Controllo del codice sorgente (terza giù nella barra degli strumenti di Visual Studio Code).
• Immettere un messaggio di commit e selezionare Commit.
• Seleziona Sincronizza modifiche.