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

2025-06-12

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

创建 ACS 标识和令牌

C#
TypeScript

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

在 Visual Studio 中打开Startup.cs，在AddSingleton()方法中找出第二个ConfigureServices()调用。

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()使用 CommunicationIdentityClientACS_CONNECTION_STRING中的值创建对象。
打开 ACSTokenFunction.cs 并找到构造函数和字段定义。
- 已定义一个名为Scopes的字段，该字段包含CommunicationTokenScope.VoIP作用域。此范围用于创建视频通话的访问令牌。
```
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 呼叫界面，你可以加入由 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 }
};
```
在终端窗口中前往 server/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();

}, []);

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

下一步

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

通过

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

下一步

反馈

其他资源