非対話型サインインでシングルページ Web アプリケーションをセキュリティで保護する方法

ユーザーが Microsoft Entra ID にサインインできない場合でも、Microsoft Entra ID でシングルページ Web アプリケーションをセキュリティで保護します。

この非対話型認証フローを作成するには、まず、Microsoft Entra ID からアクセス トークンを取得する役割がある、Azure 関数のセキュリティで保護された Web サービスを作成します。 この Web サービスは、シングルページ Web アプリケーションでのみ使用できます。

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

Azure 関数の作成

Microsoft Entra ID に対して認証を行う役割があるセキュリティで保護された Web サービス アプリケーションを作成するには、次のようにします。

1. Azure portal で関数を作成します。 詳細については、「Azure Functions の概要」を参照してください。

2. シングルページ Web アプリケーションからアクセスできるように、Azure 関数で CORS ポリシーを構成します。 CORS ポリシーによって、ブラウザー クライアントが Web アプリケーションの許可された配信元に安全にアクセスできるようになります。 詳細については、「CORS 機能の追加」を参照してください。

3. Azure 関数にシステム割り当て ID を追加して、Microsoft Entra ID に対して認証を行うサービス プリンシパルを作成できるようにします。

4. Azure Maps アカウントにシステム割り当て ID に対するロールベースのアクセス権を付与します。 詳細については、「ロールベースのアクセス権を付与する」を参照してください。

5. サポートされているいずれかのメカニズムまたは REST プロトコルを使用して、システム割り当て ID を使用して Azure Maps アクセス トークンを取得する Azure 関数のコードを記述します。 詳細については、「Azure リソースのトークンを取得する」を参照してください。

   REST プロトコルの例を次に示します。

   GET /MSI/token?resource=https://atlas.microsoft.com/&api-version=2019-08-01 HTTP/1.1
   Host: localhost:4141
   

   応答の例を次に示します。

   HTTP/1.1 200 OK
   Content-Type: application/json
   
   {
       "access_token": "eyJ0eXAi…",
       "expires_on": "1586984735",
       "resource": "https://atlas.microsoft.com/",
       "token_type": "Bearer",
       "client_id": "..."
   }
   

6. Azure 関数 HttpTrigger のセキュリティを次のように構成します。

   1. 関数アクセス キーを作成する
   2. 運用環境の Azure 関数の HTTP エンドポイントをセキュリティで保護する。

7. Web アプリケーション Azure Maps Web SDK を構成します。

   //URL to custom endpoint to fetch Access token
   var url = 'https://{App-Name}.azurewebsites.net/api/{Function-Name}?code={API-Key}';
   
   var map = new atlas.Map('myMap', {
               center: [-122.33, 47.6],
               zoom: 12,
               language: 'en-US',
               view: "Auto",
           authOptions: {
               authType: "anonymous",
               clientId: "<insert>", // azure map account client id
               getToken: function(resolve, reject, map) {
                   fetch(url).then(function(response) {
                       return response.text();
                   }).then(function(token) {
                       resolve(token);
                   });
               }
           }
       });
   
       // use the following events to debug, you can remove them at any time.
       map.events.add("tokenacquired", function () {
           console.log("token acquired");
       });
       map.events.add("error", function (err) {
           console.log(JSON.stringify(err.error));
       });
   

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 を統合する方法を示す他のサンプルを確認します。