Vorherige

Nächste

Übung: Konfigurieren von Authentifizierungsanbietern und Zugriff

Abgeschlossen

Ihre Web-App für Einkaufslisten muss den Zugriff auf einige Routen schützen und bestimmte Authentifizierungsanbieter deaktivieren. In dieser Übung aktualisieren Sie zu diesem Zweck die Routingkonfiguration Ihrer Web-App.

In dieser Übung führen Sie die folgenden Schritte aus:

1. Hinzufügen von Regeln zur Routingkonfiguration, um einige Authentifizierungsanbieter zu deaktivieren
2. Schützen der Produktliste, damit nur authentifizierte Benutzer darauf zugreifen können
3. Bereitstellen der aktualisierten App
4. Testen, ob die Einschränkungen wirksam sind

Deaktivieren von Authentifizierungsanbietern

Wir ändern die Routingkonfiguration unserer Anwendung dahingehend, dass der Microsoft Entra-Authentifizierungsanbieter deaktiviert wird.

1. Öffnen Sie das Projekt in Visual Studio Code.

2. Öffnen Sie die folgende Datei.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Fügen Sie am Stamm des JSON-Objekts die folgende Routingkonfiguration hinzu.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Durch das Hinzufügen dieser Routingregel verhindern Sie, dass Benutzer*innen auf den Microsoft Entra-Authentifizierungsanbieter zugreifen.

Schützen des Zugriffs auf die Produktliste

Als Nächstes soll die Produktliste so abgesichert werden, dass nur authentifizierte Benutzer auf die API zugreifen können. Dazu fügen Sie der Konfigurationsdatei staticwebapp.config.json eine weitere Routingregel hinzu.

1. Fügen Sie die folgende Regel am Anfang des Arrays routes hinzu.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. Die fertige Datei staticwebapp.config.json sollte wie das folgende Beispiel aussehen:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

Bereitstellen Ihrer Änderungen

Bevor wir das Ergebnis dieser Konfiguration testen, stellen wir unsere Anwendung erneut bereit.

1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

2. Geben Sie Git: Commit für alle ausführen ein, und wählen Sie den angezeigten Eintrag aus.

3. Geben Sie Secure access als Commitnachricht ein, und drücken Sie die EINGABETASTE.

4. Öffnen Sie die Befehlspalette, indem Sie F1 drücken.

5. Geben Sie Git: Push ein, wählen Sie den angezeigten Eintrag aus, und drücken Sie die EINGABETASTE.

Nachdem Sie Ihre Änderungen per Push übertragen haben, warten Sie auf die Ausführung des Build- und Bereitstellungsprozesses. Die Änderungen sollten danach in Ihrer bereitgestellten App sichtbar sein.

Testen der neuen Einschränkungen

Nachdem Ihre App erneut bereitgestellt wurde, können Sie testen, ob die neuen Einschränkungen wirksam sind.

1. Kehren Sie im Explorer-Fenster von Visual Studio Code zum Abschnitt Statische Web-Apps zurück, klicken Sie mit der rechten Maustaste auf my-static-web-app-and-authn, und wählen Sie dann Website durchsuchen aus, um die App in Ihrem Browser anzuzeigen.

2. Wenn Sie nicht angemeldet sind, sollten Sie anstelle der Produktliste die Meldung Nicht autorisiert sehen.

3. Wählen Sie in der Liste der Authentifizierungsanbieter Microsoft Entra ID aus, um sich anzumelden.

   Es sollte eine Seite für den Fehler 404 wie die folgende angezeigt werden:

   

4. Wählen Sie im Browser die Schaltfläche „Zurück“ aus, um zu Ihrer App zurückzukehren.

5. Wählen Sie in der Liste der Authentifizierungsanbieter GitHub aus, um sich anzumelden.

6. Geben Sie nach Aufforderung Ihre GitHub- Anmeldeinformationen ein, und wählen Sie dann auf der Azure-Einwilligungsseite Einwilligung erteilen aus.

Sie sind nun angemeldet und sollten die Produktliste sehen.

Nächste Schritte

Herzlichen Glückwunsch. Sie haben in Ihrer statischen Web-App einen vollständigen Authentifizierungsworkflow implementiert.

Weiter