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

  • Artigo

Este artigo usa um exemplo de aplicativo de área de trabalho do Windows Presentation Foundation (WPF) para ilustrar como adicionar a autenticação do Azure Ative Directory B2C (Azure AD B2C) aos seus aplicativos da área de trabalho .

Descrição geral

OpenID Connect (OIDC) é um protocolo de autenticação 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 de área de trabalho usa a Biblioteca de Autenticação da Microsoft (MSAL) com o código de autorização OIDC Proof Key for Code Exchange (PKCE) flow. O MSAL é uma biblioteca fornecida pela Microsoft que simplifica a adição de suporte de autenticação e autorização a aplicativos da área de trabalho.

O fluxo de entrada envolve as seguintes etapas:

  1. Os usuários abrem o aplicativo e selecionam entrar.
  2. O aplicativo abre o navegador do sistema do dispositivo desktop e inicia uma solicitação de autenticação para o Azure AD B2C.
  3. Os utilizadores inscrevem-se ou iniciam sessão, repõem a palavra-passe ou iniciam sessão com uma conta social.
  4. Depois que os usuários entrarem com êxito, 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 para um token de ID, token de acesso e token de atualização.
    2. Ele lê as declarações de token de ID.
    3. Ele armazena os tokens em um cache na memória para uso posterior.

Visão geral do registro do aplicativo

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

  • O registro do aplicativo de área de trabalho permite que 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 depois de se autenticarem com o Azure AD B2C. O processo de registo da aplicação gera um ID de aplicação, também conhecido como ID de cliente, que identifica exclusivamente a sua aplicação de ambiente de trabalho (por exemplo, ID da aplicação: 1).

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

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

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

Chamada para uma API da Web

Depois que a autenticação é concluída, os usuários interagem com o aplicativo, que invoca uma API da Web protegida. A API da Web usa 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 da 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. 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 o Visual Studio 2019 com desenvolvimento de área de trabalho .NET.

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.

Passo 2: Registe as suas candidaturas

Crie o aplicativo da área de trabalho e o registro do aplicativo da API da Web e especifique os escopos da sua API da Web.

Etapa 2.1: Registrar o aplicativo de API da Web

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

  1. Inicie sessão no portal do Azure.

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

  3. Nas configurações do Portal | Página Diretórios + assinaturas , localize seu diretório do Azure AD B2C na lista Nome do diretório e selecione Alternar.

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

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

  6. Em Name, insira um nome para o aplicativo (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta suportados.

  7. Selecione Registar.

  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 ao 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 Visão geral.

  2. Em Gerenciar, selecione Expor uma API.

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

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

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

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

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

  6. Selecione Adicionar escopo.

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

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

  8. Selecione Adicionar escopo.

Passo 2.3: Registar a aplicação de ambiente de trabalho

Para criar o registro do aplicativo da área de trabalho, faça o seguinte:

  1. Inicie sessão no portal do Azure.
  2. Selecione Registos de aplicações e, em seguida, selecione Novo registo.
  3. Em Nome, insira um nome para o aplicativo (por exemplo, desktop-app1).
  4. 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).
  5. Em Redirecionar URI, selecione Cliente público/nativo (área de trabalho ou área de trabalho) e, na caixa URL, digite https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Substitua your-tenant-name pelo nome do locatário. Para obter mais opções, consulte Configurar URI de redirecionamento.
  6. Selecione Registar.
  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 da área de trabalho. Screenshot highlighting the desktop application ID.

Etapa 2.4: Conceder permissões ao aplicativo da área de trabalho para a API da Web

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

  1. Selecione Registos de aplicações e, em seguida, selecione a aplicação que criou (ID da aplicação: 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) à qual o aplicativo Web deve ter acesso. Por exemplo, digite my-api1.

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

  7. Selecione Adicionar permissões.

  8. Selecione Conceder consentimento de administrador para <o nome> do seu inquilino.

  9. Selecione Yes (Sim).

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

  11. Na lista Permissões configuradas, selecione seu escopo e 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

Este exemplo adquire um token de acesso com os escopos relevantes que o aplicativo da área de trabalho 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 da Web existente ou crie uma nova. Para obter mais informações, consulte Habilitar autenticação em sua própria API Web usando o Azure AD B2C.
  2. Depois de configurar a API da Web, copie o URI do ponto de extremidade da API da Web. Você usará o ponto de extremidade da API da Web nas próximas etapas.

Gorjeta

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

Etapa 4: Obter o exemplo de aplicativo de área de trabalho WPF

  1. Baixe o arquivo .zip ou clone o aplicativo Web de exemplo 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 de área de trabalho de exemplo

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

Atualize os seguintes membros da classe:

Key valor
TenantName A primeira parte do nome do locatário do Azure AD B2C (por exemplo, contoso.b2clogin.com).
ClientId O ID do aplicativo da área de trabalho da etapa 2.3.
PolicySignUpSignIn O fluxo de usuário de inscrição ou entrada ou a política personalizada que você criou na etapa 1.
PolicyEditProfile O fluxo de usuário de perfil de edição ou a política personalizada que você criou na etapa 1.
ApiEndpoint (Opcional) O ponto de extremidade da API Web que você criou 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. Restaure os pacotes NuGet.

  2. Selecione F5 para criar e executar o exemplo.

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

    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 sua API da Web.

Próximos passos

Saiba como Configurar opções de autenticação em um aplicativo de área de trabalho WPF usando o Azure AD B2C.