次の方法で共有

Azure Function App (プレビュー) を使用してネイティブ認証 API を呼び出すシングルページ アプリのリバース プロキシを設定する

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

この記事では、Azure Functions アプリを使用してリバース プロキシを設定し、ネイティブ認証 API を使用するシングルページ アプリ (SPA) のテスト環境で CORS ヘッダー管理する方法について説明します。

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

このソリューションはテスト目的であり、運用環境 では使用しないでください。 運用環境で使用するソリューションをお探しの場合は、Azure Front Door ソリューションを使用することをお勧めします。実稼働 で SPA の CORS ヘッダーを管理するには、リバース プロキシとして Azure Front Door を使用するに関するページの手順を参照してください。

[前提条件]

  • Azure サブスクリプション。 無料でアカウントを作成できます。
  • リソース プロバイダー Microsoft.App 登録する方法については、「 リソース プロバイダーを登録する方法」を参照してください。 この手順を完了する必要があるのは、新しく作成されたサブスクリプションごとに 1 回だけです。
  • Azure Developer CLI (azd) をインストールします。
  • http://www.contoso.comなどの URL を介してアクセスできるサンプル SPA:
    • 「クイック スタート: ネイティブ認証 APIを使用して、サンプルの React SPA にユーザーをサインインする」で説明されている React アプリを使用できます。 ただし、このガイドでは設定が説明されるため、プロキシ サーバーを構成したり実行したりしないでください。
    • アプリを実行したら、このガイドで後で使用するためにアプリの URL を記録します。

Azure Developer CLI (azd) テンプレートを使用して Azure 関数アプリでリバース プロキシを作成する

  1. azd テンプレートを初期化するには、次のコマンドを実行します。

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

    プロンプトが表示されたら、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 を使用します。 テナント サブドメインがない場合は、テナントの詳細を 読み取る方法について説明します。

リバース プロキシを使用してサンプル SPA をテストする

  1. サンプル SPA で、 API\React\ReactAuthSimple\src\config.ts ファイルを開き、次のコードを置き換えます。

    • BASE_API_URL、http://localhost:3001/api、https://Enter_App_Function_Name_Here.azurewebsites.netの値。
    • 関数アプリの名前で Enter_App_Function_Name_Here プレースホルダーを置き換えます。 必要に応じて、サンプル SPA を再実行します。

  2. サンプルの SPA URL を参照し、サインアップ、サインイン、パスワードリセットのフローをテストします。 リバース プロキシが CORS ヘッダーを正しく管理する場合、SPA アプリは正しく動作するはずです。

関連コンテンツ

  • ネイティブ認証を使用する SPA の運用環境で、Azure Front Door をリバース プロキシとして使用します。