Configuración de la autenticación en una aplicación de escritorio de WPF de ejemplo mediante Azure AD B2C

  • Artículo

En este artículo, se usa una aplicación de escritorio de Windows Presentation Foundation (WPF) de ejemplo para ilustrar cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a las aplicaciones de escritorio.

Información general

OpenID Connect (OIDC) es un protocolo de autenticación que se basa en OAuth 2.0. Puede usar OIDC para que los usuarios inicien sesión de forma segura en una aplicación. En este ejemplo de aplicación de escritorio, se usa la Biblioteca de autenticación de Microsoft (MSAL) con el flujo Proof Key for Code Exchange (PKCE) del código de autorización de OIDC. MSAL es una biblioteca proporcionada por Microsoft que simplifica la adición de compatibilidad con la autenticación y la autorización a las aplicaciones de escritorio.

El flujo de inicio de sesión consta de los siguientes pasos:

  1. Los usuarios abren la aplicación y seleccionan Iniciar sesión.
  2. La aplicación abre el explorador del sistema del dispositivo de escritorio e inicia una solicitud de autenticación en Azure AD B2C.
  3. El registro o inicio de sesión de los usuarios, el restablecimiento de la contraseña o el inicio de sesión con una cuenta de red social.
  4. Una vez que el usuario inicia sesión correctamente, Azure AD B2C devuelve un código de autorización a la aplicación.
  5. La aplicación realiza las acciones siguientes:
    1. Intercambia el código de autorización por un token de identificador, un token de acceso y un token de actualización.
    2. Lee las notificaciones del token de identificación.
    3. Almacena los tokens en una caché en memoria para su uso posterior.

Introducción al registro de aplicaciones

Para que la aplicación pueda iniciar sesión con Azure AD B2C y llamar a una API web, registre dos aplicaciones en el directorio de Azure AD B2C.

  • El registro de la aplicación de escritorio permite que la aplicación inicie sesión con Azure AD B2C. Durante el registro de la aplicación, especifique el URI de redirección. El identificador URI de redirección es el punto de conexión al que Azure AD B2C redirige a los usuarios después de que estos se hayan autenticado con Azure AD B2C. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como id. de cliente, que identifica de forma única la aplicación de escritorio (por ejemplo, id. de aplicación: 1).

  • El registro de API web permite que su aplicación llame a una API web protegida. El registro expone los permisos de la API web (ámbitos). El proceso de registro de la aplicación genera un identificador de aplicación, que identifica de forma única la API web (por ejemplo, id. de aplicación: 2). Conceda a la aplicación de escritorio (Id. de aplicación: 1) permisos para los ámbitos de la API web (Id. de aplicación: 2).

El registro y la arquitectura de la aplicación se ilustran en los diagramas siguientes:

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

Llamada a una API web

Una vez completada la autenticación, los usuarios interactúan con la aplicación, que invoca una API web protegida. La API web usa la autenticación de token de portador. El token de portador es el token de acceso que la aplicación ha obtenido de Azure Active Directory B2C. La aplicación pasa el token en el encabezado de autorización de la solicitud HTTPS.

Authorization: Bearer <access token>

Si el ámbito del token de acceso no coincide con los ámbitos de la API web, la biblioteca de autenticación obtiene un nuevo token de acceso con los ámbitos correctos.

Flujo de cierre de sesión

El flujo de cierre de sesión consta de los siguientes pasos:

  1. En la aplicación, los usuarios cierran sesión.
  2. La aplicación borra sus objetos de sesión y la biblioteca de autenticación borra su caché de tokens.
  3. La aplicación lleva a los usuarios al punto de conexión de cierre de sesión de Azure AD B2C para finalizar la sesión correspondiente a este.
  4. Los usuarios se redirigen de nuevo a la aplicación.

Prerrequisitos

Un equipo que ejecute Visual Studio 2019 con Desarrollo de escritorio de .NET.

Paso 1: Configuración del flujo de usuario

Cuando los usuarios intentan iniciar sesión en la aplicación, esta inicia una solicitud de autenticación para el punto de conexión de autorización mediante un flujo de usuario. El flujo de usuario define y controla la experiencia del usuario. Al completar los usuarios el flujo de usuario, Azure AD B2C genera un token y, después, redirige a los usuarios de vuelta a la aplicación.

Si aún no lo ha hecho, cree un flujo de usuario o una directiva personalizada. Repita los pasos para crear tres flujos de usuario independientes de la manera siguiente:

  • Un flujo de usuario combinado de inicio de sesión y registro, como susi. Este flujo de usuario también admite la experiencia ¿Olvidó su contraseña?.
  • Un flujo de usuario de edición de perfiles, como edit_profile.
  • Un flujo de usuario de restablecimiento de contraseña, como reset_password.

Azure AD B2C antepone el prefijo B2C_1_ al nombre del flujo de usuario. Por ejemplo, susi se convierte en B2C_1_susi.

Paso 2: Registro de la aplicación

Cree el registro de la aplicación de escritorio y de la aplicación de API web, y especifique los ámbitos de la API web.

Paso 2.1: Registrar la aplicación de la API web

Siga estos pasos para crear el registro de aplicación de API web (Id. de aplicación: 2):

  1. Inicie sesión en Azure Portal.

  2. Asegúrese de que usa el directorio que contiene el inquilino de Azure AD B2C. Seleccione el icono Directorios y suscripciones en la barra de herramientas del portal.

  3. En la página Configuración del portal | Directorios y suscripciones, busque el directorio de Azure AD B2C en la lista Nombre de directorio y seleccione Cambiar.

  4. En Azure Portal, busque y seleccione Azure AD B2C.

  5. Seleccione Registros de aplicaciones y luego Nuevo registro.

  6. En Nombre, escriba un nombre para la aplicación (por ejemplo, my-api1). Deje los valores predeterminados para URI de redireccionamiento y Tipos de cuenta admitidos.

  7. Seleccione Registrar.

  8. Una vez completado el registro de la aplicación, seleccione Información general.

  9. Anote el valor Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

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

Paso 2.2: Configurar los ámbitos de la aplicación de la API web

  1. Seleccione la aplicación my-api1 que creó (id. de aplicación: 2) para abrir la página Información general.

  2. En Administrar, seleccione Exponer una API.

  3. Junto a URI de id. de aplicación, seleccione el vínculo Establecer. Reemplace el valor predeterminado (GUID) por un nombre único (por ejemplo, tasks-api) y, luego, seleccione Guardar.

    Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.

  4. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.

  5. Para crear un ámbito que defina el acceso de lectura a la API, siga estos pasos:

    1. Para Nombre de ámbito, escriba tasks.read.
    2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de lectura a la API de tareas.
    3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de lectura a la API de tareas.

  6. Seleccione la opción Agregar un ámbito.

  7. Seleccione Agregar un ámbito y agregue una opción que defina el acceso de escritura en la API:

    1. Para Nombre de ámbito, escriba tasks.write.
    2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de escritura a la API de tareas.
    3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de escritura a la API de tareas.

  8. Seleccione la opción Agregar un ámbito.

Paso 2.3: Registro de la aplicación de escritorio

Para crear el registro de la aplicación de escritorio, haga lo siguiente:

  1. Inicie sesión en Azure Portal.
  2. Seleccione Registros de aplicaciones y luego Nuevo registro.
  3. En Nombre, escriba un nombre para la aplicación (por ejemplo, desktop-app1).
  4. En Tipos de cuenta compatibles, seleccione Cuentas en cualquier proveedor de identidades o directorio de la organización (para autenticar usuarios con flujos de usuario) .
  5. En URI de redirección, seleccione Cliente público/nativo (escritorio y escritorio) y, a continuación, en el cuadro de la dirección URL, escriba: https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Remplace your-tenant-name por el nombre del inquilino. Para ver más opciones, consulte Configuración del URI de redireccionamiento.
  6. Seleccione Registrar.
  7. Una vez completado el registro de la aplicación, seleccione Información general.
  8. Anote el Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación de escritorio. Screenshot highlighting the desktop application ID.

Paso 2.4: Concesión de permisos a la aplicación de escritorio para la API web

Si desea conceder permisos a la aplicación (identificador de aplicación: 1), siga estos pasos:

  1. Seleccione Registros de aplicaciones y, luego, la aplicación que creó (identificador de aplicación: 1).

  2. En Administrar, seleccione Permisos de API.

  3. En Permisos configurados, seleccione Agregar un permiso.

  4. Seleccione la pestaña Mis API.

  5. Seleccione la API (identificador de aplicación:2) a la que la aplicación web debe tener acceso. Por ejemplo, escriba my-api1.

  6. En Permiso, expanda Tareas y, a continuación, seleccione los ámbitos que definió anteriormente; por ejemplo, tasks.read y tasks.write.

  7. Seleccione Agregar permisos.

  8. Seleccione Conceder consentimiento de administrador para <el nombre de inquilino>.

  9. Seleccione Sí.

  10. Seleccione Actualizar y compruebe que aparece Granted for... (Concedido para...) en Estado para ambos ámbitos.

  11. En la lista Permisos configurados, seleccione el ámbito y copie el nombre completo del ámbito.

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

Paso 3: Configuración de la API web de ejemplo

En este ejemplo, se adquiere un token de acceso con los ámbitos pertinentes que la aplicación de escritorio puede usar para una API web. Para llamar a una API web desde código, haga lo siguiente:

  1. Use una API web existente o cree una nueva. Para más información, consulte Habilitación de la autenticación en su propia API web mediante Azure AD B2C.
  2. Después de configurar la API web, copie el URI del punto de conexión de la API web. Usará el punto de conexión de la API web en los pasos siguientes.

Sugerencia

Si no tiene una API web, puede ejecutar este ejemplo. En este caso, la aplicación devuelve el token de acceso, pero no podrá llamar a la API web.

Paso 4: Obtención del ejemplo de aplicación de escritorio de WPF

  1. Descargue el archivo ZIP o clone la aplicación web de ejemplo desde el repositorio de GitHub.

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

  2. Abra la solución active-directory-b2c-wpf (el archivo active-directory-b2c-wpf.sln) en Visual Studio.

Paso 5: Configuración de la aplicación de escritorio de ejemplo

En el proyecto active-directory-b2c-wpf, abra el archivo App.xaml.cs. Los miembros de la clase App.xaml.cs contienen información sobre el proveedor de identidades de Azure AD B2C. La aplicación de escritorio usa esta información para establecer una relación de confianza con Azure AD B2C, iniciar y cerrar la sesión de los usuarios, obtener tokens y validarlos.

Actualice los siguientes miembros de la clase:

Clave Value
TenantName Primera parte del nombre de inquilino de Azure AD B2C (por ejemplo, contoso.b2clogin.com).
ClientId El identificador de la aplicación de escritorio del paso 2.3.
PolicySignUpSignIn Flujo de usuario de registro o de inicio de sesión o la directiva personalizada que creó en el paso 1.
PolicyEditProfile Flujo de usuario del perfil de edición o directiva personalizada que creó en el paso 1.
ApiEndpoint (Opcional) Punto de conexión de la API web que creó en el paso 3 (por ejemplo, https://contoso.azurewebsites.net/hello).
ApiScopes Ámbitos de la API web que creó en el paso 2.4.

El archivo App.xaml.cs final debería tener un aspecto parecido al del código de C# siguiente:

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";

Paso 6: Ejecución y prueba de la aplicación de escritorio

  1. Restaure los paquetes NuGet.

  2. Seleccione F5 para compilar y ejecutar el ejemplo.

  3. Seleccione Iniciar sesión y regístrese o inicie sesión con la cuenta de Azure AD B2C local o la cuenta social.

    Screenshot highlighting how to start the sign-in flow.

  4. Después de un registro o un inicio de sesión correctos, en el panel inferior de la aplicación de WPF se muestran los detalles del token.

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

  5. Seleccione Call API (Llamar a la API) para llamar a la API web.

Pasos siguientes

Consulte Habilitación de las opciones de autenticación en una aplicación de escritorio para WPF mediante Azure AD B2C.