Tutorial: Umfassendes Authentifizieren und Autorisieren von Benutzern in Azure App Service

Von Azure App Service wird ein hochgradig skalierbarer Webhostingdienst mit Self-Patching bereitgestellt. Der App-Dienst bietet integrierte Unterstützung für die Benutzerauthentifizierung und Autorisierung. In diesem Tutorial wird beschrieben, wie Sie Ihre Apps per App Service-Authentifizierung und -Autorisierung schützen. Es verwendet Express.js mit Front-End-Sichten. App Service-Authentifizierung und Autorisierung unterstützen alle Sprachlaufzeiten. In diesem Lernprogramm erfahren Sie, wie Sie sie auf Ihre bevorzugte Sprache anwenden.

Azure App Service bietet einen hochskalierbaren, selbstaktualisierenden Webhosting-Dienst mit dem Linux-Betriebssystem. Der App-Dienst bietet integrierte Unterstützung für die Benutzerauthentifizierung und Autorisierung. In diesem Tutorial wird beschrieben, wie Sie Ihre Apps per App Service-Authentifizierung und -Autorisierung schützen. Es verwendet Express.js mit Front-End-Sichten. App Service-Authentifizierung und Autorisierung unterstützen alle Sprachlaufzeiten. In diesem Lernprogramm erfahren Sie, wie Sie sie auf Ihre bevorzugte Sprache anwenden.

Die Authentifizierung in diesem Verfahren wird auf der Hostplattformebene von Azure App Service bereitgestellt. Sie müssen die Front-End- und Back-End-App bereitstellen und die Authentifizierung für diese Web-App so konfigurieren, dass sie erfolgreich verwendet werden kann.

Konzeptionelles Diagramm zeigt den Authentifizierungsfluss vom Webbenutzer zur Front-End-App zur Back-End-App.

Nachdem Sie dieses Szenario abgeschlossen haben, fahren Sie mit dem nächsten Lernprogramm fort, um zu erfahren, wie Sie eine Verbindung mit Azure-Diensten als authentifizierten Benutzer herstellen. Gängige Szenarien umfassen den Zugriff auf Azure Storage oder eine Datenbank als Benutzer mit bestimmten Fähigkeiten oder Zugriff auf bestimmte Tabellen oder Dateien.

In diesem Tutorial erfahren Sie:

Aktivieren der integrierten Authentifizierung und Autorisierung
Apps gegen nicht authentifizierte Anforderungen absichern
Verwenden von Microsoft Entra ID als Identitätsanbieter
Zugreifen auf eine Remote-App im Namen des angemeldeten Benutzers
Schützen von Dienst-zu-Dienst-Aufrufen per Tokenauthentifizierung
Verwenden von Zugriffstoken aus Servercode

Voraussetzungen

Wenn Sie nicht über ein Azure-Konto verfügen, erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Node.js (LTS)

Verwenden Sie die Bash-Umgebung in Azure Cloud Shell. Weitere Informationen finden Sie unter Erste Schritte mit Azure Cloud Shell.
Wenn Sie CLI-Referenzbefehle lieber lokal ausführen, installieren Sie die Azure CLI. Wenn Sie Windows oder macOS ausführen, sollten Sie die Azure CLI in einem Docker-Container ausführen. Weitere Informationen finden Sie unter Ausführen der Azure CLI in einem Docker-Container.
- Wenn Sie eine lokale Installation verwenden, melden Sie sich mithilfe des Befehls az login bei der Azure CLI an. Führen Sie die in Ihrem Terminal angezeigten Schritte aus, um den Authentifizierungsprozess abzuschließen. Weitere Anmeldeoptionen finden Sie unter Authentifizieren bei Azure mithilfe der Azure CLI.
- Installieren Sie die Azure CLI-Erweiterung beim ersten Einsatz, wenn Sie dazu aufgefordert werden. Weitere Informationen zu Erweiterungen finden Sie unter Verwenden und Verwalten von Erweiterungen mit der Azure CLI.
- Führen Sie az version aus, um die installierte Version und die abhängigen Bibliotheken zu ermitteln. Führen Sie az upgrade aus, um das Upgrade auf die aktuelle Version durchzuführen.

Benutzerprofil abrufen

Die Front-End-App ist so konfiguriert, dass die Back-End-API sicher verwendet wird. Die Front-End-Anwendung stellt eine Microsoft-Anmeldung für den Benutzer bereit und ermöglicht es dem Benutzer, sein gefälschtes Profil vom Back-End zu erhalten. In diesem Tutorial wird ein Pseudoprofil verwendet, um die Schritte zum Abschließen des Szenarios zu vereinfachen.

Bevor Ihr Quellcode auf dem Front-End ausgeführt wird, fügt App Service das authentifizierte accessToken aus dem App Service-Header x-ms-token-aad-access-token ein. Der Front-End-Quellcode greift dann auf die accessToken zu und sendet sie an den Back-End-Server. Der Front-End-Server sendet das Token als das bearerToken Token, um sicher auf die Back-End-API zuzugreifen. Der Back-End-Server überprüft das bearerToken, bevor er es an den Back-End-Quellcode übergibt. Nachdem Ihr Backend-Quellcode das bearerToken erhalten hat, kann er verwendet werden.

Im nächsten Tutorial dieser Reihe wird das bearerToken mit einem Token mit einem Geltungsbereich für den Zugriff auf die Microsoft Graph-API ausgetauscht. Die Microsoft Graph-API gibt die Profilinformationen des Benutzers zurück.

Klonen der Beispielanwendung

Führen Sie in Azure Cloud Shell den folgenden Befehl aus, um das Beispielrepository zu klonen.

git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app

Erstellen und Bereitstellen von Apps

Erstellen Sie die Ressourcengruppe, den Web-App-Plan und die Web-App, und stellen Sie sie dann in einem einzigen Schritt bereit.

Wechseln Sie in das frontend Web-App-Verzeichnis.

cd js-e2e-web-app-easy-auth-app-to-app/frontend

Erstellen und Bereitstellen der Front-End-Web-App mit dem Befehl "az webapp up ". Der Name der Web-App muss global eindeutig sein. Ersetzen Sie <front-end-app-name> durch einen eindeutigen Namen.
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:24LTS"
```
Wechseln Sie in das backend Web-App-Verzeichnis.
```
cd ../backend
```
Stellen Sie die Back-End-Web-App in derselben Ressourcengruppe und in einem App-Plan bereit. Der Name der Web-App muss global eindeutig sein. Ersetzen Sie <back-end-app-name> durch eine eindeutige Buchstaben- und Zahlenfolge.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:24LTS"
```

Wechseln Sie in das frontend Web-App-Verzeichnis.
```
cd frontend
```
Erstellen und Bereitstellen der Front-End-Web-App mit dem Befehl "az webapp up ". Der Name der Web-App muss global eindeutig sein. Ersetzen Sie <front-end-app-name> durch eine eindeutige Buchstaben- und Zahlenfolge.
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:24-lts"
```
Wechseln Sie in das backend Web-App-Verzeichnis.
```
cd ../backend
```
Stellen Sie die Back-End-Web-App in derselben Ressourcengruppe und in einem App-Plan bereit. Der Name der Web-App muss global eindeutig sein. Ersetzen Sie <back-end-app-name> durch eine eindeutige Buchstaben- und Zahlenfolge.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:24-lts"
```

Konfigurieren der App-Einstellung

Die Front-End-Anwendung muss die URL der Back-End-Anwendung für API-Anforderungen kennen. Verwenden Sie den folgenden Azure CLI-Befehl, um die App-Einstellung zu konfigurieren. Die URL sollte sein https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

Frontend ruft das Backend auf

Navigieren Sie zur Front-End-App, und geben Sie das gefälschte Profil vom Back-End zurück. Diese Aktion überprüft, ob das Front-End das Profil erfolgreich vom Back-End anfordert, und das Back-End gibt das Profil zurück.

Öffnen Sie die Front-End-Web-App in einem Browser: https://<front-end-app-name>.azurewebsites.net.
Wählen Sie den Link "Benutzerprofil abrufen" aus.
Zeigen Sie das gefälschte Profil an, das von der Back-End-Web-App zurückgegeben wurde.

Der Wert withAuthentication für gibt an, dass die Authentifizierung noch nicht eingerichtet ist.

Konfigurieren der Authentifizierung

Aktivieren Sie in diesem Abschnitt die Authentifizierung und Autorisierung für die beiden Web-Apps. In diesem Tutorial wird Microsoft Entra ID als Identitätsanbieter verwendet.

Außerdem konfigurieren Sie die Front-End-App folgendermaßen:

Gewähren des Front-End-App-Zugriffs auf die Back-End-App
Konfigurieren von App Service für die Rückgabe eines verwendbaren Tokens
Verwenden des Tokens in Ihrem Code

Weitere Informationen finden Sie unter Konfigurieren der Microsoft Entra-Authentifizierung für die App Services-Anwendung.

Aktivieren der Authentifizierung und Autorisierung für Back-End-Apps

Suchen Sie im Azure-Portal nach Ressourcengruppen, und wählen Sie sie aus.
Navigieren Sie in Ressourcengruppen zu Ihrer Ressourcengruppe, und wählen Sie sie aus. Wählen Sie in der Übersicht Ihre Back-End-App aus.
Wählen Sie im linken Menü Ihrer Back-End-App Einstellungen>Authentifizierung aus und dann Identitätsanbieter hinzufügen.
Wählen Sie auf der Seite " Identitätsanbieter hinzufügen " für den IdentitätsanbieterMicrosoft aus, um sich mit Microsoft- und Microsoft Entra-Identitäten anzumelden.
Wählen Sie einen Wert für das Ablaufdatum des Client-Geheimnisses aus.
Übernehmen Sie für die anderen Werte die Standardeinstellungen, und wählen Sie "Hinzufügen" aus.
Die Seite Authentifizierung wird geöffnet. Kopieren Sie die Client-ID der Microsoft-Entra-Anwendung in den Editor. Sie benötigen diesen Wert später noch.

Wenn Sie den Vorgang hier abbrechen, verfügen Sie über eine eigenständige App, die bereits durch die App Service-Authentifizierung und -Autorisierung geschützt ist. In den verbleibenden Abschnitten wird gezeigt, wie Sie eine Multi-App-Lösung sichern, indem Sie den authentifizierten Benutzer vom Front-End zum Back-End weiterleiten.

Aktivieren der Authentifizierung und Autorisierung für Die Front-End-App

Suchen Sie im Azure-Portal nach Ressourcengruppen, und wählen Sie sie aus.
Navigieren Sie in Ressourcengruppen zu Ihrer Ressourcengruppe, und wählen Sie sie aus. Wählen Sie in der Übersicht Ihre Front-End-App aus.
Wählen Sie im linken Menü Ihrer Front-End-App "Einstellungen>Authentifizierung" und dann "Identitätsanbieter hinzufügen" aus.
Wählen Sie auf der Seite " Identitätsanbieter hinzufügen " für den IdentitätsanbieterMicrosoft aus, um sich mit Microsoft- und Microsoft Entra-Identitäten anzumelden.
Wählen Sie einen Wert für das Ablaufdatum des Client-Geheimnisses aus. Übernehmen Sie für die anderen Werte die Standardeinstellungen, und wählen Sie "Hinzufügen" aus.
Die Seite Authentifizierung wird geöffnet. Kopieren Sie die Client-ID der Microsoft-Entra-Anwendung in den Editor. Sie benötigen diesen Wert später noch.

Front-End-App-Zugriff auf Back-End-App gewähren

Sie haben die Authentifizierung und Autorisierung für beide Apps aktiviert. Um die Authentifizierung abzuschließen, müssen Sie drei Schritte ausführen:

Bereitstellen der Back-End-App als API durch Definieren eines Bereichs
Gewähren des Zugriffs auf die Back-End-App für die Front-End-App
Konfigurieren von App Service für die Rückgabe eines verwendbaren Tokens
Verwenden des Tokens in Ihrem Code

Hinweis

Bevor Sie der Frontend-App Zugriff auf das Back-End gewähren können, müssen Sie die Back-End-API verfügbar machen, indem Sie einen Anwendungs-ID-URI festlegen und mindestens einen Bereich definieren. Dadurch kann das Back-End beim Zuweisen von API-Berechtigungen unter „Meine APIs“ ausgewählt werden.

Tipp

Wenn Fehler auftreten und die Authentifizierungs-/Autorisierungseinstellungen Ihrer App neu konfiguriert werden, werden die Token im Tokenspeicher möglicherweise nicht aus den neuen Einstellungen neu generiert. Um sicherzustellen, dass Ihre Token neu generiert werden, müssen Sie sich abmelden und sich wieder bei Ihrer App anmelden. Ein Ansatz besteht darin, Ihren Browser im privaten Modus zu verwenden. Schließen Sie den Browser, und öffnen Sie den Browser im privaten Modus, nachdem Sie die Einstellungen in Ihren Apps geändert haben.

In diesem Abschnitt gewähren Sie der Front-End-App Zugriff auf die Back-End-App im Namen des Benutzers. Technisch geben Sie der AD-Anwendung des Front-Ends die Berechtigungen für den Zugriff auf die AD-Anwendung des Back-Ends im Namen des Benutzers.

Wählen Sie auf der Seite " Authentifizierung " für die Front-End-App unter "Identitätsanbieter" Ihren Front-End-App-Namen aus. Diese App-Registrierung wurde automatisch für Sie generiert.
Wählen Sie im linken Menü"API-Berechtigungen verwalten>" aus.
Klicken Sie auf Berechtigung hinzufügen und anschließend auf Meine APIs><Name der Back-End-App>.
Wählen Sie auf der Seite "API-Berechtigungen anfordern " für die Back-End-App delegierte Berechtigungen und user_impersonation und dann "Berechtigungen hinzufügen" aus.

Konfigurieren von App Service für die Rückgabe eines verwendbaren Zugriffstokens

Die Front-End-App verfügt jetzt über die erforderlichen Berechtigungen für den Zugriff auf die Back-End-App als angemeldeter Benutzer. Konfigurieren Sie in diesem Abschnitt die App Service-Authentifizierung und -Autorisierung, um Ihnen ein verwendbares Zugriffstoken für den Zugriff auf das Back-End zu gewähren. Für diesen Schritt benötigen Sie die Client-ID des Back-Ends, die Sie aus " Authentifizierung und Autorisierung für Back-End-App aktivieren" kopiert haben.

Führen Sie in der Cloud Shell die folgenden Befehle in der Front-End-App aus, um den scope Parameter zur Authentifizierungseinstellung identityProviders.azureActiveDirectory.login.loginParametershinzuzufügen. Ersetzen Sie <front-end-app-name> und <back-end-client-id>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Die Befehle fügen eine loginParameters-Eigenschaft mit weiteren benutzerdefinierten Geltungsbereichen hinzu. Hier ist eine Beschreibung der angeforderten Bereiche angegeben:

openid wird von App Service bereits standardmäßig angefordert. Weitere Informationen finden Sie unter OpenID Connect Scopes.
offline_access ist hier zur Vereinfachung enthalten, falls Sie Token aktualisieren möchten.
api://<back-end-client-id>/user_impersonation ist eine exponierte API in Ihrer Back-End-Anwendungsregistrierung. Es ist der Umfang, der Ihnen ein JWT bietet, das die Back-End-App als Token-Zielgruppe enthält.

Tipp

Um den api://<back-end-client-id>/user_impersonation Bereich im Azure-Portal anzuzeigen, wechseln Sie zur Seite " Authentifizierung " für die Back-End-App, wählen Sie den Link unter "Identitätsanbieter" aus, und wählen Sie dann im linken Menü die Option "API verfügbar machen " aus.
Informationen zum Konfigurieren der erforderlichen Bereiche mithilfe einer Webschnittstelle finden Sie unter Aktualisieren von Authentifizierungstoken.
Für einige Bereiche ist die Einwilligung des Administrators oder Benutzers erforderlich. Diese Anforderung bewirkt, dass die Zustimmungsanforderungsseite angezeigt wird, wenn sich ein Benutzer bei der Front-End-App im Browser anmeldet. Um diese Zustimmungsseite zu vermeiden, fügen Sie die App-Registrierung des Front-End als autorisierte Clientanwendung auf der Seite " API verfügbar machen " hinzu. Wählen Sie "Clientanwendung hinzufügen " aus, und geben Sie die Client-ID der App-Registrierung des Front-Ends an.

Ihre Apps sind nun konfiguriert. Das Front-End ist jetzt bereit, mit einem ordnungsgemäßen Zugriffstoken auf das Back-End zuzugreifen.

Informationen dazu, wie Sie das Zugriffstoken für andere Anbieter konfigurieren, finden Sie unter Aktualisieren von Identitätsanbieter-Token.

Konfigurieren des Back-End-App-Diensts, um ein Token nur vom Front-End-App-Dienst zu akzeptieren

Sie sollten auch den Back-End-App-Dienst so konfigurieren, dass nur ein Token vom Front-End-App-Dienst akzeptiert wird. Wenn diese Konfiguration nicht durchgeführt wird, führt dies zu einem 403: Verboten-Fehler, wenn Sie das Token vom Front-End an das Back-End übergeben.

Sie können diesen Ansatz implementieren, indem Sie den gleichen Azure CLI-Prozess verwenden, den Sie im vorherigen Schritt verwendet haben.

Rufen Sie das appId des App Service-Front-Ends ab. Sie können diesen Wert auf der Seite "Authentifizierung " des Front-End-App-Diensts abrufen.
Führen Sie die folgende Azure CLI aus, und ersetzen Sie <back-end-app-name> und <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

Das Front-End ruft das authentifizierte Back-End auf.

Die Front-End-App muss die Authentifizierung des Benutzers mit dem richtigen user_impersonation Berechtigungsumfang an das Back-End übergeben. In den folgenden Schritten wird der im Beispiel bereitgestellte Code für diese Funktionalität überprüft.

Anzeigen des Quellcodes der Front-End-App:

Verwenden Sie den injizierten x-ms-token-aad-access-token-Header des App Service-Front-Ends, um das Benutzerzugriffstoken programmgesteuert abzurufen.
```
// ./src/server.js
const accessToken = req.headers['x-ms-token-aad-access-token'];
```

Verwenden Sie das Zugriffstoken im Header Authentication als Wert für bearerToken.

// ./src/remoteProfile.js
// Get profile from backend
const response = await fetch(remoteUrl, {
    cache: "no-store", // no caching -- for demo purposes only
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${accessToken}`
    }
});
if (response.ok) {
    const { profile } = await response.json();
    console.log(`profile: ${profile}`);
} else {
    // error handling
}

Dieses Tutorial gibt ein Pseudoprofil zurück, um das Szenario zu vereinfachen. Im nächsten Tutorial in dieser Serie wird gezeigt, wie Sie das bearerToken des Back-Ends gegen ein neues Token für den Geltungsbereich eines nachgeschalteten Azure-Diensts wie Microsoft Graph austauschen.

Backend gibt das Profil an das Frontend zurück.

Wenn die Anforderung vom Front-End nicht autorisiert ist, lehnt der Back-End-App-Dienst die Anforderung mit einem 401-HTTP-Fehlercode ab, bevor die Anforderung Ihren Anwendungscode erreicht. Wenn der Back-End-Code erreicht ist, weil er ein autorisiertes Token enthält, extrahieren Sie das bearerToken, um das accessToken abzurufen.

Zeigen Sie den Quellcode der Back-End-App an:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

Navigieren sie zu den Apps

Verwenden Sie die Front-End-Website in einem Browser. Die URL ist https://<front-end-app-name>.azurewebsites.net/.
Der Browser fordert Ihre Authentifizierung für die Web-App an. Schließen Sie die Authentifizierung ab.
Nach Abschluss der Authentifizierung gibt die Front-End-Anwendung die Startseite der App zurück.
Wählen Sie "Benutzerprofil abrufen" aus. Diese Aktion übergibt Ihre Authentifizierung im Bearer Token an das Backend.
Das Back-End antwortet mit dem gefälschten hartcodierten Profilnamen: John Doe.

Der withAuthentication Wert "true " gibt an, dass die Authentifizierung jetzt eingerichtet ist.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt.

Löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen. Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.
```
az group delete --name myAuthResourceGroup
```
Verwenden Sie die Client-ID der Authentifizierungs-Apps, die Sie zuvor in den Abschnitten Enable authentication and authorization für die Back-End- und Front-End-Apps gefunden und notiert haben.

Löschen Sie App-Registrierungen für Front-End- und Back-End-Apps.

# delete app - do this for both frontend and backend client ids
az ad app delete <client-id>

Häufig gestellte Fragen

Wie teste ich diese Authentifizierung auf meinem lokalen Entwicklungscomputer?

Die Authentifizierung in diesem Verfahren wird auf der Hostplattformebene von Azure App Service bereitgestellt. Es gibt keinen entsprechenden Emulator. Sie müssen die Front-End- und Back-End-App bereitstellen und die Authentifizierung für beide konfigurieren, um die Authentifizierung verwenden zu können.

Die App zeigt kein gefälschtes Profil an, wie debuge ich sie?

Die Front-End- und Back-End-Apps verfügen beide über Routen zur Fehlerbehebung der Authentifizierung, wenn diese Anwendung das /debug Profil nicht liefert. Die Front-End-Debugroute stellt die wichtigen Komponenten zur Überprüfung bereit:

Umgebungsvariablen:
- BACKEND_URL ist ordnungsgemäß als https://<back-end-app-name>.azurewebsites.net konfiguriert. Schließen Sie den Schrägstrich am Ende bzw. die Route nicht ein.
HTTP-Header:
- Die x-ms-token-*-Kopfzeilen werden eingefügt.
Der Microsoft Graph-Profilname für angemeldete Benutzer wird angezeigt.
Der Bereich der Front-End-App für das Token hat user_impersonation. Wenn Ihr Scope diesen Wert nicht enthält, könnte es sich um ein zeitliches Problem handeln. Überprüfen Sie die login Parameter Ihrer Front-End-App in Azure-Ressourcen. Warten Sie einige Minuten auf die Replikation der Authentifizierung.

Wurde der Anwendungsquellcode ordnungsgemäß für jede Web-App bereitgestellt?

Wählen Sie im Azure-Portal für die Web-App zuerst die Option Entwicklungstools, dann >, und anschließend Gehe zu aus. Diese Aktion öffnet einen neuen Tab oder ein neues Fenster.
Wählen Sie auf der neuen Browserregisterkarte Verzeichnis durchsuchen>Website wwwroot aus.
Vergewissern Sie sich, dass das Verzeichnis Folgendes enthält:
- package.json
- node_modules.tar.gz
- /src/index.js
Überprüfen Sie, ob diepackage.json-Eigenschaft name mit dem Webnamen identisch ist, entweder frontend oder backend.
Wenn Sie den Quellcode geändert haben und erneut bereitgestellt werden müssen, verwenden Sie den Befehl "az webapp up " aus dem Verzeichnis, in dem die package.json Datei für diese App enthalten ist.

Wurde die Anwendung ordnungsgemäß gestartet?

Beide Web-Apps sollten etwas zurückgeben, wenn die Startseite angefordert wird. Wenn Sie /debug in einer Web-App nicht erreichen können, wurde die App nicht ordnungsgemäß gestartet. Überprüfen Sie die Fehlerprotokolle für diese Web-App.

Wählen Sie im Azure-Portal für die Web-App zuerst die Option Entwicklungstools, dann >, und anschließend Gehe zu aus. Diese Aktion öffnet einen neuen Tab oder ein neues Fenster.
Wählen Sie im neuen Browsertab die Option Verzeichnis durchsuchen>Bereitstellungsprotokolle aus.
Sehen Sie sich die einzelnen Protokolle an, um gemeldete Probleme zu ermitteln.

Kann die Front-End-App mit der Back-End-App sprechen?

Da die Front-End-App die Back-End-App aus dem Serverquellcode aufruft, ist dieses Verhalten im Browsernetzwerkdatenverkehr nicht zu sehen. Verwenden Sie die folgende Liste, um den Erfolg der Back-End-Profilanforderung zu ermitteln:

Die Back-End-Web-App gibt alle Fehler an die Front-End-App zurück, wenn sie erreicht wurde. Wenn sie nicht erreicht wurde, meldet die Front-End-App den Statuscode und die Meldung.
- 401: Der Benutzer hat die Authentifizierung nicht ordnungsgemäß bestanden. Diese Meldung kann angeben, dass der Bereich nicht ordnungsgemäß festgelegt ist.
- 404: Die URL des Servers stimmt nicht mit einer Route des Servers überein.
Verwenden Sie die Streamingprotokolle der Back-End-App, um zu sehen, wie Sie die Front-End-Anforderung für das Profil des Benutzers vornehmen. Im Quellcode gibt es Debuginformationen, console.logmit denen ermittelt wird, wo der Fehler aufgetreten ist.

Was geschieht, wenn das Front-End-Token abläuft?

Das Zugriffstoken läuft nach einiger Zeit ab. Informationen dazu, wie Sie Zugriffstoken aktualisieren, ohne dass sich Benutzer erneut bei Ihrer App authentifizieren müssen, finden Sie unter Erweiterte Verwendung der Authentifizierung und Autorisierung in Azure App Service.

Wenn ich über eine browserbasierte App auf der Front-End-App verfüge, kann sie direkt mit dem Back-End sprechen?

Bei diesem Ansatz muss der Servercode das Zugriffstoken an den JavaScript-Code übergeben, der im Clientbrowser ausgeführt wird. Da es keine Möglichkeit gibt, das Zugriffstoken im Browser zu schützen, empfehlen wir diesen Ansatz nicht. Derzeit empfehlen wir das Back-End-for-Frontend-Muster.

Wenn sie auf das Beispiel in diesem Lernprogramm angewendet wird, würde der Browsercode in der Front-End-App API-Aufrufe in einer authentifizierten Sitzung an seinen Servercode als Vermittler senden. Der Servercode in der Front-End-App würde dann die API-Aufrufe an die Back-End-App vornehmen, indem der x-ms-token-aad-access-token Headerwert als Bearertoken verwendet wird. Alle Aufrufe von Ihrem Browsercode an den Servercode werden durch die authentifizierte Sitzung geschützt.

Nächster Schritt

Fahren Sie mit dem nächsten Tutorial fort, um zu erfahren, wie Sie die Identität dieses Benutzers für den Zugriff auf einen Azure-Dienst verwenden.

Tutorial: Erstellen einer sicheren n-schichtigen App in Azure App Service

Feedback

War diese Seite hilfreich?

Last updated on 2025-07-22