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

Create Azure 通訊服務資源

剩餘 57 分鐘

在此練習中，您將在 Azure 入口網站中建立 Azure 通訊服務 (ACS) 資源。

Azure 入口網站中的ACS

若要開始使用，請執行下列工作：

瀏覽瀏覽器中的 Azure 入口網站並登入。
在頁面頂端的搜尋列中輸入通訊服務，然後從出現的選項中選取 [通訊服務]。
選取工具列中的 Create。
執行下列工作：
- 選取 Azure 訂閱。
- 如果資源群組不存在) ，請選取要使用的資源群組 (建立新的資源群組。
- 輸入 ACS 資源名稱。它必須是唯一值。
- 選取數據位置。
選取 [檢閱 + Create]，然後選取 [Create]。
建立 ACS 資源之後，請流覽至該資源，然後選取 [ 設定] --> [身分識別] & [使用者存取令牌]。
選取 [ 語音和視訊通話 (VOIP) ] 複選框。
選取 [產生]。
將 身分識別 和 使用者存取令牌 值複製到本機檔案。您稍後在本練習中將需要這些值。
選取 [設定] --> [金鑰] 並將 [主要金鑰] 連接字串值複製到您複製使用者身分識別和令牌值的本機檔案。
若要執行應用程式，您需要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 元件中的定義。
- 以您在上一個練習中複製的 ACS 使用者識別值取代函 userIduseState 式的空引號。
- 以您在上一個練習中複製的 ACS 令牌值取代函 tokenuseState 式的空引號。
- 以您在上一個練習中複製的 Teams 會議連結值取代函 teamsMeetingLinkuseState 式的空白引號。
```
// 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 的其他詳細數據。

一旦準備就緒credentialscallAdapterArgs，下列程式代碼行會使用 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 動態 Create Microsoft Teams 會議

剩餘 37 分鐘

在此練習中，您將自動化建立 Microsoft Teams 會議連結的程式，並使用 Azure Functions 和 Microsoft Graph 傳遞至 ACS。

Create 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 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 值。
- 使用您想要建立 Microsoft Teams 會議的使用者識別碼進行定義 USER_ID 。
您可以從 Azure 入口網站取得使用者識別碼。
- 使用您的 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。它是單一，可以插入其他類別。
您可以藉由將值傳遞ClientSecretCredential至GraphServiceClient建構函式，使用僅限應用程式的許可權 (，例如 Calendars.ReadWrite) 進行 Microsoft 圖形 API 呼叫。會ClientSecretCredential使用 Tenant Id來自 Microsoft Entra ID 應用程式的、 Client Id 和 Client Secret 值。

開啟 [服務/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 項目資料夾。
使用下列值 Create 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 值。
- 使用您想要建立 Microsoft Teams 會議的使用者識別碼進行定義 USER_ID 。
您可以從 Azure 入口網站取得使用者識別碼。
- 使用您的 Microsoft 365 開發人員租用戶系統管理員帳戶登入。
- 選取 Microsoft Entra 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 命令來安裝應用程式相依性。
開啟 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 圖形 API 時使用：
```
let clientSecretCredential;
let appGraphClient;
```

找出函式 ensureGraphForAppOnlyAuth ：

ClientSecretCredentialTenant Id會使用來自 Microsoft Entra ID 應用程式的、 Client 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，以動態方式在使用者的行事曆中建立事件，並傳回新的事件詳細數據：

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 會議。

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

剩餘 27 分鐘

在此練習中，您將瞭解如何使用 Azure Functions，從 Azure 通訊服務動態擷取使用者身分識別和令牌值。擷取之後，值會傳遞至ACS UI複合，以讓客戶進行呼叫。

Create 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()會CommunicationIdentityClient使用ACS_CONNECTION_STRING來自 local.settings.json 的值來建立物件。
開啟 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 中開啟 server/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 中 Create C# 函式中的指示。

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln在 Visual Studio 中開啟專案。
以滑鼠右鍵按兩下項目， GraphACSFunctions 然後選取 [ 發佈]。
在目標區段中選取 [Azure ]，然後按 [ 下一步]。
選取 [Azure 函式應用程式 (Windows) ]，然後按 [ 下一步]。
選取您的訂用帳戶，然後選取 [+ Create 新增]。
輸入下列資訊：
- 函式名稱：需要全域唯一的名稱。範例： acsFunctions<YOUR_LAST_NAME>。
- 訂用帳戶：選取您的訂用帳戶。
- 資源群組：選取您稍早在本教學課程中建立的資源群組，也可以建立新的群組。
- 主控方案：取用方案。
- 位置：選取您想要部署的區域。
- Azure 記憶體：Create 新的記憶體。 (您也可以選取現有的記憶體帳戶。)
- Azure Insights：Create 新的見解。 (您也可以選取現有的記憶體帳戶。)
注意

需要全域唯一名稱。您可以將數位或姓氏新增至名稱結尾，讓名稱更是唯一的。
建立 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。

開啟 server/typescript 項目資料夾。
您應該已經執行 npm install 並檢視專案根目錄中 的node_modules 資料夾。如果沒有，請開啟命令視窗並執行 npm install 以安裝相依性。
在 Mac 上開啟 VS Code 命令板 (Shift+Cmd+P |Windows) 上的 Shift+Ctrl+P，然後選取 [Azure Functions：在 Azure 中 Create 函式應用程式]。

注意

如果您沒有看到此選項，請確定您已在 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>"

執行下列命令，以 Create 新的 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

在編輯器中開啟 client/react/Dockerfile 檔案，並注意到已執行下列工作：
- React 應用程式會建置並指派給建置階段。
- 已設定 nginx 伺服器，並將建置階段的輸出複製到 nginx 伺服器映像中。

從 client/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 入口網站並登入。
在頂端搜尋列中輸入 容器應用程式 ，然後從出現的選項中選取 [容器應用程式 ]。
選取工具列中的 Create。

注意

雖然您使用的是 Azure 入口網站，但也可以使用 Azure CLI 來建立容器應用程式。如需詳細資訊，請參閱快速入門：部署您的第一個容器應用程式。您也會在此練習結束時看到如何使用 Azure CLI 的範例。
執行下列工作：
- 選取您的訂閱。
- 選取資源群組，以視需要 (建立新的資源群組) 。如果您想要的話，您可以使用您用於 ACS 資源的相同資源群組。將資源組名複製到您儲存 Azure Functions 網域的相同本機檔案。
- 輸入 acs-to-teams-meeting 的容器應用程式名稱。
- 選取區域。
- 在 [容器應用程式環境] 區段中選取 [Create 新的 ]。
- 輸入 acs-to-teams-meeting-env 的環境名稱。
- 選取 [建立] 按鈕。
- 選取 [下一步：應用程式設定 >]。
在 Create [容器應用程式] 畫面中輸入下列值：
- 取消選取 [ 使用快速入門映射 ] 複選框。
- 名稱： 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

選取 [檢閱 + 建立]。驗證通過之後，請選取 [Create] 按鈕。

如果您收到錯誤，可能是因為容器應用程式環境太長而處於非使用中狀態。最簡單的解決方案是再次完成建立容器應用程式的程式。或者，您也可以執行下列命令，以使用 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會議的音訊/視訊通話

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

應用程式解決方案概觀

必要條件

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

Create Azure 通訊服務資源

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

使用 Microsoft Graph 動態 Create Microsoft Teams 會議

建立 local.settings.json 檔案

從 React呼叫 Azure 函式

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

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

部署至 Azure Functions

部署至 Azure 容器應用程式

恭喜！

您已完成本教學課程

意見反應

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

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

應用程式解決方案概觀

必要條件

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

Create Azure 通訊服務 資源

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

使用 Microsoft Graph 動態 Create Microsoft Teams 會議

建立 local.settings.json 檔案

從 React呼叫 Azure 函式

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

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

部署至 Azure Functions

部署至 Azure 容器應用程式

恭喜！

您已完成本教學課程

意見反應

Create Azure 通訊服務資源

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

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