Konfigurera en omvänd proxy för en ensidesapp som anropar api för intern autentisering med hjälp av Azure Function App (förhandsversion)

Gäller för: Workforce-klienter externa klienter (lära dig mer)

I den här artikeln får du lära dig hur du konfigurerar en omvänd proxy genom att använda Azure Functions App för att hantera CORS-huvuden i en testmiljö för en ensidesapp (SPA) som använder inbyggt 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 göra framgångsrika förfrågningar från JavaScript-koden på klientsidan. För att lösa detta måste du lägga till en proxyserver mellan SPA och det interna autentiserings-API:et. Den här proxyservern matar in lämpliga CORS-huvuden i svaret.

Den här lösningen är i testsyfte och bör INTE användas i en produktionsmiljö. Om du letar efter en lösning som ska användas i en produktionsmiljö rekommenderar vi att du använder en Azure Front Door-lösning, se anvisningarna i Använda Azure Front Door som en omvänd proxy för att hantera CORS-huvuden för SPA i produktion.

Förutsättningar

• Ett Azure-abonnemang. Skapa ett konto kostnadsfritt.
• Azure Developer CLI. När du har installerat den loggar du in på den för första gången. För mer information, se Logga in på Azure CLI.
• 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 beskriver den konfigurationen.
  • När du har kört appen registrerar du appens URL för senare användning i den här guiden.

Skapa omvänd proxy i en Azure-funktionsapp med hjälp av En Azure Resource Manager-mall

1. Skapa en resursgrupp med hjälp av az group create

   az group create --name Enter_Resource_Group_Name_Here --location Enter_Location_Name_Here
   

   Ersätt platshållaren:

   • Enter_Resource_Group_Name_Here med namnet på den nya resursgruppen.
   • Enter_Location_Name_Here med den geografiska region där resursgruppen skapas.

   Vänta tills den här processen har slutförts innan du skapar funktionsappen.

2. Så här hämtar du mallen för Azure Resource Manager (ARM):

   1. Klona ett SPA-exempel som innehåller ARM-mallen:

      git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git
      

   2. Navigera till ARM-mallkatalogen med hjälp av följande kommando:

      cd API/CORSTestEnviroment
      

3. Skapa funktionsappen genom att köra följande kommando:

   az deployment group create \
       --resource-group Enter_Resource_Group_Name_Here \
       --template-file ReverseProxyARMTemplate.json \
       --parameters functionAppName=Enter_App_Function_Name_Here \
       --parameters location=Enter_Location_Name_Here \
       --parameters SPAurl=Enter_The_SPA_URL_Here
   

   Ersätta:

   • Enter_Resource_Group_Name_Here med namnet på den nya resursgruppen.
   • Enter_App_Function_Name_Here med namnet på din funktionsapp.
   • Enter_Location_Name_Here med den geografiska region där resursgruppen skapas.
   • Enter_The_SPA_URL_Here med URL:en för SPA-appen som du registrerade tidigare.

4. Öppna filen /API/CORSTestEnviroment/ReverseProxy/index.js och ersätt platshållaren Enter_the_Tenant_Subdomain_Here med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn, lär dig hur du kan läsa klientinformationen.

   Namnet på katalogen, till exempel ReverseProxy, måste matcha värdet, till exempel ReverseProxy/{*path}, för route-nyckeln i filen function.json. Om du ändrar namnet på katalogen till TriggerFuncmåste värdet för den route nyckeln vara TriggerFunc/{*path}.

5. Så här distribuerar du projektfilerna till en Azure-funktionsapp:

   1. Kontrollera att du är i katalogen /API/CORSTestEnviroment/ och zippa sedan projektfilerna med hjälp av följande kommando:

      zip -r ReverseProxy.zip ReverseProxy
      

   2. Distribuera appfiler med hjälp av följande kommando:

      az functionapp deployment source config-zip \
          --resource-group "Enter_Resource_Group_Name_Here" \
          --name "Enter_App_Function_Name_Here" \
          --src ReverseProxy.zip  
      

Testa ditt SPA-exempel med omvänd proxy

1. 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_App_Function_Name_Here.azurewebsites.net/api/ReverseProxy. Ersätt platshållaren Enter_App_Function_Name_Here med namnet på funktionsappen. Kör om din SPA-applikation om det behövs.

2. Bläddra till SPA-exempel-URL:en och testa sedan flöden för registrering, inloggning och lösenordsåterställning. Din SPA-app bör fungera korrekt eftersom den omvända proxyn hanterar CORS-huvuden korrekt.

Relaterat innehåll

• Använda Azure Front Door som omvänd proxy i produktionsmiljön för ett SPA som använder inbyggd autentisering.