Proteger um aplicativo de página única com a entrada do usuário

O guia a seguir pertence a um aplicativo que está hospedado em um servidor de conteúdo ou tem dependências mínimas de servidor web. O aplicativo fornece recursos protegidos somente com proteção para usuários do Microsoft Entra. O objetivo do cenário é habilitar o aplicativo Web para autenticar no Microsoft Entra ID e chamar as APIs REST do Azure Mapas em nome do usuário.

Para ver os detalhes de autenticação da conta do Azure Mapas no portal do Azure:

  1. Entre no portal do Azure.

  2. Navegue até o menu do portal do Azure. Selecione Todos os recursos e o a conta do Azure Mapas.

  3. Em Configurações no painel esquerdo, selecione Autenticação.

    Screenshot showing your Azure Maps authentication options in the Azure portal.

Três valores são criados quando a conta do Azure Mapas é criada. Eles são usados para dar suporte a dois tipos de autenticação no Azure Mapas:

  • Autenticação do Microsoft Entra: a Client ID representa a conta a ser usada para solicitações da API REST. O valor de Client ID deve ser armazenado na configuração de aplicativo, e depois, recuperado antes que sejam feitas solicitações HTTP ao Azure Mapas que usem a autenticação do Microsoft Entra.
  • Autenticação de chave compartilhada: a Primary Key e a Secondary Key são usadas como chaves de assinatura da autenticação de chave compartilhada. A autenticação de chave compartilhada baseia-se na passagem da chave gerada pela conta do Azure Mapas com cada solicitação ao Azure Mapas. É recomendado que você regenere as chaves regularmente. Para manter as conexões atuais durante a regeneração, duas chaves são fornecidas. Uma chave pode estar em uso durante a regeneração da outra. Ao regenerar suas chaves, você precisará atualizar os aplicativos que acessam essa conta para que usem as novas chaves. Para obter mais informações, confira Autenticação no Azure Mapas

Criar um registro de aplicativo no Microsoft Entra ID

Crie o aplicativo Web do Microsoft Entra ID para que os usuários entrem. O aplicativo Web delega o acesso de usuário às APIs REST do Azure Mapas.

  1. No portal do Azure, na lista de serviços do Azure, selecione Microsoft Entra ID>Registros de aplicativo>Novo registro.

    A screenshot showing application registration in Microsoft Entra ID.

  2. Insira um Nome, escolha um Tipo de conta de suporte, forneça um URI de redirecionamento que represente o URL para o qual o Microsoft Entra ID emite o token, que é o URL onde o controle do mapa é hospedado. Para obter um exemplo detalhado, veja os exemplos de ID do Microsoft Entra do Azure Mapas. Em seguida, selecione Registrar.

  3. Para atribuir permissões de API delegadas ao Azure Mapas, acesse o aplicativo. Em Registros de aplicativo, selecione Permissões de API>Adicionar uma permissão. Em APIs que a minha organização usa, procure e exclua Azure Mapas.

    Screenshot showing a list of APIs my organization uses.

  4. Selecionar a caixa de seleção ao lado de Acessar Azure Mapas e selecionar Adicionar Permissões.

    Screenshot showing the request app API permissions screen.

  5. Habilitar oauth2AllowImplicitFlow. Para habilitá-lo, na seção Manifesto do registro do aplicativo, defina oauth2AllowImplicitFlow como true.

  6. Copie a ID do aplicativo Microsoft Entra e a ID do locatário do Microsoft Entra no registro do aplicativo para usar no SDK da Web. Adicione os detalhes de registro do aplicativo do Microsoft Entra e o x-ms-client-id da conta do Mapa do Azure ao SDK da Web.

        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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 o RBAC do Azure (controle de acesso baseado em função do Azure) para usuários ou grupos. Confira as seções a seguir para habilitar o RBAC do Azure.

Conceder acesso baseado em função para usuários do Azure Mapas

Conceda o RBAC do Azure (controle de acesso baseado em função) atribuindo um grupo do Microsoft Entra ou uma entidade de segurança a uma ou mais definições de função do Azure Mapas.

Para ver as definições de função do Azure disponíveis para o Azure Mapas, confira Exibir as definições de função internas do Azure Mapas.

Para obter etapas detalhadas de como atribuir uma função do Azure Mapas disponível para a identidade gerenciada criada ou a entidade de serviço, confira Atribuir funções do Azure usando o portal do Azure

Para gerenciar com eficiência o aplicativo do Azure Mapas e o acesso a recursos de uma grande quantidade de usuários, confira Grupos do Microsoft Entra.

Importante

Para que os usuários tenham permissão para se autenticar no aplicativo, eles precisam ser criados no Microsoft Entra ID. Para obter mais informações, confira Adicionar ou excluir usuários usando o Microsoft Entra ID.

Para saber mais sobre como gerenciar com eficiência um grande diretório de usuários, confira Microsoft Entra ID.

Aviso

As definições de função internas do Azure Mapas fornecem um acesso de autorização muito grande a muitas APIs REST do Azure Mapas. Para restringir o acesso de APIs a um mínimo, veja criar uma definição de função personalizada e atribuir a identidade atribuída pelo sistema à definição de função personalizada. Esse processo habilita o privilégio mínimo necessário para o aplicativo acessar o Azure Mapas.

Próximas etapas

Compreensão adicional do cenário de aplicativo de página única:

Localize as métricas de uso da API para sua conta do Azure Mapas:

Explore amostras que mostram como integrar o Microsoft Entra ID ao Azure Mapas: