Secure a single page application with user sign-in

The following guide pertains to an application which is hosted on a content server or has minimal web server dependencies. The application provides protected resources secured only to Azure AD users. The objective of the scenario is to enable the web application to authenticate to Azure AD and call Azure Maps REST APIs on behalf of the user.

You can view the Azure Maps account authentication details in the Azure portal. There, in your account, on the Settings menu, select Authentication.

Authentication details

Once an Azure Maps account is created, the Azure Maps x-ms-client-id value is present in the Azure portal authentication details page. This value represents the account which will be used for REST API requests. This value should be stored in application configuration and retrieved prior to making http requests when using Azure AD authentication with Azure Maps.

Create an application registration in Azure AD

Create the web application in Azure AD for users to sign in. The web application delegates user access to Azure Maps REST APIs.

  1. In the Azure portal, in the list of Azure services, select Azure Active Directory > App registrations > New registration.

    App registration

  2. Enter a Name, choose a Support account type, provide a redirect URI which will represent the url which Azure AD will issue the token and is the url where the map control is hosted. For a detailed sample please see Azure Maps Azure AD samples. Then select Register.

  3. To assign delegatedÔÇ»API permissions to Azure Maps, go to the application. Then under App registrations, select API permissions > Add a permission. Under APIs my organization uses, search for and select Azure Maps.

    Add app API permissions

  4. Select the check box next to Access Azure Maps, and then select Add permissions.

    Select app API permissions

  5. Enable oauth2AllowImplicitFlow. To enable it, in the Manifest section of your app registration, set oauth2AllowImplicitFlow to true.

  6. Copy the Azure AD app ID and the Azure AD tenant ID from the app registration to use in the Web SDK. Add the Azure AD app registration details and the x-ms-client-id from the Azure Map account to the Web SDK.

        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js" />
        <script>
            var map = new atlas.Map("map", {
                center: [-122.33, 47.64],
                zoom: 12,
                language: "en-US",
                authOptions: {
                    authType: "aad",
                    clientId: "<insert>",  // azure map account client id
                    aadAppId: "<insert>",  // azure ad app registration id
                    aadTenant: "<insert>", // azure ad tenant id
                    aadInstance: "https://login.microsoftonline.com/"
                }
            });
        </script>   
    
  7. Configure Azure role based access control for users or groups. See the following sections to enable RBAC.

Grant role-based access for users to Azure Maps

You grant Azure role-based access control (Azure RBAC) by assigning either an Azure AD group or security principals to one or more Azure Maps role definitions. To view Azure role definitions that are available for Azure Maps, go to Access control (IAM). Select Roles, and then search for roles that begin with Azure Maps.

Read more on Azure AD to effectively manage a directory for users.

  1. Go to your Azure Maps Account. Select Access control (IAM) > Role assignment.

    Grant access using Azure RBAC

  2. On the Role assignments tab, under Role, select a built in Azure Maps role definition such as Azure Maps Data Reader or Azure Maps Data Contributor. Under Assign access to, select Azure AD user, group, or service principal. Select the principal by name. Then select Save.

Warning

Azure Maps built-in role definitions provide a very large authorization access to many Azure Maps REST APIs. To restrict APIs for users to a minimum, see create a custom role definition and assign users to the custom role definition. This will enable users to have the least privilege necessary for the application.

Next steps

Further understanding of single page application scenario:

Find the API usage metrics for your Azure Maps account:

Explore samples that show how to integrate Azure AD with Azure Maps: