Partilhar via


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

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

Importante

O aplicativo Web de ASP.NET de exemplo mencionado neste artigo não pode ser usado para chamar uma API REST, porque retorna um token de ID e não um token de acesso. Para um aplicativo Web que pode chamar uma API REST, consulte Proteger uma API Web criada com o ASP.NET Core usando o Azure AD B2C.

Descrição geral

OpenID Connect (OIDC) é um protocolo de autenticação que é construído em OAuth 2.0. Você pode usar o OIDC para conectar usuários com segurança a um aplicativo. Este exemplo de aplicativo Web usa o Microsoft Identity Web. O Microsoft Identity Web é um conjunto de bibliotecas ASP.NET Core que simplificam a adição de suporte de autenticação e autorização a aplicativos Web.

O fluxo de entrada envolve as seguintes etapas:

  1. Os utilizadores vão para a aplicação Web e selecionam Iniciar sessão.
  2. O aplicativo inicia uma solicitação de autenticação e redireciona os usuários para o Azure AD B2C.
  3. Os utilizadores registam-se ou iniciam sessão e repõem a palavra-passe. Em alternativa, podem iniciar sessão com uma conta social.
  4. Depois que os usuários entrarem com êxito, o Azure AD B2C retorna um token de ID para o aplicativo.
  5. O aplicativo valida o token de ID, lê as declarações e retorna uma página segura para os usuários.

Quando o token de ID expira ou a sessão do aplicativo é invalidada, o aplicativo inicia uma nova solicitação de autenticação e redireciona os usuários para o Azure AD B2C. Se a sessão SSO do Azure AD B2C estiver ativa, o Azure AD B2C emitirá um token de acesso sem solicitar que os usuários entrem novamente. Se a sessão do Azure AD B2C expirar ou se tornar inválida, os usuários serão solicitados a entrar novamente.

Terminar sessão

O fluxo de saída envolve as seguintes etapas:

  1. A partir da aplicação, os utilizadores terminam sessão.
  2. O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de token.
  3. O aplicativo leva os usuários ao 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 que esteja executando um dos seguintes:

Etapa 1: Configurar o fluxo de usuários

Quando os usuários tentam entrar em seu aplicativo, 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 do usuário define e controla a experiência do usuário. Depois que os usuários concluem o fluxo de usuários, o Azure AD B2C gera um token e, em seguida, redireciona os usuários de volta para seu aplicativo.

Se ainda não tiver feito 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 maneira:

  • Um fluxo de usuário combinado de login e inscrição , como susi. Esse fluxo de usuário também suporta a 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 precede o nome do fluxo de B2C_1_ usuário. Por exemplo, susi passa a B2C_1_susi.

Etapa 2: Registrar um aplicativo Web

Para permitir que seu aplicativo entre com o Azure AD B2C, registre seu aplicativo no diretório do Azure AD B2C. Registrar seu aplicativo estabelece uma relação de confiança entre o aplicativo e o Azure AD B2C.

Durante o registro do aplicativo, você especificará o URI de redirecionamento. O URI de redirecionamento é o ponto de extremidade para o qual os usuários são redirecionados pelo Azure AD B2C depois de se autenticarem com o Azure AD B2C. O processo de registro do aplicativo gera uma ID do aplicativo, também conhecida como ID do cliente, que identifica exclusivamente seu aplicativo. Depois que seu aplicativo é registrado, o Azure AD B2C usa a ID do aplicativo e o URI de redirecionamento para criar solicitações de autenticação.

Para criar o registro do aplicativo Web, use as seguintes etapas:

  1. Inicie sessão no portal do Azure.

  2. Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas .

  3. No portal do Azure, procure e selecione Azure AD B2C.

  4. Selecione Registos de aplicações e, em seguida, selecione Novo registo.

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

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

  7. Em Redirecionar URI, selecione Web e, na caixa URL, digite https://localhost:44316/signin-oidc.

  8. Em Gerenciar, selecione a Autenticação, vá para Concessão implícita e fluxos híbridos, marque a caixa de seleção Tokens de ID (usados para fluxos implícitos e híbridos).

  9. Em Permissões, marque a caixa de seleção Conceder consentimento de administrador para permissões de acesso openid e offline.

  10. Selecione Registar.

  11. Selecione Descrição geral.

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

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

Etapa 3: Obter o exemplo de aplicativo Web

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

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

Extraia o arquivo de exemplo para uma pasta onde o comprimento total do caminho é de 260 ou menos caracteres.

Etapa 4: Configurar o aplicativo Web de exemplo

Na pasta de exemplo, na pasta 1-WebApp-OIDC/1-5-B2C/, abra o projeto WebApp-OpenIDConnect-DotNet.csproj com Visual Studio ou Visual Studio Code.

Na pasta raiz do projeto, abra o arquivo appsettings.json . Este arquivo contém informações sobre seu provedor de identidade do Azure AD B2C. Atualize as seguintes propriedades de configurações do aplicativo:

Section Key valor
AzureAdB2C Instância A primeira parte do nome do locatário do Azure AD B2C (por exemplo, https://contoso.b2clogin.com).
AzureAdB2C Domínio Seu nome completo de locatário do Azure AD B2C (por exemplo, contoso.onmicrosoft.com).
AzureAdB2C ClientId A ID do Aplicativo Web (cliente) da etapa 2.
AzureAdB2C SignUpSignInPolicyId Os fluxos de usuário ou a política personalizada que você criou na etapa 1.

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

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

Etapa 5: Executar o aplicativo Web de exemplo

  1. Crie e execute o projeto.

  2. Aceder a https://localhost:44316.

  3. Selecione Inscrever-se/Entrar.

    Captura de ecrã do botão de início de sessão e inscrição na página de boas-vindas do projeto.

  4. Conclua o processo de inscrição ou login.

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

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

Implementar a sua aplicação

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

Você pode adicionar e modificar URIs de redirecionamento em seus aplicativos registrados a qualquer momento. As seguintes restrições se aplicam aos URIs de redirecionamento:

  • O URL de resposta deve começar com o esquema https.
  • O URL de resposta diferencia maiúsculas de minúsculas. Seu caso deve corresponder ao caso do caminho da URL do seu aplicativo em execução.

Próximos passos