Oktatóanyag: Csevegőrobot létrehozása az Azure App Service-vel és az Azure OpenAI-val (.NET)

Ebben az oktatóanyagban egy intelligens AI-alkalmazást fog létrehozni az Azure OpenAI .NET Blazor-alkalmazással való integrálásával és az Azure App Service-ben való üzembe helyezésével. Létre fog hozni egy interaktív Blazor-oldalt, amely csevegés-befejezési kéréseket küld egy Azure OpenAI-modellnek, és a választ visszaküldi a lapra.

Képernyőkép az Azure App Service-ben futó csevegőrobotról.

Ebben az oktatóanyagban a következőket sajátíthatja el:

Azure OpenAI-erőforrás létrehozása és nyelvi modell üzembe helyezése
Blazor-alkalmazás létrehozása az Azure OpenAI-val
Az alkalmazás üzembe helyezése az Azure App Service-ben
Jelszó nélküli hitelesítés implementálása a fejlesztési környezetben és az Azure-ban is

Előfeltételek

Aktív előfizetéssel rendelkező Azure-fiók
GitHub-fiók a GitHub Codespaces használatához

1. Azure OpenAI-erőforrás létrehozása

Ebben a szakaszban az Azure CLI-t fogja használni a GitHub Codespacesben egy Azure OpenAI-erőforrás létrehozásához.

Jelentkezzen be a GitHub Codespacesbe a GitHub-fiókjával.
A Üres csempén válassza a Sablon használata lehetőséget egy új üres kódtér létrehozásához.

A Codespace terminálban telepítse az Azure CLI-t.

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

Jelentkezzen be az Azure-fiókjába.
```
az login
```
A hitelesítéshez kövesse a terminál utasításait.
Környezeti változók beállításához adja meg az erőforráscsoport és az Azure OpenAI szolgáltatás nevét, és állítson be egy megfelelő Azure-régiót helyként.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Fontos

A hely a kiválasztott modell regionális elérhetőségéhez van kötve. A modell és az üzembehelyezési típus rendelkezésre állása az Azure-régiók és a számlázási szintek között eltérő. Ez az útmutató a gpt-4o-mini-ot használja, amely több régióban is elérhető a Standard üzembe helyezési típusban.

A hely kiválasztása előtt tekintse meg a Modell összegzése és a régió rendelkezésre állása táblát a modell támogatásának ellenőrzéséhez az előnyben részesített régióban.

Hozzon létre egy erőforráscsoportot és egy Azure OpenAI-erőforrást egy egyéni tartománnyal, majd adjon hozzá egy gpt-4o-mini modellt:

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

Most, hogy rendelkezik egy Azure OpenAI-erőforrással, létrehozhat egy webalkalmazást, amellyel kezelheti azt.

2. Blazor-webalkalmazás létrehozása és beállítása

Ebben a szakaszban egy új Blazor-webalkalmazást fog létrehozni a .NET CLI használatával.

A Codespace-terminálban hozzon létre egy új Blazor-alkalmazást, és próbálja meg először futtatni.
```
dotnet new blazor -o .
dotnet run
```
Egy értesítésnek kell megjelennie a GitHub Codespacesben, amely jelzi, hogy az alkalmazás egy adott porton érhető el. Válassza a Megnyitás böngészőben lehetőséget az alkalmazás új böngészőlapon való elindításához.
A Codespace terminálban állítsa le az alkalmazást a Ctrl+C billentyűkombinációval.
Telepítse a szükséges NuGet-csomagokat az Azure OpenAI-val való munkához:
```
dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity
```

Nyissa meg Components/Pages/Home.razor és cserélje le a tartalmát a következő kódra egy egyszerű csevegés befejezése streamhíváshoz az Azure OpenAI-val:

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

A terminálban kérje le az OpenAI-végpontot:

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

Futtassa újra az alkalmazást úgy, hogy hozzáadja AZURE_OPENAI_ENDPOINT annak értékét a parancssori felület kimenetéből:
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
```
Válassza a Megnyitás böngészőben lehetőséget az alkalmazás új böngészőlapon való elindításához.
Írjon be egy üzenetet a szövegmezőbe, és válassza a "Küldés" lehetőséget, és adjon meg néhány másodpercet az alkalmazásnak, hogy válaszoljon az Azure OpenAI üzenetére.

Az alkalmazás a DefaultAzureCredential-t használja, amely automatikusan az Azure CLI-be bejelentkezett felhasználót használja kivonathitelesítéshez. Az oktatóanyag későbbi részében üzembe helyezi a Blazor-alkalmazást az Azure App Service-ben, és úgy konfigurálja, hogy biztonságosan csatlakozzon az Azure OpenAI-erőforráshoz felügyelt identitás használatával. A kódban lévő DefaultAzureCredential felismeri a felügyelt identitást, és hitelesítéshez használja. Nincs szükség további kódra.

3. Üzembe helyezés az Azure App Service-ben és OpenAI-kapcsolat konfigurálása

Most, hogy az alkalmazás helyileg működik, helyezzük üzembe az Azure App Service-ben, és állítsunk be egy szolgáltatáskapcsolatot az Azure OpenAI-hoz felügyelt identitás használatával.

Először helyezze üzembe az alkalmazást az Azure App Service-ben az Azure CLI paranccsal az webapp up. Ez a parancs létrehoz egy új webalkalmazást, és üzembe helyezi rajta a kódot:
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
A parancs végrehajtása eltarthat néhány percig. Egy új webalkalmazást hoz létre ugyanabban az erőforráscsoportban, mint az OpenAI-erőforrás.
Az alkalmazás üzembe helyezése után hozzon létre egy szolgáltatáskapcsolatot a webalkalmazás és az Azure OpenAI-erőforrás között felügyelt identitás használatával:
```
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
```
Ez a parancs a következő módon hoz létre kapcsolatot a webalkalmazás és az Azure OpenAI-erőforrás között:
- Rendszer által hozzárendelt felügyelt identitás létrehozása a webalkalmazáshoz.
- A Cognitive Services OpenAI-közreműködői szerepkör hozzáadása az Azure OpenAI-erőforrás felügyelt identitásához.
- AZURE_OPENAI_ENDPOINT Az alkalmazásbeállítás hozzáadása a webalkalmazáshoz.
Az alkalmazás üzembe lett helyezve, és felügyelt identitással csatlakozik az Azure OpenAI-hoz. Beolvassa az alkalmazás beállításait az AZURE_OPENAI_ENDPOINT segítségével .
Nyissa meg az üzembe helyezett webalkalmazást a böngészőben. Keresse meg az üzembe helyezett webalkalmazás URL-címét a terminál kimenetében. Nyissa meg a webböngészőt, és navigáljon az oldalra.
```
az webapp browse
```
Írjon be egy üzenetet a szövegmezőbe, és válassza a Küldés lehetőséget, és adjon néhány másodpercet az alkalmazásnak, hogy válaszoljon az Azure OpenAI üzenetére.

Gyakori kérdések

Mi a teendő, ha az Azure OpenAI helyett az OpenAI-hoz szeretnék csatlakozni?
Inkább csatlakozhatok az Azure OpenAI-hoz API-kulccsal?
Hogyan működik a DefaultAzureCredential ebben az oktatóanyagban?

Mi a teendő, ha az Azure OpenAI helyett az OpenAI-hoz szeretnék csatlakozni?

Az OpenAI-hoz való csatlakozáshoz használja a következő kódot:

@using OpenAI.Client

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

További információ: OpenAI API-hitelesítés.

Amikor az App Service-ben kapcsolati titkos kulcsokkal dolgozik, a titkos kulcsok közvetlenül a kódbázisban való tárolása helyett Key Vault-hivatkozásokat kell használnia. Ez biztosítja, hogy a bizalmas információk biztonságosak és központilag kezelhetők maradnak.

Csatlakozhatok az Azure OpenAI-hoz API-kulcs használatával helyette?

Igen, felügyelt identitás helyett API-kulccsal csatlakozhat az Azure OpenAI-hoz. Ezt a megközelítést az Azure OpenAI SDK-k és a Szemantikus Kernel is támogatja.

Az API-kulcsok a Szemantikus Kernel C#-ban való használatával kapcsolatos részletekért tekintse meg a Szemantikus Kernel C# rövid útmutatót.
Az API-kulcsok Azure OpenAI-ügyfélkönyvtárral való használatával kapcsolatos részletek: Rövid útmutató: Az Azure OpenAI Szolgáltatással használt csevegési befejezések kezdése.

Hogyan működik a DefaultAzureCredential ebben az oktatóanyagban?

A DefaultAzureCredential legjobb elérhető hitelesítési módszer automatikus kiválasztásával egyszerűbb a hitelesítés:

Helyi fejlesztés során: A futtatás az loginután a helyi Azure CLI-hitelesítő adatokat használja.
Az Azure App Service-ben üzembe helyezve: Az alkalmazás felügyelt identitását használja a biztonságos, jelszó nélküli hitelesítéshez.

Ez a megközelítés lehetővé teszi, hogy a kód biztonságosan és zökkenőmentesen fusson mind a helyi, mind a felhőbeli környezetben módosítás nélkül.

További erőforrások

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-24