你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：使用 Azure 应用服务和 Azure OpenAI 构建聊天机器人（.NET）

2025-05-20

在本教程中，你将通过将 Azure OpenAI 与 Java Spring Boot 应用程序集成并将其部署到 Azure 应用服务来构建智能 AI 应用程序。你将创建一个 Razor 页面，它将聊天完成请求发送到 Azure OpneAI 中的模型，并将响应流式传输到页面。

显示 Azure 应用服务中运行的聊天机器人的屏幕截图。

本教程中，您将学习如何：

创建 Azure OpenAI 资源并部署语言模型
使用 Azure OpenAI 生成 Blazor 应用程序
将应用程序部署到 Azure 应用服务
在开发环境和 Azure 中实现无密码身份验证

先决条件

具有活动订阅的 Azure 帐户
用于使用 GitHub Codespaces 的 GitHub 帐户

1.创建 Azure OpenAI 资源

在本部分中，你将使用 GitHub Codespaces 通过 Azure CLI 创建 Azure OpenAI 资源。

转到 GitHub Codespaces 并使用 GitHub 帐户登录。
通过 GitHub 查找空白模板，然后选择“ 使用此模板 创建新的空白 Codespace”。

在 Codespace 终端中，安装 Azure CLI：

curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

请登录到 Azure 帐户：
```
az login
```
按照终端中的说明进行身份验证。
为资源组名称、Azure OpenAI 服务名称和位置设置环境变量：
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
重要

该区域至关重要，因为它与所选模型的区域可用性相关联。模型可用性和部署类型可用性因区域而异。本教程使用的 gpt-4o-mini，在标准部署类型下的 eastus2 中可用。如果部署到其他区域，则此模型可能不可用，或者可能需要不同的层。在更改区域之前，请参阅 “模型摘要”表和区域可用性，以验证首选区域中的模型支持。

使用自定义域创建资源组和 Azure OpenAI 资源，然后添加 gpt-4o-mini 模型：

# Resource group
az group create --name $RESOURCE_GROUP --___location $LOCATION
# Azure OpenAI resource
az cognitiveservices account create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --___location $LOCATION \
  --custom-___domain $OPENAI_SERVICE_NAME \
  --kind OpenAI \
  --sku s0
# gpt-4o-mini model
az cognitiveservices account deployment create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --deployment-name gpt-4o-mini \
  --model-name gpt-4o-mini \
  --model-version 2024-07-18 \
  --model-format OpenAI \
  --sku-name Standard \
  --sku-capacity 1
# Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
az role assignment create \
  --assignee $(az ad signed-in-user show --query id -o tsv) \
  --role "Cognitive Services OpenAI User" \
  --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME

有了 Azure OpenAI 资源后，你将创建一个 Web 应用程序以与之交互。

2.创建并设置 Blazor Web 应用

在本部分中，你将使用 .NET CLI 创建新的 Blazor Web 应用程序。

在 Codespace 终端中，创建新的 Blazor 应用，并尝试首次运行它。
```
dotnet new blazor -o .
dotnet run
```
GitHub Codespaces 中应会显示一条通知，指示该应用在特定端口上可用。选择“ 在浏览器中打开 ”以在新浏览器选项卡中启动应用。
返回 Codespace 终端，使用 Ctrl+C 停止应用。

安装使用 Azure OpenAI 所需的 NuGet 包：

dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity

使用以下代码打开 Components/Pages/Home.razor 并替换其内容，以便通过 Azure OpenAI 进行简单的聊天完成流调用：

@page "/"
@rendermode InteractiveServer
@using Azure.AI.OpenAI
@using Azure.Identity
@using OpenAI.Chat
@inject Microsoft.Extensions.Configuration.IConfiguration _config

<h3>Azure OpenAI Chat</h3>
<div class="mb-3 d-flex align-items-center" style="margin:auto;">
    <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
    <button class="btn btn-primary" @onclick="SendMessage">Send</button>
</div>
<div class="card p-3" style="margin:auto;">
    @if (!string.IsNullOrEmpty(aiResponse))
    {
        <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
    }
</div>

@code {
    private string? userMessage;
    private string? aiResponse;

    private async Task SendMessage()
    {
        if (string.IsNullOrWhiteSpace(userMessage)) return;

        // Initialize the Azure OpenAI client
        var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
        var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
        var chatClient = client.GetChatClient("gpt-4o-mini");

        aiResponse = string.Empty;
        StateHasChanged();

        // Create a chat completion streaming request
        var chatUpdates = chatClient.CompleteChatStreamingAsync(
            [
                new UserChatMessage(userMessage)
            ]);

            await foreach(var chatUpdate in chatUpdates)
            {
                // Update the UI with the streaming response
                foreach(var contentPart in chatUpdate.ContentUpdate)
            {
                aiResponse += contentPart.Text;
                StateHasChanged();
            }
        }
    }
}

在终端中，获取 OpenAI 端点：

az cognitiveservices account show \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --query properties.endpoint \
  --output tsv

再次运行应用，并在其中添加 AZURE_OPENAI_ENDPOINT 及其在 CLI 输出中的值：
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
```
选择“ 在浏览器中打开 ”以在新浏览器选项卡中启动应用。
在文本框中键入一条消息，然后选择“发送”，并为应用提供几秒钟以使用 Azure OpenAI 的消息进行答复。

应用程序使用 DefaultAzureCredential，它会自动使用您通过 Azure CLI 登录的用户来获取身份验证令牌。本教程稍后将 Blazor 应用部署到 Azure 应用服务，并将其配置为使用托管标识安全地连接到 Azure OpenAI 资源。代码中的相同的DefaultAzureCredential 能够检测托管标识并将其用于身份验证。无需额外的代码。

3.部署到 Azure 应用服务并配置 OpenAI 连接

应用在本地工作后，让我们将其部署到 Azure 应用服务，并使用托管标识设置到 Azure OpenAI 的服务连接。

首先，使用 Azure CLI 命令 az webapp up将应用部署到 Azure 应用服务。此命令将创建新的 Web 应用并将代码部署到其中：
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --___location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
该命令可能需要几分钟时间才能完成。它将在 OpenAI 资源所在的同一资源组中创建新的 Web 应用。
部署应用后，使用托管标识在 Web 应用与 Azure OpenAI 资源之间创建服务连接：
```
az webapp connection create cognitiveservices \
  --resource-group $RESOURCE_GROUP \
  --name $APPSERVICE_NAME \
  --target-resource-group $RESOURCE_GROUP \
  --account $OPENAI_SERVICE_NAME
  --connection azure-openai \
  --system-identity
```
此命令通过以下方式在 Web 应用与 Azure OpenAI 资源之间创建连接：
- 为 Web 应用生成系统分配的托管标识。
- 将认知服务 OpenAI 参与者角色添加到 Azure OpenAI 资源的托管标识。
- 将 AZURE_OPENAI_ENDPOINT 应用设置添加到 Web 应用。
应用现已部署并连接到具有托管标识的 Azure OpenAI。我会通过 IConfiguration 注入读取 AZURE_OPENAI_ENDPOINT 应用设置。
在浏览器中打开已部署的 Web 应用。在终端输出中查找已部署的 Web 应用的 URL。打开 Web 浏览器并导航到它。
```
az webapp browse
```
在文本框中键入一条消息，然后选择“发送”，并为应用提供几秒钟以使用 Azure OpenAI 的消息进行答复。

如果想要连接到 OpenAI 而不是 Azure OpenAI，该怎么办？

若要改为连接到 OpenAI，请使用以下代码：

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

有关详细信息，请参阅 OpenAI API 身份验证。

在应用服务中使用连接机密时，应使用 Key Vault 引用，而不是直接在代码库中存储机密。这可确保敏感信息保持安全，并集中管理。

是否可以改为使用 API 密钥连接到 Azure OpenAI？

是的，可以使用 API 密钥而不是托管标识连接到 Azure OpenAI。 Azure OpenAI SDK 和语义内核支持此方法。

有关在 C# 中使用 API 密钥和语义内核的详细信息，请参阅语义内核 C# 快速入门。
有关将 API 密钥与 Azure OpenAI 客户端库配合使用的详细信息：请参阅快速入门：开始将聊天补全与 Azure OpenAI 服务配合使用。

在应用服务中使用连接机密时，应使用 Key Vault 引用，而不是直接在代码库中存储机密。这可确保敏感信息保持安全，并集中管理。

DefaultAzureCredential 如何在本教程中工作？

通过 DefaultAzureCredential 自动选择最佳可用身份验证方法来简化身份验证：

在本地开发期间：运行 az login后，它将使用本地 Azure CLI 凭据。
部署到 Azure 应用服务时：它使用应用的托管标识进行安全、无密码身份验证。

此方法允许代码在本地和云环境中安全无缝地运行，而无需修改。

通过