Audio-/Videoanrufe aus einer benutzerdefinierten App in eine Teams-Besprechung

1. Öffnen Sie den samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Ordner "GraphACSFunctions" in Visual Studio Code, oder öffnen Sie den Ordner "GraphACSFunctions ".

2. Wechseln Sie zum GraphACSFunctions Projekt, und erstellen Sie eine local.settings.json Datei mit den folgenden Werten:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Verwenden Sie die Werte, die Sie in die lokale Datei in einer früheren Übung kopiert haben, um die Werte CLIENT_ID und CLIENT_SECRET Werte TENANT_IDzu aktualisieren.
   • Definieren Sie USER_ID mit der Benutzer-ID, die Sie erstellen möchten, eine Microsoft Teams-Besprechung.

   Sie können die Benutzer-ID aus dem Azure-Portal abrufen.

   • Melden Sie sich mit Ihrem Microsoft 365-Entwicklermandantenadministratorkonto an.
   • Wählen Sie Microsoft Entra ID aus.
   • Navigieren Sie zur Registerkarte "Benutzer " auf der Seitenleiste.
   • Suchen Sie nach Ihrem Benutzernamen, und wählen Sie ihn aus, um die Benutzerdetails anzuzeigen.
   • Innerhalb der Benutzerdetails Object ID stellt die User ID. Kopieren Sie den Object ID Wert, und verwenden Sie ihn für den USER_ID Wert in local.settings.json.

   

   Hinweis

   ACS_CONNECTION_STRING wird in der nächsten Übung verwendet, damit Sie sie noch nicht aktualisieren müssen.

3. Öffnen Sie GraphACSFunctions.sln sich im Ordner acs-to-teams-meeting/server/csharp , und beachten Sie, dass sie die folgenden Microsoft Graph- und Identitätspakete enthält:

   <PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
   <PackageReference Include="Azure.Identity" Version="1.11.2" />
   <PackageReference Include="Microsoft.Graph" Version="5.51.0" />
   

4. Wechseln Sie zu Program.cs , und notieren Sie sich den folgenden Code in der ConfigureServices Methode:

       var host = new HostBuilder()
           .ConfigureFunctionsWebApplication()
           .ConfigureServices(services => {
               services.AddApplicationInsightsTelemetryWorkerService();
               services.ConfigureFunctionsApplicationInsights();
               services.AddSingleton(static p =>
               {
                   var config = p.GetRequiredService<IConfiguration>();
                   var clientSecretCredential = new ClientSecretCredential(
                       config.GetValue<string>("TENANT_ID"),
                       config.GetValue<string>("CLIENT_ID"),
                       config.GetValue<string>("CLIENT_SECRET")
                   );
   
                   return new GraphServiceClient(
                       clientSecretCredential,
                       ["https://graph.microsoft.com/.default"]
                   );
               });
   
               ...
   
               services.AddSingleton<IGraphService, GraphService>();
           })
           .Build();
   }
   

   • Dieser Code erstellt ein GraphServiceClient Objekt, das zum Aufrufen von Microsoft Graph aus Azure Functions verwendet werden kann. Es ist ein Singleton und kann in andere Klassen eingefügt werden.
   • Sie können Microsoft Graph-API-Aufrufe mit Nur-App-Berechtigungen (z . B. Calendars.ReadWrite) ausführen, indem Sie einen ClientSecretCredential Wert an den GraphServiceClient Konstruktor übergeben. Dies ClientSecretCredential verwendet die Tenant IdWerte Client Id und Client Secret Werte aus der Microsoft Entra ID-App.

5. Öffnen Sie Dienste/GraphService.cs.

6. Nehmen Sie sich einen Moment Zeit, um die CreateMeetingEventAsync Methode zu erkunden:

   using System;
   using System.Threading.Tasks;
   using Microsoft.Graph;
   using Microsoft.Extensions.Configuration;
   
   namespace GraphACSFunctions.Services;
   
   public class GraphService : IGraphService
   {
       private readonly GraphServiceClient _graphServiceClient;
       private readonly IConfiguration _configuration;
   
       public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
       {
           _graphServiceClient = graphServiceClient;
           _configuration = configuration;
       }
   
       public async Task<string> CreateMeetingAsync()
       {
           var userId = _configuration.GetValue<string>("USER_ID");
           var newMeeting = await _graphServiceClient
               .Users[userId]
               .Calendar
               .Events
               .PostAsync(new()
               {
                   Subject = "Customer Service Meeting",
                   Start = new()
                   {
                       DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   End = new()
                   {
                       DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   IsOnlineMeeting = true
               });
           return newMeeting.OnlineMeeting.JoinUrl;
       }
   }
   

   • GraphServiceClient und IConfiguration Objekte werden in den Konstruktor eingefügt und Feldern zugewiesen.
   • Die CreateMeetingAsync() Funktion sendet Daten an die Microsoft Graph-Kalenderereignisse-API, die dynamisch ein Ereignis im Kalender eines Benutzers erstellt und die Verknüpfungs-URL zurückgibt.

7. Öffnen Sie TeamsMeetingFunctions.cs, und nehmen Sie sich einen Moment Zeit, um den Konstruktor zu untersuchen. Die GraphServiceClient zuvor angesehene Datei wird eingefügt und dem _graphService Feld zugewiesen.

   private readonly IGraphService _graphService;
   
   public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
   

8. Suchen Sie die Run Methode:

   [Function("HttpTriggerTeamsUrl")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
       return response;
   }
   

   • Er definiert einen Funktionsnamen, der HttpTriggerTeamsUrl mit einer HTTP GET-Anforderung aufgerufen werden kann.
   • Es ruft ein neues Ereignis auf _graphService.CreateMeetingAsync()und gibt die Join-URL zurück.

9. 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ü. Diese Aktion startet das Azure Functions-Projekt und stellt den ACSTokenFunction Aufruf zur Verfügung.

1. Öffnen Sie den Projektordner "samples/acs-to-teams-meeting/server/typescript " in Visual Studio Code.

2. Erstellen Sie eine local.settings.json Datei mit den folgenden Werten:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "node",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Verwenden Sie die Werte, die Sie in die lokale Datei in einer früheren Übung kopiert haben, um die Werte CLIENT_ID und CLIENT_SECRET Werte TENANT_IDzu aktualisieren.
   • Definieren Sie USER_ID mit der Benutzer-ID, die Sie erstellen möchten, eine Microsoft Teams-Besprechung.

   Sie können die Benutzer-ID aus dem Azure-Portal abrufen.

   • Melden Sie sich mit Ihrem Microsoft 365-Entwicklermandantenadministratorkonto an.
   • Microsoft Entra-ID auswählen,
   • Navigieren Sie zur Registerkarte "Benutzer " auf der Seitenleiste.
   • Suchen Sie nach Ihrem Benutzernamen, und wählen Sie ihn aus, um die Benutzerdetails anzuzeigen.
   • Innerhalb der Benutzerdetails Object ID stellt die User ID. Kopieren Sie den Object ID Wert, und verwenden Sie ihn für den USER_ID Wert in local.settings.json.

   

   Hinweis

   ACS_CONNECTION_STRING wird in der nächsten Übung verwendet, damit Sie sie noch nicht aktualisieren müssen.

3. Öffnen Sie die package.json Datei in VS Code, und beachten Sie, dass die folgenden Microsoft Graph- und Identitätspakete enthalten sind:

   @azure/communication-identity
   @azure/identity
   @microsoft/microsoft-graph-client
   

4. Öffnen Sie ein Terminalfenster im Typescript-Ordner , und führen Sie den npm install Befehl aus, um die Anwendungsabhängigkeiten zu installieren.

5. Öffnen Sie "Freigegeben/graph.ts" , und nehmen Sie sich einen Moment Zeit, um die Importe am Anfang der Datei zu erkunden. Dieser Code behandelt das Importieren von Authentifizierungs- und Clientsymbolen, die in der Azure-Funktion zum Aufrufen von Microsoft Graph verwendet werden.

   import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
   import { ClientSecretCredential } from '@azure/identity';
   import { Client } from '@microsoft/microsoft-graph-client';
   import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
   import 'isomorphic-fetch';
   

   Tipp

   Außerdem werden Importe aus dateTimeFormat.ts angezeigt, die später in dieser Übung verwendet werden. startDateTimeAsync und endDateTimeAsync werden beim Erstellen eines Microsoft Teams-Besprechungslinks verwendet, um das Startdatum und das Enddatum für die Besprechung zu definieren.

6. Nehmen Sie sich einen Moment Zeit, um zu untersuchen clientSecretCredential und appGraphClient. Sie werden später im Authentifizierungsprozess und beim Aufrufen der Microsoft Graph-API verwendet:

   let clientSecretCredential;
   let appGraphClient;
   

7. Suchen Sie die ensureGraphForAppOnlyAuth Funktion:

   • ClientSecretCredential verwendet die Tenant IdWerte Client Id und Client Secret Werte aus der Microsoft Entra ID-App.
   • Das authProvider Objekt wird als Microsoft Entra-ID-App definiert, die sich im Hintergrund authentifiziert und Nur-App-Berechtigungen (z Calendars.ReadWrite. B. ) verwendet, um Microsoft Graph-API-Aufrufe auszuführen.

   function ensureGraphForAppOnlyAuth() {
       if (!clientSecretCredential) {
           clientSecretCredential = new ClientSecretCredential(
               process.env.TENANT_ID,
               process.env.CLIENT_ID,
               process.env.CLIENT_SECRET
           );
       }
   
       if (!appGraphClient) {
           const authProvider = new TokenCredentialAuthenticationProvider(
           clientSecretCredential, {
               scopes: [ 'https://graph.microsoft.com/.default' ]
           });
   
           appGraphClient = Client.initWithMiddleware({
               authProvider: authProvider
           });
       }
   }
   

8. Nehmen Sie sich einen Moment Zeit, um die createNewMeetingAsync Funktion zu erkunden. Sie sendet Daten an die Microsoft Graph-Kalenderereignisse-API, die dynamisch ein Ereignis im Kalender eines Benutzers erstellt und die neuen Ereignisdetails zurückgibt:

   async function createNewMeetingAsync(userId) {
       ensureGraphForAppOnlyAuth();
       let startTime = await startDateTimeAsync();
       let endTime = await endDateTimeAsync();
       const newMeeting = `/users/${userId}/calendar/events`;
   
       const event = {
       subject: 'Customer Service Meeting',
       start: {
           dateTime: startTime,
           timeZone: 'UTC'
       },
       end: {
           dateTime: endTime,
           timeZone: 'UTC'
       },
       isOnlineMeeting: true
       };
   
       const newEvent = await appGraphClient.api(newMeeting).post(event);    
       return newEvent;     
   }
   
   export default createNewMeetingAsync;
   

9. Wechseln Sie zu server/typescript/src/functions/httpTriggerTeamsUrl.ts , und erkunden Sie die Http Trigger-Funktion :

   • createNewMeetingAsync wird aus graph.ts importiert. Es behandelt das Erstellen und Abrufen neuer Ereignisdetails.
   • userId wird aus local.settings.json innerhalb der Http Trigger-Funktion abgerufen. Dieser Abruf erfolgt durch Den Zugriff auf die USER_ID Umgebungsvariable mithilfe von process.env.USER_ID.
   • Wenn die Funktion ausgelöst wird, wird sie mit der definierten Benutzer-ID aufgerufen createNewMeetingAsync und gibt die neuen Ereignisdetails im teamMeetingLink Parameter zurück.
   • Die Funktion greift auf die URL des Teams-Besprechungsbeitritts zu, indem sie den Wert im Textkörper der Antwort aufruft meeting.onlineMeeting.joinUrl und zurückgibt.

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import createNewMeetingAsync from '../../Shared/graph';
   
   let teamsMeetingLink;
   
   export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       context.log("Request received");
       const userId = process.env.USER_ID;
       context.log('UserId', userId);
   
       teamsMeetingLink = await createNewMeetingAsync(userId);
       const body = JSON.stringify(teamsMeetingLink);
       const meeting = JSON.parse(body);
       context.log("meeting:", meeting);
   
       return {
           // status: 200, /* Defaults to 200 */
           body: meeting.onlineMeeting.joinUrl
       }    
   };
   
   app.http('httpTriggerTeamsUrl', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerTeamsUrl
   });
   
   export default httpTriggerTeamsUrl;
   

10. Verwenden Sie ein Terminalfenster, um npm start in den Beispielen/acs-video-to-teams-meeting/server/typescript-Ordner auszuführen, um die Funktion lokal auszuführen.

1. Ö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.

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

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

4. Ö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;
     }
     

5. 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, die HttpTriggerAcsToken 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.

6. 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 zum ACSTokenFunction Aufrufen zur Verfügung gestellt.

   Hinweis

   Wenn Sie VS Code verwenden, können Sie ein Terminalfenster im Ordner "GraphACSFunctions " öffnen und ausführen func start. Dabei wird davon ausgegangen, dass die Azure Functions Core Tools auf Ihrem Computer installiert sind.

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

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

9. 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>('');
   

10. 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();
    
    }, []);
    

11. Speichern Sie die Datei, bevor Sie fortfahren.

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

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

14. Beenden Sie das Azure Functions-Projekt.

15. Ü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 ausführen" aus.
    • Wählen Sie " Änderungen synchronisieren" aus.

1. Ö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.

2. Ö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;
   

3. 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 abACS_CONNECTION_STRING.

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Hinweis

   Dies ist der Verbindungszeichenfolge Wert, den Sie zuvor in der local.settings.json Datei hinzugefügt haben.

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

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

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

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

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

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

8. 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();
   
   }, []);
   

9. Speichern Sie die Datei, bevor Sie fortfahren.

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

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

12. Ü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 ausführen" aus.
    • Wählen Sie " Änderungen synchronisieren" aus.

1. Öffnen Sie das samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Projekt in Visual Studio.

2. Klicken Sie mit der rechten Maustaste auf das GraphACSFunctions Projekt, und wählen Sie "Veröffentlichen" aus.

3. Wählen Sie Azure im Zielabschnitt aus, und klicken Sie dann auf "Weiter".

4. Wählen Sie die Azure-Funktions-App (Windows) aus, und klicken Sie dann auf "Weiter".

5. Wählen Sie Ihr Abonnement und dann +Neu erstellen aus.

6. Geben Sie die folgenden Informationen ein:

   • Funktionsname: Ein global eindeutiger Name ist erforderlich. Beispiel: acsFunctions<YOUR_LAST_NAME>.
   • Abonnement: Wählen Sie Ihr Abonnement aus.
   • Ressourcengruppe: Wählen Sie eine Ressourcengruppe aus, die Sie zuvor in diesem Lernprogramm erstellt haben, oder Sie können auch eine neue erstellen.
   • Hostingplan: Verbrauchsplan.
   • Standort: Wählen Sie die Region aus, für die Sie bereitstellen möchten.
   • Azure Storage: Erstellen Sie eine neue. (Sie können auch ein vorhandenes Speicherkonto auswählen.)
   • Azure Insights: Erstellen Sie eine neue. (Sie können auch ein vorhandenes Speicherkonto auswählen.)

   Hinweis

   Ein global eindeutiger Name ist erforderlich. Sie können den Namen eindeutiger machen, indem Sie eine Zahl oder Ihren Nachnamen am Ende des Namens hinzufügen.

7. Nachdem die Azure-Funktions-App erstellt wurde, wird ein Bestätigungsbildschirm angezeigt. Stellen Sie sicher, dass die Option "Aus Paket ausführen" ausgewählt ist, und wählen Sie dann "Fertig stellen" aus.

8. Wählen Sie " Veröffentlichen" aus, um die Funktion in Azure bereitzustellen.

9. Nachdem die Funktion in Azure bereitgestellt wurde, wechseln Sie zum Azure-Portal, und wählen Sie die erstellte Funktions-App aus.

10. Kopieren Sie die URL für die bereitgestellte Funktion. Sie verwenden den Wert später in dieser Übung.

11. Wählen Sie "Einstellungen" aus –> Konfiguration im linken Menü.

12. Wählen Sie die Schaltfläche "+Neue Anwendungseinstellung " aus, und fügen Sie die folgenden Schlüssel und Werte in den Anwendungseinstellungen hinzu. Sie können diese Werte aus local.settings.json dem GraphACSFunctions Projekt wiederverwendung.

    # Retrieve these values from local.settings.json
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. Wählen Sie die Schaltfläche "Speichern " aus, um die Einstellungen zu speichern.

14. Schließlich müssen Sie CORS (Cross-Origin Resource Sharing) für die Funktions-App aktivieren, um die APIs der Funktions-App von außerhalb Ihrer Domäne zugänglich zu machen. Wählen Sie "Einstellungen" aus –> CORS im linken Menü.

15. Geben Sie * im Textfeld "Zulässige Ursprünge" (über beliebige Domänen zugänglich) die Schaltfläche "Speichern" ein.

Beginnen wir mit VS Code, um den Funktionscode in Azure Functions bereitzustellen.

1. Öffnen Sie den Server-/Typescript-Projektordner .

2. Sie sollten bereits einen node_modules Ordner im Projektstamm anzeigen.npm install Öffnen Sie andernfalls ein Befehlsfenster, und führen Sie die Ausführung aus npm install , um die Abhängigkeiten zu installieren.

3. Öffnen sie die Befehlspalette von VS Code (UMSCHALT+CMD+P auf dem Mac | UMSCHALT+STRG+P unter Windows), und wählen Sie Azure-Funktionen aus: Funktions-App in Azure erstellen.

   

   Hinweis

   Wenn diese Option nicht angezeigt wird, stellen Sie sicher, dass die Azure Functions-Erweiterung in VS Code installiert ist.

4. Sie werden aufgefordert, die folgenden Informationen einzugeben:

   • Den Namen Ihres Azure-Abonnements
   • Der Funktionsname: acsFunctions<YOUR_LAST_NAME>.

   Hinweis

   Ein global eindeutiger Name ist erforderlich. Sie können den Namen eindeutiger machen, indem Sie eine Zahl oder Ihren Nachnamen am Ende des Namens hinzufügen.

   • Der Laufzeitstapel – Wählen Sie die neueste Node.js LTS-Version aus.
   • Die Region (wählen Sie eine beliebige Region aus).

5. Nachdem die Azure-Funktions-App erstellt wurde, wird eine Meldung zum Anzeigen der Details angezeigt.

6. Wechseln Sie zurück zur Befehlspalette in VS Code, und wählen Sie Azure-Funktionen aus: Bereitstellen in der Funktions-App. Sie werden aufgefordert, Ihr Abonnement und den Zuvor erstellten Funktions-App-Namen auszuwählen.

7. Nachdem die Funktion in Azure bereitgestellt wurde, gehen Sie wie folgt vor:

   • Wählen Sie die Azure-Erweiterung in VS Code aus (klicken Sie auf das Azure-Symbol in der Randleiste).
   • Erweitern Sie Ihr Abonnement.
   • Erweitern Sie Ihre Funktions-App.
   • Klicken Sie mit der rechten Maustaste auf die Funktion, und wählen Sie "Website durchsuchen" aus. Stellen Sie sicher, dass die Funktions-App ordnungsgemäß funktioniert, bevor Sie fortfahren.

8. Kopieren Sie die Azure Function-Domäne in eine lokale Datei. Sie verwenden den Wert später in dieser Übung.