ユーザーサインインでシングルページアプリケーションをセキュリティで保護する方法 - Azure Maps

[アーティクル]
10/24/2023

次のガイドは、コンテンツサーバーでホストされているか、Web サーバーの依存関係が最小限であるアプリケーションについて説明します。このアプリケーションは、Microsoft Entra ユーザーに対してのみセキュリティで保護したリソースが用意されています。このシナリオの目的は、Microsoft Entra ID に対して Web アプリケーションを認証するとともに、ユーザーに代わって Azure Maps REST API を呼び出せるようにすることです。

Azure portal で Azure Maps アカウントの認証の詳細を表示するには:

Azure portal にサインインします。
Azure portal メニューに移動します。 [すべてのリソース] を選択し、Azure Maps アカウントを選択します。
左側のペインの [設定] で、 [認証] を選択します。

Azure Maps アカウントの作成時に、3 つの値が作成されます。それらは、Azure Maps で次の 2 種類の認証をサポートするために使用されます。

Microsoft Entra 認証: Client ID は、REST API 要求に使用されるアカウントを表します。 Client ID 値は、アプリケーション構成に格納してから、Microsoft Entra 認証を使用する Azure Maps HTTP 要求を行う前に取得する必要があります。
共有キー認証: Primary Key および Secondary Key は、共有キー認証のサブスクリプションキーとして使用されます。共有キー認証は、Azure Maps への各要求で、Azure Maps アカウントによって生成されたキーを渡す処理に依存しています。キーを定期的に再生成することをお勧めします。再生成中に現在の接続を維持するために、2 つのキーが用意されています。 1 つのキーを、もう一方を再生成しているときに使用できます。キーを再生成したら、新しいキーを使用するように、このアカウントにアクセスするすべてのアプリケーションを更新する必要があります。詳細については、「Azure Maps による認証」を参照してください

Microsoft Entra ID にアプリケーションの登録を作成する

ユーザーがサインインできるよう、Microsoft Entra ID に Web アプリケーションを作成します。 Web アプリケーションは、ユーザーアクセスを Azure Maps REST API へ委任します。

Azure portal の Azure サービスの一覧で、[Microsoft Entra ID]>[アプリの登録]>[新規登録] の順に選択します。
[名前] を入力して、[サポートされているアカウントの種類] を選択し、リダイレクト URI を指定します。この URL は、Microsoft Entra ID でトークンが発行されている URL を表し、マップコントロールがホストされている URL でもあります。詳細なサンプルについては、Azure Maps の Microsoft Entra ID サンプルに関するページを参照してください。次に、 [登録] を選択します。
委任された API アクセス許可を Azure Maps に割り当てるには、アプリケーションに移動します。次に、 [アプリの登録] で、 [API のアクセス許可]>[アクセス許可の追加] の順に選択します。 [所属する組織で使用している API] で、「Azure Maps」を検索して選択します。
[Access Azure Maps] (Azure Maps へのアクセス) の横にあるチェックボックスをオンにしてから、 [アクセス許可の追加] を選択します。
oauth2AllowImplicitFlowを有効にする: これを有効にするには、アプリ登録の [マニフェスト] セクションで oauth2AllowImplicitFlow を true に設定します。

Web SDK で使うため、Microsoft Entra アプリ ID と Microsoft Entra テナント ID をアプリの登録からコピーします。 Microsoft Entra アプリの登録の詳細と x-ms-client-id を、Azure マップアカウントから Web SDK に追加します。

    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js" />
    <script>
        var map = new atlas.Map("map", {
            center: [-122.33, 47.64],
            zoom: 12,
            language: "en-US",
            authOptions: {
                authType: "aad",
                clientId: "<insert>",  // azure map account client id
                aadAppId: "<insert>",  // azure ad app registration id
                aadTenant: "<insert>", // azure ad tenant id
                aadInstance: "https://login.microsoftonline.com/"
            }
        });
    </script>

ユーザーまたはグループの Azure ロールベースのアクセス制御 (Azure RBAC) を構成します。 Azure RBAC を有効にするには、次のセクションを参照してください。

Azure Maps に対するロールベースのアクセスをユーザーに許可する

Microsoft Entra グループまたはセキュリティプリンシパルを 1 つまたは複数の Azure Maps ロール定義に割り当てることで、"Azure ロールベースのアクセス制御 (Azure RBAC)" を許可できます。

Azure Maps で使用できる Azure ロールの定義については、「組み込みの Azure Maps ロールの定義を表示する」のセクションを参照してください。

作成されたマネージド ID またはサービスプリンシパルに、使用可能な Azure Maps ロールを割り当てる方法の詳細な手順については、「Azure portal を使用して Azure ロールを割り当てる」を参照してください

大量のユーザーの Azure Maps アプリとリソースアクセスを効率的に管理するには、「Microsoft Entra グループ」を参照してください。

重要

ユーザーがアプリケーションに対する認証を許可されるようにするには、まずそのユーザーを Microsoft Entra ID に作成する必要があります。詳細については、Microsoft Entra ID を使用してユーザーを追加または削除するを参照してください。

ユーザーの大規模なディレクトリを効果的に管理する方法については、「Microsoft Entra ID」を参照してください。

警告

Azure Maps の組み込みロールの定義は、多くの Azure Maps REST API に対する非常に大きな承認アクセスを提供します。 API のアクセスを最小限に制限するには、カスタムロールの定義を作成して、システム割り当て ID をカスタムロールの定義に割り当てる方法に関する記事を参照してください。これにより、アプリケーションが Azure Maps にアクセスするために必要な最小限の権限が有効になります。

次のステップ

シングルページアプリケーションのシナリオの詳細については、次を参考にしてください。

シングルページアプリケーション

Azure Maps アカウントにおける API 使用状況メトリックを確認します。

使用状況メトリックを表示する

Microsoft Entra ID と Azure Maps を統合する方法を示すサンプルを確認します。

Azure Maps のサンプル

ユーザー サインインでシングル ページ アプリケーションをセキュリティで保護する

Microsoft Entra ID にアプリケーションの登録を作成する

Azure Maps に対するロールベースのアクセスをユーザーに許可する

次のステップ

その他のリソース

ユーザーサインインでシングルページアプリケーションをセキュリティで保護する