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

Von Azure App Service wird ein hochgradig skalierbarer Webhostingdienst mit Self-Patching bereitgestellt. Außerdem verfügt App Service über 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 wird eine ASP.NET Core-App mit einem Angular.js-Front-End als Beispiel verwendet. Für die App Service-Authentifizierung und -Autorisierung werden alle Sprachlaufzeiten unterstützt, und Sie erfahren im Tutorial, wie Sie diese auf Ihre bevorzugte Sprache anwenden.

Azure App Service bietet einen hochgradig skalierbaren Webhostingdienst mit Self-Patching unter dem Linux-Betriebssystem. Außerdem verfügt App Service über 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 wird eine ASP.NET Core-App mit einem Angular.js-Front-End als Beispiel verwendet. Für die App Service-Authentifizierung und -Autorisierung werden alle Sprachlaufzeiten unterstützt, und Sie erfahren im Tutorial, wie Sie diese auf Ihre bevorzugte Sprache anwenden.

Simple authentication and authorization

Außerdem wird veranschaulicht, wie Sie eine mehrstufige App schützen, indem Sie im Namen des authentifizierten Benutzers auf eine geschützte Back-End-API zugreifen – sowohl über Servercode als auch über Browsercode.

Advanced authentication and authorization

Dies sind nur einige mögliche Authentifizierungs- und Autorisierungsszenarien in App Service.

Hier ist eine umfassendere Liste mit den Kenntnissen angegeben, die im Tutorial vermittelt werden:

  • Aktivieren der integrierten Authentifizierung und Autorisierung
  • Schützen von Apps vor nicht authentifizierten Anforderungen
  • Verwenden von Azure Active Directory 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
  • Verwenden von Zugriffstoken aus Clientcode (Browser)

Die Schritte in diesem Tutorial können unter macOS, Linux und Windows ausgeführt werden.

Wenn Sie kein Azure-Abonnement besitzen, erstellen Sie ein kostenloses Konto, bevor Sie beginnen.

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

  • Verwenden Sie die Bash-Umgebung in Azure Cloud Shell. Weitere Informationen finden Sie unter Azure Cloud Shell-Schnellstart: Bash.

    Launch Cloud Shell in a new window

  • Wenn Sie CLI-Referenzbefehle lieber lokal ausführen, installieren Sie die Azure CLI. Wenn Sie unter Windows oder macOS arbeiten, 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 Anmelden mit der Azure CLI.

    • Installieren Sie die Azure CLI-Erweiterungen bei der ersten Verwendung, wenn Sie dazu aufgefordert werden. Weitere Informationen zu Erweiterungen finden Sie unter Verwenden 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.

Erstellen einer lokalen .NET Core-App

In diesem Schritt richten Sie das lokale .NET Core-Projekt ein. Sie verwenden dasselbe Projekt, um eine Back-End-API-App und eine Front-End-Web-App bereitzustellen.

Klonen und Ausführen der Beispielanwendung

  1. Führen Sie die folgenden Befehle aus, um das Beispielrepository zu klonen und auszuführen.

    git clone https://github.com/Azure-Samples/dotnet-core-api
    cd dotnet-core-api
    dotnet run
    
  2. Navigieren Sie zu http://localhost:5000, und versuchen Sie, Todo-Elemente hinzuzufügen, zu bearbeiten und zu entfernen.

    ASP.NET Core API running locally

  3. Drücken Sie zum Beenden von ASP.NET Core im Terminal Ctrl+C.

  4. Stellen Sie sicher, dass der Standardbranch main ist.

    git branch -m main
    

    Tipp

    Die Änderung des Branchnamens ist für App Service nicht erforderlich. Da aber viele Repositorys ihren Standardbranch in main ändern, zeigt Ihnen dieses Tutorial auch, wie Sie ein Repository aus main bereitstellen. Weitere Informationen finden Sie unter Ändern des Bereitstellungsbranches.

Bereitstellen von Apps für Azure

In diesem Schritt stellen Sie das Projekt für zwei App Service-Apps bereit. Eine ist das Front-End-App und die andere ist die Back-End-App.

Konfigurieren eines Bereitstellungsbenutzers

Für die Bereitstellung in einer Azure-Web-App über FTP oder ein lokales Git kann ein Bereitstellungsbenutzer verwendet werden. Nach der Konfiguration des Bereitstellungsbenutzers können Sie ihn für alle Azure-Bereitstellungen verwenden. Der Benutzername und das Kennwort für die Bereitstellung auf Kontoebene unterscheiden sich von den Anmeldeinformationen für Ihr Azure-Abonnement.

Führen Sie zum Konfigurieren des Bereitstellungsbenutzers den Befehl az webapp deployment user set in Azure Cloud Shell aus. Ersetzen Sie <Benutzername> und <Kennwort> durch einen Benutzernamen und ein Kennwort der Bereitstellungsbenutzerin oder des Bereitstellungsbenutzers.

  • Der Benutzername muss in Azure eindeutig sein und darf bei lokalen Git-Pushes nicht das Symbol „@“ enthalten.
  • Das Kennwort muss mindestens acht Zeichen lang sein und zwei der folgenden drei Elemente enthalten: Buchstaben, Zahlen und Symbole.
az webapp deployment user set --user-name <username> --password <password>

In der JSON-Ausgabe wird das Kennwort als null angezeigt. Wenn Sie den Fehler 'Conflict'. Details: 409 erhalten, müssen Sie den Benutzernamen ändern. Wenn Sie den Fehler 'Bad Request'. Details: 400 erhalten, müssen Sie ein sichereres Kennwort verwenden.

Notieren Sie Ihren Benutzernamen und Ihr Kennwort für die Bereitstellung Ihrer Web-Apps.

Erstellen von Azure-Ressourcen

Führen Sie in Cloud Shell die folgenden Befehle aus, um zwei Windows-Web-Apps zu erstellen. Ersetzen Sie front-end-app-name> und > durch zwei global eindeutige App-Namen (gültige Zeichen sind a-z, 0-9 und -). Weitere Informationen zu den einzelnen Befehlen finden Sie unter Hosten einer RESTful-API mit CORS in Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

Führen Sie in der Cloud Shell die folgenden Befehle aus, um zwei Web-Apps zu erstellen. Ersetzen Sie front-end-app-name> und > durch zwei global eindeutige App-Namen (gültige Zeichen sind a-z, 0-9 und -). Weitere Informationen zu den einzelnen Befehlen finden Sie unter Schnellstart: Erstellen einer ASP.NET Core-Web-App in Azure.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Hinweis

Speichern Sie die URLs der Git-Remotespeicherorte für Ihre Front-End-App und Back-End-App, die in der Ausgabe von az webapp create angezeigt werden.

Übertragen von Git an Azure mithilfe von Push

  1. Da Sie den Branch main bereitstellen, müssen Sie den Standardbereitstellungsbranch für Ihre beiden App Service-Apps auf main festlegen (siehe main). Legen Sie die App-Einstellung DEPLOYMENT_BRANCH in Cloud Shell mit dem Befehl az webapp config appsettings set fest.

    az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    
  2. Führen Sie im lokalen Terminalfenster die folgenden Git-Befehle aus, um die Bereitstellung für die Back-End-App durchzuführen. Ersetzen Sie deploymentLocalGitUrl-of-back-end-app> durch die URL des Git-Remotespeicherorts, die Sie in > gespeichert haben. Wenn Sie von der Git-Anmeldeinformationsverwaltung zur Eingabe von Anmeldeinformationen aufgefordert werden, müssen Sie Ihre Anmeldeinformationen für die Bereitstellung eingeben (nicht die Anmeldeinformationen, die Sie für die Anmeldung beim Azure-Portal verwenden).

    git remote add backend <deploymentLocalGitUrl-of-back-end-app>
    git push backend main
    
  3. Führen Sie im lokalen Terminalfenster die folgenden Git-Befehle aus, um den gleichen Code für die Front-End-App bereitzustellen. Ersetzen Sie deploymentLocalGitUrl-of-front-end-app> durch die URL des Git-Remotespeicherorts, die Sie in > gespeichert haben.

    git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
    git push frontend main
    

Navigieren zu den Apps

Navigieren Sie in einem Browser zu den folgenden URLs, um verfolgen zu können, wie die beiden Apps ausgeführt werden.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Screenshot of an Azure App Service Rest API Sample in a browser window, which shows a To do list app.

Hinweis

Wenn Ihre App neu gestartet wird, fällt Ihnen ggf. auf, dass neue Daten gelöscht wurden. Dieses Verhalten ist erwünscht, da für die ASP.NET Core-Beispiel-App eine In-Memory Database verwendet wird.

Aufrufen der Back-End-API vom Front-End

In diesem Schritt legen Sie für den Servercode der App fest, dass auf die Back-End-API zugegriffen werden soll. Später können Sie den authentifizierten Zugriff vom Front-End auf das Back-End aktivieren.

Ändern des Front-End-Codes

  1. Öffnen Sie Controllers/TodoController.cs im lokalen Repository. Fügen Sie am Anfang der TodoController-Klasse die folgenden Zeilen hinzu, und ersetzen Sie TodoController durch den Namen Ihrer Back-End-App:

    private static readonly HttpClient _client = new HttpClient();
    private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
    
  2. Suchen Sie nach der Methode mit [HttpGet], und ersetzen Sie den Code in den geschweiften Klammern durch Folgendes:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
    return JsonConvert.DeserializeObject<List<TodoItem>>(data);
    

    In der ersten Zeile wird für die Back-End-API-App der Aufruf GET /api/Todo durchgeführt.

  3. Suchen Sie anschließend nach der Methode mit [HttpGet("{id}")], und ersetzen Sie den Code in den geschweiften Klammern durch Folgendes:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
    return Content(data, "application/json");
    

    In der ersten Zeile wird für die Back-End-API-App der Aufruf GET /api/Todo/{id} durchgeführt.

  4. Suchen Sie anschließend nach der Methode mit [HttpPost], und ersetzen Sie den Code in den geschweiften Klammern durch Folgendes:

    var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
    var data = await response.Content.ReadAsStringAsync();
    return Content(data, "application/json");
    

    In der ersten Zeile wird für die Back-End-API-App der Aufruf POST /api/Todo durchgeführt.

  5. Suchen Sie anschließend nach der Methode mit [HttpPut("{id}")], und ersetzen Sie den Code in den geschweiften Klammern durch Folgendes:

    var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
    return new NoContentResult();
    

    In der ersten Zeile wird für die Back-End-API-App der Aufruf PUT /api/Todo/{id} durchgeführt.

  6. Suchen Sie anschließend nach der Methode mit [HttpDelete("{id}")], und ersetzen Sie den Code in den geschweiften Klammern durch Folgendes:

    var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
    return new NoContentResult();
    

    In der ersten Zeile wird für die Back-End-API-App der Aufruf DELETE /api/Todo/{id} durchgeführt.

  7. Speichern Sie alle Änderungen. Stellen Sie Ihre Änderungen im lokalen Terminalfenster für die Front-End-App bereit, indem Sie die folgenden Git-Befehle verwenden:

    git add .
    git commit -m "call back-end API"
    git push frontend main
    

Überprüfen der Änderungen

  1. Navigieren Sie zu http://<front-end-app-name>.azurewebsites.net, und fügen Sie einige Elemente hinzu, z.B. from front end 1 und from front end 2.

  2. Navigieren Sie zu http://<back-end-app-name>.azurewebsites.net, um die aus der Front-End-App hinzugefügten Elemente anzuzeigen. Fügen Sie außerdem einige Elemente hinzu, z.B. from back end 1 und from back end 2. Aktualisieren Sie anschließend die Front-End-App, um zu prüfen, ob die Änderungen widergespiegelt werden.

    Screenshot of an Azure App Service Rest API Sample in a browser window, which shows a To do list app with items added from the front-end app.

Konfigurieren der Authentifizierung

In diesem Schritt aktivieren Sie die Authentifizierung und Autorisierung für die beiden Apps. Außerdem konfigurieren Sie die Front-End-App so, dass ein Zugriffstoken generiert wird, mit dem Sie authentifizierte Aufrufe für die Back-End-App durchführen können.

Sie verwenden Azure Active Directory als Identitätsanbieter. Weitere Informationen finden Sie unter Konfigurieren der Azure Active Directory-Authentifizierung für die App Services-Anwendung.

Aktivieren der Authentifizierung und Autorisierung für die Back-End-App

  1. Wählen Sie im Menü Azure-Portal den Eintrag Ressourcengruppen aus, oder suchen und wählen Sie auf einer beliebigen Seite Ressourcengruppen aus.

  2. Navigieren Sie in Ressourcengruppen zu Ihrer Ressourcengruppe, und wählen Sie sie aus. Wählen Sie in Übersicht die Verwaltungsseite Ihrer Back-End-App aus.

    Screenshot of the Resource groups window, showing the Overview for an example resource group and a back-end app's management page selected.

  3. Wählen Sie im linken Menü der Back-End-App die Option Authentifizierung aus, und klicken Sie dann auf Identitätsanbieter hinzufügen.

  4. Wählen Sie auf der Seite Identitäts Anbieter hinzufügen die OptionMicrosoft als Identitäts Anbieter aus, um Microsoft-und Azure AD Identitäten anzumelden.

  5. Übernehmen Sie die Standardeinstellungen, und wählen Sie OK aus:

    Screenshot of the back-end app's left menu showing Authentication/Authorization selected and settings selected in the right menu.

  6. Die Seite Authentifizierung wird geöffnet. Kopieren Sie die Client-ID der Azure AD-Anwendung in Editor. Sie benötigen diesen Wert später noch.

    Screenshot of the Azure Active Directory Settings window showing the Azure AD App, and the Azure AD Applications window showing the Client ID to copy.

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 übrigen Abschnitten erfahren Sie, wie Sie eine Multi-App-Lösung durch einen authentifizierten Benutzerflow vom Front-End zum Back-End schützen.

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

Führen Sie die gleichen Schritte für die Front-End-App aus, aber lassen Sie den letzten Schritt weg. Für die Front-End-App ist die Client-ID nicht erforderlich. Bleiben Sie jedoch auf der Seite Authentifizierung für die Front-End-App, da Sie sie im nächsten Schritt verwenden werden.

Wenn Sie möchten, können Sie zu http://<front-end-app-name>.azurewebsites.net navigieren. Sie sollten auf eine sichere Anmeldeseite geleitet werden. Nachdem Sie sich angemeldet haben, können Sie über die Back-End-App immer noch nicht auf die Daten zugreifen, da für die Back-End-App nun die Azure Active Directory-Anmeldung über die Front-End-App erforderlich ist. Sie müssen drei Schritte ausführen:

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

Tipp

Falls Fehler auftreten und Sie die Einstellungen für die Authentifizierung/Autorisierung Ihrer App neu konfigurieren, können die Token im Tokenspeicher aus den neuen Einstellungen ggf. nicht neu generiert werden. Um sicherzustellen, dass Ihre Token neu generiert werden können, müssen Sie sich abmelden und neu an der App anmelden. Eine einfache Möglichkeit hierfür ist die Verwendung Ihres Browsers im privaten Modus und das Schließen und erneute Öffnen des Browsers im privaten Modus, nachdem Sie die Einstellungen in Ihren Apps geändert haben.

Gewähren des Zugriffs auf das Back-End für die Front-End-App

Nachdem Sie die Authentifizierung und Autorisierung für beide Apps aktiviert haben, verfügen beide über Unterstützung durch eine AD-Anwendung. In diesem Schritt gewähren Sie für die Front-End-App Berechtigungen zum Zugreifen auf das Back-End im Namen des Benutzers. (In technischer Hinsicht erteilen Sie der AD-Anwendung des Front-Ends die Berechtigungen zum Zugreifen auf die AD-Anwendung des Back-Ends im Namen des Benutzers.)

  1. Wählen Sie auf der Seite Authentifizierung für die Front-End-App unter Identitätsanbieter den Namen Ihrer Front-End-App aus. Diese App-Registrierung wurde automatisch für Sie generiert. Wählen Sie im linken Menü API-Berechtigungen aus.

  2. Klicken Sie auf Berechtigung hinzufügen und anschließend auf Meine APIsName der Back-End-App.

  3. Wählen Sie auf der Seite API-Berechtigungen anfordern für die Back-End-App Delegierte Berechtigungen und user_impersonation und anschließend Berechtigungen hinzufügen aus.

    Screenshot of the Request API permissions page showing Delegated permissions, user_impersonation, and the Add permission button selected.

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. In diesem Schritt konfigurieren Sie die App Service-Authentifizierung und -Autorisierung, um ein verwendbares Zugriffstoken für den Zugriff auf das Back-End zu erhalten. Für diesen Schritt benötigen Sie die Client-ID des Back-Ends, die Sie unter Aktivieren der Authentifizierung und Autorisierung für die Back-End-App kopiert haben.

Führen Sie in Cloud Shell die folgenden Befehle für die Front-End-App aus, um den Parameter scope der Authentifizierungseinstellung identityProviders.azureActiveDirectory.login.loginParameters hinzuzufügen. Ersetzen Sie front-end-app-name> und >.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings” | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid profile email 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 effektiv eine loginParameters-Eigenschaft mit zusätzlichen benutzerdefinierten Bereichen hinzu. Hier ist eine Beschreibung der angeforderten Bereiche angegeben:

  • openid, profile und email werden von App Service bereits standardmäßig angefordert. Weitere Informationen finden Sie unter OpenID Connect-Bereiche.
  • api://<back-end-client-id>/user_impersonation ist eine API, die unter Ihrer Back-End-App-Registrierung verfügbar gemacht wird. Dies ist der Bereich, über den Sie ein JWT-Token erhalten, in dem die Back-End-App als Tokenzielgruppe enthalten ist.
  • offline_access ist hier als Hilfe angegeben (falls Sie Token aktualisieren möchten).

Tipp

  • Um den Bereich api://<back-end-client-id>/user_impersonation im Azure-Portal anzuzeigen, wechseln Sie zur Seite api://<back-end-client-id>/user_impersonation für die Back-End-App, klicken auf den Link unter Identitätsanbieter und klicken dann im linken Menü auf API verfügbar machen.
  • Falls Sie die erforderlichen Bereiche stattdessen per Weboberfläche konfigurieren möchten, helfen Ihnen die Microsoft-Schritte unter Aktualisieren von Authentifizierungstoken weiter.
  • 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 anknappt. 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, indem Sie auf Clientanwendung hinzufügen klicken und die Client-ID der App-Registrierung des Front-Ends übergeben.

Hinweis

Für Linux-Apps ist es vorübergehend erforderlich, eine Einstellung für die Versionseinstellungen für die Back-End-App-Registrierung zu konfigurieren. Konfigurieren Sie Cloud Shell mit den folgenden Befehlen. Achten Sie darauf, dass Sie back-end-client-id> durch die Client-ID Ihres Back-Ends ersetzen.

id=$(az ad app show --id <back-end-client-id> --query objectId --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}" 

Ihre Apps sind nun konfiguriert. Das Front-End kann jetzt mit einem geeigneten Zugriffstoken auf das Back-End zugreifen.

Informationen dazu, wie Sie das Zugriffstoken für andere Anbieter konfigurieren, finden Sie unter Erweiterte Verwendung der Authentifizierung und Autorisierung in Azure App Service.

Sicheres Aufrufen der API aus Servercode

In diesem Schritt passen Sie den zuvor geänderten Servercode so an, dass authentifizierte Aufrufe der Back-End-API durchgeführt werden können.

Ihre Front-End-App verfügt jetzt über die erforderliche Berechtigung und fügt den Anmeldeparametern die Client-ID des Back-Ends hinzu. So kann ein Zugriffstoken für die Authentifizierung bei der Back-End-App abgerufen werden. App Service stellt dieses Token für Ihren Servercode bereit, indem in jede authentifizierte Anforderung ein X-MS-TOKEN-AAD-ACCESS-TOKEN-Header eingefügt wird (siehe X-MS-TOKEN-AAD-ACCESS-TOKEN (Abrufen von Token im App-Code)).

Hinweis

Diese Header werden für alle unterstützten Sprachen eingefügt. Sie greifen darauf zu, indem Sie jeweils das Standardmuster für eine Sprache verwenden.

  1. Öffnen Sie Controllers/TodoController.cs erneut im lokalen Repository. Fügen Sie unter dem Konstruktor TodoController(TodoContext context) den folgenden Code hinzu:

    public override void OnActionExecuting(ActionExecutingContext context)
    {
        base.OnActionExecuting(context);
    
        _client.DefaultRequestHeaders.Accept.Clear();
        _client.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
    }
    

    Mit diesem Code wird der HTTP-Standardheader Authorization: Bearer <access-token> allen API-Remoteaufrufen hinzugefügt. In der ASP.NET Core-Pipeline für die MVC-Anforderungsausführung wird OnActionExecuting direkt vor der jeweiligen Aktion ausgeführt, sodass alle ausgehenden API-Aufrufe jetzt über das Zugriffstoken verfügen.

  2. Speichern Sie alle Änderungen. Stellen Sie Ihre Änderungen im lokalen Terminalfenster für die Front-End-App bereit, indem Sie die folgenden Git-Befehle verwenden:

    git add .
    git commit -m "add authorization header for server code"
    git push frontend main
    
  3. Führen Sie die Anmeldung an https://<front-end-app-name>.azurewebsites.net erneut durch. Klicken Sie auf der Seite mit der Vereinbarung zur Nutzung der Benutzerdaten auf Akzeptieren.

    Es sollte nun möglich sein, dass Sie wie zuvor Daten für die Back-End-App erstellen, lesen, aktualisieren und löschen. Der einzige Unterschied ist, dass beide Apps jetzt per App Service-Authentifizierung und -Autorisierung geschützt sind (einschließlich Dienst-zu-Dienst-Aufrufe).

Glückwunsch! Ihr Servercode greift jetzt im Namen des authentifizierten Benutzers auf die Back-End-Daten zu.

Sicheres Aufrufen der API aus Browsercode

In diesem Schritt legen Sie fest, dass die Angular.js-App des Front-Ends auf die Back-End-API verweist. Auf diese Weise erfahren Sie, wie Sie das Zugriffstoken abrufen und damit API-Aufrufe für die Back-End-App durchführen.

Der Servercode hat Zugriff auf die Anforderungsheader, aber der Clientcode kann auf GET /.auth/me zugreifen, um die gleichen Zugriffstoken abzurufen (siehe GET /.auth/me (Abrufen von Token im App-Code)).

Tipp

In diesem Abschnitt werden die HTTP-Standardmethoden verwendet, um sichere HTTP-Aufrufe zu demonstrieren. Sie können aber die Microsoft-Authentifizierungsbibliothek für JavaScript verwenden, um das Angular.js-Anwendungsmuster zu vereinfachen.

Konfigurieren von CORS

Aktivieren Sie CORS in Cloud Shell mithilfe des Befehls az webapp cors add für die URL Ihres Clients. Ersetzen Sie die Platzhalter back-end-app-name> und >.

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Dieser Schritt bezieht sich nicht auf die Authentifizierung und Autorisierung. Er ist aber erforderlich, damit Ihr Browser die domänenübergreifenden API-Aufrufe aus Ihrer Angular.js-App zulässt. Weitere Informationen finden Sie unter Hinzufügen der CORS-Funktion.

Verweisen auf die Back-End-API für die Angular.js-App

  1. Öffnen Sie wwwroot/index.html im lokalen Repository.

  2. Legen Sie die Variable apiEndpoint in Zeile 51 auf die HTTPS-URL Ihrer Back-End-App (https://<back-end-app-name>.azurewebsites.net) fest. Ersetzen Sie back-end-app-name> durch Ihren App-Namen in App Service.

  3. Öffnen Sie wwwroot/app/scripts/todoListSvc.js im lokalen Repository, und stellen Sie sicher, dass allen API-Aufrufen vorangestellt wird. Ihre Angular.js-App ruft jetzt die Back-End-APIs auf.

Hinzufügen des Zugriffstokens zu API-Aufrufen

  1. Fügen Sie der Liste in wwwroot/app/scripts/todoListSvc.js oberhalb der Liste mit den API-Aufrufen (über der Zeile ) die folgende Funktion hinzu:

    setAuth: function (token) {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    },
    

    Diese Funktion wird aufgerufen, um den Standardheader Authorization mit dem Zugriffstoken festzulegen. Sie rufen sie im nächsten Schritt auf.

  2. Öffnen Sie wwwroot/app/scripts/app.js im lokalen Repository, und suchen Sie nach dem folgenden Code:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
    }).otherwise({ redirectTo: "/Home" });
    
  3. Ersetzen Sie den gesamten Codeblock durch den folgenden Code:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
        resolve: {
            token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
                return $http.get('/.auth/me').then(function (response) {
                    todoListSvc.setAuth(response.data[0].access_token);
                    return response.data[0].access_token;
                });
            }]
        },
    }).otherwise({ redirectTo: "/Home" });
    

    Mit der neuen Änderung wird die Zuordnung resolve hinzugefügt, die /.auth/me aufruft, und das Zugriffstoken wird festgelegt. Es wird sichergestellt, dass Sie über das Zugriffstoken verfügen, bevor Sie den Controller todoListCtrl instanziieren. Auf diese Weise ist das Token in allen API-Aufrufen vom Controller enthalten.

Bereitstellen von Updates und Durchführen von Tests

  1. Speichern Sie alle Änderungen. Stellen Sie Ihre Änderungen im lokalen Terminalfenster für die Front-End-App bereit, indem Sie die folgenden Git-Befehle verwenden:

    git add .
    git commit -m "add authorization header for Angular"
    git push frontend main
    
  2. Navigieren Sie erneut zu https://<front-end-app-name>.azurewebsites.net. Es sollte nun möglich sein, dass Sie Daten für die Back-End-App direkt in der Angular.js-App erstellen, lesen, aktualisieren und löschen.

Glückwunsch! Ihr Clientcode greift jetzt im Namen des authentifizierten Benutzers auf die Back-End-Daten zu.

Ablauf von Zugriffstoken

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.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen:

az group delete --name myAuthResourceGroup

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.

Nächste Schritte

Sie haben Folgendes gelernt:

  • Aktivieren der integrierten Authentifizierung und Autorisierung
  • Schützen von Apps vor nicht authentifizierten Anforderungen
  • Verwenden von Azure Active Directory 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
  • Verwenden von Zugriffstoken aus Clientcode (Browser)

Fahren Sie mit dem nächsten Tutorial fort, um zu erfahren, wie Sie Ihrer App einen benutzerdefinierten DNS-Namen zuordnen.