次の方法で共有

ネイティブ認証を使用するシングルページ アプリの運用環境で Azure Front Door をリバース プロキシとして使用する (プレビュー)

適用対象: 灰色の X 記号がある白い円。 従業員テナント 白いチェック マーク記号がある緑の円。 外部テナント (詳細情報)

この記事では、ネイティブ認証 API を使用するシングルページ アプリ (SPA) のリバース プロキシとして Azure Front Door使用する方法について説明します。

ネイティブ認証 API では、クロスオリジン リソース共有 (CORS) はサポートされていません。 そのため、この API をユーザー認証に使用するシングルページ アプリ (SPA) では、フロントエンド JavaScript コードから要求を正常に行うことはできません。 この問題を解決するには、SPA とネイティブ認証 API の間にプロキシ サーバーを追加します。 プロキシ サーバーは、適切な CORS ヘッダーを応答に挿入します。

運用環境では、Azure Front Door と Standard/Premium サブスクリプション をリバース プロキシとして使用することをお勧めします。

[前提条件]

  • Azure サブスクリプション。 無料でアカウントを作成できます。
  • http://www.contoso.comなどの URL を介してアクセスできるサンプル SPA:
    • 「クイック スタート: ネイティブ認証 APIを使用して、サンプルの React SPA にユーザーをサインインする」で説明されている React アプリを使用できます。 ただし、このガイドでは設定が説明されるため、プロキシ サーバーを構成したり実行したりしないでください。
    • アプリを実行したら、このガイドで後で使用するためにアプリの URL を記録します。 運用環境では、この URL には、カスタム ドメイン URL として使用するドメイン (http://www.contoso.com など) が含まれます。
  • Azure Developer CLI (azd) をインストールします。

Azure Front Door をリバース プロキシとして設定する

  1. CORS での Azure Front Door Standard/Premium の使用に関する記事を読んで、 CORS で Azure Front Door を使用する方法について理解します。
  2. 「外部テナントのアプリのカスタム URL ドメインを有効にする」の手順に従って、カスタム ドメイン名を外部テナントに追加します。
  3. サンプル SPA で、API\React\ReactAuthSimple\src\config.ts ファイルを開き、BASE_API_URLhttp://localhost:3001/apiの値を https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Hereに置き換えます。 プレースホルダーを次のように置き換えます。
    1. Enter_Custom_Domain_URL を、contoso.com など、カスタム ドメイン URL で置き換えます。
    2. Enter_the_Tenant_ID_Here をディレクトリ (テナント) ID で置き換えます。 テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。
  4. 必要に応じて、サンプル SPA を再実行します。

Azure Developer CLI (azd) テンプレートを使用してリバース プロキシとして Azure Front Door を作成する

  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: SCHEME://DOMAIN:PORT の形式で CORS 要求を許可する配信元ドメイン(例: http://localhost:3000.
    • tenantSubdomain: プロキシしている外部テナントのサブドメイン。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント サブドメインがない場合は、テナントの詳細を 読み取る方法について説明します。
    • customDomain: 外部 ID 内で構成されたカスタム ドメインの完全な URL (たとえば、 login.example.com)。

Azure Front Door をリバース プロキシとして使用するためのガイドライン

運用環境で CORS ヘッダーを管理するためのリバース プロキシとして Azure Front Door を設定する場合は、次のガイドラインをお勧めします。

配信元を制限する

Azure Front Door を構成する場合は、配信元として SPA ドメイン URL (https://www.contoso.comなど) のみを許可します。 セキュリティの脆弱性につながる可能性がある * など、すべての配信元を許可する構成は避けてください。

単純な要求を使用する

ネイティブ認証要求は、単純な要求のすべての条件を既に満たしています。

  • Http Method: POSTを使用します。
  • Content-Type: application/x-www-form-urlencodedを使用します。
  • 要求にはカスタム ヘッダーは必要ありません。
  • 要求には、要求 ReadableStream オブジェクトは含まれません。
  • 要求では、XMLHttpRequestの使用は必要ありません。

関連コンテンツ