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

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

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 os 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 do 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. 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 conectarem com êxito, o Azure AD B2C retornará 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 aos usuários.

Quando o token de ID está expirado 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 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 está 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 se tornará 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 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 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 seu locatário do Azure Active Directory 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 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 Dar 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.

    

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 em que 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 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. Atualize as seguintes propriedades de configurações de aplicativo:

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>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Etapa 5: Executar o aplicativo Web de exemplo

1. Compile e execute o projeto.

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

3. Selecione Inscrever-se/entrar.

   

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 ao seu aplicativo, selecione Declarações.

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

• Saiba mais sobre o exemplo de código.
• Saiba como habilitar a autenticação em seu próprio aplicativo Web usando o Azure AD B2C.