Configuración de la autenticación en una aplicación web de ejemplo que llama a una API web mediante Azure AD B2C

  • Artículo

En este artículo se usa una aplicación web ASP.NET de ejemplo para ilustrar cómo agregar autenticación de Azure Active Directory B2C (Azure AD B2C) a las aplicaciones web.

Importante

La aplicación web ASP.NET de ejemplo a la que se hace referencia en este artículo se usa para llamar a una API web con un token de portador. Para usar una aplicación web que no llama a una API web, consulte Configuración de la autenticación en una aplicación web de ejemplo mediante Azure Active Directory B2C.

Información general

OpenID Connect (OIDC) es un protocolo de autenticación basado OAuth 2.0 que se puede usar para que un usuario inicie sesión en una aplicación de manera segura. En este ejemplo de aplicación web se usa Microsoft Identity Web. Microsoft Identity Web es un conjunto de bibliotecas ASP.NET Core que facilitan la adición de compatibilidad con la autenticación y la autorización en aplicaciones web con capacidad para llamar a una API web segura.

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

  1. El usuario va a la aplicación web y selecciona Iniciar sesión.

  2. La aplicación inicia la solicitud de autenticación y redirige a los usuarios a Azure AD B2C.

  3. Los usuarios se registran o inician sesión y restablecen la contraseña. También pueden iniciar sesión con una cuenta de red social.

  4. Una vez que el usuario inicia sesión, Azure AD B2C devuelve un código de autorización a la aplicación.

  5. Luego, la aplicación hace lo siguiente:

    a. Intercambia el código de autorización por un token de identificador, un token de acceso y un token de actualización.
    b. Lee las notificaciones del token de identificador y conserva una cookie de autorización de aplicación.
    c. Almacena el token de actualización en una caché en memoria para usarlos más adelante.

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 web permite que la aplicación inicie sesión con Azure AD B2C. Durante el registro, hay que especificar el URI de redirección. El URI de redirección es el punto de conexión al que Azure AD B2C redirige a los usuarios después de que se autentican en este servicio. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como identificador de cliente, que permite identificar de forma exclusiva la aplicación. También se crea un secreto de cliente, que la aplicación usa para obtener los tokens de forma segura.

  • El registro de API web permite que la aplicación llame a una API web segura. El registro incluye los ámbitos de la API web. Los ámbitos ofrecen una manera de administrar permisos para los recursos protegidos, como la API web. A la aplicación web se le conceden permisos para los ámbitos de la API web. Cuando se selecciona un token de acceso, la aplicación especifica los permisos que desea en el parámetro de ámbito de la solicitud.

En el siguiente diagrama se muestran los registros y la arquitectura de la aplicación:

Diagram of a web app with web API call 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.

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:

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: Registrar aplicaciones web

En este paso, se crea la aplicación web y los registros de aplicación de la API web, y se especifican 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: Registrar la aplicación web

Haga lo siguiente para crear el registro de la aplicación web:

  1. Seleccione Registros de aplicaciones y luego Nuevo registro.

  2. En Nombre, escriba un nombre para la aplicación (por ejemplo, webapp1).

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

  4. En URI de redirección, seleccione Web y luego, en el cuadro Dirección URL, escriba https://localhost:5000/signin-oidc.

  5. En Permisos, active la casilla Conceder consentimiento de administrador para openid y permisos de acceso sin conexión.

  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 web.

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

Paso 2.4: Crear un secreto de cliente de aplicación web

Cree un secreto de cliente para la aplicación web registrada. La aplicación web usa el secreto de cliente para demostrar su identidad al solicitar tokens.

  1. En Administrar, seleccione Certificados y secretos.
  2. Seleccione Nuevo secreto de cliente.
  3. Escriba una descripción para el secreto de cliente en el cuadro Descripción (por ejemplo, clientsecret1).
  4. En Expira, seleccione el tiempo durante el cual el secreto es válido y, a continuación, seleccione Agregar.
  5. Registre el Valor del secreto. Este valor se usará para la configuración en un paso posterior.

Paso 2.5: Conceder permisos de la aplicación web 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: Obtención de la aplicación web de ejemplo

Descargue el archivo zipo ejecute el siguiente comando de Bash para clonar la aplicación web de ejemplo desde GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extraiga el archivo de ejemplo en una carpeta donde la longitud total de la ruta de acceso sea inferior a 260 caracteres.

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

En la carpeta de ejemplo, en la carpeta 4-WebApp-your-API/4-2-B2C/TodoListService, abra el proyecto TodoListService.csproj con Visual Studio o Visual Studio Code.

En la carpeta raíz del proyecto, abra el archivo appsettings.json. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C. La aplicación de la API web usa esta información para validar el token de acceso que la aplicación web pasa como token de portador. Actualice las siguientes propiedades de la configuración de la aplicación:

Sección Key Valor
AzureAdB2C Instancia La primera parte del nombre de inquilino de Azure AD B2C. Por ejemplo, https://contoso.b2clogin.com.
AzureAdB2C Domain El nombre de inquilino completo de Azure AD B2C. Por ejemplo, contoso.onmicrosoft.com.
AzureAdB2C ClientId Identificador de aplicación de la API web del paso 2.1.
AzureAdB2C SignUpSignInPolicyId Los flujos de usuario o la directiva personalizada que creó en el paso 1.

El archivo de configuración final debería tener un aspecto parecido al del siguiente archivo JSON:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Paso 4.1: Establecer la directiva de permisos

La API web comprueba que el usuario se ha autenticado con el token de portador y que el token de portador tiene configurados los ámbitos aceptados. Si el token de portador no tiene ninguno de estos ámbitos aceptados, la API web devuelve el código de estado HTTP 403 (Prohibido) y escribe en el cuerpo de la respuesta un mensaje que indica qué ámbitos se esperan en el token.

Para configurar los ámbitos aceptados, abra la clase Controller/TodoListController.cs y establezca el nombre del ámbito, sin el URI completo.

[RequiredScope("tasks.read")]

Paso 4.2: Ejecutar la aplicación de la API web de ejemplo

Para permitir que la aplicación web llame al ejemplo de API web, ejecute la API web del siguiente modo:

  1. Restaure las dependencias si así se le solicita.
  2. Compile y ejecute el proyecto.
  3. Una vez creado el proyecto, Visual Studio o Visual Studio Code inicia la API web en los exploradores con la siguiente dirección: https://localhost:44332.

Paso 5: Configurar la aplicación web de ejemplo

En la carpeta de ejemplo, en la carpeta 4-WebApp-your-API/4-2-B2C/Client, abra el proyecto TodoListClient.csproj con Visual Studio o Visual Studio Code.

En la carpeta raíz del proyecto, abra el archivo appsettings.json. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C. La aplicación web usa esta información para establecer una relación de confianza con Azure AD B2C, iniciar y cerrar la sesión de los usuarios y obtener tokens y validarlos. Actualice las siguientes propiedades de la configuración de la aplicación:

Sección Key Valor
AzureAdB2C Instancia Primera parte del nombre de inquilino de Azure AD B2C (por ejemplo, https://contoso.b2clogin.com).
AzureAdB2C Domain Nombre de inquilino completo de Azure AD B2C (por ejemplo, contoso.onmicrosoft.com).
AzureAdB2C ClientId Identificador de la aplicación web del paso 2.3.
AzureAdB2C ClientSecret Secreto de la aplicación web del paso 2.4.
AzureAdB2C SignUpSignInPolicyId Los flujos de usuario o la directiva personalizada que creó en el paso 1.
TodoList TodoListScope Los ámbitos de API web que creó en el paso 2.5.
TodoList TodoListBaseAddress URI base de la API web (por ejemplo, https://localhost:44332).

El archivo de configuración final debería tener un aspecto parecido al del siguiente JSON:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Paso 6: Ejecutar la aplicación web de ejemplo

  1. Compile y ejecute el proyecto.
  2. Vaya a https://localhost:5000.
  3. Complete el proceso de inicio de sesión o registro.

Después de la autenticación correcta, verá el nombre para mostrar en la barra de navegación. Para ver las notificaciones que devuelve el token de Azure AD B2C a la aplicación, seleccione TodoList.

Screenshot of the web app token claims.

Implementación de aplicación

En una aplicación de producción, el URI de redirección del registro de la aplicación suele ser un punto de conexión accesible públicamente donde se ejecuta la aplicación, como https://contoso.com/signin-oidc.

Puede agregar y modificar los URI de redireccionamiento en las aplicaciones registradas en cualquier momento. Las siguientes restricciones se aplican a los URI de redireccionamiento:

  • La dirección URL de respuesta debe comenzar con el esquema https.
  • La dirección URL de respuesta distingue mayúsculas de minúsculas. Sus mayúsculas o minúsculas deben coincidir con las de la ruta de acceso de la dirección URL de la aplicación en ejecución.

Caché de tokens de una aplicación web

La aplicación web de ejemplo usa la serialización de caché de tokens en memoria. Esta implementación es excelente para pruebas. También funciona bien en aplicaciones de producción, siempre que no le importe que la caché de tokens se pierda cuando la aplicación web se reinicie.

En un entorno de producción, recomendamos usar una caché de memoria distribuida como una caché de Redis, NCache o una caché de SQL Server. Para obtener más información sobre las implementaciones de caché de memoria distribuida, consulte Serialización de la caché de tokens.

Pasos siguientes