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

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

Importante

O aplicativo Web ASP.NET de exemplo que é referenciado neste artigo não pode ser usado para chamar uma API REST porque ele retorna um token de ID, mas não um token de acesso. Para um aplicativo Web que pode chamar uma API REST, consulte Proteger uma API Web criada com ASP.NET Core 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 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 simplifica a adição de suporte de autenticação e autorização a aplicativos Web.

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. Após a entrada bem-sucedida dos usuários, 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 está expirado ou a sessão de 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 de 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, será solicitado aos usuários que eles entrem novamente.

Sair

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 que esteja executando um dos seguintes:

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 torna-se B2C_1_susi.

Etapa 2: registrar um aplicativo Web

Para permitir que o aplicativo entre com Azure AD B2C, registre seu aplicativo no diretório do Azure AD B2C. Registrar o 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 serão redirecionados pelo Azure AD B2C após a autenticação deles no Azure AD B2C. O processo de registro do aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Após o registro do aplicativo, o Azure AD B2C usa a ID de 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. Entre 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 o locatário do Azure AD B2C no menu Diretórios + assinaturas.

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

  4. Escolha Registros de aplicativo e Novo registro.

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

  6. 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) .

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

  8. Em Autenticação, vá para Concessão implícita e fluxos híbridos, selecione 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 do administrador às permissões OpenID e acesso offline.

  10. Selecione Registrar.

  11. Selecione Visão geral.

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

    Screenshot of the web app Overview page for recording your web application ID.

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 amostra em uma pasta cujo comprimento total do caminho seja de 260 caracteres ou menos.

Etapa 4: configurar o aplicativo Web de amostra

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

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

Seção Chave Valor
AzureAdB2C Instância 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 (cliente) etapa 2.
AzureAdB2C SignUpSignInPolicyId Os fluxos dos usuários ou a política personalizada que você criou na etapa 1.

O arquivo de configuração final deve 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 amostra

  1. Compile e execute o projeto.

  2. Ir para https://localhost:44316.

  3. Selecione Inscrever-se.

    Screenshot of the sign in and sign up button on the project Welcome page.

  4. 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 para o aplicativo, selecione Declarações.

Screenshot of the web app token claims.

Implantar seu aplicativo

Em um aplicativo de produção, o URI de redirecionamento do registro de aplicativo normalmente é um ponto de extremidade de acesso público no qual o 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.

Próximas etapas