Share via

Configuración de las opciones de autenticación de una aplicación de Angular mediante Azure Active Directory B2C

  • Artículo

En este artículo se describen los métodos para personalizar y mejorar la experiencia de autenticación de Azure Active Directory B2C (Azure AD B2C) para una aplicación de página única (SPA) de Angular.

Requisitos previos

Antes de empezar, familiarícese con el artículo Configuración de la autenticación en una aplicación de página única de Angular o Habilitación de la autenticación en su propia aplicación de página única de Angular.

Comportamiento de inicio de sesión y registro

Son dos las maneras en que puede configurar la aplicación de página única para que inicie la sesión de los usuarios con MSAL.js:

  • Ventana emergente: la autenticación tiene lugar en una ventana emergente y se conserva el estado de la aplicación. Use este enfoque si no desea que los usuarios se muevan de la página de la aplicación durante la autenticación. Sin embargo, hay problemas conocidos con las ventanas emergentes en Internet Explorer.
    • Para iniciar sesión con ventanas emergentes, en la clase src/app/app.component.ts, use el método loginPopup.
    • En la clase src/app/app.module.ts, establezca el atributo interactionType en InteractionType.Popup.
    • Para cerrar la sesión con ventanas emergentes, en la clase src/app/app.component.ts, use el método logoutPopup. También puede configurar logoutPopup para redirigir la ventana principal a otra página, como la página principal o la página de inicio de sesión, una vez completado el cierre de sesión al pasar mainWindowRedirectUri como parte de la solicitud.
  • Redirección: se redirige al usuario a Azure AD B2C para completar el flujo de autenticación. Use este enfoque si los usuarios tienen restricciones de explorador o directivas en las que las ventanas emergentes están deshabilitadas.
    • Para iniciar sesión con la redirección, en la clase src/app/app.component.ts, use el método loginRedirect.
    • En la clase src/app/app.module.ts, establezca el atributo interactionType en InteractionType.Redirect.
    • Para iniciar sesión con la redirección, en la clase src/app/app.component.ts, use el método logoutRedirect. Configure el URI de redirección tras el cierre de sesión mediante el establecimiento de postLogoutRedirectUri. Debe agregar este URI como un URI de redirección en el registro de la aplicación.

En el ejemplo siguiente se muestra cómo iniciar y cerrar sesión:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

La biblioteca Angular de MSAL tiene tres flujos de inicio de sesión: inicio de sesión interactivo (donde un usuario selecciona el botón de inicio de sesión), MSAL Guard y MSAL Interceptor. Las configuraciones MSAL Guard y MSAL Interceptor tienen efecto cuando un usuario intenta acceder a un recurso protegido sin un token de acceso válido. En tales casos, la biblioteca MSAL obliga al usuario a iniciar sesión.

En los ejemplos siguientes se muestra cómo configurar MSAL Guard y MSAL Interceptor para el inicio de sesión con una ventana emergente o una redirección:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

Rellenar previamente el nombre de inicio de sesión

Durante el recorrido de inicio de sesión de un usuario, la aplicación podría tener como destino un usuario específico. Cuando una aplicación se dirige a un usuario, puede especificar, en la solicitud de autorización, el parámetro de consulta login_hint con el nombre de inicio de sesión de usuario. Azure AD B2C rellena automáticamente el nombre de inicio de sesión y solo es necesario que el usuario proporcione la contraseña.

Para rellenar previamente el nombre de inicio de sesión, haga lo siguiente:

  1. Si usa una directiva personalizada, agregue la notificación de entrada necesaria, como se describe en Configuración del inicio de sesión directo.
  2. Cree un objeto de configuración de MSAL PopupRequest o RedirectRequest, o utilice uno ya existente.
  3. Establezca el atributo loginHint con la sugerencia de inicio de sesión correspondiente.

Los fragmentos de código siguientes muestran cómo pasar el parámetro de sugerencia de inicio de sesión. Usan bob@contoso.com como valor de atributo.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

Preseleccione un proveedor de identidad

Si se ha configurado el recorrido de inicio de sesión para que la aplicación incluya cuentas de redes sociales como Facebook, LinkedIn o Google, puede especificar el parámetro domain_hint. Este parámetro de consulta proporciona una sugerencia a Azure AD B2C acerca del proveedor de identidades sociales que debe usarse para iniciar sesión. Por ejemplo, si la aplicación especifica domain_hint=facebook.com, el flujo de inicio de sesión va directamente a la página de inicio de sesión de Facebook.

Para redirigir a los usuarios a un proveedor de identidades externo, haga lo siguiente:

  1. Compruebe el nombre de dominio del proveedor de identidades externo. Para más información, consulte Redirección del inicio de sesión a un proveedor social.
  2. Cree un objeto de configuración de MSAL PopupRequest o RedirectRequest, o utilice uno ya existente.
  3. Establezca el atributo domainHint con la sugerencia de dominio correspondiente.

Los fragmentos de código siguientes muestran cómo pasar el parámetro de sugerencia de dominio. Usan facebook.com como valor de atributo.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

Especificación del idioma de la interfaz de usuario

La personalización del idioma en Azure AD B2C permite que el flujo de usuario albergue diversos idiomas a fin de satisfacer las necesidades de los clientes. Para obtener más información, consulte Personalización de idioma.

Para establecer el idioma preferido, haga lo siguiente:

  1. Configure la personalización de idioma.
  2. Cree un objeto de configuración de MSAL PopupRequest o RedirectRequest, o use uno ya existente, con los atributos extraQueryParameters.
  3. Agregue el parámetro ui_locales con el código de idioma correspondiente a los atributos extraQueryParameters.

Los fragmentos de código siguientes muestran cómo pasar el parámetro de sugerencia de dominio. Usan es-es como valor de atributo.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Paso de un parámetro de cadena de consulta personalizado

Con las directivas personalizadas, puede pasar un parámetro de cadena de consulta personalizado. Un buen ejemplo de caso de uso es cuando se desea cambiar dinámicamente el contenido de la página.

Para pasar un parámetro de cadena de consulta personalizado, haga lo siguiente:

  1. Configure el elemento ContentDefinitionParameters.
  2. Cree un objeto de configuración de MSAL PopupRequest o RedirectRequest, o use uno ya existente, con los atributos extraQueryParameters.
  3. Agregue el parámetro de cadena de consulta personalizado, por ejemplo, campaignId. Establezca el valor del parámetro.

Los fragmentos de código siguientes muestran cómo pasar un parámetro de cadena de consulta personalizado. Usan germany-promotion como valor de atributo.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Paso de una sugerencia de token de identificador

Una aplicación de usuario de confianza puede enviar un token JSON Web Token (JWT) de entrada como parte de la solicitud de autorización de OAuth2. El token de entrada es una sugerencia sobre el usuario o la solicitud de autorización. Azure AD B2C valida el token y, a continuación, extrae la notificación.

Para incluir una sugerencia de token de identificador en la solicitud de autenticación, haga lo siguiente:

  1. En la directiva personalizada, defina el perfil técnico de sugerencias de token de identificador.
  2. Cree un objeto de configuración de MSAL PopupRequest o RedirectRequest, o use uno ya existente, con los atributos extraQueryParameters.
  3. Agregue el parámetro id_token_hint con la variable correspondiente que almacena el token de identificador.

Los fragmentos de código siguientes muestran cómo definir una sugerencia de token de identificador:

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

Uso de un dominio personalizado

Mediante el uso de un dominio personalizado, puede personalizar completamente la dirección URL de autenticación. Desde el punto de vista del usuario, este permanece en el dominio durante el proceso de autenticación, en lugar de que se le redirija al nombre de dominio b2clogin.com de Azure AD B2C.

También puede reemplazar el nombre del inquilino de B2C (contoso.onmicrosoft.com) en la dirección URL de la solicitud de autenticación por el GUID del identificador de inquilino para quitar todas las referencias a "b2c" en la dirección URL. Por ejemplo, puede cambiar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ por https://account.contosobank.co.uk/<tenant ID GUID>/.

Para usar el dominio personalizado con el identificador de inquilino en la dirección URL de autenticación, siga las instrucciones que se indican en Habilitación de dominios personalizados. Abra el objeto de configuración de MSAL src/app/auth-config.ts y cambie authorities y knownAuthorities para usar su nombre de dominio personalizado y e identificador de inquilino.

El código JavaScript siguiente muestra el objeto de configuración de MSAL antes del cambio:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

El código JavaScript siguiente muestra el objeto de configuración de MSAL después del cambio:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

registro

La biblioteca MSAL genera mensajes de registro que pueden ayudar a diagnosticar problemas. La aplicación puede configurar el registro. La aplicación también le da un control personalizado sobre el nivel de detalle y si se registran o no datos de la organización y personales.

Se recomienda establecer una devolución de llamada del registro de MSAL y proporcionar una forma de que los usuarios envíen registros cuando tengan problemas de autenticación. MSAL ofrece varios niveles de detalle de registro:

  • Error: indica que algo no ha funcionado bien y se ha generado un error. Este nivel se usa para depurar e identificar problemas.
  • Advertencia: no se ha producido necesariamente un error, pero la información está pensada para diagnósticos e identificar problemas.
  • Información: MSAL registra eventos diseñados para fines informativos y no necesariamente para la depuración.
  • Detallado: este es el nivel predeterminado. MSAL registra todos los detalles del comportamiento de la biblioteca.

De forma predeterminada, el registrador de MSAL no captura datos personales u organizativos. La biblioteca ofrece la opción de habilitar el registro de datos personales y organizativos si decide hacerlo.

Para configurar el registro de Angular, en src/app/auth-config.ts, configure las claves siguientes:

  • loggerCallback es la función de devolución de llamada del registrador.
  • logLevel permite especificar el nivel de registro. Valores posibles: Error, Warning, Info y Verbose.
  • piiLoggingEnabled habilita la entrada de datos personales. Valores posibles: true o false.

En el siguiente fragmento de código se muestra cómo configurar el registro de MSAL:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Pasos siguientes