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

Para que las aplicaciones puedan interactuar con Azure Active Directory B2C (Azure AD B2C), deben registrarse 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.

Información general sobre las opciones de autenticación

Muchas aplicaciones web modernas se crean como aplicaciones de página única del lado cliente ("SPAs"). Los desarrolladores los escriben mediante JavaScript o un marco spa como Angular, Vue y 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 proporciona dos opciones para permitir que las aplicaciones de página única inicien sesión de usuarios y obtengan tokens para acceder a servicios back-end o API web:

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

El flujo de código de autorización de OAuth 2.0 (con PKCE) permite a la aplicación intercambiar un código de autorización para los tokens de identificador para representar el usuario autenticado y 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 esos usuarios.

Este es el enfoque recomendado . Tener tokens de actualización de duración limitada ayuda a la aplicación a adaptarse a las limitaciones modernas de privacidad de cookies del explorador, como SAFARI ITP.

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ícita

Algunas bibliotecas, como MSAL.js 1.x, solo admiten el flujo de concesión implícito o las aplicaciones se implementan 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 desde el punto de conexión de autorización. A diferencia del flujo de código de autorización, el flujo de concesión implícito no devuelve un token de actualización.

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

Prerrequisitos

• 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 a su 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 admitidos, seleccione Cuentas en cualquier proveedor de identidades o directorio organizativo (para autenticar usuarios con flujos de usuario).

7. En URI de redirección, seleccione Aplicación de página única (SPA) y https://jwt.ms escriba en el cuadro de texto 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. Además, el endpoint de redirección URI recibe el token de acceso o el código de autorización tras una autorización exitosa. 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 se describe en esta guía, puede configurarlo en https://jwt.ms, una aplicación web propiedad de Microsoft que muestra el contenido descodificado de un token (el contenido del token nunca sale de su navegador). Durante el desarrollo de la aplicación, puedes agregar el punto de conexión donde tu aplicación escucha 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 como parte de su ruta de acceso .../abc/response-oidc, 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.

Habilite el flujo de concesión implícita

Puede habilitar el flujo de concesión implícita por dos motivos, cuando se usa MSAL.js versión 1.3 o anterior, o cuando se usa un registro de aplicaciones para probar un flujo de usuario con fines de prueba.

Siga estos pasos para habilitar el flujo de concesión implícita para la aplicación:

1. Seleccione el registro de aplicaciones que creó.

2. En Administrar, seleccione Autenticación.

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

4. Haga clic en Guardar.

Migrar desde el flujo de concesión implícita

Si tiene una aplicación existente que usa el flujo implícito, se recomienda migrar para usar el flujo de código de autorización con PKCE mediante un marco que lo admita, como MSAL.js 2.0+.

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. Haga clic en Guardar.

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

Pasos siguientes

Aprenda a crear flujos de usuario en Azure Active Directory B2C.