從自定義應用程式到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 StudioCode。

本教學課程中使用的技術包括

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 組織/帳戶。
執行下列命令，將此存放庫複製到您的電腦。以您的 GitHub 組織/帳戶名稱取代 <YOUR_ORG_NAME> 。
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
在 Visual Studio Code 中開啟 samples/acs-to-teams-meeting 項目資料夾。
展開 client/react 資料夾。
在 VS Code 中開啟package.json 檔案，並記下下列 ACS 套件：
```
@azure/communication-common 
@azure/communication-react
```
請開啟終端機視窗並執行下列命令，以仔細檢查您是否已安裝 npm 10 或更高版本：
```
npm --version
```
提示

如果您沒有 安裝 npm 10 或更高版本，您可以執行 npm install -g npm，將 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、 token和 teamsMeetingLink 值。
花點時間探索 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 應用程式會使用應用程式許可權來呼叫圖形 API Microsoft。 Microsoft Graph 將用來動態建立Microsoft Teams 會議，並傳回 Teams 會議 URL。
執行下列步驟來建立Microsoft Entra ID 應用程式：
1. 移至 [Azure 入口網站]，然後選取 [Microsoft Entra ID]。
2. 選取 [ 應用程式註冊] 索引標籤，後面接著 [ + 新增註冊]。
3. 填寫新的應用程式註冊窗體詳細數據，如下所示，然後選取 [ 註冊]：
  - 名稱： ACS Teams Interop 應用程式
  - 支援的帳戶類型： 任何組織目錄中的帳戶（任何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_ID、 CLIENT_ID 和 CLIENT_SECRET 值。
- 使用 USER_ID 您想要建立Microsoft Teams 會議的使用者標識碼來定義。
您可以從 Azure 入口網站取得使用者識別碼。
- 使用您的Microsoft 365 開發人員租用戶系統管理員帳戶登入。
- 選取 Microsoft Entra ID
- 瀏覽至提要列上的 [ 使用者] 索引標籤。
- 搜尋您的使用者名稱，然後選取它以查看使用者詳細數據。
- 在使用者詳細資料內， Object ID 表示 User ID。複製值Object ID，並將其用於 USER_ID local.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。它是單一的，可以插入其他類別。
您可以藉由將值傳遞ClientSecretCredential至GraphServiceClient建構函式，以使用僅限應用程式許可權（例如 Calendars.ReadWrite）進行Microsoft Graph API 呼叫。 ClientSecretCredential會使用 Tenant Id來自 Microsoft Entra ID 應用程式的和 Client 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，以動態方式在使用者的行事曆中建立事件，並傳回聯結 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_ID、 CLIENT_ID 和 CLIENT_SECRET 值。
- 使用 USER_ID 您想要建立Microsoft Teams 會議的使用者標識碼來定義。
您可以從 Azure 入口網站取得使用者識別碼。
- 使用您的Microsoft 365 開發人員租用戶系統管理員帳戶登入。
- 選取 [Microsoft項目標識符]
- 瀏覽至提要列上的 [ 使用者] 索引標籤。
- 搜尋您的使用者名稱，然後選取它以查看使用者詳細數據。
- 在使用者詳細資料內， Object ID 表示 User ID。複製值Object ID，並將其用於 USER_ID local.settings.json 中的值。
注意

ACS_CONNECTION_STRING 將會在下一個練習中使用，因此您還不需要更新它。
在 VS Code 中開啟package.json檔案，並注意包含下列Microsoft Graph 和身分識別套件：
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
在 typescript 資料夾中開啟終端機視窗，然後執行 npm install 命令以安裝應用程式相依性。
開啟 Shared/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 Graph API 時使用：
```
let clientSecretCredential;
let appGraphClient;
```

找出函式 ensureGraphForAppOnlyAuth ：

ClientSecretCredentialTenant Id會使用來自 Microsoft Entra ID 應用程式的和 Client Id Client Secret 值。
物件 authProvider 定義為Microsoft Entra ID 應用程式，該應用程式將在背景進行驗證，並使用僅限應用程式的許可權（例如） Calendars.ReadWrite進行圖形 API 呼叫Microsoft。

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，以動態方式在使用者的行事曆中建立事件，並傳回新的事件詳細數據：

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環境變數來完成。
觸發函式時，它會使用定義的使用者標識元呼叫 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 應用程式呼叫它。
展開 client/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_STRING來自 local.settings.json 的值來CommunicationIdentityClient建立物件。
開啟 ACSTokenFunction.cs 並找出建構函式和欄位定義。
- 已定義名為 Scopes 的欄位，其中包含 CommunicationTokenScope.VoIP 範圍。此範圍可用來建立視訊通話的存取令牌。
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- CommunicationIdentityClientStartup.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() 存取令牌。
用戶標識碼和令牌會以 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 使用者並取得 Voice Over 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 Container Apps

剩餘 17 分鐘

重要

除了本教學課程所列的必要條件之外，您還需要在計算機上安裝下列工具，才能完成此練習。

Azure CLI
如果您使用 VS Code，請安裝 Azure Functions 擴充功能

在本練習中，您將瞭解如何將先前練習中所討論的 Microsoft Graph 和 ACS 函式部署到 Azure Functions。您也會建置容器映射，並將其部署至 Azure Container Apps。

Azure 容器應用程式

部署至 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 函式應用程式] [Windows]，然後按 [ 下一步]。
選取您的訂用帳戶，然後選取 [+ 新建]。
輸入下列資訊：
- 函式名稱：需要全域唯一的名稱。範例： acsFunctions<YOUR_LAST_NAME>。
- 訂用帳戶︰選取您的訂用帳戶。
- 資源群組：選取您稍早在本教學課程中建立的資源群組，也可以建立新的資源群組。
- 主控方案：取用方案。
- 位置：選取您想要部署的區域。
- Azure 儲存體：建立新的。（您也可以選取現有的記憶體帳戶。
- Azure Insights：建立新的深入解析。（您也可以選取現有的記憶體帳戶。
注意

需要全域唯一的名稱。您可以將數位或姓氏新增至名稱結尾，讓名稱更具唯一性。
建立 Azure 函式應用程式之後，您會看到確認畫面。確定已選取 [ 從套件 執行] 選項，然後選取 [ 完成]。
選取 [發佈 ] 將函式部署至 Azure。
將函式部署至 Azure 之後，請移至 Azure 入口網站，然後選取您建立的函式應用程式。
複製您所部署函式的 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 函式應用程式之後，您會看到有關檢視詳細資料的訊息。
返回 VS Code 中的命令板，然後選取 [Azure Functions：部署至函式應用程式]。系統會要求您選取您的訂用帳戶，以及您稍早建立的函式應用程式名稱。
將函式部署至 Azure 之後，請執行下列動作：
- 在 VS Code 中選取 Azure 擴充功能（按兩下提要欄中的 Azure 圖示）。
- 展開您的訂用帳戶。
- 展開您的函式應用程式。
- 以滑鼠右鍵按下函式，然後選取 [瀏覽網站]。在繼續之前，請確定函式應用程式正常運作。
將 Azure 函式網域複製到本機檔案。您稍後會在本練習中使用值。

部署至 Azure 容器應用程式

您將執行的第一項工作是建立新的 Azure Container Registry （ACR）資源。建立登錄之後，您將建置映射並將其推送至登錄。
開啟指令視窗，然後執行下列命令來登入您的 Azure 訂用帳戶：
```
az login
```

視需要新增下列殼層變數，以取代佔位元的值。將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 Container Registry 資源：

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 Container Registry
- 登錄：<YOUR_ACR_REGISTRY_NAME.azurecr.io>
- 圖片： acs-to-teams-meeting
- 影像卷標：最新
- CPU 和記憶體： 0.25 CPU 核心,-.5 Gi 記憶體
在 [ 應用程式輸入設定 ] 區段中，執行下列動作：
- 選取 [啟用] 核取方塊。
- 選取 [ 從任何地方 接受流量] 單選按鈕。
這會為您的 React 應用程式建立進入點（輸入），並允許從任何地方呼叫它。 Azure Container Apps 會將所有流量重新導向至 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 容器中執行的應用程式！

共用方式為

從自定義應用程式到Teams會議的音訊/視訊通話

您將在本教學課程中建置的內容

應用程式解決方案概觀

必要條件

本教學課程中使用的技術包括

建立 Azure 通訊服務資源

將 Azure 通訊服務呼叫整合到 React 應用程式中

使用 Microsoft Graph 動態建立 Microsoft Teams 會議

建立 local.settings.json 檔案

從 React 呼叫 Azure 函式

動態建立 Azure 通訊服務身分識別和令牌

將應用程式部署至 Azure Functions 和 Azure Container Apps

部署至 Azure Functions

部署至 Azure 容器應用程式

恭喜！

您已完成本教學課程

意見反應

共用方式為

從自定義應用程式到Teams會議的音訊/視訊通話

您將在本教學課程中建置的內容

應用程式解決方案概觀

必要條件

本教學課程中使用的技術包括

建立 Azure 通訊服務 資源

將 Azure 通訊服務呼叫整合到 React 應用程式中

使用 Microsoft Graph 動態建立 Microsoft Teams 會議

建立 local.settings.json 檔案

從 React 呼叫 Azure 函式

動態建立 Azure 通訊服務 身分識別和令牌

將應用程式部署至 Azure Functions 和 Azure Container Apps

部署至 Azure Functions

部署至 Azure 容器應用程式

恭喜！

您已完成本教學課程

意見反應

建立 Azure 通訊服務資源

動態建立 Azure 通訊服務身分識別和令牌