Compartilhar via

Configurar a autenticação em um aplicativo Web de exemplo que chama uma API Web usando o Azure AD B2C

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais em nossas perguntas frequentes.

Este artigo usa um exemplo ASP.NET aplicativo Web que chama uma API Web para ilustrar como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) aos seus aplicativos Web.

Importante

O exemplo ASP.NET aplicativo Web referenciado neste artigo é usado para chamar uma API Web com um token de portador. Para um aplicativo Web que não chama uma API Web, consulte Configurar a autenticação em um aplicativo Web de exemplo usando o Azure AD B2C.

Visão geral

O OIDC (OpenID Connect) é um protocolo de autenticação criado com base no OAuth 2.0. Você pode usar o OIDC para conectar com segurança um usuário a um aplicativo. Este exemplo de aplicativo Web usa o Microsoft Identity Web. O Microsoft Identity Web é um conjunto de bibliotecas do ASP.NET Core que simplificam a adição de suporte de autenticação e autorização a aplicativos Web que podem chamar uma API Web segura.

O fluxo de entrada envolve as seguintes etapas:

  1. O usuário acessa o aplicativo Web e seleciona Entrar.

  2. O aplicativo inicia uma solicitação de autenticação e redireciona os usuários ao Azure Active Directory B2C.

  3. Os usuários se inscrevem ou entram e redefinem a senha. Como alternativa, é possível entrar com uma conta de rede social.

  4. Depois que os usuários se conectam, o Azure AD B2C retorna um código de autorização para o aplicativo.

  5. Em seguida, o aplicativo faz o seguinte:

    um. Ele troca o código de autorização por um token de ID, token de acesso e token de atualização.
    b. Ele lê as declarações de token de ID e persiste um cookie de autorização de aplicativo.
    c. Ele armazena o token de atualização em um cache na memória para uso posterior.

Visão geral do registro do aplicativo

Para permitir que o aplicativo entre com o Azure AD B2C e chame uma API Web, registre dois aplicativos no diretório do Azure AD B2C.

  • O registro de aplicativo Web permite que o seu aplicativo entre com o Azure AD B2C. Durante o registro, você especifica o URI de redirecionamento. O URI de redirecionamento é o ponto de extremidade para o qual os usuários são redirecionados pelo Azure Active Directory B2C após a autenticação desses usuários com o Azure Active Directory B2C ser concluída. O processo de registro de aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Você também cria um segredo do cliente, que o aplicativo usa para adquirir os tokens com segurança.

  • O registro da API Web permite que o aplicativo chame uma API Web segura. O registro inclui os escopos da API Web. Os escopos fornecem uma forma de gerenciar as permissões em recursos protegidos, como a API Web. Você concede as permissões do aplicativo Web aos escopos da API Web. Ao solicitar um token de acesso, o aplicativo especifica as permissões desejadas no parâmetro scope da solicitação.

A arquitetura e os registros do aplicativo são ilustrados no diagrama a seguir:

Diagrama de um aplicativo Web com registros e tokens de chamada à API Web.

Chamar uma API Web

Após a autenticação, os usuários interagem com o aplicativo, que invoca uma API Web protegida. A API Web usa a autenticação de token de portador. O token de portador é o token de acesso que o aplicativo obteve do Azure AD B2C. O aplicativo passa o token no cabeçalho de autorização da solicitação HTTPS.

Authorization: Bearer <access token>

Se o escopo do token de acesso não corresponder aos escopos da API Web, a biblioteca de autenticação obterá um novo token de acesso com os escopos corretos.

Terminar sessão

O fluxo de saída envolve as seguintes etapas:

  1. No aplicativo, os usuários sairão.
  2. O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de tokens.
  3. O aplicativo leva os usuários para o ponto de extremidade de saída do Azure AD B2C para encerrar a sessão do Azure AD B2C.
  4. Os usuários são redirecionados de volta para o aplicativo.

Pré-requisitos

Um computador em execução:

Etapa 1: configurar o fluxo de usuário

Quando os usuários tentam entrar, o aplicativo inicia uma solicitação de autenticação para o ponto de extremidade de autorização por meio de um fluxo de usuário. O fluxo de usuários define e controla a experiência do usuário. Quando o fluxo é concluído, o Azure AD B2C gera um token e redireciona o usuário de volta para o aplicativo.

Se você ainda não fez isso, crie um fluxo de usuário ou uma política personalizada. Repita as etapas para criar três fluxos de usuário separados, da seguinte forma:

  • Um fluxo de usuário combinado de entrada e inscrição, como susi. Esse fluxo de usuário também dá suporte à experiência Esqueceu sua senha.
  • Um fluxo de usuário de edição de perfil, como edit_profile.
  • Um fluxo de usuário de Redefinição de senha, como reset_password.

O Azure AD B2C acrescenta B2C_1_ ao início do nome do fluxo de usuário. Por exemplo, susi se tornará B2C_1_susi.

Etapa 2: Registrar aplicativos Web

Nesta etapa, você cria o aplicativo Web e o registro de aplicativo da API Web e especifica os escopos da API Web.

Etapa 2.1: Registrar o aplicativo de API Web

Para criar o registro do aplicativo da API Web (ID do Aplicativo: 2), siga estas etapas:

  1. Entre no portal do Azure.

  2. Verifique se você está usando o diretório que contenha seu locatário do Azure AD B2C. Selecione o ícone Diretórios + assinaturas na barra de ferramentas do portal.

  3. Na página Configurações do portal | Diretórios + assinaturas, encontre o diretório Azure Active Directory B2C na lista Nome do diretório e, em seguida, selecione Alternar.

  4. No portal do Azure, pesquise e selecione Azure AD B2C.

  5. Escolha Registros de aplicativo e Novo registro.

  6. Insira um Nome para o aplicativo, (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta com suporte.

  7. Selecione Registrar.

  8. Depois que o registro do aplicativo for concluído, selecione Visão Geral.

  9. Registre o valor da ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

    A captura de tela demonstra como obter uma ID de aplicativo da API Web.

Etapa 2.2: Configurar escopos de aplicativo de API Web

  1. Selecione o aplicativo my-api1 que você criou (ID do Aplicativo: 2) para abrir a página de Visão Geral do aplicativo.

  2. Em Gerenciar, selecione Expor uma API.

  3. Ao lado de URI do ID do Aplicativo, selecione o link Definir. Substitua o valor padrão (identificador exclusivo, GUID) por um nome exclusivo (por exemplo, tasks-api) e selecione Salvar.

    Quando o aplicativo Web solicita um token de acesso à API Web, ele deve adicionar esse URI como prefixo para cada escopo que você definir para a API.

  4. Em Escopos definidos por esta API, selecione Adicionar um escopo.

  5. Para criar um escopo que define o acesso de leitura à API:

    1. Para Nome do escopo, insira tasks.read.
    2. Para Nome de exibição de consentimento do administrador, insira Acesso de leitura à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permitir acesso de leitura à API de tarefas.

  6. Selecione Adicionar escopo.

  7. Selecione Adicionar escopo e adicione um escopo que define o acesso de gravação à API:

    1. Para Nome do escopo, insira tasks.write.
    2. Para Nome de exibição de consentimento do administrador, insira Acesso de gravação à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permitir acesso de gravação à API de tarefas.

  8. Selecione Adicionar escopo.

Etapa 2.3: Registrar o aplicativo Web

Para criar o registro do aplicativo Web, faça o seguinte:

  1. Escolha Registros de aplicativo e Novo registro.

  2. Em Nome, insira um nome para o aplicativo (por exemplo, webapp1).

  3. Em Tipos de conta com suporte, selecione Contas em qualquer provedor de identidade ou diretório organizacional (para autenticar usuários com fluxos dos usuários) .

  4. Em URI de redirecionamento, selecione Web e, em seguida, na caixa da URL, insira https://localhost:5000/signin-oidc.

  5. Em Permissões, marque a caixa de seleção Conceder consentimento do administrador às permissões OpenID e acesso offline.

  6. Selecione Registrar.

  7. Depois que o registro do aplicativo for concluído, selecione Visão Geral.

  8. Registre a ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

    Captura de tela da página de Visão geral do aplicativo Web para registrar a ID do aplicativo Web.

Etapa 2.4: Criar um segredo do cliente do aplicativo Web

Crie um segredo do cliente para o aplicativo Web registrado. O aplicativo Web usa o segredo do cliente para provar sua identidade quando solicita tokens.

  1. Em Gerenciar, selecione Certificados e segredos.
  2. Selecione Novo segredo do cliente.
  3. Na caixa Descrição , insira uma descrição para o segredo do cliente (por exemplo, clientsecret1).
  4. Em Expirar, selecione um período durante o qual o segredo será válido e clique em Adicionar.
  5. Registre o Valor do segredo. Você usará esse valor para uma configuração em uma etapa posterior.

Etapa 2.5: Conceder permissões de aplicativo Web para a API Web

Para conceder permissões ao aplicativo (ID do Aplicativo: 1), siga estas etapas:

  1. Selecione Registros de aplicativo e, em seguida, selecione o aplicativo que você criou (ID do Aplicativo: 1).

  2. Em Gerenciar, selecione Permissões de API.

  3. Em Permissões Configuradas, selecione Adicionar uma permissão.

  4. Selecione a guia Minhas APIs.

  5. Selecione a API (ID do Aplicativo: 2) que deverá conceder acesso ao aplicativo Web. Por exemplo, insira my-api1.

  6. Em Permissão, expanda tarefas e, em seguida, selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).

  7. Selecione Adicionar Permissões.

  8. Selecione Fornecer consentimento do administrador para <nome do seu locatário>.

  9. Selecione Sim.

  10. Selecione Atualizar e, em seguida, verifique se Concedido para... aparece em Status para ambos os escopos.

  11. Na lista Permissões configuradas, selecione o escopo e, em seguida, copie o nome completo do escopo.

    Captura de tela do painel de permissões configuradas, mostrando que as permissões do acesso de leitura foram concedidas.

Etapa 3: obter o exemplo de aplicativo Web

Baixe o arquivo zip ou execute o seguinte comando Bash para clonar o aplicativo Web de exemplo do GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extraia o arquivo de amostra em uma pasta cujo comprimento total do caminho seja de 260 caracteres ou menos.

Etapa 4: Configurar a API Web de exemplo

Na pasta de exemplo, na pasta 4-WebApp-your-API/4-2-B2C/TodoListService , abra o projeto TodoListService.csproj com o Visual Studio ou o Visual Studio Code.

Na pasta raiz do projeto, abra o arquivo appsettings.json. Este arquivo contém informações sobre o provedor de identidade do Azure AD B2C. O aplicativo de API Web usa essas informações para validar o token de acesso que o aplicativo Web passa como um token de portador. Atualize as seguintes propriedades das configurações do aplicativo:

Seção Chave Valor
AzureAdB2C Exemplo A primeira parte do nome do locatário do Azure AD B2C. Por exemplo, https://contoso.b2clogin.com.
AzureAdB2C Domínio Seu nome de locatário completo do locatário do Azure AD B2C. Por exemplo, contoso.onmicrosoft.com.
AzureAdB2C ClientId A ID do aplicativo da API Web da etapa 2.1.
AzureAdB2C SignUpSignInPolicyId Os fluxos dos usuários ou a política personalizada que você criou na etapa 1.

Seu arquivo de configuração final deve se parecer com o seguinte arquivo JSON:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Etapa 4.1: Definir a política de permissão

A API Web verifica se o usuário foi autenticado com o token de portador e o token de portador tem os escopos aceitos configurados. Se o token de portador não tiver nenhum desses escopos aceitos, a API Web retornará o código de status HTTP 403 (Proibido) e gravará no corpo da resposta uma mensagem informando quais escopos são esperados no token.

Para configurar os escopos aceitos, abra a Controller/TodoListController.cs classe e defina o nome do escopo, sem o URI completo.

[RequiredScope("tasks.read")]

Etapa 4.2: Executar o aplicativo de API Web de exemplo

Para permitir que o aplicativo Web chame o exemplo de API Web, execute a API Web fazendo o seguinte:

  1. Se você for solicitado a fazê-lo, restaure as dependências.
  2. Compile e execute o projeto.
  3. Depois que o projeto for criado, o Visual Studio ou o Visual Studio Code iniciará a API Web nos navegadores com o seguinte endereço: https://localhost:44332.

Etapa 5: Configurar o aplicativo Web de exemplo

Na pasta de exemplo, na 4-WebApp-your-API/4-2-B2C/Client pasta, abra o projeto TodoListClient.csproj com o Visual Studio ou o Visual Studio Code.

Na pasta raiz do projeto, abra o appsettings.json arquivo. Este arquivo contém informações sobre o provedor de identidade do Azure AD B2C. O aplicativo Web usa essas informações para estabelecer uma relação de confiança com o Azure Active Directory B2C, conectar e desconectar usuários, adquirir tokens e validá-los. Atualize as seguintes propriedades das configurações do aplicativo:

Seção Chave Valor
AzureAdB2C Exemplo A primeira parte do nome do locatário do Azure Active Directory B2C (por exemplo, https://contoso.b2clogin.com).
AzureAdB2C Domínio O nome de locatário completo do locatário do Azure Active Directory B2C (por exemplo, contoso.onmicrosoft.com).
AzureAdB2C ClientId A ID do aplicativo Web da etapa 2.3.
AzureAdB2C Segredo do cliente O segredo do aplicativo Web da etapa 2.4.
AzureAdB2C SignUpSignInPolicyId O usuário flui ou a política personalizada que você criou na etapa 1.
Lista de tarefas TodoListScope Os escopos da API Web que você criou na etapa 2.5.
Lista de tarefas TodoListBaseAddress O URI base da API Web (por exemplo https://localhost:44332).

Seu arquivo de configuração final deve ser semelhante ao seguinte JSON:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Etapa 6: Executar o aplicativo Web de exemplo

  1. Compile e execute o projeto.
  2. Navegue até https://localhost:5000.
  3. Conclua o processo de inscrição ou de entrada.

Após a autenticação bem-sucedida, você verá seu nome de exibição na barra de navegação. Para exibir as declarações que o token do Azure AD B2C retorna ao seu aplicativo, selecione TodoList.

Captura de tela das declarações de token do aplicativo Web.

Implantar seu aplicativo

Em um aplicativo de produção, o URI de redirecionamento de registro do aplicativo normalmente é um ponto de extremidade acessível publicamente em que seu aplicativo está em execução, como https://contoso.com/signin-oidc.

Adicione e modifique URIs de redirecionamento nos aplicativos registrados a qualquer momento. As restrições a seguir se aplicam a URLs de redirecionamento:

  • A URL de resposta deve começar com o esquema https.
  • A URL de resposta diferencia maiúsculas de minúsculas. As letras maiúsculas e minúsculas devem corresponder às letras maiúsculas e minúsculas do caminho da URL do aplicativo em execução.

Cache de token para um aplicativo Web

O exemplo de aplicativo Web usa a serialização de cache de token na memória. Essa implementação é excelente em exemplos. Também é bom em aplicativos de produção, desde que você não se importe se o cache de token for perdido quando o aplicativo Web for reiniciado.

Para o ambiente de produção, recomendamos que você use um cache de memória distribuída. Por exemplo, cache Redis, NCache ou um cache do SQL Server. Para obter detalhes sobre as implementações de cache de memória distribuída, consulte a serialização do cache de token.

Próximas etapas

  • Last updated on