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

Question

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:

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

Answer 1

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