How to connect to Azure Maps with Managed Identity access using azure-maps-control package from Angular application?

Arjun Ramesh 46 Reputation points
2023-05-02T13:26:43.7466667+00:00

I am trying to connect to Azure Maps from Angular code using "azure-maps-control" package. Previously I was using a subscription key to do so, however now I am looking to remove this from the code and use the concept of managed identity instead.

What was tried:

I was trying to initialize the map using authOptions mentioned in following code snippet:


 AzureMapComponent.map = new atlas.Map('azure-map', {
      bearing: -10.5,
      center: centerCoordinates,
      zoom: zoomLevel,
      maxZoom: 23.9,
      style: 'road',
      view: 'Auto',
      showLogo: false,
      showFeedbackLink: false,
      authOptions: {
        authType: AuthenticationType.anonymous,
        clientId: '<azure-map-client-id>'
        getToken: function (resolve, reject, map) {
          var tokenServiceUrl = "https://login.microsoftonline.com/api/GetAzureMapsToken";

          fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
        }
      }
    });

However on deploying this code to an app service and testing, I am getting CORS error as shown below:

User's image

Note: I have added the app service URL in the CORS section of my Azure Maps account.

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
655 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 16,461 Reputation points Microsoft Employee
    2023-05-02T14:35:32.67+00:00

    https://login.microsoftonline.com/api/GetAzureMapsToken isn't a real URL. You need create a small REST service that retrieves the token on the server side and passes it down to the web frontend. This is the documentation related to your scenario: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-secure-webapp-users Here is an example Azure function I used in the past to retrieve an Azure Active Directory Token and pass it down to a web frontend: https://github.com/microsoft/satellite-imagery-labeling-tool/blob/main/maps-auth/GetAzureMapsToken.cs

    1 person found this answer helpful.