非対話型のサインインを使用してシングルページ Web アプリケーションを Microsoft Azure Maps 内でセキュリティで保護する方法 - Azure Maps

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

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

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

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 による認証」を参照してください

ヒント

Azure Maps は、ユーザーのサインオンまたは対話型フローからのアクセストークンをサポートできます。対話型フローを使用すると、アクセスの失効とシークレット管理の範囲を制限できます。

Azure 関数の作成

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

Azure portal で関数を作成します。詳細については、「Azure Functions の概要」を参照してください。
シングルページ Web アプリケーションからアクセスできるように、Azure 関数で CORS ポリシーを構成します。 CORS ポリシーによって、ブラウザークライアントが Web アプリケーションの許可された配信元に安全にアクセスできるようになります。詳細については、「CORS 機能の追加」を参照してください。
Azure 関数にシステム割り当て ID を追加して、Microsoft Entra ID に対して認証を行うサービスプリンシパルを作成できるようにします。
Azure Maps アカウントにシステム割り当て ID に対するロールベースのアクセス権を付与します。詳細については、「ロールベースのアクセス権を付与する」を参照してください。
サポートされているいずれかのメカニズムまたは 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": "..."
}
```
Azure 関数 HttpTrigger のセキュリティを次のように構成します。
1. 関数アクセスキーを作成する
2. 運用環境の Azure 関数の HTTP エンドポイントをセキュリティで保護する。

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 に作成する必要があります。詳細については、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 のサンプル

次の方法で共有

Azure 関数の作成

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

次のステップ

フィードバック

その他のリソース

次の方法で共有

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

Azure 関数の作成

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

次のステップ

フィードバック

その他のリソース