Guia de início rápido: introdução à extensão de ID Externa do Microsoft Entra para Visual Studio Code

Aplica-se a: Locatários da força de trabalho Locatários externos (saiba mais)

A integração da autenticação em seus aplicativos de consumidores e clientes empresariais é essencial para proteger recursos e dados de clientes. A extensão de ID Externa do Microsoft Entra para Visual Studio Code permite criar rapidamente locatários externos, configurar experiências de entrada para usuários externos e configurar um exemplo de ID Externa, tudo diretamente no Visual Studio Code. Usando o passo a passo da extensão, você pode aprender como configurar uma experiência de entrada personalizada e com 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 configuração mais suave.

A ID externa é um serviço que pode ser adicionado a uma assinatura do Azure. Se já tiver um, pode facilmente incluir um ID Externo. Caso contrário, configure uma avaliação gratuita do Microsoft Entra External ID no Visual Studio Code e comece configurando um aplicativo de exemplo.

Instalar a extensão

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

1. Se você ainda não tiver o Visual Studio Code instalado, baixe o Visual Studio Code e conclua as etapas de instalação.
2. Instale a extensão de ID externa do Microsoft Entra para Visual Studio Code a partir de 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-vinda e, em seguida, 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. Ou, se você não tiver uma assinatura do Azure, crie um locatário de avaliação que não exija uma (saiba mais).

• Na página de boas-vindas Introdução ao Microsoft Entra External ID, escolha uma opção:

  • Se ainda não tiver uma Conta do Azure, selecione Configurar uma avaliação gratuita.
  • Se já tiver uma conta do Azure, selecione Utilizar a minha subscrição.

  

Configurar uma versão experimental gratuita (pré-visualização)

1. Selecione Configurar uma avaliação gratuita.

2. Na mensagem de confirmação de início de sessão, selecione Permitir.

3. Uma nova janela do navegador é aberta. Entre usando sua conta pessoal, conta da Microsoft (MSA) ou conta do GitHub. Depois de iniciar sessão, feche a janela do browser.

4. Retorne ao Visual Studio Code. No menu Onde o locatário deve estar localizado?, selecione um local para os dados do locatário. Esta seleção não pode ser alterada posteriormente.

5. Insira um nome exclusivo para o locatário.

   

6. A extensão cria seu locatário de avaliação. Você pode visualizar o progresso abrindo a janela Exibir>saída . Quando o processo estiver concluído, O locatário é criado será exibido.

Utilize a sua subscrição

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 Sem assinaturas disponíveis for exibida, você poderá configurar uma avaliação gratuita.

3. É aberta uma página do browser onde pode iniciar sessão na sua conta. Depois de entrar, retorne ao Visual Studio Code.

4. No menu Adicionar uma subscrição, selecione a sua subscrição.

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 os dados do locatário. Esta seleção não pode ser alterada posteriormente.

7. Introduza um nome para o inquilino e, em seguida, selecione Enter para criar o inquilino.

   

   Observação

   O processo de criação do locatário pode levar até 30 minutos. Depois que o locatário for criado, você poderá acessá-lo no centro de administração do Microsoft Entra e no portal do Azure.

Configurar o início de sessão para os seus utilizadores

Você pode configurar seu aplicativo para permitir que os usuários entrem com seus e-mails e uma senha ou uma senha única. Você também pode projetar a aparência da experiência do usuário adicionando o logotipo da sua empresa, alterando a cor do plano de fundo ou ajustando o layout de entrada. Estas alterações aplicam-se ao aspeto e funcionalidade de todas as suas aplicações neste novo inquilino.

1. Em Configurar início de sessão para os seus utilizadores, selecione Configurar início de sessão e marca.

   

2. Ser-lhe-á pedido para iniciar sessão no novo inquilino. Selecione Permitir e, na janela do navegador que se abre, escolha a conta que você está usando no momento e faça login. Retorne ao Visual Studio Code.

3. No menu Como você gostaria que seus usuários entrassem?, na parte superior, escolha o método de login que deseja disponibilizar para seus usuários: Email e senha ou Email e senha única.

   

4. Selecione OK.

5. Escolha onde pretende que a página de início de sessão apareça na janela do browser, alinhada ao centro ou alinhada à direita.

   

6. Selecione uma cor de fundo para a sua página de inscrição.

   

7. Em seguida, uma janela do Explorador de Arquivos é aberta para que você possa adicionar o logotipo da sua 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 ficheiro 50 KB
   • Tipo de arquivo: Transparent PNG or JPEG

8. A mensagem Configurando o fluxo de entrada é exibida. Você pode visualizar o progresso na janela Saída. Quando a configuração estiver concluída, a mensagem Configuração do fluxo de usuário está concluída será exibida .

Experimente a sua experiência de início de sessão

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

1. Selecione o botão Executar agora . Uma nova guia do navegador é aberta com a página de inscrição do seu locatário que pode ser usada para criar e entrar usuários.

2. Selecione Sem conta? Crie um para criar um novo usuário no locatário.

3. Adicione o endereço de e-mail do seu novo utilizador e selecione Seguinte. Não utilize o mesmo e-mail que utilizou para criar a versão experimental.

4. Conclua as etapas de inscrição na tela. Normalmente, quando o usuário faz login, ele é redirecionado de volta para seu aplicativo. No entanto, como você não configurou um aplicativo nesta etapa, será redirecionado para JWT.ms, onde poderá visualizar o conteúdo do token emitido durante o processo de login.

Para encontrar o usuário que você criou durante esta etapa, você pode ir para o centro de administração do Microsoft Entra e procurar 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 aplicativos e linguagens de desenvolvimento. Exemplos estão incluídos para aplicativos de página única (JavaScript, React, Angular) e aplicativos da Web [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Escolha um exemplo de dentro da extensão e a extensão configura 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 deseja baixar. Se lhe for pedido para selecionar a sua conta novamente, escolha a mesma conta que tem estado a utilizar.

   

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, em seguida, selecione Baixar repositório aqui.

4. Quando o download for concluído, um novo espaço de trabalho de projeto do Visual Studio Code será aberto com a pasta do aplicativo baixado exibida no Explorer.

5. Abra um novo terminal na janela Visual Studio Code.

6. No menu superior, selecione Executar>execução sem depuração. 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 construção é executado.

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

Execute a experiência

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

Utilizar a vista do Explorador

A vista Explorador apresenta as secções Gerir recursos, Introdução e Ajuda e Comentários . Para abrir o modo de exibição Explorer, selecione o ícone de extensão visível na barra de atividades do Visual Studio Code.

Gerir recursos

Na seção Gerenciar recursos, você pode exibir e gerenciar seus locatários externos, aplicativos registrados, fluxos de usuários 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, você pode 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 para a avaliação gratuita ou ir diretamente para a configuração da experiência de entrada ou páginas de download de aplicativo de exemplo sem abrir o passo a passo da extensão.

Próximos passos

• 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 do desenvolvedor, verifique a Central do desenvolvedor de ID Externa.
• Para configurar seu próprio aplicativo para autenticação, consulte os links do tutorial . Estes tutoriais ajudam-no a criar e integrar as suas próprias aplicações com o Microsoft Entra External ID. Você também pode adicionar extensões de autenticação personalizadas em pontos específicos dentro do fluxo de autenticação.