Guia de início rápido: configurar as credenciais de um aplicativo do ASP.NET usando o Azure Active Directory B2C

  • Artigo

O Azure AD B2C (Azure Active Directory B2C) fornece gerenciamento de identidades de nuvem para manter seu aplicativo, sua empresa e seus clientes protegidos. O Azure AD B2C permite que seus aplicativos se autentiquem com contas sociais e corporativas usando protocolos padrão.

Neste início rápido, você usa um aplicativo ASP.NET para se conectar usando um provedor de identidade de redes sociais e chama uma API Web do Azure AD B2C protegida.

Pré-requisitos

  • Visual Studio 2022 com a carga de trabalho de desenvolvimento Web e do ASP.NET.

  • Uma conta social do Facebook, do Google ou da Microsoft.

  • Baixe um arquivo zip ou clone o aplicativo Web de exemplo do GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git

    Há dois projetos na solução de exemplo:

    • TaskWebApp: um aplicativo Web que cria e edita uma lista de tarefas. O aplicativo Web usa o fluxo de usuário de inscrição ou conexão para inscrever ou conectar usuários.
    • TaskService: a API Web que dá suporte às funções criar, ler, atualizar e excluir para a lista de tarefas. A API Web é protegida pelo Azure AD B2C e chamada pelo aplicativo Web.

Executar o aplicativo no Visual Studio

  1. Na pasta de projeto do aplicativo de exemplo, abra a solução B2C-WebAPI-DotNet.sln no Visual Studio.

  2. Para este início rápido, você executa os projetos TaskWebApp e TaskService ao mesmo tempo. Clique com o botão direito do mouse na solução B2C-WebAPI-DotNet no Gerenciador de Soluções e selecione Configurar projetos de inicialização....

  3. Selecione Vários projetos de inicialização e altere a Ação de ambos os projetos para Iniciar.

  4. Selecione OK.

  5. Pressione F5 para executar os dois aplicativos. Cada aplicativo é aberto em sua própria guia do navegador:

    • https://localhost:44316/: o aplicativo Web ASP .NET. Você interage diretamente com este aplicativo no início rápido.
    • https://localhost:44332/: a API Web que é chamada pelo aplicativo Web ASP.NET.

Iniciar sessão usando sua conta

  1. Selecione Inscrever-se/Entrar no aplicativo Web ASP.NET para iniciar o fluxo de trabalho.

    Captura de tela mostrando o Aplicativo Web ASP.NET de exemplo no navegador com o link de inscrição/entrada realçado

    O exemplo dá suporte a várias opções de inscrição, incluindo o uso de um provedor de identidade social ou a criação de uma conta local usando um endereço de email. Para este guia de início rápido, use uma conta de provedor de identidade social do Facebook, do Google ou da Microsoft.

  2. O Azure AD B2C apresenta uma página de entrada para uma empresa fictícia chamada Fabrikam para o aplicativo Web de exemplo. Para inscrever-se usando um provedor de identidade social, selecione o botão do provedor de identidade que você deseja usar.

    Captura de tela dos botões do provedor de identidade da página Entrar ou Inscrever-se

    Você se autentica (entra) usando as credenciais de sua conta social e autoriza o aplicativo a ler as informações da sua conta social. Ao conceder o acesso, o aplicativo poderá recuperar informações de perfil da conta social, tais como seu nome e cidade.

  3. Conclua o processo de entrada para o provedor de identidade.

Editar o perfil

O Azure Active Directory B2C fornece funcionalidade para permitir que usuários atualizem seus perfis. O aplicativo Web de exemplo usa um fluxo de usuário de perfil de edição do Azure AD B2C no fluxo de trabalho.

  1. Na barra de menus do aplicativo, selecione o nome do perfil e Editar perfil para editar o perfil criado.

    Captura de tela do aplicativo Web de exemplo no navegador com o link editar perfil realçado

  2. Altere o Nome de exibição ou a Cidade e selecione Continuar para atualizar seu perfil.

    A alteração é exibida na parte superior direita da home page do aplicativo Web.

Acessar um recurso de API protegido

  1. Selecione Lista de Tarefas Pendentes para inserir e modificar os itens da lista de tarefas pendentes.

  2. Na caixa de texto Novo Item, insira o texto. Para chamar a API Web protegida do Azure AD B2C que adiciona um item de lista de tarefas pendentes, selecione Adicionar.

    Captura de tela do aplicativo Web de exemplo no navegador com o link Lista de Tarefas Pendentes e o botão Adicionar realçados.

    O aplicativo Web ASP.NET inclui um token de acesso do Microsoft Entra na solicitação do recurso da API Web protegido para executar operações nos itens da lista de tarefas pendentes do usuário.

Você usou com êxito sua conta de usuário do Azure AD B2C para fazer uma chamada autorizada a uma API Web protegida pelo Azure AD B2C.

Próximas etapas

Criar um locatário do Azure Active Directory B2C no Portal do Azure