Nastavení reverzního proxy serveru pro jednostránkovou aplikaci, která volá nativní rozhraní API pro ověřování pomocí Azure Function App (preview)

Platí pro: Externí tenanti (další informace)

V tomto článku se dozvíte, jak nastavit reverzní proxy pomocí aplikace Azure Functions ke správě hlaviček CORS v testovacím prostředí pro jednostránkové aplikace (SPA), která používá nativní ověřovací rozhraní API.

Nativní rozhraní API pro ověřování nepodporuje Cross-Origin Resource Sharing (CORS). Jednostránková aplikace (SPA), která používá toto rozhraní API pro ověřování uživatelů, proto nemůže úspěšně provádět požadavky z JavaScriptového kódu na straně klienta. Pokud chcete tento problém vyřešit, musíte mezi spa a nativním ověřovacím rozhraním API přidat proxy server. Tento proxy server vloží do odpovědi odpovídající hlavičky CORS.

Toto řešení je určené pro účely testování a mělo by NENÍ používáno v produkčním prostředí. Pokud hledáte řešení, které se má použít v produkčním prostředí, doporučujeme použít řešení Azure Front Door, přečtěte si pokyny v tématu Použití Služby Azure Front Door jako reverzního proxy serveru ke správě hlaviček CORS pro SPA v produkčním.

Požadavky

• Předplatné Azure. Vytvořit účet zdarma.
• Zaregistrujte Microsoft.App poskytovatele prostředků, viz Postup registrace poskytovatele prostředků. Tento krok stačí provést jenom jednou pro každé nově vytvořené předplatné.
• Nainstalujte Azure Developer CLI (azd).
• Ukázková spa, ke které máte přístup přes adresu URL, jako je například http://www.contoso.com:
  • Aplikaci React popsanou v Rychlém startu můžete použít k přihlášení uživatelů do ukázkové React SPA pomocí nativního ověřovacího API. Nekonfigurujte ani nespousívejte proxy server, protože tento průvodce popisuje nastavení.
  • Po spuštění aplikace si poznamenejte adresu URL aplikace pro pozdější použití v této příručce.

Vytvoření reverzního proxy serveru v aplikaci funkcí Azure pomocí šablony Azure Developer CLI (azd)

1. Pokud chcete inicializovat šablonu azd, spusťte následující příkaz:

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

   Po zobrazení výzvy zadejte název prostředí azd. Tento název se používá jako předpona pro skupinu prostředků, takže by měla být jedinečná v rámci vašeho předplatného Azure.

2. Pokud se chcete přihlásit k Azure, spusťte následující příkaz:

   azd auth login
   

3. Pokud chcete sestavit, zřídit a nasadit prostředky aplikace, spusťte následující příkaz:

   azd up
   

   Po zobrazení výzvy zadejte následující informace pro dokončení vytváření prostředků:

   • Azure Location: Umístění Azure, ve kterém jsou vaše prostředky nasazené.
   • Azure Subscription: Předplatné Azure, ve kterém jsou vaše prostředky nasazené.
   • corsAllowedOrigin: Původní doména umožňující CORS požadavky z formátu SCHEME://DOMAIN:PORT, http://localhost:3000například .
   • tenantSubdomain: Subdoména vašeho externího tenanta, kterou proxyujeme. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte subdoménu tenanta, přečtěte si, jak přečíst podrobnosti o tenantovi.

Otestování ukázkového SPA pomocí reverzního proxy serveru

1. V ukázkové spa otevřete soubor API\ReactAuthSimple\src\config.ts a pak nahraďte:

   • hodnota BASE_API_URL, http://localhost:3001/api, s https://Enter_App_Function_Name_Here.azurewebsites.net.
   • zástupný symbol Enter_App_Function_Name_Here s názvem vaší aplikace funkcí. V případě potřeby znovu spusťte vaši ukázkovou aplikaci typu SPA.

2. Přejděte na ukázkovou adresu URL SPA a pak otestujte toky registrace, přihlášení a resetování hesla. Aplikace SPA by měla správně fungovat, protože reverzní proxy server správně spravuje hlavičky CORS.

Související obsah

• Použít Azure Front Door jako reverzní proxy v produkčním prostředí pro SPA, který používá nativní ověřování.