Använd Azure Front Door som omvänd proxy i produktionsmiljö för en enkeltsidessapp som använder inbyggd autentisering (förhandsversion)

Gäller för: Arbetsstyrkehyresgäster externa hyresgäster (läs mer)

I den här artikeln får du lära dig hur du använder Azure Front Door som omvänd proxy för en ensidesapp (SPA) som använder inbyggd autentiserings-API.

Det interna autentiserings-API:et stöder inte resursdelning mellan ursprung (CORS). Därför kan en enkeltsidesapplikation (SPA) som använder det här API:et för användarautentisering inte lyckas göra förfrågningar från JavaScript-koden på klientsidan. Lös problemet genom att lägga till en proxyserver mellan SPA och det interna autentiserings-API:et. Proxyservern matar in lämpliga CORS-huvuden i svaret.

I en produktionsmiljö rekommenderar vi att du använder Azure Front Door med en Standard-/Premium-prenumeration som omvänd proxy.

Förutsättningar

• En Azure-prenumeration. Skapa ett konto kostnadsfritt.
• Ett exempel på SPA som du kan komma åt via en URL, till exempel http://www.contoso.com:
  • Du kan använda React-appen som beskrivs i Snabbstart: Logga in användare i ett React SPA-exempel med hjälp av api för intern autentisering. Konfigurera eller kör dock inte proxyservern, eftersom den här guiden omfattar den konfigurationen.
  • När du har kört appen registrerar du appens URL för senare användning i den här guiden. I produktion innehåller den här URL:en den domän som du vill använda som en anpassad domän-URL, till exempel http://www.contoso.com
• Installera Azure Developer CLI (azd).

Konfigurera Azure Front Door som en omvänd proxy

1. Bekanta dig med hur du använder Azure Front Door med CORS genom att läsa artikeln i Using Azure Front Door Standard/Premium with CORS (Använda Azure Front Door Standard/Premium med CORS).
2. Använd anvisningarna i Aktivera anpassade URL-domäner för appar i externa klienter för att lägga till ett anpassat domännamn i din externa klientorganisation.
   • Om du vill skapa en Azure Front Door använder du azd-mall.
3. I exempel-SPA öppnar du filen API\React\ReactAuthSimple\src\config.ts och ersätter sedan värdet för BASE_API_URL, http://localhost:3001/api, med https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here. Ersätt platshållaren:
   1. Enter_Custom_Domain_URL med din anpassade domän-URL, till exempel contoso.com.
   2. Enter_the_Tenant_ID_Here med ditt katalog-ID för tenant. Om du inte har ditt klient-ID kan du lära dig hur du läser klientinformationen.
4. Kör om ditt SPA-exempel om det behövs.

Skapa Azure Front Door som en omvänd proxy med hjälp av en Azure Developer CLI-mall (azd)

1. Kör följande kommando för att initiera azd-mallen:

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

   När du uppmanas till det anger du ett namn för azd-miljön. Namnet används som ett prefix för resursgruppen så det bör vara unikt i din Azure-prenumeration.

2. Om du vill logga in på Azure kör du följande kommando:

   azd auth login
   

3. Kör följande kommando för att skapa, etablera och distribuera appresurserna:

   azd up
   

   När du uppmanas att göra det anger du följande information för att slutföra resursskapandet:

   • Azure Location: Den Azure-plats där dina resurser distribueras.
   • Azure Subscription: Den Azure-prenumeration där dina resurser distribueras.
   • corsAllowedOrigin: Ursprungsdomänen för att tillåta CORS-begäranden från i formatet SCHEME://DOMAIN:PORT, till exempel http://localhost:3000.
   • tenantSubdomain: Underdomänen för den externa klientorganisationen som vi proxyar. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientunderdomänen kan du lära dig hur du kan läsa klientinformationen.
   • customDomain: Den fullständiga URL:en för den anpassade domänen som konfigurerats i externt ID, till exempel login.example.com.

Riktlinjer för att använda Azure Front Door som omvänd proxy

Vi rekommenderar följande riktlinjer när du konfigurerar Azure Front Door som en omvänd proxy för att hantera CORS-huvudena i en produktionsmiljö:

Begränsa ursprung

När du konfigurerar Azure Front Door tillåter du bara DIN SPA-domän-URL, till exempel https://www.contoso.com, som ursprung. Undvik konfigurationer som tillåter alla ursprung, till exempel * som kan leda till säkerhetsrisker.

Använda enkla begäranden

Interna autentiseringsbegäranden uppfyller redan alla villkor för enkla begäranden:

• Använder Http Method: POST.
• Använder Content-Type: application/x-www-form-urlencoded.
• Begäran kräver inte anpassade rubriker.
• Begäran omfattar inte ReadableStream objekt.
• Begäran kräver inte användning av XMLHttpRequest.

Relaterat innehåll

• Läs mer om Cross-Origin Resource Sharing (CORS).
• API-referens för intern autentisering.