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

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

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

1. Azure portal にサインインします。

2. Azure portal メニューに移動します。 [すべてのリソース] を選択し、Azure Maps アカウントを選択します。

3. 左側のウィンドウの [設定] で、[ 認証] を選択します。

   

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 つのキーが使用中である間に、もう 1 つのキーを再生成することができます。 キーを再生成するときは、このアカウントにアクセスするすべてのアプリケーションを更新して、新しいキーを使用する必要があります。 詳細については、「Azure Maps での認証」を参照してください。

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

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

1. Azure portal の Azure サービスの一覧で、 Microsoft Entra ID>App registrations>New registration を選択します。

   

2. 名前を入力し、サポート アカウントの種類を選択し、Microsoft Entra ID がトークンを発行する URL とマップ コントロールがホストされている URL を表すリダイレクト URI を指定します。 詳細なサンプルについては、 Azure Maps Microsoft Entra ID のサンプルを参照してください。 その後、[登録] を選択します。

3. 委任された API アクセス許可を Azure Maps に割り当てるには、アプリケーションに移動します。 次に、[アプリの登録] で、[API のアクセス許可] を選択>アクセス許可を追加します。 組織で使用している API で、Azure Maps を検索して選択します。

   

4. [ Azure Maps にアクセスする] の横にあるチェック ボックスをオンにし、[ アクセス許可の追加] を選択します。

   

5. oauth2AllowImplicitFlowを有効にします。 これを有効にするには、アプリの登録の [マニフェスト ] セクションで、 oauth2AllowImplicitFlow を true に設定します。

6. Web SDK で使用するアプリ登録から Microsoft Entra アプリ ID と Microsoft Entra テナント ID をコピーします。 Azure Map アカウントから Web SDK に Microsoft Entra アプリの登録の詳細と x-ms-client-id を追加します。

       <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>   
   

7. ユーザーまたはグループに対して 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 を参照してください。

次のステップ

シングル ページ アプリケーション のシナリオについてさらに理解を深めます。

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

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