从自定义应用到 Teams 会议的音频/视频通话

项目
Developer (中级)
59 分钟可完成

级别：中等

在本教程中，你将了解如何在自定义 React 应用程序中使用Azure 通信服务，以允许用户在 Microsoft Teams 会议中进行音频/视频呼叫。你将了解可用于使此方案成为可能的不同构建基块，并提供动手步骤来指导你完成所涉及的不同Microsoft云服务。

本教程将生成的内容

应用程序解决方案概述

ACS 音频/视频解决方案

先决条件

节点 LTS - 节点 LTS 用于此项目
git
Visual Studio Code 或其他所选 IDE。
适用于 VS Code 的 Azure Functions 扩展
Azure Functions Core Tools
Azure 订阅
Microsoft 365 开发人员租户
GitHub 帐户
如果使用本教程的 C# 版本，Visual Studio 。如果首选，也可以使用 Visual Studio Code。

本教程中使用的技术包括

React
Azure 通信服务
Azure Functions
Microsoft Graph
Microsoft Teams

创建Azure 通信服务资源

剩余 57 分钟

在本练习中，你将在Azure 门户中创建Azure 通信服务（ACS）资源。

Azure 门户中的 ACS

若要开始，请执行以下任务：

在浏览器中访问Azure 门户并登录。
在页面顶部的搜索栏中键入通信服务，然后从出现的选项中选择通信服务。
在工具栏中选择“ 创建 ”。
执行以下任务：
- 选择 Azure 订阅。
- 选择要使用的资源组（如果不存在资源组）。
- 输入 ACS 资源名称。它必须是唯一值。
- 选择数据位置。
选择“ 查看 + 创建 ”，然后选择 “创建”。
创建 ACS 资源后，导航到该资源，然后选择“设置”-“>标识”和“用户访问令牌”。
选中“语音和视频呼叫”复选框。
然后选择“生成” 。
将标识和 用户访问令牌 值复制到本地文件。在本练习的后面部分，你将需要这些值。
选择“设置”-“>密钥”并将主密钥连接字符串值复制到复制用户标识和令牌值的本地文件中。
若要运行应用程序，需要 Teams 会议链接。转到 Microsoft Teams，使用 Microsoft 365 开发人员租户登录，然后选择左侧的 “日历 ”选项。

提示

如果当前没有 Microsoft 365 帐户，可以注册 Microsoft 365 开发人员计划订阅。它 是免费的 90 天，只要你将其用于开发活动，就会持续续订。如果你有 Visual Studio Enterprise 或 Professional 订阅，这两个计划都包括免费的 Microsoft 365 开发人员订阅，在 Visual Studio 订阅中处于活动状态。
在日历上选择任何日期/时间，为会议添加标题，从 Microsoft 365 开发人员租户邀请用户，然后选择“ 保存”。
选择在日历中添加的新会议，并将显示的 Teams 会议链接复制到存储 ACS 用户标识、令牌和连接字符串的同一文件中。
设置 ACS 资源并拥有 Teams 会议加入链接后，让我们启动并运行 React 应用程序。

将Azure 通信服务调用集成到 React 应用中

剩余 47 分钟

在本练习中，你将将 ACS UI 呼叫复合添加到 React 应用中，以便将自定义应用的音频/视频呼叫添加到 Microsoft Teams 会议。

React 中的 ACS

访问 GitHub 并登录。如果还没有 GitHub 帐户，可以选择 “注册 ”选项来创建一个帐户。
访问 Microsoft Cloud GitHub 存储库。
选择分支选项，将存储库添加到所需的 GitHub 组织/帐户。
运行以下命令，将此存储库克隆到计算机。将YOUR_ORG_NAME>替换为 <GitHub 组织/帐户名称。
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
在 Visual Studio Code 中打开 samples/acs-to-teams-meeting 项目文件夹。
展开 客户端/react 文件夹。
在 VS Code 中打开package.json 文件，并记下以下 ACS 包包括：
```
@azure/communication-common 
@azure/communication-react
```
通过打开终端窗口并运行以下命令，仔细检查是否已 安装 npm 10 或更高版本：
```
npm --version
```
提示

如果没有 安装 npm 10 或更高版本，可以通过运行 npm install -g npmnpm 将 npm 更新到最新版本。
打开终端窗口，并在 react 文件夹中运行npm install命令以安装应用程序依赖项。
打开 App.tsx ，花点时间浏览文件顶部的导入。这些句柄导入将在应用中使用的 ACS 安全和音频/视频呼叫符号。
```
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';
```
注意

你将在本练习的后面部分了解如何 CallComposite 使用该组件。它为Azure 通信服务提供了核心 UI 功能，以便从应用将音频/视频呼叫连接到 Microsoft Teams 会议。
App找到组件并执行以下任务：
- 花点时间检查 useState 组件中的定义。
- 将userIduseState函数的空引号替换为在上一练习中复制的 ACS 用户标识值。
- 将tokenuseState函数的空引号替换为在上一练习中复制的 ACS 令牌值。
- 将teamsMeetingLinkuseState函数的空引号替换为在上一练习中复制的 Teams 会议链接值。
```
// 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>('');
```
注意

本教程稍后将介绍如何动态检索userId和tokenteamsMeetingLink值。
花点时间浏览 useMemo 组件中的 App 函数。
- 该credentialuseMemo函数在AzureCommunicationTokenCredential令牌具有值后创建新实例。
- 该callAdapterArgsuseMemo函数返回一个对象，该对象具有用于进行音频/视频呼叫的参数。请注意，使用 userIdACS 调用参数中的值 credential和 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]);
```
注意

useMemo 用于此方案，因为我们只希望 AzureCommunicationTokenCredential 将对象和调用适配器参数创建一次，因为传入所需的参数。在此处查看有关 useMemo 的其他详细信息。
credentials callAdapterArgs准备就绪后，以下行将处理使用 useAzureCommunicationCallAdapter ACS 提供的 React 挂钩创建 ACS 调用适配器。稍后 callAdapter 将在 UI 中调用复合组件时使用该对象。
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
注意

由于useAzureCommunicationCallAdapter是 React 挂钩，因此在值有效之前callAdapterArgs，它不会为其赋值callAdapter。

之前，你已将用户标识、令牌和 Teams 会议链接分配给组件中的 App 状态值。这适用于现在，但在后面的练习中，你将了解如何动态检索这些值。由于前面设置了值，因此注释掉函数中的 useEffect 代码，如下所示。在下一练习中运行 Azure Functions 后，你将重新访问此代码。

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

    */
}, []);

找到以下 JSX 代码。它使用 CallComposite 导入的符号来呈现用于从 React 应用进行音频/视频呼叫的用户界面到 Teams 会议。 callAdapter前面浏览的项将传递给其adapter属性，以提供所需的参数。

if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}

保存文件，然后再继续。
在终端窗口中运行 npm start 以运行应用程序。请确保在 react 文件夹中运行命令。
应用程序生成后，应会看到显示调用 UI。启用选择麦克风和相机并启动呼叫。你应该看到你被安置在候车室里。如果加入之前在 Microsoft Teams 中设置的会议，则可以允许来宾输入会议。
按 Ctrl + C 停止应用程序。现在，你已成功运行它，接下来让我们探讨如何动态获取 ACS 用户标识和令牌，并自动创建 Microsoft Teams 会议，并使用 Microsoft Graph 返回加入 URL。

使用 Microsoft Graph 动态创建Microsoft Teams 会议

剩余 37 分钟

在本练习中，你将使用 Azure Functions 和 Microsoft Graph 自动创建 Microsoft Teams 会议链接并传递给 ACS 的过程。

创建 Teams 会议

需要为守护程序应用身份验证创建Microsoft Entra ID 应用。在此步骤中，将使用应用凭据在后台处理身份验证，Microsoft Entra ID 应用将使用应用程序权限进行Microsoft图形 API 调用。 Microsoft Graph 将用于动态创建 Microsoft Teams 会议并返回 Teams 会议 URL。
执行以下步骤创建Microsoft Entra ID 应用：
1. 转到Azure 门户并选择Microsoft Entra ID。
2. 选择“应用注册”选项卡，后跟“+ 新建注册”。
3. 填写新的应用注册表单详细信息，如下所示，然后选择“ 注册” ：
  - 名称： ACS Teams 互操作应用
  - 支持的帐户类型： 任何组织目录中的帐户（任何Microsoft Entra ID 目录 - 多租户）和个人Microsoft帐户（例如 Skype、Xbox）
  - 重定向 URI：将此保留为空
4. 注册应用后，转到 API 权限 并选择“ + 添加权限”。
5. 选择 Microsoft Graph ， 后跟应用程序权限。
6. 选择权限 Calendars.ReadWrite ，然后选择“ 添加”。
7. 添加权限后，为YOUR_ORGANIZATION_NAME>选择“授予管理员许可<”。
8. 转到 “证书和机密 ”选项卡，选择“ + 新建客户端密码”，然后选择“ 添加”。
9. 将机密的值复制到本地文件中。在本练习的后面部分，你将使用该值。
10. 转到 “概述 ”选项卡，将 Application (client) ID 和 Directory (tenant) ID 值复制到上一步中使用的同一本地文件中。

在 samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Visual Studio 中打开或打开 Visual Studio Code 中的 GraphACSFunctions 文件夹。
转到 GraphACSFunctions 项目并创建具有以下 local.settings.json 值的文件：
```
{
    "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"
    ]
}
```
- 使用在前面的练习中复制到本地文件中的值来更新TENANT_IDCLIENT_ID和CLIENT_SECRET值。
- 使用要创建 Microsoft Teams 会议的用户 ID 进行定义 USER_ID 。
可以从Azure 门户获取用户 ID。
- 使用 Microsoft 365 开发人员租户管理员帐户登录。
- 选择 Microsoft Entra ID
- 导航到 侧栏上的“用户 ”选项卡。
- 搜索用户名并选择它以查看用户详细信息。
- 在用户详细信息中，Object ID表示。User ID 复制该值Object ID并将其用于USER_IDlocal.settings.json中的值。
注意

ACS_CONNECTION_STRING 将在下一个练习中使用，因此你尚不需要更新它。

打开 GraphACSFunctions.sln 位于 acs-to-teams-meeting/server/csharp 文件夹中，请注意它包含以下Microsoft Graph 和标识包：

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

转到 Program.cs ，并在方法中 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();
}

此代码创建可用于 GraphServiceClient 从 Azure Functions 调用 Microsoft Graph 的对象。它是一个单一实例，可以注入到其他类中。
可以通过将值GraphServiceClient传递给ClientSecretCredential构造函数，使用仅限应用的权限（如 Calendars.ReadWrite）进行Microsoft图形 API 调用。 Client Id Tenant Id使用ClientSecretCredentialMicrosoft Entra ID 应用中的值和Client Secret值。

打开 Services/GraphService.cs。

花点时间探索 CreateMeetingEventAsync 方法：

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 和 IConfiguration 对象将注入构造函数并分配给字段。
该 CreateMeetingAsync() 函数将数据发布到 Microsoft Graph 日历事件 API，该 API 在用户的日历中动态创建事件并返回联接 URL。

打开 TeamsMeetingFunctions.cs 并花点时间检查它的构造函数。 GraphServiceClient前面查看的字段将注入并分配给_graphService该字段。
```
private readonly IGraphService _graphService;

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

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

它定义可以使用 HTTP GET 请求调用的 HttpTriggerTeamsUrl 函数名称。
它调用 _graphService.CreateMeetingAsync()，这将创建新事件并返回联接 URL。

在 Visual Studio 中按 F5 或选择“ 调试”来运行程序 -> 从菜单中选择“开始调试 ”。此操作将启动 Azure Functions 项目并使其 ACSTokenFunction 可供调用。

注意

如果使用 VS Code，可以在 GraphACSFunctions 文件夹中打开终端窗口并运行func start。这假定已在计算机上安装了 Azure Functions Core Tools 。

在 Visual Studio Code 中打开 samples/acs-to-teams-meeting/server/typescript 项目文件夹。
使用以下值创建 local.settings.json 文件：
```
{
    "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"
    ]
}
```
- 使用在前面的练习中复制到本地文件中的值来更新TENANT_IDCLIENT_ID和CLIENT_SECRET值。
- 使用要创建 Microsoft Teams 会议的用户 ID 进行定义 USER_ID 。
可以从Azure 门户获取用户 ID。
- 使用 Microsoft 365 开发人员租户管理员帐户登录。
- 选择 Microsoft条目 ID，
- 导航到 侧栏上的“用户 ”选项卡。
- 搜索用户名并选择它以查看用户详细信息。
- 在用户详细信息中，Object ID表示。User ID 复制该值Object ID并将其用于USER_IDlocal.settings.json中的值。
注意

ACS_CONNECTION_STRING 将在下一个练习中使用，因此你尚不需要更新它。
在 VS Code 中打开package.json 文件，请注意包括以下Microsoft Graph 和标识包：
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
在 typescript 文件夹中打开终端窗口，并运行npm install命令以安装应用程序依赖项。
打开 “共享/graph.ts ”，花点时间浏览文件顶部的导入。此代码处理在 Azure 函数中用于调用 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';
```
提示

你还将看到从 本练习稍后使用的dateTimeFormat.ts 导入。 startDateTimeAsync 创建 endDateTimeAsync Microsoft Teams 会议链接以定义会议的开始日期和结束日期时使用。
花点时间检查 clientSecretCredential 和 appGraphClient。稍后会在身份验证过程中使用它们，并在调用Microsoft图形 API 时使用：
```
let clientSecretCredential;
let appGraphClient;
```

找到函数 ensureGraphForAppOnlyAuth ：

ClientSecretCredentialTenant IdClient Id使用Microsoft Entra ID 应用中的值和Client Secret值。
该 authProvider 对象定义为Microsoft Entra ID 应用，该应用将在后台进行身份验证，并使用仅限应用的权限（例如 Calendars.ReadWrite）进行Microsoft图形 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
        });
    }
}

花点时间探索函数 createNewMeetingAsync 。它将数据发布到 Microsoft Graph 日历事件 API，该 API 在用户的日历中动态创建事件并返回新的事件详细信息：

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;

转到 服务器/typescript/src/functions/httpTriggerTeamsUrl.ts 并浏览 Http 触发器 函数：

createNewMeetingAsync 是从 graph.ts 导入的。它处理创建和检索新事件详细信息。
userId 从 Http 触发器函数内的local.settings.json 检索。此检索是通过使用process.env.USER_ID访问环境变量来完成的USER_ID。
触发函数时，它会使用定义的用户 ID 调用 createNewMeetingAsync 并返回参数中的 teamMeetingLink 新事件详细信息。
该函数通过调用 meeting.onlineMeeting.joinUrl 并返回响应正文中的值来访问 Teams 会议加入 URL。

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;

使用终端窗口在 samples/acs-video-to-teams-meeting/server/typescript 文件夹中运行npm start，以在本地运行函数。

从 React 调用 Azure 函数

现在，函数 httpTriggerTeamsUrl 已准备好使用，接下来让我们从 React 应用调用它。
展开 客户端/react 文件夹。
使用以下值将 .env 文件添加到文件夹中：
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
这些值将在生成时传递到 React 中，以便在生成过程中根据需要轻松更改它们。
在 VS Code 中打开 client/react/App.tsx 文件。
在 teamsMeetingLink 组件中找到状态变量。删除硬编码的团队链接，并将其替换为空引号：
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

找到函数 useEffect 并将其更改为如下所示。这将处理调用之前查看的 Azure 函数，该函数创建 Teams 会议并返回会议加入链接：

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

}, []);

保存文件，然后再继续。
打开终端窗口， cd 进入 *react 文件夹，然后运行 npm start 以生成和运行应用程序。
应用程序生成并加载后，应会看到显示 ACS 调用 UI，然后可以调用由 Microsoft Graph 动态创建的 Teams 会议。
通过在终端窗口中输入 Ctrl + C 来停止终端进程。
停止 Azure Functions 项目。

注意

请访问Azure 通信服务文档，详细了解如何以其他方式扩展 Microsoft Teams 会议。

动态创建Azure 通信服务标识和令牌

剩余 27 分钟

在本练习中，你将了解如何使用 Azure Functions 从Azure 通信服务动态检索用户标识和令牌值。检索到后，这些值将传递到 ACS UI 复合，使客户能够调用。

创建 ACS 标识和令牌

C#
TypeScript

打开local.settings.json并使用前面练习中保存的 ACS 连接字符串更新ACS_CONNECTION_STRING值。

在 Visual Studio 中打开Startup.cs并浏览方法中的ConfigureServices()第二个AddSingleton()调用。

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

调用AddSingleton()使用ACS_CONNECTION_STRINGlocal.settings.json中的值创建对象CommunicationIdentityClient。
打开 ACSTokenFunction.cs 并找到构造函数和字段定义。
- 已定义一个包含作用域的CommunicationTokenScope.VoIP字段Scopes。此范围用于创建视频通话的访问令牌。
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- CommunicationIdentityClient在Startup.cs中创建的单一实例将注入构造函数并分配给_tokenClient该字段。
```
private readonly CommunicationIdentityClient _tokenClient;

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

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

它定义一个名为该函数的 HttpTriggerAcsToken 函数，可以使用 HTTP GET 请求进行调用。
通过调用 _tokenClient.CreateUserAsync() 该方法创建新的 ACS 用户。
用于视频调用的访问令牌是通过调用 _tokenClient. GetTokenAsync() 该方法创建的。
用户 ID 和令牌作为 JSON 对象从函数返回。

在 Visual Studio 中按 F5 或选择“ 调试”来运行程序 -> 从菜单中选择“开始调试 ”。这将启动 Azure Functions 项目并使其 ACSTokenFunction 可供调用。

注意

如果使用 VS Code，可以在 GraphACSFunctions 文件夹中打开终端窗口并运行func start。这假定已在计算机上安装了 Azure Functions Core Tools 。
现在，Azure Functions 在本地运行，客户端需要能够调用它们来获取 ACS 用户标识和令牌值。
在编辑器中打开 samples/acs-to-teams-meeting/client/react/App.tsx 文件。
userId在组件中找到状态变量和token状态变量。删除硬编码的值，并将其替换为空引号：
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

找到该 useEffect 函数并将其更改为如下所示，以便调用 Azure 函数以检索 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();

}, []);

保存文件，然后再继续。
打开终端窗口并在文件夹中运行npm startreact。生成并加载后，应会看到显示的 ACS 呼叫 UI，你可以调用由 Microsoft Graph 动态创建的 Teams 会议。
在终端窗口中按 Ctrl + C 停止 React 应用。
停止 Azure Functions 项目。
使用 Visual Studio Code 提交 git 更改并将其推送到 GitHub 存储库：
- 选择 “源代码管理 ”图标（Visual Studio Code 工具栏中的第三个向下图标）。
- 输入提交消息并选择“提交”。
- 选择“ 同步更改”。

打开local.settings.json并使用前面练习中保存的 ACS 连接字符串更新ACS_CONNECTION_STRING值。

在 Visual Studio Code 中打开 服务器/typescript/src/functions/httpTriggerAcsToken.ts 。它具有以下代码：

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;

该函数执行以下任务：
- CommunicationIdentityClient导入将用于创建用户标识和令牌的导入。
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- 从名为 ACS_CONNECTION_STRING.. 的环境变量中获取 ACS 连接字符串。
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
注意

这是前面添加到local.settings.json文件中的连接字符串值。
- 创建一个新CommunicationIdentityClient实例并将 ACS 连接字符串传递给它。
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- 创建 ACS 用户并获取 IP 语音令牌。
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- 将 userId 和令牌值发送回调用方。
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
转到 终端窗口中的服务器/typescript 文件夹并运行 npm start。
现在，Azure Functions 在本地运行，客户端需要能够调用它们来获取 ACS 用户标识和令牌值。
在编辑器中打开 client/react/App.tsx 文件。
userId在组件中找到状态变量和token状态变量。删除硬编码的值，并将其替换为空引号：
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

找到该 useEffect 函数并将其更改为如下所示，以便调用 Azure 函数以检索 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();

}, []);

保存文件，然后再继续。
打开单独的终端并在 react 文件夹中运行。npm start 生成并加载后，应会看到显示的 ACS 呼叫 UI，你可以调用由 Microsoft Graph 动态创建的 Teams 会议。
通过选择 Ctrl + C 来停止终端进程（React 和 Azure Functions）。
使用 Visual Studio Code 提交 git 更改并将其推送到 GitHub 存储库：
- 选择 “源代码管理 ”图标（Visual Studio Code 工具栏中的第三个向下图标）。
- 输入提交消息并选择“提交”。
- 选择“ 同步更改”。

将应用部署到 Azure Functions 和 Azure 容器应用

剩余 17 分钟

重要

除了本教程列出的先决条件之外，还需要在计算机上安装以下工具才能完成本练习。

Azure CLI
如果使用 VS Code，请安装 Azure Functions 扩展

在本练习中，你将了解如何将前面练习中讨论的 Microsoft Graph 和 ACS 函数部署到 Azure Functions。你还将生成容器映像并将其部署到 Azure 容器应用。

Azure Container Apps

部署到 Azure Functions

C#
TypeScript

注意

本部分使用 Visual Studio 将 C# 函数发布到 Azure。如果想要使用 Visual Studio Code，可以使用 Visual Studio Code 快速入门按照在 Azure 中创建 C# 函数中的说明进行操作。

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln在 Visual Studio 中打开项目。
右键单击 GraphACSFunctions 项目，然后选择“ 发布”。
在目标部分中选择 Azure ，然后单击“ 下一步”。
选择 Azure Function App （Windows），然后单击“ 下一步”。
选择订阅，然后选择“ + 新建”。
输入以下信息：
- 函数名称：需要全局唯一的名称。示例： acsFunctions<YOUR_LAST_NAME>。
- 订阅：选择自己的订阅。
- 资源组：选择在本教程前面创建的资源组，也可以创建新的资源组。
- 托管计划：消耗计划。
- 位置：选择要部署到的区域。
- Azure 存储：新建一个。（还可以选择现有的存储帐户。
- Azure Insights：创建新的见解。（还可以选择现有的存储帐户。
注意

需要全局唯一名称。可以通过向名称末尾添加数字或姓氏来使名称更加唯一。
创建 Azure Function App 后，会看到确认屏幕。确保 已选择“从包 运行”选项，然后选择“ 完成”。
选择“发布”以将函数部署到 Azure。
将函数部署到 Azure 后，转到Azure 门户并选择创建的 Function App。
复制所部署函数的 URL。在本练习的后面部分，你将使用该值。
选择 “设置”--> 左侧菜单中的配置 。

选择“+ 新建应用程序设置”按钮，并在应用程序设置中添加以下键和值。可以从项目中检索这些值local.settings.jsonGraphACSFunctions。

# 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>

选择 “保存 ”按钮以保存设置。
最后，需要为函数应用启用 CORS（跨域资源共享），使函数应用的 API 可从域外部访问。选择 “设置”--> 左侧菜单中的 CORS 。
在“允许来源”文本框中输入*（可从任何域访问），然后选择“保存”按钮。

让我们开始使用 VS Code 将函数代码部署到 Azure Functions。

打开服务器/typescript 项目文件夹。
你应该已经运行 npm install 并看到 项目根目录中的 node_modules文件夹。如果没有，请打开命令窗口并运行 npm install 以安装依赖项。
打开 VS Code 命令托盘（Mac 上的 Shift+Cmd+P | Windows 上的 Shift+Ctrl+P ），然后选择 “Azure Functions：在 Azure 中创建函数应用”。

注意

如果未看到此选项，请确保已在 VS Code 中安装 Azure Functions 扩展。
系统会提示输入以下信息：
- Azure 订阅名称。
- 函数名称： acsFunctions<YOUR_LAST_NAME>。
注意

需要全局唯一名称。可以通过向名称末尾添加数字或姓氏来使名称更加唯一。
- 运行时堆栈 - 选择最新的 Node.js LTS 版本。
- 区域（选择所需的任何区域）。
创建 Azure Function App 后，你将看到一条有关查看详细信息的消息。
返回到 VS Code 中的命令托盘，然后选择 “Azure Functions：部署到 Function App”。系统将要求你选择订阅和之前创建的 Function App 名称。
将函数部署到 Azure 后，请执行以下操作：
- 在 VS Code 中选择 Azure 扩展（单击边栏中的 Azure 图标）。
- 展开订阅。
- 展开函数应用。
- 右键单击该函数并选择“ 浏览网站”。在继续操作之前，请确保函数应用正常工作。
将 Azure Function 域复制到本地文件。在本练习的后面部分，你将使用该值。

部署到 Azure 容器应用

要执行的第一项任务是创建新的Azure 容器注册表（ACR）资源。创建注册表后，你将生成映像并将其推送到注册表。
打开命令窗口并运行以下命令以登录到 Azure 订阅：
```
az login
```

根据需要添加以下 shell 变量，替换占位符的值。将GITHUB_USERNAME>添加为小写值，并将 Azure Functions 域<替换为AZURE_FUNCTIONS_DOMAIN>值（包括https://域值）。<

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

运行以下命令创建新的Azure 容器注册表资源：

Bash
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

在 编辑器中打开客户端/react/Dockerfile 文件，并注意到已执行以下任务：
- React 应用程序生成并分配给生成阶段。
- 配置 nginx 服务器，生成阶段的输出将复制到 nginx 服务器映像中。

通过从客户端/react 文件夹的根目录运行以下命令，在 Azure 中生成容器映像。将YOUR_FUNCTIONS_DOMAIN>替换为<本练习前面复制到本地文件的 Azure Functions 域。

Bash
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 .

运行以下命令列出注册表中的映像。应会看到新映像已列出。
```
az acr repository list --name $ACR_NAME --output table
```
部署映像后，需要创建可以运行容器的 Azure 容器应用。
在浏览器中访问Azure 门户并登录。
在顶部搜索栏中键入 容器应用 ，然后从显示的选项中选择 “容器应用 ”。
在工具栏中选择“ 创建 ”。

注意

虽然使用的是Azure 门户，但也可以使用 Azure CLI 创建容器应用。有关详细信息，请参阅快速入门：部署第一个容器应用。你将看到一个示例，说明如何在本练习结束时使用 Azure CLI。
执行以下任务：
- 选择订阅。
- 选择要使用的资源组（根据需要创建新资源组）。如果需要，可以使用用于 ACS 资源的同一资源组。将资源组名称复制到存储 Azure Functions 域的同一本地文件。
- 输入 acs-to-teams-meeting 的容器应用名称。
- 选择区域。
- 在“容器应用环境”部分选择“新建”。
- 输入 acs-to-teams-meeting-env 的环境名称。
- 选择“创建”按钮。
- 选择“ 下一步：应用设置 >”。
在“创建容器应用”屏幕中输入以下值：
- 取消 选中“使用快速入门映像 ”复选框。
- 名称： acs-to-teams-meeting
- 图像源：Azure 容器注册表
- 注册表：<YOUR_ACR_REGISTRY_NAME.azurecr.io>
- 图像： acs-to-teams-meeting
- 图像标记：最新
- CPU 和内存： 0.25 个 CPU 核心，-.5 Gi 内存
在 “应用程序入口设置 ”部分中，执行以下操作：
- 选中“已启用”复选框。
- 选择“接受来自任意位置的流量”单选按钮。
这将为 React 应用程序创建入口点（入口），并允许从任何位置调用它。 Azure 容器应用将所有流量重定向到 HTTPS。
- 目标端口： 80

选择“查看 + 创建”。验证通过后，选择“创建”按钮。

如果收到错误，则可能是因为容器应用环境长时间处于非活动状态。最简单的解决方案是完成再次创建容器应用的过程。或者，可以运行以下命令，使用 Azure CLI 创建容器应用：

Bash
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

容器应用部署完成后，在Azure 门户中导航到它，然后选择“概述”屏幕上的应用程序 URL 以查看 nginx 容器中运行的应用程序！

通过