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

  • Artigo

Este artigo usa um aplicativo de desktop WPF (Windows Presentation Foundation) de amostra para ilustrar como adicionar a autenticação no Azure AD B2C (Azure Active Directory B2C) aos seus aplicativos de desktop.

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 aplicativo de desktop de amostra usa a MSAL (Biblioteca de Autenticação da Microsoft) com o fluxo de PKCE (Proof Key for Code Exchange) do código de autorização do OIDC. A MSAL é uma biblioteca fornecida pela Microsoft que simplifica a adição do suporte de autenticação e autorização a aplicativos de desktop.

O fluxo de entrada envolve as seguintes etapas:

  1. Os usuários abrem o aplicativo e selecionam conectar.
  2. O aplicativo abre o navegador do sistema do dispositivo de desktop e inicia uma solicitação de autenticação para o Azure AD B2C.
  3. Os usuários se inscrevem ou se conectam, redefinem a senha ou se conectam com uma conta de rede social.
  4. Depois que os usuários entram com sucesso, o Azure AD B2C retorna um código de autorização para o aplicativo.
  5. O aplicativo executa as seguintes ações:
    1. Ele troca o código de autorização por um token de ID, token de acesso e token de atualização.
    2. Ele lê as declarações do token da ID.
    3. Ele armazena os tokens em um cache na memória para usar depois.

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 da área de trabalho permite que o seu aplicativo entre com o Azure AD B2C. Durante o registro do aplicativo, especifique 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 após a autenticação no Azure AD B2C. O processo de registro de aplicativo gera um ID de aplicativo, também conhecido como ID de cliente, que identifica exclusivamente seu aplicativo de desktop (por exemplo, ID de aplicativo: 1).

  • O registro da API Web permite que o aplicativo chame uma API Web protegida. O registro expõe as permissões da API Web (escopos). O processo de registro de aplicativo gera um ID de aplicativo, que identifica exclusivamente sua API da Web (por exemplo, ID de aplicativo: 2). Conceda permissões ao aplicativo da área de trabalho (ID do aplicativo: 1) para os escopos da API Web (ID do aplicativo: 2).

O registro e a arquitetura do aplicativo são ilustrados nos seguintes diagramas:

Diagram of the desktop app with web API, registrations, and tokens.

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.

O fluxo de saída

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 executa o Visual Studio 2019 com desenvolvimento de desktop .NET.

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 seu aplicativo

Crie o aplicativo de desktop e o registro do aplicativo da API da Web e especifique os escopos da API da 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.

    Screenshot that demonstrates how to get a web A P I application I D.

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 de desktop

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

  1. Entre no portal do Azure.
  2. Escolha Registros de aplicativo e Novo registro.
  3. Em Nome, insira um nome para o aplicativo (por exemplo, desktop-app1).
  4. 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) .
  5. Em Redirecionar URI, selecione Cliente público/nativo (desktop & desktop) e, na caixa da URL, insira https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Substitua your-tenant-name pelo seu nome de locatário. Para obter mais opções, veja Configurar o URI de redirecionamento.
  6. Selecione Registrar.
  7. Depois que o registro do aplicativo for concluído, selecione Visão Geral.
  8. Registre o ID de aplicativo (cliente) para uso posterior ao configurar o aplicativo de desktop. Screenshot highlighting the desktop application ID.

Etapa 2.4: conceda ao aplicativo de desktop permissões para a API da 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.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Etapa 3: configurar a API Web de exemplo

Esse exemplo adquire um token de acesso com os escopos relevantes que o aplicativo de desktop pode usar para uma API da Web. Para chamar uma API da Web a partir do código, faça o seguinte:

  1. Use uma API Web existente ou crie uma. Para obter mais informações, confira Habilitar autenticação em sua própria API Web usando o Azure AD B2C.
  2. Depois de configurar a API Web, copie o URI do ponto de extremidade dela. Você usará o ponto de extremidade da API Web nas próximas etapas.

Dica

Se você não tiver uma API Web, ainda poderá executar este exemplo. Nesse caso, o aplicativo retorna o token de acesso, mas não poderá chamar a API Web.

Etapa 4: obter o exemplo de aplicativo da área de trabalho WPF

  1. Baixe o arquivo .zip ou clone o aplicativo da Web de amostra do repositório GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. Abra a solução active-directory-b2c-wpf (o arquivo active-directory-b2c-wpf.sln) no Visual Studio.

Etapa 5: configurar o aplicativo da área de trabalho de exemplo

No projeto active-directory-b2c-wpf, abra o arquivo App.xaml.cs. Os membros da classe App.xaml.cs contêm informações sobre seu provedor de identidade Azure AD B2C. O aplicativo de desktop usa essas informações para estabelecer uma relação de confiança com o Azure AD B2C, conectar e desconectar usuários, adquirir tokens e validá-los.

Atualize os seguintes membros de classe:

Chave Valor
TenantName A primeira parte do nome do locatário do Azure Active Directory B2C (por exemplo, contoso.b2clogin.com).
ClientId A ID do aplicativo da área de trabalho da Etapa 2.3.
PolicySignUpSignIn O fluxo de conexão ou inscrição de usuário ou a política personalizada que você criou na etapa 1.
PolicyEditProfile O fluxo de edição de perfil de usuário ou a política personalizada que você criou na etapa 1.
ApiEndpoint (Opcional) O ponto de extremidade da API da Web criado na etapa 3 (por exemplo, https://contoso.azurewebsites.net/hello).
ApiScopes Os escopos da API da Web que você criou na etapa 2.4.

Seu arquivo App.xaml.cs final deve se parecer com o seguinte código C#:

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Etapa 6: executar e testar o aplicativo da área de trabalho

  1. Restaurar pacotes NuGet.

  2. Pressione F5 para criar e executar a amostra.

  3. Selecione Conectar e inscreva-se ou entre com sua conta do Azure AD B2C local ou social.

    Screenshot highlighting how to start the sign-in flow.

  4. Após uma inscrição ou entrada bem-sucedida, os detalhes do token são exibidos no painel inferior do aplicativo WPF.

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. Selecione Chamar API para chamar a API da Web.

Próximas etapas

Aprenda a Configurar opções de autenticação em um aplicativo de desktop WPF usando o Azure AD B2C.