Why isn't Anonymous authentication for my Azure maps control working?

I'm developing a single page app and am trying to set up anonymous authentication as detailed here. I have an Azure Function running locally to call the token service provider for a token:

 public static class TokenService
    {
        [FunctionName("TokenService")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
            ILogger log)
        {
            log.LogInformation("C# HTTP trigger TokenService function processed a request.");

            var azureServiceTokenProvider = new AzureServiceTokenProvider();
            string accessToken = await azureServiceTokenProvider.GetAccessTokenAsync("https://atlas.microsoft.com");
            return new OkObjectResult(accessToken);
        }
    }

I am using my (MSA-based) Azure login account as the identity on my local dev machine. Calling the function endpoint locally via Postman returns a 200 status and a token, so that seems all goodness.

In my Maps JavaScript I have followed the example as given in the previously referenced page:

//Initialize a map instance.
    map = new atlas.Map('myMap', {
        center: [0, 45],
        zoom: 11,
        view: 'Auto',
        //Add your Azure Maps primary subscription key to the map SDK.
        authOptions: {
            authType: 'anonymous',
            clientId: "<My client ID>", //Your Azure Active Directory client id for accessing your Azure Maps account.
            getToken: function (resolve, reject, map) {
                var tokenServiceUrl = "http://localhost:7071/api/TokenService";
                fetch(tokenServiceUrl)
                    .then(
                        function(r) {
                            console.log("Status is " + r.status);
                            r.text().then(function(token) {
                                console.log("Token is " + token);
                                resolve(token);
                            });
                        });
            }
        }
    });

This code calls the token service API successfully, and gets a token (the tokenacquired event fires), but I get 403 response status codes for every Maps URL that gets called. The login user in my AAD tenant has Classic admin rights, and I also explicitly added that user to the Maps Reader role as well. So I've no idea what might be going on here and why my user doesn't seem to have access even though it is getting a valid token from the service. Any thoughts here?

Solution

access tokens issued from MSA based sign-in credentials are not supported on Azure Maps REST API. You must use an organizational account or a service principal.

On the provided documentation link the sample says

clientId: "", // azure map account client id

So also confirm you are setting the value to Azure Maps account client id.

Also another sample on Documentation:

var map = new atlas.Map("map", {
  center: [-73.985708, 40.75773],
  style: "grayscale_dark",
  zoom: 12,
  view: "Auto",
  //Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
  authOptions: {
    authType: "anonymous",
    clientId: "35267128-0f1e-41de-aa97-f7a7ec8c2dbd",  // <--- this is Azure Maps Client ID, not Azure AD application registration client id.
    getToken: function(resolve, reject, map) {
      //URL to your authentication service that retrieves an Azure Active Directory Token.
      var tokenServiceUrl = "https://adtokens.azurewebsites.net/api/HttpTrigger1?code=dv9Xz4tZQthdufbocOV9RLaaUhQoegXQJSeQQckm6DZyG/1ymppSoQ==";

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

Also to help debugging experience, in your web browser, use the Network tools to inspect the WWW-Authenticate response header or response body. There may be useful error code and message.

You can also take a look at the following Github issue to help inspect the token and determine if the token you are sending is not supported.