Połączenia audio/wideo z aplikacji niestandardowej do spotkania usługi Teams

Artykuł
Developer (Średni)
Czas do ukończenia: 59 min

Poziom: Pośredni

W tym samouczku dowiesz się, jak można używać Azure Communication Services w niestandardowej aplikacji React, aby umożliwić użytkownikowi nawiązywanie połączenia audio/wideo na spotkaniu w usłudze Microsoft Teams. Dowiesz się więcej na temat różnych bloków konstrukcyjnych, których można użyć w celu zapewnienia tego scenariusza, i wykonasz praktyczne kroki umożliwiające zapoznanie się z różnymi zaangażowanymi usługami w chmurze firmy Microsoft.

Co utworzysz w tym samouczku

Omówienie rozwiązania aplikacji

Architektura scenariusza

Wymagania wstępne

Node LTS — środowisko Node LTS jest używane dla tego projektu
git
Visual Studio Code lub innego wybranego środowiska IDE.
rozszerzenie Azure Functions dla programu VS Code
Azure Functions Core Tools
Subskrypcja platformy Azure
Dzierżawa deweloperów platformy Microsoft 365
Konto usługi GitHub
Program Visual Studio w przypadku korzystania z wersji języka C# samouczka. Visual Studio Code można również użyć, jeśli jest to preferowane.

Technologie używane w tym samouczku obejmują

React
Usługi Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Twórca zasobu Azure Communication Services

Pozostały czas: 57 min

W tym ćwiczeniu utworzysz zasób Azure Communication Services (ACS) w Azure Portal.

Usługa ACS w Azure Portal

Aby rozpocząć pracę, wykonaj następujące zadania:

Odwiedź Azure Portal w przeglądarce i zaloguj się.
Wpisz usługi komunikacyjne na pasku wyszukiwania w górnej części strony i wybierz pozycję Usługi komunikacyjne z wyświetlonych opcji.
Wybierz Twórca na pasku narzędzi.
Wykonaj następujące zadania:
- Wybierz swoją subskrypcję platformy Azure.
- Wybierz grupę zasobów do użycia (utwórz nową, jeśli nie istnieje).
- Wprowadź nazwę zasobu USŁUGI ACS. Ta wartość musi być unikatowa.
- Wybierz lokalizację danych.
Wybierz pozycję Przejrzyj i Twórca, a następnie Twórca.
Po utworzeniu zasobu usługi ACS przejdź do niego i wybierz pozycję Ustawienia —> tożsamości & tokeny dostępu użytkowników.
Zaznacz pole wyboru Połączenie głosowe i wideo (VOIP).
Wybierz pozycję Generuj.
Skopiuj wartości tokenu Identity and User Access do pliku lokalnego. Wartości będą potrzebne w dalszej części tego ćwiczenia.
Wybierz pozycję Ustawienia —> Klucze i skopiuj wartość klucz podstawowy parametry połączenia do pliku lokalnego, w którym skopiowano wartości tożsamości użytkownika i tokenu.
Aby uruchomić aplikację, potrzebujesz linku spotkania usługi Teams. Przejdź do usługi Microsoft Teams, zaloguj się przy użyciu dzierżawy deweloperów platformy Microsoft 365 i wybierz opcję Kalendarz po lewej stronie.

Porada

Jeśli nie masz obecnie konta platformy Microsoft 365, możesz zarejestrować się w celu uzyskania subskrypcji programu deweloperów platformy Microsoft 365 . Jest ona bezpłatna przez 90 dni i będzie stale odnawiana, o ile używasz go do działań programistycznych. Jeśli masz subskrypcję programu Visual Studio Enterprise lub Professional , oba programy obejmują bezpłatną subskrypcję dla deweloperów platformy Microsoft 365, aktywną na okres życia subskrypcji programu Visual Studio.
Wybierz dowolną datę/godzinę w kalendarzu, dodaj tytuł spotkania, zaproś użytkownika z dzierżawy deweloperów platformy Microsoft 365 i wybierz pozycję Zapisz.
Wybierz nowe spotkanie dodane w kalendarzu i skopiuj link spotkania usługi Teams, który jest wyświetlany w tym samym pliku, w którym zapisano tożsamość użytkownika, token i parametry połączenia usługi ACS.
Teraz, gdy zasób usługi ACS jest skonfigurowany i masz link dołączania do spotkania w usłudze Teams, pobierzemy aplikację React i uruchomimy.

Integrowanie Azure Communication Services wywoływania w aplikacji React

Pozostały czas: 47 min

W tym ćwiczeniu dodasz interfejs użytkownika usługi ACS wywołujący złożony do aplikacji React, aby umożliwić wykonywanie połączeń audio/wideo z aplikacji niestandardowej do spotkania usługi Microsoft Teams.

Usługa ACS w usłudze React

Odwiedź witrynę GitHub i zaloguj się. Jeśli nie masz jeszcze konta usługi GitHub, możesz wybrać opcję Utwórz konto, aby je utworzyć.
Odwiedź repozytorium GitHub w chmurze firmy Microsoft.
Wybierz opcję Rozwidlenia , aby dodać repozytorium do żądanej organizacji/konta usługi GitHub.
Uruchom następujące polecenie, aby sklonować to repozytorium na maszynę. Zastąp <YOUR_ORG_NAME> nazwą organizacji/konta usługi GitHub.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Otwórz folder projektu samples/acs-to-teams-meeting w Visual Studio Code.
Rozwiń folder client/react .
Otwórz plik package.json w programie VS Code i zwróć uwagę na następujące pakiety ACS:
```
@azure/communication-common 
@azure/communication-react
```
Sprawdź dokładnie, czy masz zainstalowany program npm 10 lub nowszy, otwierając okno terminalu i uruchamiając następujące polecenie:
```
npm --version
```
Porada

Jeśli nie masz zainstalowanego programu npm 10 lub nowszego, możesz zaktualizować narzędzie npm do najnowszej wersji, uruchamiając polecenie npm install -g npm.
Otwórz okno terminalu i uruchom npm install polecenie w folderze react , aby zainstalować zależności aplikacji.
Otwórz plik App.tsx i poświęć chwilę na zapoznanie się z importami w górnej części pliku. Obsługują one importowanie symboli zabezpieczeń usługi ACS i połączeń audio/wideo, które będą używane w aplikacji.
```
import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';
```
Uwaga

Zobaczysz, jak CallComposite składnik jest używany w dalszej części tego ćwiczenia. Udostępnia ona podstawowe funkcje interfejsu użytkownika dla Azure Communication Services w celu umożliwienia nawiązywania połączenia audio/wideo z aplikacji na spotkaniu w usłudze Microsoft Teams.
App Znajdź składnik i wykonaj następujące zadania:
- Poświęć chwilę na zbadanie useState definicji w składniku.
- userIduseState Zastąp puste cudzysłowy funkcji wartością tożsamości użytkownika usługi ACS skopiowaną w poprzednim ćwiczeniu.
- tokenuseState Zastąp puste cudzysłowy funkcji wartością tokenu ACS skopiowaną w poprzednim ćwiczeniu.
- teamsMeetingLinkuseState Zastąp puste cudzysłowy funkcji wartością linku spotkania usługi Teams skopiowaną w poprzednim ćwiczeniu.
```
// Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```
Uwaga

W dalszej części tego samouczka zobaczysz, jak dynamicznie pobierać userIdwartości , tokeni teamsMeetingLink .
Poświęć chwilę na zapoznanie się z useMemo funkcjami w składniku App .
- Funkcja credentialuseMemo tworzy nowe AzureCommunicationTokenCredential wystąpienie, gdy token ma wartość.
- Funkcja callAdapterArgsuseMemo zwraca obiekt, który zawiera argumenty używane do nawiązywania wywołania audio/wideo. Zwróć uwagę, że w argumentach wywołań ACS są używane userIdwartości , credentiali teamsMeetingLink .
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Uwaga

useMemo Jest używany w tym scenariuszu, ponieważ chcemy AzureCommunicationTokenCredential , aby obiekt i args karty wywołań zostały utworzone raz, ponieważ wymagane parametry są przekazywane. Tutaj wyświetl dodatkowe szczegóły dotyczące useMemo.
Gdy element credentials i callAdapterArgs będzie gotowy, następujący wiersz obsługuje tworzenie adaptera wywołania ACS przy użyciu haka useAzureCommunicationCallAdapter React dostarczonego przez usługę ACS. Obiekt callAdapter będzie używany później w interfejsie użytkownika wywołującym składnik złożony.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Uwaga

Ponieważ useAzureCommunicationCallAdapter jest React hakiem, nie przypisze wartości do callAdapter momentu, gdy wartość będzie prawidłowacallAdapterArgs.

Wcześniej przypisano tożsamość użytkownika, token i łącze spotkania usługi Teams do wartości stanu w składniku App . To działa dobrze na razie, ale w późniejszym ćwiczeniu zobaczysz, jak dynamicznie pobierać te wartości. Ponieważ wcześniej ustawiono wartości, oznacz kod w funkcji jako useEffect komentarz, jak pokazano poniżej. Po uruchomieniu Azure Functions w następnych ćwiczeniach ponownie przejdziesz do tego kodu.

useEffect(() => {
    /* Commenting out for now

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

    */
}, []);

Znajdź następujący kod JSX. Używa on symbolu CallComposite zaimportowanego do renderowania interfejsu użytkownika używanego do nawiązywania połączenia audio/wideo z aplikacji React do spotkania w usłudze Teams. Eksplorowany callAdapter wcześniej element jest przekazywany do jego adapter właściwości w celu udostępnienia wymaganych argumentów.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Zapisz plik przed kontynuowaniem.
Uruchom polecenie npm start w oknie terminalu, aby uruchomić aplikację. Upewnij się, że uruchamiasz polecenie w folderze react .
Po utworzeniu aplikacji powinien zostać wyświetlony wywołujący interfejs użytkownika. Włącz wybieranie mikrofonu i kamery i zainicjuj połączenie. Powinno zostać wyświetlone, że znajdujesz się w poczekalni. Jeśli dołączysz do spotkania skonfigurowanego wcześniej w usłudze Microsoft Teams, możesz zezwolić gościowi na wejście na spotkanie.
Naciśnij klawisze Ctrl + C , aby zatrzymać aplikację. Teraz, po pomyślnym uruchomieniu, sprawdźmy, jak dynamicznie uzyskać tożsamość użytkownika i token usługi ACS, a następnie automatycznie utworzyć spotkanie w usłudze Microsoft Teams i zwrócić adres URL dołączania przy użyciu programu Microsoft Graph.

Dynamiczne Twórca spotkanie usługi Microsoft Teams przy użyciu programu Microsoft Graph

Pozostały czas: 37 min

W tym ćwiczeniu zautomatyzujesz proces tworzenia linku spotkania usługi Microsoft Teams i przekazywania do usługi ACS przy użyciu Azure Functions i programu Microsoft Graph.

spotkanie usługi Twórca Teams

Musisz utworzyć aplikację Tożsamość Microsoft Entra na potrzeby uwierzytelniania aplikacji demona. W tym kroku uwierzytelnianie będzie obsługiwane w tle przy użyciu poświadczeń aplikacji, a aplikacja Tożsamość Microsoft Entra będzie używać uprawnień aplikacji do nawiązywania wywołań usługi Microsoft interfejs Graph API. Program Microsoft Graph będzie używany do dynamicznego tworzenia spotkania w usłudze Microsoft Teams i zwracania adresu URL spotkania usługi Teams.
Wykonaj następujące kroki, aby utworzyć aplikację Tożsamość Microsoft Entra:
1. Przejdź do Azure Portal i wybierz pozycję Tożsamość Microsoft Entra.
2. Wybierz kartę Rejestracja aplikacji , a następnie pozycję + Nowa rejestracja.
3. Wypełnij szczegóły nowego formularza rejestracji aplikacji, jak pokazano poniżej, a następnie wybierz pozycję Zarejestruj:
  - Nazwa: Aplikacja międzyoperacyjna usługi ACS Teams
  - Obsługiwane typy kont: konta w dowolnym katalogu organizacyjnym (dowolny katalog Tożsamość Microsoft Entra — wiele dzierżawców) i osobiste konta Microsoft (np. Skype, Xbox)
  - Identyfikator URI przekierowania: pozostaw to pole puste
4. Po zarejestrowaniu aplikacji przejdź do pozycji Uprawnienia interfejsu API i wybierz pozycję + Dodaj uprawnienie.
5. Wybierz pozycję Microsoft Graph , a następnie pozycję Uprawnienia aplikacji.
6. Calendars.ReadWrite Wybierz uprawnienie, a następnie wybierz pozycję Dodaj.
7. Po dodaniu uprawnień wybierz pozycję Udziel zgody administratora dla <YOUR_ORGANIZATION_NAME>.
8. Przejdź do karty Certyfikaty & wpisy tajne , wybierz pozycję + Nowy klucz tajny klienta, a następnie wybierz pozycję Dodaj.
9. Skopiuj wartość wpisu tajnego do pliku lokalnego. Użyjesz wartości w dalszej części tego ćwiczenia.
10. Przejdź do karty Przegląd i skopiuj Application (client) ID wartości i Directory (tenant) ID do tego samego pliku lokalnego, który został użyty w poprzednim kroku.

Otwórz plik samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln w programie Visual Studio lub otwórz folder GraphACSFunctions w Visual Studio Code.
Przejdź do GraphACSFunctions projektu i utwórz local.settings.json plik z następującymi wartościami:
```
{
    "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"
    ]
}
```
- Użyj wartości skopiowanych do pliku lokalnego we wcześniejszym ćwiczeniu, aby zaktualizować TENANT_IDCLIENT_ID wartości i CLIENT_SECRET .
- Zdefiniuj USER_ID za pomocą identyfikatora użytkownika, który chcesz utworzyć spotkanie usługi Microsoft Teams.
Identyfikator użytkownika można uzyskać z Azure Portal.
- Zaloguj się przy użyciu konta administratora dzierżawy dewelopera platformy Microsoft 365.
- Wybierz Tożsamość Microsoft Entra
- Przejdź do karty Użytkownicy na pasku bocznym.
- Search nazwę użytkownika i wybierz ją, aby wyświetlić szczegóły użytkownika.
- Wewnątrz szczegółów Object ID użytkownika reprezentuje wartość User ID. Object ID Skopiuj wartość i użyj jej dla USER_ID wartości w local.settings.json.
Uwaga

ACS_CONNECTION_STRING zostanie użyty w następnym ćwiczeniu, aby nie trzeba było go jeszcze aktualizować.

Otwórz GraphACSFunctions.sln plik znajdujący się w folderze acs-to-teams-meeting/server/csharp i zwróć uwagę, że zawiera on następujące pakiety programu Microsoft Graph i tożsamości:

<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" />

Przejdź do Program.cs i zanotuj następujący kod w metodzie ConfigureServices :

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

Ten kod tworzy GraphServiceClient obiekt, który może służyć do wywoływania programu Microsoft Graph z Azure Functions. Jest to pojedynczy element i można go wstrzyknąć do innych klas.
Wywołania usługi Microsoft interfejs Graph API można wykonywać przy użyciu uprawnień tylko do aplikacji (takich jak Calendars.ReadWrite), przekazując ClientSecretCredential wartość do konstruktoraGraphServiceClient. Funkcja ClientSecretCredential używa Tenant IdClient Id wartości i Client Secret z aplikacji Tożsamość Microsoft Entra.

Otwórz pozycję Usługi/GraphService.cs.

Poświęć chwilę na zapoznanie się z CreateMeetingEventAsync metodą:

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 obiekty i IConfiguration są wstrzykiwane do konstruktora i przypisywane do pól.
Funkcja CreateMeetingAsync() publikuje dane w interfejsie API zdarzeń kalendarza programu Microsoft Graph, który dynamicznie tworzy zdarzenie w kalendarzu użytkownika i zwraca adres URL sprzężenia.

Otwórz TeamsMeetingFunctions.cs i poświęć chwilę na sprawdzenie konstruktora. Zwrócony GraphServiceClient wcześniej element jest wstrzykiwany i przypisywany do _graphService pola.
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Znajdź metodę Run :

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

Definiuje ona nazwę HttpTriggerTeamsUrl funkcji, którą można wywołać za pomocą żądania HTTP GET.
Wywołuje _graphService.CreateMeetingAsync()metodę , która tworzy nowe zdarzenie i zwraca adres URL sprzężenia.

Uruchom program, naciskając klawisz F5 w programie Visual Studio lub wybierając pozycję Debuguj —> Rozpocznij debugowanie z menu. Ta akcja uruchamia projekt Azure Functions i udostępnia ACSTokenFunction element do wywołania.

Uwaga

Jeśli używasz programu VS Code, możesz otworzyć okno terminalu w folderze GraphACSFunctions i uruchomić polecenie func start. Przyjęto założenie, że na maszynie zainstalowano narzędzia Azure Functions Core Tools.

Otwórz folder projektu samples/acs-to-teams-meeting/server/typescript w Visual Studio Code.
Twórca pliku local.settings.json z następującymi wartościami:
```
{
    "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"
    ]
}
```
- Użyj wartości skopiowanych do pliku lokalnego we wcześniejszym ćwiczeniu, aby zaktualizować TENANT_IDCLIENT_ID wartości i CLIENT_SECRET .
- Zdefiniuj USER_ID za pomocą identyfikatora użytkownika, który chcesz utworzyć spotkanie usługi Microsoft Teams.
Identyfikator użytkownika można uzyskać z Azure Portal.
- Zaloguj się przy użyciu konta administratora dzierżawy dewelopera platformy Microsoft 365.
- Wybierz Tożsamość Microsoft Entra,
- Przejdź do karty Użytkownicy na pasku bocznym.
- Search nazwę użytkownika i wybierz ją, aby wyświetlić szczegóły użytkownika.
- Wewnątrz szczegółów Object ID użytkownika reprezentuje wartość User ID. Object ID Skopiuj wartość i użyj jej dla USER_ID wartości w local.settings.json.
Uwaga

ACS_CONNECTION_STRING zostanie użyty w następnym ćwiczeniu, aby nie trzeba było go jeszcze aktualizować.
Otwórz plik package.json w programie VS Code i zwróć uwagę na następujące pakiety programu Microsoft Graph i tożsamości:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Otwórz okno terminalu w folderze typescript i uruchom npm install polecenie , aby zainstalować zależności aplikacji.
Otwórz plik Shared/graph.ts i poświęć chwilę na zapoznanie się z importami w górnej części pliku. Ten kod obsługuje importowanie symboli uwierzytelniania i klienta, które są używane w funkcji platformy Azure do wywoływania programu Microsoft Graph.
```
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';
```
Porada

Zobaczysz również importy z dateTimeFormat.ts , które są używane w dalszej części tego ćwiczenia. startDateTimeAsync i endDateTimeAsync są używane podczas tworzenia linku spotkania usługi Microsoft Teams, aby zdefiniować datę rozpoczęcia i datę zakończenia spotkania.
Poświęć chwilę na zbadanie clientSecretCredential i appGraphClient. Będą one używane w dalszej części procesu uwierzytelniania i podczas wywoływania interfejs Graph API firmy Microsoft:
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth Znajdź funkcję:

ClientSecretCredentialTenant IdClient Id używa wartości i Client Secret z aplikacji Tożsamość Microsoft Entra.
Obiekt authProvider jest definiowany jako aplikacja Tożsamość Microsoft Entra, która będzie uwierzytelniać się w tle i używać uprawnień tylko do aplikacji (takich jak Calendars.ReadWrite) do nawiązywania wywołań usługi Microsoft interfejs Graph API.

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

Poświęć chwilę na zapoznanie się z funkcją createNewMeetingAsync . Publikuje dane w interfejsie API zdarzeń kalendarza programu Microsoft Graph, który dynamicznie tworzy zdarzenie w kalendarzu użytkownika i zwraca nowe szczegóły zdarzenia:

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;

Przejdź do pozycji server/typescript/src/functions/httpTriggerTeamsUrl.ts i zapoznaj się z funkcją Wyzwalacz HTTP :

createNewMeetingAsync jest importowany z graph.ts. Obsługuje tworzenie i pobieranie nowych szczegółów zdarzenia.
userId element jest pobierany z local.settings.json wewnątrz funkcji Wyzwalacz HTTP. To pobieranie odbywa się przez uzyskanie dostępu do zmiennej środowiskowej USER_ID przy użyciu polecenia process.env.USER_ID.
Po wyzwoleniu funkcji wywołuje createNewMeetingAsync zdefiniowany identyfikator użytkownika i zwraca nowe szczegóły zdarzenia w teamMeetingLink parametrze .
Funkcja uzyskuje dostęp do adresu URL dołączania do spotkania usługi Teams przez wywołanie metody meeting.onlineMeeting.joinUrl i zwraca wartość w treści odpowiedzi.

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;

Użyj okna terminalu, aby uruchomić polecenie npm start w folderze samples/acs-video-to-teams-meeting/server/typescript , aby uruchomić funkcję lokalnie.

Wywoływanie funkcji platformy Azure z usługi React

Teraz, gdy httpTriggerTeamsUrl funkcja jest gotowa do użycia, wywołajmy ją z aplikacji React.
Rozwiń folder client/react .
Dodaj plik env do folderu z następującymi wartościami:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Te wartości zostaną przekazane do React podczas kompilacji, dzięki czemu można je łatwo zmienić zgodnie z potrzebami podczas procesu kompilacji.
Otwórz plik client/react/App.tsx w programie VS Code.
Znajdź zmienną teamsMeetingLink stanu w składniku. Usuń zakodowane na stałe łącze zespołów i zastąp je pustymi cudzysłowami:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco. Ta obsługa wywoływania funkcji platformy Azure, która została wcześniej wyświetlona, co powoduje utworzenie spotkania w usłudze Teams i zwrócenie linku dołączania do spotkania:

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

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

    }
    init();

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz okno terminalu w cd folderze *react i uruchom polecenie npm start , aby skompilować i uruchomić aplikację.
Po utworzeniu i załadowaniu aplikacji powinien zostać wyświetlony interfejs użytkownika wywołania usługi ACS, a następnie wywołanie spotkania usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj proces terminalu, naciskając klawisze Ctrl + C w oknie terminalu.
Zatrzymaj projekt Azure Functions.

Uwaga

Odwiedź dokumentację Azure Communication Services, aby dowiedzieć się więcej na temat rozszerzania spotkań w usłudze Microsoft Teams na inne sposoby.

Dynamiczne Twórca tożsamości i tokenu Azure Communication Services

Pozostały czas: 27 min

W tym ćwiczeniu dowiesz się, jak dynamicznie pobierać tożsamość użytkownika i wartości tokenów z Azure Communication Services przy użyciu Azure Functions. Po pobraniu wartości zostaną przekazane do złożonego interfejsu użytkownika usługi ACS, aby umożliwić klientowi wywołanie.

Twórca tożsamości i tokenu ACS

C#
TypeScript

Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametry połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

Otwórz Startup.cs w programie Visual Studio i zapoznaj się z drugim AddSingleton() wywołaniem ConfigureServices() metody .

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

Wywołanie AddSingleton() tworzy CommunicationIdentityClient obiekt przy użyciu ACS_CONNECTION_STRING wartości z local.settings.json.
Otwórz ACSTokenFunction.cs i znajdź definicje konstruktora i pola.
- Zdefiniowane jest pole o nazwie Scopes , które zawiera CommunicationTokenScope.VoIP zakres. Ten zakres służy do tworzenia tokenu dostępu dla wywołania wideo.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Pojedyncze CommunicationIdentityClient wystąpienie utworzone w Startup.cs jest wstrzykiwane do konstruktora i przypisywane do _tokenClient pola.
```
private readonly CommunicationIdentityClient _tokenClient;

public ACSTokenFunction(CommunicationIdentityClient tokenClient)
{
    _tokenClient = tokenClient;
}
```

Zapoznaj się z Run() metodą w 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;
}

Definiuje funkcję o nazwie HttpTriggerAcsToken , którą można wywołać za pomocą żądania HTTP GET.
Nowy użytkownik usługi ACS jest tworzony przez wywołanie _tokenClient.CreateUserAsync() metody .
Token dostępu używany do wywołań wideo jest tworzony przez wywołanie _tokenClient. GetTokenAsync() metody .
Identyfikator użytkownika i token są zwracane z funkcji jako obiekt JSON.

Uruchom program, naciskając klawisz F5 w programie Visual Studio lub wybierając pozycję Debuguj —> Rozpocznij debugowanie z menu. Spowoduje to uruchomienie projektu Azure Functions i udostępnienie ACSTokenFunction go do wywołania.

Uwaga

Jeśli używasz programu VS Code, możesz otworzyć okno terminalu w folderze GraphACSFunctions i uruchomić polecenie func start. Przyjęto założenie, że na maszynie zainstalowano narzędzia Azure Functions Core Tools.
Teraz, gdy Azure Functions są uruchomione lokalnie, klient musi mieć możliwość ich wywołania, aby uzyskać tożsamość użytkownika i wartości tokenu usługi ACS.
Otwórz plik samples/acs-to-teams-meeting/client/react/App.tsx w edytorze.
userId Znajdź zmienne stanu i token w składniku. Usuń zapisane na stałe wartości i zastąp je pustymi cudzysłowami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości i tokenu użytkownika usługi 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();

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz okno terminalu i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu usługi ACS powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS i możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj aplikację React, naciskając klawisze Ctrl + C w oknie terminalu.
Zatrzymaj projekt Azure Functions.
Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu Visual Studio Code:
- Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi Visual Studio Code).
- Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
- Wybierz pozycję Synchronizuj zmiany.

Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametry połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

Otwórz plik server/typescript/src/functions/httpTriggerAcsToken.ts w Visual Studio Code. Ma on następujący kod:

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;

Funkcja wykonuje następujące zadania:
- Importy CommunicationIdentityClient , które będą używane do tworzenia tożsamości użytkownika i tokenu.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Pobiera parametry połączenia ACS ze zmiennej środowiskowej o nazwie ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Uwaga

Jest to wartość parametry połączenia dodana wcześniej do pliku local.settings.json.
- Tworzy nowe CommunicationIdentityClient wystąpienie i przekazuje do niego parametry połączenia ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Tworzy użytkownika usługi ACS i pobiera token protokołu VOICE Over IP.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Wysyła wartości userId i token z powrotem do obiektu wywołującego.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Przejdź do folderu server/typescript w oknie terminalu i uruchom polecenie npm start.
Teraz, gdy Azure Functions są uruchomione lokalnie, klient musi mieć możliwość ich wywołania, aby uzyskać tożsamość użytkownika i wartości tokenu usługi ACS.
Otwórz plik client/react/App.tsx w edytorze.
userId Znajdź zmienne stanu i token w składniku. Usuń zapisane na stałe wartości i zastąp je pustymi cudzysłowami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości i tokenu użytkownika usługi 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();

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz oddzielny terminal i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu usługi ACS powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS i możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj oba procesy terminalu (React i Azure Functions), naciskając klawisze Ctrl + C.
Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu Visual Studio Code:
- Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi Visual Studio Code).
- Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
- Wybierz pozycję Synchronizuj zmiany.

Wdrażanie aplikacji w usłudze Azure Functions i Azure Container Apps

Pozostały czas: 17 min

Ważne

Oprócz wymagań wstępnych wymienionych w tym samouczku należy również zainstalować następujące narzędzia na maszynie, aby ukończyć to ćwiczenie.

Interfejs wiersza polecenia platformy Azure
Jeśli używasz programu VS Code, zainstaluj rozszerzenie Azure Functions

W tym ćwiczeniu dowiesz się, jak wdrożyć funkcje programu Microsoft Graph i usług ACS omówione we wcześniejszych ćwiczeniach w celu Azure Functions. Utworzysz również obraz kontenera i wdrożysz go w usłudze Azure Container Apps.

Azure Container Apps

Wdrażanie w usłudze Azure Functions

C#
TypeScript

Uwaga

Ta sekcja używa programu Visual Studio do publikowania funkcji języka C# na platformie Azure. Jeśli wolisz używać Visual Studio Code, możesz postępować zgodnie z instrukcjami w Twórca funkcji języka C# na platformie Azure przy użyciu Visual Studio Code szybki start.

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Otwórz projekt w programie Visual Studio.
Kliknij prawym przyciskiem myszy GraphACSFunctions projekt i wybierz pozycję Publikuj.
Wybierz pozycję Azure w sekcji docelowej, a następnie kliknij przycisk Dalej.
Wybierz pozycję Aplikacja funkcji platformy Azure (Windows), a następnie kliknij przycisk Dalej.
Wybierz swoją subskrypcję, a następnie wybierz pozycję + Twórca Nowy.
Wprowadź następujące informacje:
- Nazwa funkcji: wymagana jest globalnie unikatowa nazwa. Przykład: acsFunctions<YOUR_LAST_NAME>.
- Subskrypcja: wybierz subskrypcję.
- Grupa zasobów: wybierz grupę zasobów utworzoną wcześniej w tym samouczku lub możesz również utworzyć nową.
- Plan hostingu: plan zużycia.
- Lokalizacja: wybierz region, do którego chcesz wdrożyć.
- Azure Storage: Twórca nowy. (Możesz również wybrać istniejące konto magazynu).
- Azure Insights: Twórca nowy. (Możesz również wybrać istniejące konto magazynu).
Uwaga

Wymagana jest globalnie unikatowa nazwa. Możesz ustawić nazwę bardziej unikatową, dodając liczbę lub nazwisko na końcu nazwy.
Po utworzeniu aplikacji funkcji platformy Azure zostanie wyświetlony ekran potwierdzenia. Upewnij się, że wybrano opcję Uruchom z pakietu , a następnie wybierz pozycję Zakończ.
Wybierz pozycję Publikuj, aby wdrożyć funkcję na platformie Azure.
Po wdrożeniu funkcji na platformie Azure przejdź do Azure Portal i wybierz utworzoną aplikację funkcji.
Skopiuj adres URL wdrożonej funkcji. Użyjesz wartości w dalszej części tego ćwiczenia.
Wybierz pozycję Ustawienia —> konfiguracja w menu po lewej stronie.
Wybierz przycisk + Nowe ustawienie aplikacji i dodaj następujące klucze i wartości w ustawieniach aplikacji. Możesz ponownie traktować te wartości z local.settings.json projektu GraphACSFunctions .
```
# 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>
```
Wybierz przycisk Zapisz , aby zapisać ustawienia.
Na koniec musisz włączyć mechanizm CORS (współużytkowanie zasobów między źródłami) dla aplikacji funkcji, aby interfejsy API aplikacji funkcji były dostępne spoza domeny. Wybierz pozycję Ustawienia —> CORS w menu po lewej stronie.
Wprowadź * (dostępne z dowolnych domen) w polu tekstowym Dozwolone źródła , a następnie wybierz przycisk Zapisz .

Zacznijmy od wdrożenia kodu funkcji w programie VS Code w celu Azure Functions.

Otwórz folder projektu server/typescript .
Powinien zostać uruchomiony npm install folder node_modules w katalogu głównym projektu. Jeśli nie, otwórz okno polecenia i uruchom polecenie npm install , aby zainstalować zależności.
Otwórz paletę poleceń programu VS Code (Shift+Cmd+P na komputerze Mac | Shift+Ctrl+P w systemie Windows) i wybierz pozycję Azure Functions: Twórca Aplikacja funkcji na platformie Azure.

Uwaga

Jeśli ta opcja nie jest widoczna, upewnij się, że masz rozszerzenie Azure Functions zainstalowane w programie VS Code.
Zostanie wyświetlony monit o wprowadzenie następujących informacji:
- Nazwa subskrypcji platformy Azure.
- Nazwa funkcji: acsFunctions<YOUR_LAST_NAME>.
Uwaga

Wymagana jest globalnie unikatowa nazwa. Możesz ustawić nazwę bardziej unikatową, dodając liczbę lub nazwisko na końcu nazwy.
- Stos środowiska uruchomieniowego — wybierz najnowszą wersję Node.js LTS .
- Region (wybierz dowolny region).
Po utworzeniu aplikacji funkcji platformy Azure zostanie wyświetlony komunikat o wyświetlaniu szczegółów.
Wstecz do palety poleceń w programie VS Code i wybierz pozycję Azure Functions: Wdróż w aplikacji funkcji. Zostanie wyświetlony monit o wybranie subskrypcji i utworzonej wcześniej nazwy aplikacji funkcji.
Po wdrożeniu funkcji na platformie Azure wykonaj następujące czynności:
- Wybierz rozszerzenie platformy Azure w programie VS Code (kliknij ikonę platformy Azure na pasku bocznym).
- Rozwiń subskrypcję.
- Rozwiń aplikację funkcji.
- Kliknij prawym przyciskiem myszy funkcję i wybierz pozycję Przeglądaj witrynę internetową. Przed kontynuowaniem upewnij się, że aplikacja funkcji działa poprawnie.
Skopiuj domenę funkcji platformy Azure do pliku lokalnego. Użyjesz wartości w dalszej części tego ćwiczenia.

Wdrażanie w usłudze Azure Container Apps

Pierwszym zadaniem, które wykonasz, jest utworzenie nowego zasobu Azure Container Registry (ACR). Po utworzeniu rejestru utworzysz obraz i wypchniesz go do rejestru.
Otwórz okno polecenia i uruchom następujące polecenie, aby zalogować się do subskrypcji platformy Azure:
```
az login
```

Dodaj następujące zmienne powłoki zastępujące wartości symboli zastępczych zgodnie z potrzebami. <Dodaj GITHUB_USERNAME> jako małą wartość i zastąp domenę Azure Functions wartością <AZURE_FUNCTIONS_DOMAIN> (uwzględnij https:// wartość w domenie).

Bash
Program PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Twórca nowy zasób Azure Container Registry, uruchamiając następujące polecenie:

Bash
Program PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

Otwórz plik client/react/Dockerfile w edytorze i zwróć uwagę, że są wykonywane następujące zadania:
- Aplikacja React jest kompilowana i przypisywana do etapu kompilacji.
- Serwer nginx jest skonfigurowany, a dane wyjściowe etapu kompilacji są kopiowane do obrazu serwera nginx.

Skompiluj obraz kontenera na platformie Azure, uruchamiając następujące polecenie z katalogu głównego folderu client/react . Zastąp <YOUR_FUNCTIONS_DOMAIN> domeną Azure Functions skopiowaną do pliku lokalnego wcześniej w tym ćwiczeniu.

Bash
Program PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Uruchom następujące polecenie, aby wyświetlić listę obrazów w rejestrze. Powinien zostać wyświetlony nowy obraz.
```
az acr repository list --name $ACR_NAME --output table
```
Po wdrożeniu obrazu należy utworzyć aplikację kontenera platformy Azure, która może uruchomić kontener.
Odwiedź Azure Portal w przeglądarce i zaloguj się.
Wpisz aplikacje kontenera na górnym pasku wyszukiwania i wybierz pozycję Container Apps z wyświetlonych opcji.
Wybierz pozycję Twórca na pasku narzędzi.

Uwaga

Mimo że używasz Azure Portal, można również utworzyć aplikację kontenera przy użyciu interfejsu wiersza polecenia platformy Azure. Aby uzyskać więcej informacji, zobacz Szybki start: wdrażanie pierwszej aplikacji kontenera. Zobaczysz przykład użycia interfejsu wiersza polecenia platformy Azure na końcu tego ćwiczenia.
Wykonaj następujące zadania:
- Wybierz subskrypcję.
- Wybierz grupę zasobów do użycia (w razie potrzeby utwórz nową). Jeśli chcesz, możesz użyć tej samej grupy zasobów, która była używana dla zasobu ACS. Skopiuj nazwę grupy zasobów do tego samego pliku lokalnego, w którym zapisano domenę Azure Functions.
- Wprowadź nazwę aplikacji kontenera acs-to-teams-meeting.
- Wybierz region.
- Wybierz pozycję Twórca nowy w sekcji Środowisko usługi Container Apps.
- Wprowadź nazwę środowiskaacs-to-teams-meeting-env.
- Wybierz przycisk Utwórz.
- Wybierz pozycję Dalej: Ustawienia >aplikacji .
Wprowadź następujące wartości na ekranie aplikacji kontenera Twórca:
- Usuń zaznaczenie pola wyboru Użyj obrazu szybkiego startu .
- Nazwa: acs-to-teams-meeting
- Źródło obrazu: Azure Container Registry
- Rejestr: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Obraz: acs-to-teams-meeting
- Tag obrazu: latest
- Procesor i pamięć: 0,25 rdzeni procesora CPU, pamięć -.5 Gi
W sekcji Ustawienia ruchu przychodzącego aplikacji wykonaj następujące czynności:
- Zaznacz pole wyboru Włączone .
- Wybierz przycisk radiowy Akceptowanie ruchu z dowolnego miejsca .
Spowoduje to utworzenie punktu wejścia (ruchu przychodzącego) dla aplikacji React i zezwolenie na jej wywoływanie z dowolnego miejsca. Usługa Azure Container Apps przekierowuje cały ruch do protokołu HTTPS.
- Port docelowy: 80

Wybierz pozycję Przejrzyj i utwórz. Po zakończeniu walidacji wybierz przycisk Twórca.

Jeśli wystąpi błąd, może to być spowodowane tym, że środowisko aplikacji kontenera jest nieaktywne zbyt długo. Najprostszym rozwiązaniem będzie ponowne przejście przez proces tworzenia aplikacji kontenera. Alternatywnie możesz uruchomić następujące polecenie, aby utworzyć aplikację kontenera przy użyciu interfejsu wiersza polecenia platformy Azure:

Bash
Program PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Po zakończeniu wdrażania aplikacji kontenera przejdź do niej w Azure Portal i wybierz adres URL aplikacji na ekranie Przegląd, aby wyświetlić aplikację działającą w kontenerze nginx.

Share via

Połączenia audio/wideo z aplikacji niestandardowej do spotkania usługi Teams

Co utworzysz w tym samouczku

Omówienie rozwiązania aplikacji

Wymagania wstępne

Technologie używane w tym samouczku obejmują

Twórca zasobu Azure Communication Services

Integrowanie Azure Communication Services wywoływania w aplikacji React

Dynamiczne Twórca spotkanie usługi Microsoft Teams przy użyciu programu Microsoft Graph

Tworzenie pliku local.settings.json

Wywoływanie funkcji platformy Azure z usługi React

Dynamiczne Twórca tożsamości i tokenu Azure Communication Services

Wdrażanie aplikacji w usłudze Azure Functions i Azure Container Apps

Wdrażanie w usłudze Azure Functions

Wdrażanie w usłudze Azure Container Apps

Gratulacje!

Ukończono ten samouczek

Opinia