Einrichten eines Reverse-Proxys für eine Single-Page-App, die die native Authentifizierungs-API mithilfe der Azure Function App (Vorschau) aufruft.

Gilt für: Externe Mandanten (weitere Informationen)

In diesem Artikel erfahren Sie, wie Sie einen Reverseproxy mithilfe der Azure Functions-App einrichten, um CORS-Header in einer Testumgebung für eine Einzelseiten-App (SPA) zu verwalten, die native Authentifizierungs-APIverwendet.

Die systemeigene Authentifizierungs-API unterstützt keine cross-Origin Resource Sharing (CORS). Daher kann eine Single-Page-App (SPA), die diese API für die Benutzerauthentifizierung verwendet, keine erfolgreichen Anforderungen aus Front-End-JavaScript-Code senden. Um dieses Problem zu beheben, müssen Sie einen Proxyserver zwischen der SPA und der systemeigenen Authentifizierungs-API hinzufügen. Dieser Proxyserver fügt die entsprechenden CORS-Header in die Antwort ein.

Diese Lösung dient zu Testzwecken und sollte NICHT in einer Produktionsumgebungverwendet werden. Wenn Sie nach einer Lösung zur Verwendung in einer Produktionsumgebung suchen, wird die Verwendung einer Azure Front Door-Lösung empfohlen. Weitere Informationen finden Sie in den Anweisungen unter Verwenden von Azure Front Door als Reverseproxy zum Verwalten von CORS-Headern für SPA in der Produktion.

Voraussetzungen

• Ein Azure-Abonnement. Kostenlos ein Konto erstellen.
• Registrieren Sie den Microsoft.App Ressourcenanbieter. Weitere Informationen finden Sie unter So registrieren Sie einen Ressourcenanbieter. Sie müssen diesen Schritt nur einmal für jedes neu erstellte Abonnement ausführen.
• Installieren Sie azure Developer CLI (azd).
• Ein Beispiel-SPA, auf das Sie über eine URL wie http://www.contoso.comzugreifen können:
  • Sie können die in Schnellstart beschriebene React-App verwenden: Melden Sie sich bei einem React SPA-Beispiel an, indem Sie die systemeigene Authentifizierungs-APIverwenden. Konfigurieren oder betreiben Sie den Proxyserver nicht, da diese Anleitung die Einrichtung abdeckt.
  • Nachdem Sie die App ausgeführt haben, notieren Sie die App-URL für die spätere Verwendung in diesem Handbuch.

Erstellen Sie einen Reverse-Proxy in einer Azure-Funktions-App mithilfe der Azure Developer CLI-Vorlage (azd)

1. Führen Sie den folgenden Befehl aus, um die azd-Vorlage zu initialisieren:

   azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function
   

   Wenn Sie dazu aufgefordert werden, geben Sie einen Namen für die azd-Umgebung ein. Dieser Name wird als Präfix für die Ressourcengruppe verwendet, damit er innerhalb Ihres Azure-Abonnements eindeutig sein sollte.

2. Führen Sie zum Anmelden bei Azure den folgenden Befehl aus:

   azd auth login
   

3. Führen Sie den folgenden Befehl aus, um die App-Ressourcen zu erstellen, bereitzustellen und zu implementieren:

   azd up
   

   Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen ein, um die Ressourcenerstellung abzuschließen:

   • Azure Location: Der Azure-Speicherort, an dem Ihre Ressourcen bereitgestellt werden.
   • Azure Subscription: Das Azure-Abonnement, in dem Ihre Ressourcen bereitgestellt werden.
   • corsAllowedOrigin: Die Ursprungsdomäne, um CORS-Anfragen im Format SCHEMA://DOMAIN:PORT zuzulassen, z. B. http://localhost:3000.
   • tenantSubdomain: Die Unterdomäne Ihres externen Mandanten, die wir als Proxy verwenden. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihre Mandantenunterdomäne nicht haben, erfahren Sie, wie Sie die Details Ihres Mandanten auslesen.

Testen Sie Ihr Beispiel-SPA mit dem Reverse Proxy

1. Öffnen Sie in Ihrem Beispiel-SPA die Datei "API\React\ReactAuthSimple\src\config.ts ", und ersetzen Sie dann Folgendes:

   • der Wert von BASE_API_URL, http://localhost:3001/api, mit https://Enter_App_Function_Name_Here.azurewebsites.net.
   • der Platzhalter Enter_App_Function_Name_Here mit dem Namen Ihrer Funktions-App. Führen Sie bei Bedarf das Beispiel SPA erneut aus.

2. Navigieren Sie zur SPA-Beispiel-URL, und testen Sie dann die Registrierung, Anmeldung und Kennwortzurücksetzungsvorgänge. Ihre SPA sollte ordnungsgemäß funktionieren, da CORS-Header durch den Reverseproxy ordnungsgemäß verwaltet werden.

Verwandte Inhalte

• Verwenden von Azure Front Door als Reverseproxy in einer Produktionsumgebung für eine SPA, die die native Authentifizierung verwendet