Início rápido: Introdução à extensão da ID externa do Microsoft Entra para Visual Studio Code

Aplica-se a: Locatários externos (saiba mais)

A integração da autenticação em seus aplicativos de cliente de consumo e corporativo é essencial para proteger recursos e dados do cliente. A extensão de ID externa do Microsoft Entra para Visual Studio Code permite que você crie rapidamente locatários externos, configure experiências de entrada para usuários externos e configure um exemplo de ID externa, tudo diretamente no Visual Studio Code. Usando o passo a passo da extensão, você pode aprender a configurar uma experiência de entrada personalizada e de marca para usuários externos do seu aplicativo e inicializar seus projetos com aplicativos de exemplo pré-configurados.

Essa extensão fornece uma configuração básica que cria automaticamente um locatário para aplicativos e o prepara para os usuários. Ele também simplifica seu fluxo de trabalho preenchendo automaticamente valores como IDs de aplicativo em seu arquivo de configuração para um processo de instalação mais suave.

Instalar a extensão

A extensão de ID externa do Microsoft Entra está disponível no Marketplace do Visual Studio Code.

1. Caso ainda não tenha o Visual Studio Code instalado, baixe-o aqui e execute as etapas de instalação.
2. Instale a extensão de ID externa do Microsoft Entra para o Visual Studio Code em https://aka.ms/vscodequickstart/marketplace.

Depois que a extensão for instalada, você poderá acessá-la usando o ícone na barra de atividades.

Você também pode abrir a extensão na página de boas-vindas do Visual Studio Code : selecione Ajuda>Bem-vindo(a) e, em Passo a passo, selecione Introdução à ID externa do Microsoft Entra. Talvez seja necessário selecionar Mais… para expandir a lista de extensões.

Introdução à configuração da ID externa

A extensão de ID externa do Microsoft Entra cria um locatário em uma configuração externa, que contém seu aplicativo e diretório de usuários externos. Você pode adicionar esse novo locatário à sua assinatura existente do Azure.

• Na página de boas-vindas da ID Externa do Microsoft Entra, escolha uma opção:

  • Caso você ainda não tenha uma conta do Azure, selecione Configurar uma avaliação gratuita.
  • Se você já tiver uma conta do Azure, selecione Usar a minha assinatura.

  

Configurar uma avaliação gratuita (versão prévia)

1. Selecione Configurar uma avaliação gratuita.

2. Na mensagem de confirmação de entrada, selecione Permitir.

3. Uma nova janela do navegador é aberta. Entre usando sua conta pessoal, a MSA (conta Microsoft) ou a conta do GitHub. Depois de entrar, feche a janela do navegador.

4. Volte para o Visual Studio Code. No menu Onde o locatário deve estar localizado?, selecione um local para seus dados de locatário. Não é possível alterar essa seleção posteriormente.

5. Insira um nome exclusivo para o site.

   

6. A extensão cria o seu locatário de avaliação. Você pode exibir o progresso abrindo a janela Exibir>Saída. Quando o processo é concluído, a mensagem O locatário foi criado é exibida.

Usar a sua assinatura

1. Selecione Usar minha assinatura.

2. Se houver vários locatários associados à sua conta, o menu Escolher um diretório será exibido. Selecione o diretório (locatário) associado à assinatura que você deseja usar.

   

   Observação

   Se a mensagem Nenhuma assinatura disponível aparecer, você poderá configurar uma avaliação gratuita em vez disso.

3. Uma página do navegador é aberta, na qual você pode entrar em sua conta. Depois de entrar, volte ao Visual Studio Code.

4. No menu Adicionar uma assinatura, selecione a sua assinatura.

5. No menu Selecionar um grupo de recursos, escolha um grupo de recursos.

6. No menu Onde o locatário deve estar localizado?, selecione um local para seus dados de locatário. Não é possível alterar essa seleção posteriormente.

7. Insira um nome para o locatário e pressione Enter para criar o locatário.

   

   Observação

   O processo de criação do locatário pode levar até 30 minutos. Após a criação do locatário, você poderá acessá-lo no Centro de administração do Microsoft Entra e no portal do Azure.

Configurar a entrada para seus usuários

Você pode configurar seu aplicativo para permitir que os usuários entrem com o email deles e uma senha ou uma senha de uso único. Você também pode projetar a aparência da experiência do usuário adicionando o logotipo da empresa, alterando a cor da tela de fundo ou ajustando o layout de entrada. Essas alterações se aplicam à aparência de todos os seus aplicativos neste novo locatário.

1. Em Configurar a entrada para seus usuários, selecione Configurar entrada e identidade visual.

   

2. Você precisará entrar no novo locatário. Selecione Permitir e, na janela do navegador que é aberta, escolha a conta que você está usando no momento e entre. Volte para o Visual Studio Code.

3. No menu Como você deseja que seus usuários entrem? na parte superior, escolha o método de entrada que você deseja disponibilizar aos usuários: Email e senha ou Email e senha de uso único.

   

4. Selecione OK.

5. Escolha onde você deseja que a página de entrada apareça na janela do navegador, Alinhada ao centro ou Alinhada à direita.

   

6. Selecione uma cor da tela de fundo para sua página de entrada.

   

7. Em seguida, uma janela do Explorador de Arquivos é aberta para que você possa adicionar o logotipo da empresa. Navegue até o arquivo de logotipo da empresa e selecione Carregar.

   Observação

   Os requisitos de imagem são os seguintes:

   • Tamanho da imagem 245 x 36 px
   • Tamanho máximo do arquivo 50 KB
   • Tipo de arquivo: JPEG ou PNG transparente

8. A mensagem Configurando o fluxo de entrada é exibida. Você pode ver o andamento na janela de Saída. Quando a configuração for concluída, a mensagem A configuração do fluxo do usuário foi concluída será exibida.

Experimente sua experiência de login

A etapa Testar sua experiência de entrada no passo a passo permite que você visualize a experiência de entrada configurada.

1. Clique no botão Executar agora. Uma nova guia do navegador abrirá com a página de entrada do seu locatário, a qual pode ser usada para criar e conectar usuários.

2. Selecione Não tem conta? Crie uma para criar um novo usuário no locatário do cliente.

3. Adicione o endereço de email do novo usuário e selecione Avançar.

Observação

Use um endereço de email diferente do usado para criar sua avaliação. Se você usar seu email de administrador de locatários para criar uma conta de cliente por meio de inscrição por autoatendimento ou adicionando um novo usuário externo no Centro de administração do Microsoft Entra, o sistema criará uma segunda conta com o mesmo endereço de email. Essa nova conta tem privilégios no nível do cliente, o que pode causar conflitos.

4. Execute as etapas de criar conta na tela. Normalmente, depois que o usuário se conecta, ele é redirecionado para o aplicativo. No entanto, como um aplicativo não foi configurado nesta etapa, você será redirecionado para JWT.ms, onde poderá exibir o conteúdo do token emitido durante o processo de entrada.

Para localizar o usuário que você criou durante a configuração do guia, vá ao centro de administração e procure o usuário na lista de usuários.

Configurar e executar um aplicativo de exemplo

A extensão contém vários exemplos de código que demonstram como a autenticação é implementada em diferentes tipos de aplicativo e linguagens de desenvolvimento. As amostras estão incluídas para aplicativos de página única (JavaScript, React, Angular) e aplicativos Web [Node.js (Express), ASP.NET Core, Python Django, Python Flask]. Escolha uma amostra dentro da extensão e ela configurará automaticamente o aplicativo com sua experiência de entrada.

1. Em Configurar e executar um aplicativo de exemplo, selecione o botão Configurar aplicativo de exemplo.

   

2. No menu, selecione o tipo de aplicativo que você deseja baixar. Se for solicitado que você selecione sua conta novamente, escolha a mesma conta que você vem usando.

   

3. Uma janela do Explorador de Arquivos é aberta para que você possa escolher onde deseja salvar o repositório de exemplo. Selecione uma pasta e selecione Baixar repositório aqui.

4. Quando o download for concluído, um novo workspace de projeto do Visual Studio Code será aberto com a pasta de aplicativo baixada exibida no Explorador.

5. Na janela do Visual Studio Code, abra um novo terminal.

6. No menu superior, selecione Executar>Executar sem depurar. O Console de Depuração mostra o progresso do script de inicialização. Há um pequeno atraso enquanto o projeto é configurado e o script de build é executado.

Quando a extensão baixa o aplicativo, ele atualiza automaticamente a configuração da MSAL (Biblioteca de Autenticação da Microsoft) para se conectar ao seu novo locatário e usar a experiência que você configurou. Nenhuma configuração adicional é necessária; você poderá executar o aplicativo assim que o projeto for criado. Por exemplo, no arquivo authConfig, o clientId é definido como sua ID do aplicativo e a autoridade é definida como o subdomínio do novo locatário.

Executar a experiência

Após a conclusão da instalação, experimente a experiência de entrada inserindo o URI de redirecionamento de host local para o aplicativo em um navegador. A URL de redirecionamento está disponível no arquivo README.md do aplicativo.

Usar a exibição do Explorer

O modo de exibição Explorer exibe as seções Gerenciar recursos, Introdução e Ajuda e feedback. Para abrir a visualização do Explorer, selecione o ícone de extensão que aparece na barra de atividades do Visual Studio Code.

Gerenciar recursos

Na seção Gerenciar recursos, é possível exibir e gerenciar locatários externos, aplicativos registrados, fluxos de usuário e identidade visual da empresa. Para exibir recursos do projeto, expanda os nós no painel esquerdo em Gerenciar Recursos.

Na seção Gerenciar recursos, é possível selecionar um recurso e ir diretamente para o Centro de administração do Microsoft Entra para gerenciá-lo ou configurá-lo. Por exemplo, clique com o botão direito do mouse em um aplicativo e selecione Abrir no centro de administração. Você será solicitado a entrar e, em seguida, o Centro de administração do Microsoft Entra será aberto diretamente na página de registro do aplicativo para esse aplicativo.

Ações de Introdução

Na seção Introdução, você pode acessar a documentação da avaliação gratuita ou ir diretamente para a configuração de experiência de entrada ou páginas de download de aplicativo de exemplo sem abrir o passo a passo da extensão.

Próximas etapas

• Para personalizar ainda mais seu locatário e explorar toda a gama de opções de configuração, visite o centro de administração do Microsoft Entra.
• Para obter o conteúdo e os recursos mais recentes para desenvolvedores, confira o Centro de desenvolvedores de ID externo.
• Para configurar seu próprio aplicativo para autenticação, consulte os links do tutorial . Esses tutoriais ajudarão você a compilar e integrar seus próprios aplicativos com a ID Externa do Microsoft Entra. Você também pode adicionar extensões de autenticação personalizadas em pontos específicos dentro do fluxo de autenticação.