Zelfstudie: Een chatbot bouwen met Azure App Service en Azure OpenAI (Flask)

In deze zelfstudie bouwt u een intelligente AI-toepassing door Azure OpenAI te integreren met een Python-webtoepassing en deze te implementeren in Azure App Service. U maakt een Flask-app die chatvoltooiingsaanvragen naar een model in Azure OpenAI verzendt en verbinding maakt met de service met behulp van een beheerde identiteit.

U leert het volgende:

Maak een Azure OpenAI-resource en implementeer een taalmodel.
Bouw een Flask-toepassing die verbinding maakt met Azure OpenAI.
Implementeer de toepassing in Azure App Service.
Implementeer veilige verificatie zonder wachtwoord in de ontwikkelomgeving en in Azure.

Schermopname van een chatbot die wordt uitgevoerd in Azure App Service.

Prerequisites

Een Azure-account met een actief abonnement
Een GitHub-account voor het gebruik van GitHub Codespaces

1. Een Azure OpenAI-resource maken

In deze sectie gebruikt u Azure CLI in GitHub Codespaces om een Azure OpenAI-resource te maken.

Meld u aan bij GitHub Codespaces met uw GitHub-account.
Selecteer Gebruik deze sjabloon in het Leeg vlak om een nieuwe lege codespace te maken.

Installeer de Azure CLI in de Codespace-terminal.

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

Meld u aan bij uw Azure-account.
```
az login
```
Volg de instructies in de terminal om te verifiëren.
Stel omgevingsvariabelen in door namen op te geven voor uw resourcegroep en De Azure OpenAI-service en een geschikte Azure-regio in te stellen als uw locatie.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Important

De locatie is gekoppeld aan de regionale beschikbaarheid van het gekozen model. De beschikbaarheid van modellen en implementatietypen verschilt per Azure-regio en factureringslaag. In deze zelfstudie wordt gebruikgemaakt van gpt-4o-mini, dat beschikbaar is in verschillende regio's onder het standaardimplementatietype.

Voordat u een locatie selecteert, raadpleegt u de tabel Modelsamenvatting en beschikbaarheid van regio's om de ondersteuning van modellen in uw voorkeursregio te controleren.

Maak een resourcegroep en een Azure OpenAI-resource met een aangepast domein en voeg vervolgens een gpt-4o-mini model toe:

# 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

Nu u een Azure OpenAI-resource hebt, kunt u een webtoepassing maken om ermee te communiceren.

2. Een Flask-app maken en instellen

Maak in uw codespace-terminal een virtuele omgeving en installeer de PIP-pakketten die u nodig hebt.

python3 -m venv .venv
source .venv/bin/activate
pip install flask openai azure.identity dotenv
pip freeze > requirements.txt

Maak in de hoofdmap van de werkruimte een bestand met de naam app.py met de volgende code voor een eenvoudige chat-voltooiingsoproep met Azure OpenAI.

import os
from flask import Flask, render_template, request
from azure.identity import DefaultAzureCredential, get_bearer_token_provider
from openai import AzureOpenAI

app = Flask(__name__)

# Initialize the Azure OpenAI client with Microsoft Entra authentication
token_provider = get_bearer_token_provider(
    DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
)
client = AzureOpenAI(
    api_version="2024-10-21",
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    azure_ad_token_provider=token_provider,
)

@app.route('/', methods=['GET', 'POST'])
def index():
    response = None
    if request.method == 'POST': # Handle form submission
        user_message = request.form.get('message')
        if user_message:
            try:
                # Call the Azure OpenAI API with the user's message
                completion = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role": "user", "content": user_message}]
                )
                ai_message = completion.choices[0].message.content
                response = ai_message
            except Exception as e:
                response = f"Error: {e}"
    return render_template('index.html', response=response)

if __name__ == '__main__':
    app.run()

Maak een map met sjablonen en een index.html bestand erin. Plak de volgende code voor het maken van een eenvoudige chatinterface.

<!doctype html>
<html>
<head>
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <main class="container py-4">
        <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
        <form method="post" action="/" class="mb-3">
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
        <div class="card p-3">
            {% if response %}
                <div class="alert alert-info mt-3">{{ response }}</div>
            {% endif %}
        </div>
    </main>
</body>
</html>

Haal in de terminal het OpenAI-eindpunt op:

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

Voer de app uit door AZURE_OPENAI_ENDPOINT toe te voegen met de waarde uit de voorgaande CLI-uitvoer.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
Selecteer Openen in de browser om de app te starten op een nieuw browsertabblad. Dien een vraag in om een antwoordbericht te zien.

3. Implementeren in Azure App Service en OpenAI-verbinding configureren

Nu uw app lokaal werkt, implementeert u deze in Azure App Service en stelt u een serviceverbinding met Azure OpenAI in met behulp van een beheerde identiteit.

Implementeer eerst uw app in Azure App Service met behulp van de Azure CLI-opdracht az webapp up. Met deze opdracht maakt u een nieuwe web-app in dezelfde resourcegroep als uw OpenAI-resource en implementeert u uw code. Het kan enkele minuten duren voordat de opdracht is voltooid.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Nadat de app is geïmplementeerd, maakt u een serviceverbinding tussen uw web-app en de Azure OpenAI-resource met behulp van een beheerde identiteit. Met de volgende opdracht maakt u een verbinding tussen uw web-app en de Azure OpenAI-resource door:
- Het genereren van een door het systeem toegewezen beheerde identiteit voor de web-app.
- De rol Cognitive Services OpenAI-inzender toevoegen aan de beheerde identiteit voor de Azure OpenAI-resource.
- AZURE_OPENAI_ENDPOINT De app-instelling toevoegen aan uw web-app.
```
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
```
Zoek de URL van uw geïmplementeerde app in de terminaluitvoer van de az webapp up opdracht en navigeer naar de app in uw webbrowser.
```
az webapp browse
```
Voer in uw web-app een bericht in het tekstvak in en selecteer Verzenden. Geef de app een paar seconden om het bericht van Azure OpenAI te beantwoorden.

Uw app is nu geïmplementeerd en verbonden met Azure OpenAI met beheerde identiteit.

Veelgestelde vragen

Hoe kan ik verbinding maken met OpenAI in plaats van Azure OpenAI?
Kan ik verbinding maken met Azure OpenAI met een API-sleutel in plaats van een beheerde identiteit?
Hoe werkt de DefaultAzureCredential?

Hoe kan ik verbinding maken met OpenAI in plaats van Azure OpenAI?

Gebruik de volgende code om verbinding te maken met OpenAI in plaats van Azure OpenAI:

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

Zie How to switch between OpenAI and Azure OpenAI endpoints with Python (Schakelen tussen OpenAI- en Azure OpenAI-eindpunten met Python) voor meer informatie.

Important

Wanneer u werkt met verbindingsgeheimen zoals API-sleutels in App Service, moet u Azure Key Vault-verwijzingen gebruiken in plaats van geheimen rechtstreeks in uw code op te slaan. Deze procedure zorgt ervoor dat gevoelige informatie veilig blijft en centraal wordt beheerd.

Kan ik verbinding maken met Azure OpenAI met een API-sleutel in plaats van een beheerde identiteit?

Ja, u kunt verbinding maken met Azure OpenAI met behulp van een API-sleutel in plaats van een beheerde identiteit. De Azure OpenAI SDK en Semantische Kernel ondersteunen deze benadering.

Zie Aan de slag met Semantische kernel voor meer informatie over het gebruik van API-sleutels met Semantische kernel.
Zie De Azure OpenAI-antwoorden-API gebruiken voor meer informatie over het gebruik van API-sleutels met de Azure OpenAI-clientbibliotheek.

Important

Wanneer u werkt met verbindingsgeheimen zoals API-sleutels in App Service, moet u Key Vault-verwijzingen gebruiken in plaats van geheimen rechtstreeks in uw code op te slaan. Deze procedure zorgt ervoor dat gevoelige informatie veilig blijft en centraal wordt beheerd.

Hoe werkt de DefaultAzureCredential?

De DefaultAzureCredential verificatie vereenvoudigt door automatisch de best beschikbare verificatiemethode te selecteren.

Tijdens de lokale ontwikkeling, nadat u az login hebt uitgevoerd, maakt DefaultAzureCredential gebruik van uw lokale Azure CLI-referenties.
Voor Azure App Service-implementaties wordt de beheerde identiteit van de DefaultAzureCredential app gebruikt voor veilige, wachtwoordloze verificatie.

Met deze aanpak kan uw code veilig en naadloos worden uitgevoerd in zowel lokale als cloudomgevingen zonder aanpassingen.

Zelfstudie: Een chatbot uitvoeren in App Service met een Phi-4 sidecar-extensie (FastAPI)
Een Azure OpenAI-serviceresource maken en implementeren
Use managed identities for App Service and Azure Functions (Beheerde identiteiten gebruiken voor App Service en Azure Functions)

Feedback

Is deze pagina nuttig?

Last updated on 2026-03-24