Skip to content

Files

80 lines (59 loc) · 4.14 KB

how-to-secure-spa-users.md

File metadata and controls

80 lines (59 loc) · 4.14 KB
title titleSuffix description author ms.author ms.date ms.topic ms.service services ms.custom
How to secure a single page application with user sign-in
Azure Maps
How to configure a single page application which supports Azure AD single-sign-on with Azure Maps Web SDK.
stevemunk
v-munksteve
06/12/2020
how-to
azure-maps
azure-maps
devx-track-js

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.

[!INCLUDE authentication details]

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.

    [!div class="mx-imgBorder"] 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.

    [!div class="mx-imgBorder"] Add app API permissions

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

    [!div class="mx-imgBorder"] 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 (Azure RBAC) for users or groups. See the following sections to enable Azure RBAC.

[!INCLUDE grant role access to users]

Next steps

Further understanding of single page application scenario:

[!div class="nextstepaction"] Single-page application

Find the API usage metrics for your Azure Maps account:

[!div class="nextstepaction"] View usage metrics

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

[!div class="nextstepaction"] Azure Maps Samples