Dynamisches Erstellen einer Azure Communication Services-Identität und eines Tokens

Öffnen Sie local.settings.json , und aktualisieren Sie den ACS_CONNECTION_STRING Wert mit der ACS-Verbindungszeichenfolge, die Sie in einer früheren Übung gespeichert haben.

Öffnen Sie Startup.cs in Visual Studio, und erkunden Sie den zweiten AddSingleton() Aufruf in der ConfigureServices() Methode.

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();
}

Der AddSingleton() Aufruf erstellt ein CommunicationIdentityClient Objekt mithilfe des ACS_CONNECTION_STRING Werts aus local.settings.json.

Öffnen Sie ACSTokenFunction.cs , und suchen Sie die Konstruktor- und Felddefinitionen.

• Ein benanntes Scopes Feld ist definiert, das den CommunicationTokenScope.VoIP Bereich enthält. Dieser Bereich wird verwendet, um das Zugriffstoken für den Videoanruf zu erstellen.

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

• Die CommunicationIdentityClient in Startup.cs erstellte Singletoninstanz wird in den Konstruktor eingefügt und dem _tokenClient Feld zugewiesen.

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

Erkunden Sie die Run() Methode 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;
}

• Sie definiert eine Funktion namens HttpTriggerAcsToken, die mit einer HTTP-GET-Anforderung aufgerufen werden kann.
• Ein neuer ACS-Benutzer wird durch Aufrufen der _tokenClient.CreateUserAsync() Methode erstellt.
• Ein Zugriffstoken, das für Videoaufrufe verwendet wird, wird durch Aufrufen der _tokenClient. GetTokenAsync() Methode erstellt.
• Die Benutzer-ID und das Token werden von der Funktion als JSON-Objekt zurückgegeben.

Führen Sie das Programm aus, indem Sie in Visual Studio F5 drücken oder "Debuggen" auswählen .> Starten Sie das Debuggen über das Menü. Dadurch wird das Azure Functions-Projekt gestartet und ACSTokenFunction zum Aufrufen bereitgestellt.

Nachdem die Azure-Funktionen lokal ausgeführt werden, muss der Client sie aufrufen können, um die ACS-Benutzeridentitäts- und Tokenwerte abzurufen.

Öffnen Sie die Datei beispiele/acs-to-teams-meeting/client/react/App.tsx in Ihrem Editor.

Suchen Sie die userId Variablen und token Zustandsvariablen in der Komponente. Entfernen Sie die hartcodierten Werte, und ersetzen Sie sie durch leere Anführungszeichen:

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

Suchen Sie die useEffect Funktion, und ändern Sie sie so, dass sie wie folgt aussieht, um das Aufrufen der Azure-Funktion zum Abrufen einer ACS-Benutzeridentität und eines Tokens zu ermöglichen:

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();

}, []);

Speichern Sie die Datei, bevor Sie fortfahren.

Öffnen Sie ein Terminalfenster und führen Sie npm start im Ordner react aus. Nach dem Erstellen und Laden sollte die ACS-Anrufoberfläche angezeigt werden, und Sie können sich in die Teams-Besprechung einwählen, die von Microsoft Graph dynamisch erstellt wurde.

Beenden Sie die React-App, indem Sie STRG+C im Terminalfenster drücken.

Beenden Sie das Azure Functions-Projekt.

Übernehmen Sie Ihre Git-Änderungen, und übertragen Sie sie mithilfe von Visual Studio Code an Ihr GitHub-Repository:

• Wählen Sie das Quellcodeverwaltungssymbol aus (3. unten in der Visual Studio Code-Symbolleiste).
• Geben Sie eine Commit-Nachricht ein, und wählen Sie Commit aus.
• Wählen Sie "Änderungen synchronisieren" aus.

Öffnen Sie local.settings.json , und aktualisieren Sie den ACS_CONNECTION_STRING Wert mit der ACS-Verbindungszeichenfolge, die Sie in einer früheren Übung gespeichert haben.

Öffnen Sie server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. Er weist den folgenden Code auf:

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;

Die Funktion führt die folgenden Aufgaben aus:

• Importiert CommunicationIdentityClient , die zum Erstellen der Benutzeridentität und des Tokens verwendet werden.

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

• Ruft die ACS-Verbindungszeichenfolge aus einer Umgebungsvariable mit dem Namen ACS_CONNECTION_STRINGab.

  const connectionString = process.env.ACS_CONNECTION_STRING;
  

• Erstellt eine neue CommunicationIdentityClient Instanz und übergibt die ACS-Verbindungszeichenfolge an diese.

  let tokenClient = new CommunicationIdentityClient(connectionString);
  

• Erstellt einen ACS-Benutzer und ruft ein Voice Over IP-Token ab.

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

• Sendet die UserId- und Tokenwerte an den Aufrufer zurück.

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

Wechseln Sie in einem Terminalfenster zum Server-/Typescript-Ordner , und führen Sie den Befehl aus npm start.

Nachdem die Azure-Funktionen lokal ausgeführt werden, muss der Client sie aufrufen können, um die ACS-Benutzeridentitäts- und Tokenwerte abzurufen.

Öffnen Sie die Datei "client/react/App.tsx " in Ihrem Editor.

Suchen Sie die userId Variablen und token Zustandsvariablen in der Komponente. Entfernen Sie die hartcodierten Werte, und ersetzen Sie sie durch leere Anführungszeichen:

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

Suchen Sie die useEffect Funktion, und ändern Sie sie so, dass sie wie folgt aussieht, um das Aufrufen der Azure-Funktion zum Abrufen einer ACS-Benutzeridentität und eines Tokens zu ermöglichen:

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();

}, []);

Speichern Sie die Datei, bevor Sie fortfahren.

Öffnen Sie ein separates Terminal und führen Sie npm start im Ordner `react` aus. Nach dem Erstellen und Laden sollte die ACS-Anrufoberfläche angezeigt werden, und Sie können sich in die Teams-Besprechung einwählen, die von Microsoft Graph dynamisch erstellt wurde.

Beenden Sie beide Terminalprozesse (React- und Azure-Funktionen), indem Sie STRG+C auswählen.

Übernehmen Sie Ihre Git-Änderungen, und übertragen Sie sie mithilfe von Visual Studio Code an Ihr GitHub-Repository:

• Wählen Sie das Quellcodeverwaltungssymbol aus (3. unten in der Visual Studio Code-Symbolleiste).
• Geben Sie eine Commit-Nachricht ein, und wählen Sie Commit aus.
• Wählen Sie "Änderungen synchronisieren" aus.