How to access Azure Maps API from browser using Azure App Service Active Directory authentication?

Question

I have an Azure App Service with Azure Active Directory Authentication enabled. So the users have been authenticated by AD. How do I use that authentication to call Azure Maps from the JavaScript in the browser?

I was able to make calls from the browser to the maps API using the maps shared key, but I obviously don't want to do that. I was also able to have the browser call my server, and have my server use the shared key to call the maps API, but I don't want my server to have to be the middle-man for every call.

Answer 1

Well, in your case, you can hit https://webappname.azurewebsites.net/.auth/me to get the token to call Azure Maps API, please follow the steps below.

1.Navigate to the resource explorer -> find your app service-> add ["resource=https://atlas.microsoft.com"] to additionalLoginParams like below -> PUT.

2.Navigate to the Azure Active Directory in the portal -> App registrations -> find the AD App corresponding your app service -> API permissions -> add the permission user_impersonation of Azure Maps like below.

Note: If you could not find Azure Maps on the first page, just go to APIs my organization uses and search for ba1ea022-5807-41d5-bbeb-292c7e1cf5f6, then click it and add the permission above.

3.Then when the user login the web app, after he consents the permissions, you can get the token with endpoint https://webappname.azurewebsites.net/.auth/me, and use the token to call the Azure Maps API with javascript, in this way, the user just needs to login for one time, the token was generated via the azure ad auth.

Note: Before you getting the token, make sure the user logged in the app is already added as a role e.g. Azure Maps Data Contributor in the Azure Map Account -> Access Control (IAM), if not, follow this link to add it.