如何在 Microsoft Azure 地圖服務中使用非互動式登入來保護單頁 Web 應用程式 - Azure Maps

發行項
03/18/2024

使用 Microsoft Entra ID 保護單頁 Web 應用程式，即使使用者無法登入 Microsoft Entra ID 也一樣。

為了建立此非互動式驗證流程，請先建立 Azure Function 安全 Web 服務，其會負責從 Microsoft Entra ID 取得存取權杖。此 Web 服務僅供單頁 Web 應用程式使用。

若要在 Azure 入口網站中檢視 Azure 地圖服務的帳戶驗證詳細資料：

登入 Azure 入口網站。
瀏覽至 Azure 入口網站功能表。選取 [所有資源]，然後選取您的 Azure 地圖服務帳戶。
在左窗格中的 [設定] 下選取 [驗證]。

建立 Azure 地圖服務帳戶時，系統會建立三個值。其會用來支援 Azure 地圖服務中兩種類型的驗證：

Microsoft Entra 驗證：Client ID 代表要用於 REST API 要求的帳戶。 Client ID 的值應儲存在應用程式設定中，且應先擷取該值，再提出使用 Microsoft Entra 驗證的 Azure 地圖服務 HTTP 要求。
共用金鑰驗證: Primary Key 和 Secondary Key 會用作共用金鑰驗證的訂用帳戶金鑰。共用金鑰驗證需依靠由 Azure 地圖服務帳戶所產生的金鑰連同每個要求，傳遞至 Azure 地圖服務。建議您定期重新產生金鑰。為了在重新產生作業期間維護目前的連線，系統會提供兩個金鑰。您可以在重新產生作業期間，使用已重新產生的金鑰。當您重新產生金鑰時，必須更新任何存取此帳戶的應用程式，以使用新的金鑰。如需詳細資訊，請參閱驗證 Azure 地圖服務

提示

Azure 地圖服務可支援來自使用者登入或互動式流程的存取權杖。您可以使用互動式流程，以獲取更受限的存取撤銷和秘密管理範圍。

建立 Azure 函數

若要建立負責向 Microsoft Entra ID 進行驗證的安全 Web 服務應用程式：

在 Azure 入口網站中建立函式。如需詳細資訊，請參閱開始使用 Azure Functions。
在 Azure 函式上設定 CORS 原則，以供單頁 Web 應用程式存取。 CORS 原則會確保瀏覽器用戶端只能存取 Web 應用程式的允許來源。如需詳細資訊，請參閱新增 CORS 功能。
在 Azure 函式上新增系統指派的身分識別，讓服務主體建立可向 Microsoft Entra ID 進行驗證。
將系統指派身分識別的角色型存取權授與 Azure 地圖服務帳戶。如需詳細資訊，請參閱授與角色型存取權。

撰寫 Azure 函式的程式碼，以使用系統指派的身分識別搭配其中一種支援的機制或 REST 通訊協定，取得 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 端點。

Azure 地圖服務 Web SDK 設定 Web 應用程式。

//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 地圖服務

您可以將 Microsoft Entra 群組或安全性主體，指派給一或多個 Azure 地圖服務角色定義，來授與 Azure 角色型存取控制 (Azure RBAC)。

若要檢視 Azure 地圖服務的可用 Azure 角色定義，請參閱檢視內建的 Azure 地圖服務角色定義。

如需將可用 Azure 地圖服務角色，指派給已建立的受控識別或服務主體詳細步驟，請參閱使用 Azure 入口網站指派 Azure 角色

若要有效率地管理大量使用者的 Azure 地圖服務應用程式和資源存取權，請參閱 Microsoft Entra 群組。

重要

若要允許使用者驗證應用程式，必須先在 Microsoft Entra ID 中建立該使用者。如需詳細資訊，請參閱使用 Microsoft Entra ID 新增或刪除使用者。

若要了解如何有效管理使用者的大型目錄，請參閱 Microsoft Entra ID。

警告

Azure 地圖服務的內建角色定義，可為許多 Azure 地圖服務 REST API 提供廣泛的授權存取權。若要將 API 的存取權限制到最低限度，請參閱建立自訂角色定義，並將系統指派的身分識別指派給自訂角色定義。這可讓應用程式獲得存取 Azure 地圖服務所需的最低權限。

下一步

進一步了解單一頁面應用程式案例：

單一頁面應用程式

尋找 Azure 地圖服務帳戶的 API 使用計量：

檢視使用計量

探索其他範例，了解如何使用 Azure 地圖服務與 Microsoft Entra ID 整合：

Azure 地圖服務範例

如何使用非互動式登入來保護單頁 Web 應用程式

建立 Azure 函數

將使用者的角色型存取權授與給 Azure 地圖服務

下一步

其他資源