Autenticar aplicativos JavaScript nos serviços do Azure durante o desenvolvimento local usando entidades de serviço

Quando você cria aplicativos na nuvem, os desenvolvedores precisam depurar e testar aplicativos em suas estações de trabalho locais. Quando um aplicativo é executado na estação de trabalho de um desenvolvedor durante o desenvolvimento local, ele ainda deve se autenticar em todos os serviços do Azure usados pelo aplicativo. Este artigo aborda como configurar objetos principais de serviço de aplicativo dedicados a serem usados durante o desenvolvimento local.

Um diagrama mostrando como um aplicativo JavaScript durante o desenvolvimento local usa as credenciais do desenvolvedor para se conectar ao Azure obtendo essas credenciais ferramentas de desenvolvimento instaladas localmente.

Entidades de serviço de aplicativo dedicadas para desenvolvimento local permitem que você siga o princípio de menor privilégio durante o desenvolvimento de aplicativos. Como as permissões têm como escopo exatamente o que é necessário para o aplicativo durante o desenvolvimento, o código do aplicativo é impedido de acessar acidentalmente um recurso do Azure destinado ao uso por um aplicativo diferente. Esse método também evita que bugs ocorram quando o aplicativo é movido para produção porque o aplicativo foi superprivilegiado no ambiente de desenvolvimento.

Uma entidade de serviço de aplicativo é configurada para o aplicativo quando o aplicativo é registrado no Azure. Ao registrar aplicativos para desenvolvimento local, recomenda-se:

  • Crie registros de aplicativo separados para cada desenvolvedor que trabalha no aplicativo. Esse método cria entidades de serviço de aplicativo separadas para cada desenvolvedor usar durante o desenvolvimento local e evita a necessidade de os desenvolvedores compartilharem credenciais para uma única entidade de serviço de aplicativo.
  • Crie registos de aplicações separados por aplicação. Isso define o escopo das permissões do aplicativo apenas para o que é necessário para o aplicativo.

Durante o desenvolvimento local, as variáveis de ambiente são definidas com a identidade da entidade de serviço do aplicativo. O SDK do Azure para JavaScript lê essas variáveis de ambiente e usa essas informações para autenticar o aplicativo nos recursos do Azure de que ele precisa.

1 - Registar a aplicação no Azure

Os objetos principais do serviço de aplicativo são criados com um registro de aplicativo no Azure. Você pode criar entidades de serviço usando o portal do Azure ou a CLI do Azure.

Entre no portal do Azure e siga estas etapas.

Instruções Captura de ecrã
No portal do Azure:
  1. Insira registros de aplicativos na barra de pesquisa na parte superior do portal do Azure.
  2. Selecione o item rotulado Registros de aplicativos sob o título Serviços no menu que aparece abaixo da barra de pesquisa.
Uma captura de tela mostrando como usar a barra de pesquisa superior no portal do Azure para localizar e navegar até a página Registros de aplicativos.
Na página Registos da aplicação, selecione + Novo registo. Uma captura de ecrã a mostrar a localização do botão Novo registo na página Registos da aplicação.
Na página Registar uma candidatura, preencha o formulário da seguinte forma.
  1. Nome → Insira um nome para o registro do aplicativo no Azure. Recomenda-se que esse nome inclua o nome do aplicativo, o usuário para o qual o registro do aplicativo é feito e um identificador como 'dev' para indicar que esse registro de aplicativo é para uso no desenvolvimento local.
  2. Tipos de conta suportados → Contas somente neste diretório organizacional.
Selecione Registrar para registrar seu aplicativo e criar a entidade de serviço do aplicativo.
Uma captura de tela mostrando como preencher a página Registrar um aplicativo dando um nome ao aplicativo e especificando os tipos de conta suportados como contas somente neste diretório organizacional.
Na página Registo da aplicação para a sua aplicação:
  1. ID do aplicativo (cliente) → Esta é a ID do aplicativo que o aplicativo usará para acessar o Azure durante o desenvolvimento local. Copie esse valor para um local temporário em um editor de texto, pois você precisará dele em uma etapa futura.
  2. ID do diretório (locatário) → Esse valor também será necessário para seu aplicativo quando ele se autenticar no Azure. Copie esse valor para um local temporário em um editor de texto, ele também será necessário em uma etapa futura.
  3. Credenciais do cliente → Você deve definir as credenciais do cliente para o aplicativo antes que seu aplicativo possa se autenticar no Azure e usar os serviços do Azure. Selecione Adicionar um certificado ou segredo para adicionar credenciais ao seu aplicativo.
Uma captura de tela após o registro do aplicativo ter sido concluído com o local da ID do aplicativo, ID do locatário.
Na página Certificados & segredos, selecione + Novo segredo do cliente. Uma captura de tela mostrando o local do link a ser usado para criar um novo segredo de cliente na página de certificados e segredos.
A caixa de diálogo Adicionar um segredo do cliente aparecerá no lado direito da página. Nesta caixa de diálogo:
  1. Descrição → Insira um valor de Atual.
  2. Expira → Selecione um valor de 24 meses.
Selecione Adicionar para adicionar o segredo.
Uma captura de tela mostrando a página onde um novo segredo de cliente é adicionado para a entidade de serviço de aplicativo criada pelo processo de registro do aplicativo.
Na página Certificados & segredos, você verá o valor do segredo do cliente.

Copie esse valor para um local temporário em um editor de texto, pois você precisará dele em uma etapa futura.

IMPORTANTE: Esta é a única vez que você verá esse valor. Depois de sair ou atualizar esta página, você não poderá ver esse valor novamente. Você pode adicionar mais segredos de cliente sem invalidar esse segredo de cliente, mas não verá esse valor novamente.
Uma captura de tela mostrando a página com o segredo do cliente gerado.

2 - Criar um grupo de segurança Microsoft Entra para desenvolvimento local

Como normalmente há vários desenvolvedores que trabalham em um aplicativo, é recomendável criar um grupo do Microsoft Entra para encapsular as funções (permissões) de que o aplicativo precisa no desenvolvimento local, em vez de atribuir as funções a objetos principais de serviço individuais. Isto oferece as seguintes vantagens.

  • Todos os desenvolvedores têm a garantia de ter as mesmas funções atribuídas, uma vez que as funções são atribuídas no nível do grupo.
  • Se uma nova função for necessária para o aplicativo, ela só precisará ser adicionada ao grupo Microsoft Entra para o aplicativo.
  • Se um novo desenvolvedor ingressar na equipe, uma nova entidade de serviço de aplicativo será criada para o desenvolvedor e adicionada ao grupo, garantindo que o desenvolvedor tenha as permissões certas para trabalhar no aplicativo.
Instruções Captura de ecrã
Navegue até a página ID do Microsoft Entra no portal do Azure digitando ID do Microsoft Entra na caixa de pesquisa na parte superior da página e selecionando ID do Microsoft Entra em serviços. Uma captura de tela mostrando como usar a barra de pesquisa superior no portal do Azure para pesquisar e navegar até a página ID do Microsoft Entra.
Na página ID do Microsoft Entra , selecione Grupos no menu à esquerda. Uma captura de tela mostrando o local do item de menu Grupos no menu esquerdo da página Diretório padrão do Microsoft Entra ID.
Na página Todos os grupos, selecione Novo grupo. Uma captura de ecrã a mostrar a localização do botão Novo Grupo na página Todos os grupos.
Na página Novo Grupo:
  1. Tipo de grupo → Segurança
  2. Nome do grupo → Um nome para o grupo de segurança, normalmente criado a partir do nome do aplicativo. Também é útil incluir uma cadeia de caracteres como local-dev no nome do grupo para indicar a finalidade do grupo.
  3. Descrição do grupo → Uma descrição do objetivo do grupo.
  4. Selecione o link Sem membros selecionados em Membros para adicionar membros ao grupo.
Uma captura de tela mostrando como criar um novo grupo do Microsoft Entra para o aplicativo.
Na caixa de diálogo Adicionar membros :
  1. Use a caixa de pesquisa para filtrar a lista de nomes principais na lista.
  2. Selecione as entidades de serviço de aplicativo para desenvolvimento local para este aplicativo. À medida que os objetos são selecionados, eles ficarão acinzentados e serão movidos para a lista Itens selecionados na parte inferior da caixa de diálogo.
  3. Quando terminar, selecione o botão Selecionar .
Uma captura de tela da caixa de diálogo Adicionar membros mostrando como selecionar entidades de serviço de aplicativo a serem incluídas no grupo.
De volta à página Novo grupo , selecione Criar para criar o grupo.

O grupo será criado e você será levado de volta para a página Todos os grupos . Pode levar até 30 segundos para que o grupo apareça e talvez seja necessário atualizar a página devido ao cache no portal do Azure.
Uma captura de tela da página Novo Grupo mostrando como concluir o processo selecionando o botão Criar.

3 - Atribuir funções à aplicação

Em seguida, você precisa determinar quais funções (permissões) seu aplicativo precisa em quais recursos e atribuir essas funções ao seu aplicativo. Neste exemplo, as funções são atribuídas ao grupo Microsoft Entra criado na etapa 2. As funções podem ser atribuídas a uma função em um recurso, grupo de recursos ou escopo de assinatura. Este exemplo mostra como atribuir funções no escopo do grupo de recursos, já que a maioria dos aplicativos agrupa todos os seus recursos do Azure em um único grupo de recursos.

Instruções Captura de ecrã
Localize o grupo de recursos para seu aplicativo pesquisando o nome do grupo de recursos usando a caixa de pesquisa na parte superior do portal do Azure.

Navegue até o grupo de recursos selecionando o nome do grupo de recursos sob o título Grupos de Recursos na caixa de diálogo.
Uma captura de tela mostrando como usar a caixa de pesquisa superior no portal do Azure para localizar e navegar até o grupo de recursos ao qual você deseja atribuir funções (permissões).
Na página do grupo de recursos, selecione Controle de acesso (IAM) no menu à esquerda. Uma captura de tela da página do grupo de recursos mostrando o local do item de menu Controle de acesso (IAM).
Na página Controle de acesso (IAM):
  1. Selecione o separador Atribuição de funções.
  2. Selecione + Adicionar no menu superior e, em seguida, Adicionar atribuição de função no menu suspenso resultante.
Uma captura de tela mostrando como navegar até a guia atribuições de função e o local do botão usado para adicionar atribuições de função a um grupo de recursos.
A página Adicionar atribuição de função lista todas as funções que podem ser atribuídas para o grupo de recursos.
  1. Use a caixa de pesquisa para filtrar a lista para um tamanho mais gerenciável. Este exemplo mostra como filtrar funções de Blob de Armazenamento.
  2. Selecione a função que pretende atribuir.
    Selecione Avançar para ir para a próxima tela.
Uma captura de tela mostrando como filtrar e selecionar atribuições de função a serem adicionadas ao grupo de recursos.
A próxima página Adicionar atribuição de função permite especificar a qual usuário atribuir a função.
  1. Selecione Usuário, grupo ou entidade de serviço em Atribuir acesso a.
  2. Selecione + Selecionar membros em Membros
Uma caixa de diálogo é aberta no lado direito do portal do Azure.
Uma captura de tela mostrando o botão de opção a ser selecionado para atribuir uma função a um grupo do Microsoft Entra e o link usado para selecionar o grupo ao qual atribuir a função.
Na caixa de diálogo Selecionar membros:
  1. A caixa de texto Selecionar pode ser usada para filtrar a lista de usuários e grupos em sua assinatura. Se necessário, digite os primeiros caracteres do grupo de desenvolvimento local do Microsoft Entra que você criou para o aplicativo.
  2. Selecione o grupo de desenvolvimento local do Microsoft Entra associado ao seu aplicativo.
Selecione Selecionar na parte inferior da caixa de diálogo para continuar.
Uma captura de tela mostrando como filtrar e selecionar o grupo Microsoft Entra para o aplicativo na caixa de diálogo Selecionar membros.
O grupo Microsoft Entra é exibido como selecionado na tela Adicionar atribuição de função.

Selecione Rever + atribuir para ir para a página final e, em seguida, Rever + atribuir novamente para concluir o processo.
Uma captura de tela mostrando a página Adicionar atribuição de função concluída e o local do botão Revisar + atribuir usado para concluir o processo.

4 - Definir variáveis de ambiente de desenvolvimento local

O DefaultAzureCredential objeto procura as informações da entidade de serviço em um conjunto de variáveis de ambiente em tempo de execução. Como a maioria dos desenvolvedores trabalha em vários aplicativos, é recomendável usar um pacote como dotenv para acessar o ambiente a partir de um .env arquivo armazenado no diretório do aplicativo durante o desenvolvimento. Isso define o escopo das variáveis de ambiente usadas para autenticar o aplicativo no Azure de modo que elas só possam ser usadas por esse aplicativo.

O .env arquivo nunca é verificado no controle do código-fonte, pois contém a chave secreta do aplicativo para o Azure. O arquivo .gitignore padrão para JavaScript exclui automaticamente o .env arquivo do check-in.

Para usar o dotenv pacote, primeiro instale o pacote em seu aplicativo.

npm install dotenv

Em seguida, crie um .env arquivo no diretório raiz do aplicativo. Defina os valores das variáveis de ambiente com os valores obtidos do processo de registro do aplicativo da seguinte maneira:

  • AZURE_CLIENT_ID → O valor da ID do aplicativo.
  • AZURE_TENANT_ID → O valor de ID do locatário.
  • AZURE_CLIENT_SECRET → A senha/credencial gerada para o aplicativo.
AZURE_CLIENT_ID=00000000-0000-0000-0000-000000000000
AZURE_TENANT_ID=11111111-1111-1111-1111-111111111111
AZURE_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz

Finalmente, no código de inicialização do seu aplicativo, use a dotenv biblioteca para ler as variáveis de ambiente do .env arquivo na inicialização.

import 'dotenv/config'

5 - Implementar DefaultAzureCredential em seu aplicativo

Para autenticar objetos de cliente do SDK do Azure no Azure, seu aplicativo deve usar a DefaultAzureCredential@azure/identity classe do pacote. Nesse cenário, DefaultAzureCredential deteta as variáveis AZURE_CLIENT_IDde ambiente , AZURE_TENANT_IDe AZURE_CLIENT_SECRET são definidas e leem essas variáveis para obter as informações da entidade de serviço de aplicativo com as quais se conectar ao Azure.

Comece adicionando o pacote @azure/identity ao seu aplicativo.

npm install @azure/identity

Em seguida, para qualquer código JavaScript que crie um objeto de cliente do SDK do Azure em seu aplicativo, você deseja:

  1. Importe a DefaultAzureCredential classe do @azure/identity módulo.
  2. Crie um DefaultAzureCredential objeto.
  3. Passe o DefaultAzureCredential objeto para o construtor de objeto de cliente do SDK do Azure.

Um exemplo disso é mostrado no segmento de código a seguir.

// Azure authentication dependency
import { DefaultAzureCredential } from '@azure/identity';

// Azure resource management dependency
import { SubscriptionClient } from "@azure/arm-subscriptions";

// Acquire credential
const tokenCredential = new DefaultAzureCredential();

async function listSubscriptions() {
  try {

    // use credential to authenticate with Azure SDKs
    const client = new SubscriptionClient(tokenCredential);

    // get details of each subscription
    for await (const item of client.subscriptions.list()) {
      const subscriptionDetails = await client.subscriptions.get(
        item.subscriptionId
      );
      /* 
        Each item looks like:
      
        {
          id: '/subscriptions/123456',
          subscriptionId: '123456',
          displayName: 'YOUR-SUBSCRIPTION-NAME',
          state: 'Enabled',
          subscriptionPolicies: {
            locationPlacementId: 'Internal_2014-09-01',
            quotaId: 'Internal_2014-09-01',
            spendingLimit: 'Off'
          },
          authorizationSource: 'RoleBased'
        },
    */
      console.log(subscriptionDetails);
    }
  } catch (err) {
    console.error(JSON.stringify(err));
  }
}

listSubscriptions()
  .then(() => {
    console.log("done");
  })
  .catch((ex) => {
    console.log(ex);
  });

DefaultAzureCredential detetará automaticamente o mecanismo de autenticação configurado para o aplicativo e obterá os tokens necessários para autenticar o aplicativo no Azure. Se um aplicativo fizer uso de mais de um cliente SDK, o mesmo objeto de credencial poderá ser usado com cada objeto cliente SDK.