Configuración de la autenticación en una aplicación web de ejemplo mediante Azure AD B2C
En este artículo se usa un ejemplo de aplicación web para ASP.NET para ilustrar cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a las aplicaciones web.
Importante
La aplicación web para ASP.NET de ejemplo a la que se hace referencia en este artículo no se puede usar para llamar a una API REST porque devuelve un token de identificador y no un token de acceso. Para obtener una aplicación web que pueda llamar a una API REST, consulte Protección de una API web creada con ASP.NET Core mediante Azure AD B2C.
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 web se usa Microsoft Identity Web. Microsoft Identity Web es un conjunto de bibliotecas de ASP.NET Core que simplifican la adición de la compatibilidad con la autenticación y la autorización en aplicaciones web.
El flujo de inicio de sesión consta de los pasos siguientes:
- El usuario va a la aplicación web y selecciona Iniciar sesión.
- La aplicación inicia la solicitud de autenticación y redirige a los usuarios a Azure AD B2C.
- 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.
- Una vez que los usuarios hayan iniciado sesión correctamente, Azure AD B2C devuelve un token de identificador a la aplicación.
- La aplicación valida el token de identificador, lee las notificaciones y devuelve una página segura a los usuarios.
Cuando el token de identificador ha expirado o se invalida la sesión de la aplicación, esta inicia una nueva solicitud de autenticación y redirige a los usuarios a Azure AD B2C. Si la sesión de SSO de Azure AD B2C está activa, Azure AD B2C emite un token de acceso sin pedir a los usuarios que vuelvan a iniciar sesión. Si la sesión de Azure AD B2C expira o deja de ser válida, se pedirá a los usuarios que vuelvan a iniciar sesión.
Cerrar sesión
El flujo de cierre de sesión consta de los siguientes pasos:
- En la aplicación, los usuarios cierran sesión.
- La aplicación borra sus objetos de sesión y la biblioteca de autenticación borra su caché de tokens.
- 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.
- Los usuarios se redirigen de nuevo a la aplicación.
Prerrequisitos
Un equipo que ejecuta uno de los siguientes:
- Versión 17.0 o posterior de Visual Studio 2022 con la carga de trabajo de desarrollo web y ASP.NET
- SDK de .NET 6.0
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 una aplicación web
Para permitir que la aplicación inicie sesión con Azure AD B2C, registre la aplicación en el directorio de Azure AD B2C. El registro de la aplicación establece una relación de confianza entre la aplicación y Azure AD B2C.
Durante el registro de la aplicación, 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 estos se autentican con Azure AD B2C. 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. Una vez registrada la aplicación, Azure AD B2C usará el identificador de aplicación y el URI de redirección para crear solicitudes de autenticación.
Para crear el registro de la aplicación web, siga estos pasos:
Inicie sesión en Azure Portal.
Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar a su inquilino de Azure AD B2C desde el menú Directorios y suscripciones.
En Azure Portal, busque y seleccione Azure AD B2C.
Seleccione Registros de aplicaciones y luego Nuevo registro.
En Nombre, escriba un nombre para la aplicación (por ejemplo, webapp1).
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) .
En URI de redirección, seleccione Web y luego, en el cuadro Dirección URL, escriba
https://localhost:44316/signin-oidc.En Autenticación, vaya a Flujos de concesión implícita e híbridos, seleccione la casilla de verificación Tokens de id. (usados para flujos híbridos e implícitos).
En Permisos, active la casilla Conceder consentimiento de administrador para openid y permisos de acceso sin conexión.
Seleccione Registrar.
Seleccione Información general.
Anote el Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.
Paso 3: Obtención de la aplicación web de ejemplo
Descargue el archivo zip o clone 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 en la que la longitud total de caracteres de la ruta de acceso sea igual o inferior a 260.
Paso 4: Configuración de la aplicación web de ejemplo
En la carpeta de ejemplo, en la carpeta 1-WebApp-OIDC/1-5-B2C/ , abra el proyecto WebApp-OpenIDConnect-DotNet.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. 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 aplicación de la aplicación web del paso 2. |
| 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 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>"
}
Paso 5: Ejecución de la aplicación web de ejemplo
Compile y ejecute el proyecto.
Ir a
https://localhost:44316.Seleccione Registrarse/Iniciar sesión.
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 el token de Azure AD B2C devuelve a la aplicación, seleccione Notificaciones.
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.
Pasos siguientes
- Más información sobre el ejemplo de código.
- Aprenda a Habilitar la autenticación en su propia aplicación web mediante Azure AD B2C.