Registrar una aplicación de página única en Azure Active Directory B2C

Para que sus aplicaciones puedan interactuar con Azure Active Directory B2C (Azure AD B2C), deben estar registradas en un inquilino que administre. En esta guía se muestra cómo registrar una aplicación de página única (SPA) mediante Azure Portal.

Introducción a las opciones de autenticación

Muchas aplicaciones web modernas se compilan como aplicaciones de página única (SPA) del lado cliente. Los desarrolladores las escriben mediante JavaScript o un marco SPA como Angular, Vue o React. Estas aplicaciones se ejecutan en un explorador web y tienen características de autenticación diferentes a las de las aplicaciones web del lado servidor tradicionales.

Azure AD B2C ofrece dos opciones para que las aplicaciones de página única inicien la sesión de los usuarios y obtengan tokens para acceder a los servicios de back-end o a las API web:

Flujo de códigos de autorización (con PKCE)

El flujo de código de autorización OAuth 2.0 (con PKCE) permite que la aplicación intercambie un código de autorización con el que los tokens de id. puedan representar al usuario autenticado y, además, también permite que esta intercambie los tokens de acceso necesarios para llamar a las API protegidas. Además, devuelve tokens de actualización que proporcionan acceso a largo plazo a los recursos en nombre de los usuarios sin necesidad de interacción con estos.

Este es el enfoque recomendado. Contar con tokens de actualización de duración limitada ayuda a que la aplicación se adapte a las limitaciones de privacidad de cookies de los exploradores modernos, como ITP de Safari.

Para aprovechar este flujo, la aplicación puede usar una biblioteca de autenticación que lo admita, como MSAL.js.

Flujo de concesión implícito

Algunas bibliotecas, como MSAL.js 1.x, solo admiten el flujo de concesión implícita. Además, una aplicación puede estar implementada para usar el flujo implícito. En estos casos, Azure AD B2C admite el flujo implícito de OAuth 2.0. El flujo de concesión implícita permite a la aplicación obtener tokens de identificador y de acceso. A diferencia del flujo del código de autorización, el flujo de concesión implícita no devuelve un token de actualización.

Este flujo de autenticación no incluye escenarios de aplicaciones que usan marcos de JavaScript multiplataforma, como Electron y React Native. ya que requieren más funcionalidades para la interacción con las plataformas nativas.

Requisitos previos

• Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

• Si no tiene un inquilino de Azure AD B2C, cree uno ahora. Puede usar un inquilino de Azure AD B2C existente.

Registro de la aplicación SPA

1. Inicie sesión en Azure Portal.

2. Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar al inquilino de Azure AD B2C desde el menú Directorios y suscripciones.

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

4. Seleccione Registros de aplicaciones y luego Nuevo registro.

5. Escriba un Nombre para la aplicación. Por ejemplo, spaapp1.

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

7. En URI de redirección, seleccione Aplicación de página única (SPA) y, a continuación, escriba https://jwt.ms en el cuadro de texto de dirección URL.

   El URI de redirección es el punto de conexión al que el servidor de autorización (Azure AD B2C, en este caso) envía al usuario después de completar su interacción con el usuario. El punto de conexión de la URI de redirección también recibe el token de acceso o el código de autorización tras una autorización correcta. En una aplicación de producción, suele ser un punto de conexión accesible públicamente donde se ejecuta la aplicación, como https://contoso.com/auth-response. Para fines de prueba, como seguir esta guía, puede establecerlo como https://jwt.ms; esto es, una aplicación web propiedad de Microsoft que muestra el contenido descodificado de un token (el contenido del token nunca saldrá del explorador). Durante el desarrollo de aplicaciones, puede agregar el punto de conexión en el que la aplicación realiza escuchas localmente, como http://localhost:5000. 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, a menos que use localhost.
   • 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. Por ejemplo, si la aplicación incluye .../abc/response-oidc como parte de su ruta de acceso, no especifique .../ABC/response-oidc en la dirección URL de respuesta. Dado que el explorador web tiene en cuenta las mayúsculas y minúsculas de la ruta de acceso, se pueden excluir las cookies asociadas con .../abc/response-oidc si se redirigen a la dirección URL .../ABC/response-oidc con mayúsculas y minúsculas no coincidentes.

8. En Permisos, active la casilla Conceda consentimiento del administrador a los permisos openid y offline_access.

9. Seleccione Registrar.

Habilitar el flujo implícito

Si usa MSAL.js 1.3 o una versión anterior con el flujo de concesión implícita en la aplicación SPA, o si configura la aplicación https://jwt.ms/ para probar un flujo de usuario o una directiva personalizada, deberá habilitar el flujo de concesión implícita en el registro de la aplicación. Para ello, siga estos pasos:

1. En el menú izquierdo, en Administrar, seleccione Autenticación.

2. En Flujos híbridos y de concesión implícita, seleccione las casillas Tokens de acceso (para flujos implícitos) y Tokens de id. (para flujos híbridos e implícitos).

3. Seleccione Guardar.

Si la aplicación usa la librería MSAL.js 2.0 o versiones posteriores, no habilite la concesión de flujo implícita como MSAL.js 2.0 o versiones posteriores, ya que estas admiten el flujo de código de autorización con PKCE.

Migración desde el flujo implícito

Si tiene una aplicación que usa el flujo implícito, se recomienda migrar al flujo de código de autorización mediante el uso de un marco que lo admita, como MSAL.js 2.0 o versiones posteriores.

Cuando todas las SPA de producción representadas por un registro de aplicaciones comiencen a usar el flujo de código de autorización, deshabilite la configuración de flujo de concesión implícita de la siguiente manera:

1. En el menú izquierdo, en Administrar, seleccione Autenticación.
2. En Concesión implícita, desactive las casillas Tokens de acceso y Tokens de id.
3. Seleccione Guardar.

Las aplicaciones que usan el flujo implícito pueden seguir funcionando si deja el flujo implícito habilitado (activado).

Pasos siguientes

Aprenda cómo Crear flujos de usuario en Azure Active Directory B2C.