共用方式為

針對使用原生驗證的單頁應用程式，在生產環境中使用 Azure Front Door 作為反向代理（預覽）

適用於：具有灰色 X 符號的白色圓圈 。 Workforce 租使用者 綠色圓圈加上白色複選標記符號。 外部租使用者（深入瞭解）

在本文中，您將瞭解如何使用 Azure Front Door 作為單頁應用程式 (SPA) 的反向代理，該應用程式使用 原生驗證 API。

原生驗證 API 不支援跨原始來源資源分享 （CORS）。 因此，使用此 API 進行使用者驗證的單頁應用程式無法從前端 JavaScript 程式代碼提出成功的要求。 若要解決此問題，請在 SPA 與原生驗證 API 之間新增 Proxy 伺服器。 Proxy 伺服器會將適當的 CORS 標頭插入回應中。

在生產環境中，建議將 Azure Front Door 搭配標準/進階訂閱 作為反向代理。

先決條件

將 Azure Front Door 設定為反向 Proxy

  1. 閱讀使用 Azure Front Door Standard/Premium 搭配 CORS 一文，以熟悉如何使用 Azure Front Door 與 CORS。
  2. 使用 在外部租用戶中為應用程式啟用自訂 URL 網域中的指示，將自訂功能變數名稱新增至外部租用戶。
  3. 在您的範例 SPA 中，開啟 API\ReactAuthSimple\src\config.ts 檔案，然後將 BASE_API_URL、 http://localhost:3001/api的值取代為 https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here。 替換佔位符：
    1. 使用您的自訂網域 URL Enter_Custom_Domain_URL，例如 contoso.com。
    2. 使用您的目錄（租用戶）標識碼 Enter_the_Tenant_ID_Here。 如果您沒有租戶 ID，請瞭解如何 查看租戶詳細資訊。
  4. 如有必要，請重新執行範例 SPA。

使用 Azure 開發人員 CLI （azd） 範本建立 Azure Front Door 作為反向 Proxy

  1. 若要初始化 azd 範本，請執行下列命令：

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

    出現提示時，請輸入 azd 環境的名稱。 此名稱會作為資源群組的前置詞，因此應該在您的 Azure 訂用帳戶內是唯一的。

  2. 若要登入 Azure，請執行下列命令：

    azd auth login

  3. 若要建置、布建及部署應用程式資源，請執行下列命令：

    azd up

    出現提示時，請輸入下列資訊以完成資源建立：

    • Azure Location：部署資源的 Azure 位置。
    • Azure Subscription：部署資源的 Azure 訂用帳戶。
    • corsAllowedOrigin：允許 CORS 要求的來源網域，格式為 SCHEME：//DOMAIN：PORT，例如， http://localhost:3000.
    • tenantSubdomain：我們正在代理處理的外部租戶子域。 例如，如果您的租戶主要網域為 contoso.onmicrosoft.com，則請使用 contoso。 如果您沒有租戶子域，請瞭解如何 閱讀租戶詳細資料。
    • customDomain：在外部標識符內設定之自定義網域的完整URL，例如 ，login.example.com。

使用 Azure Front Door 作為反向 Proxy 的指導方針

當您將 Azure Front Door 設定為反向 Proxy 來管理生產環境中的 CORS 標頭時，建議您遵循下列指導方針：

限制原始來源

當您設定 Azure Front Door 時，只允許您的 SPA 網域 URL，例如 https://www.contoso.com作為來源。 避免允許所有來源的設定，例如 * 可能會導致安全性弱點。

使用簡單要求

原生驗證要求已符合 簡單要求的所有條件，：

  • 使用 Http Method: POST。
  • 使用 Content-Type: application/x-www-form-urlencoded。
  • 要求不需要自定義標頭。
  • 請求中不涉及 ReadableStream 這個物件。
  • 要求不需要使用 XMLHttpRequest。

相關內容