Compartir a través de

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

Importante

A partir del 1 de mayo de 2025, Azure AD B2C ya no estará disponible para la compra por parte de nuevos clientes. Obtenga más información en nuestras preguntas más frecuentes.

En este artículo se describe cómo personalizar y mejorar la experiencia de autenticación de Azure Active Directory B2C (Azure AD B2C) para la aplicación de página única (SPA) de Angular.

Prerrequisitos

Familiarícese con el artículo Configuración de la autenticación en una SPA de Angular o Habilitación de la autenticación en su propia SPA de Angular.

Comportamiento de inicio de sesión y cierre de sesión

Puede configurar la aplicación de página única para iniciar sesión a los usuarios con MSAL.js de dos maneras:

  • Ventana emergente: la autenticación se produce en una ventana emergente y se conserva el estado de la aplicación. Use este enfoque si no quiere que los usuarios salgan de la página de su aplicación durante la autenticación. Sin embargo, hay problemas conocidos con ventanas emergentes en Internet Explorer.
    • Para iniciar sesión con ventanas emergentes, en la src/app/app.component.ts clase , use el loginPopup método .
    • En la src/app/app.module.ts clase, establezca el atributo interactionType en InteractionType.Popup.
    • Para cerrar 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 pasando mainWindowRedirectUri como parte de la solicitud.
  • Redireccionamiento: el usuario se redirige 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 se deshabilitan las ventanas emergentes.
    • Para iniciar sesión con redireccionamiento, en la clase src/app/app.component.ts use el método loginRedirect.
    • En la src/app/app.module.ts clase, establezca el atributo interactionType en InteractionType.Redirect.
    • Para cerrar sesión con redirección, en la clase src/app/app.component.ts, use el método logoutRedirect. Configure el URI al que debe redirigir después de cerrar sesión estableciendo 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 sesión 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 de MSAL Angular 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 del interceptor de MSAL Guard y MSAL surten 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 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 un proceso de inicio de sesión del usuario, la aplicación podría dirigirse a un usuario específico. Cuando una aplicación tiene como destino un usuario, puede especificar en la solicitud de autorización el login_hint parámetro de consulta con el nombre de inicio de sesión del usuario. Azure AD B2C rellena automáticamente el nombre de inicio de sesión y el usuario debe proporcionar solo 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 o utilice un objeto de configuración de MSAL existente PopupRequest o RedirectRequest.
  3. Establezca el loginHint atributo 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"
    }
  },

Preseleccionar un proveedor de identidades

Si configuró el recorrido de inicio de sesión de la aplicación para incluir cuentas sociales, como Facebook, LinkedIn o Google, puede especificar el domain_hint parámetro . Este parámetro de consulta proporciona una sugerencia a Azure AD B2C sobre el proveedor de identidades sociales que se debe usar para el inicio de 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 obtener más información, consulte Redireccionamiento del inicio de sesión a un proveedor de redes sociales.
  2. Cree o utilice un objeto de configuración de MSAL existente PopupRequest o RedirectRequest.
  3. Establezca el domainHint atributo 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"
    }
  },

Especificar el idioma de la interfaz de usuario

La personalización de idioma en Azure AD B2C permite al flujo de usuario adaptarse a diversas lenguas para 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. Configurar la personalización de idioma.
  2. Cree o use un objeto de configuración de MSAL existente PopupRequest o RedirectRequest con atributos extraQueryParameters.
  3. Agregue el ui_locales parámetro con el código de idioma correspondiente a los extraQueryParameters atributos.

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"}
    }
  },

Pasar 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 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 o use un objeto de configuración de MSAL existente PopupRequest o RedirectRequest con atributos extraQueryParameters.
  3. Agregue el parámetro de cadena de consulta personalizado, como 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"}
    }
  },

Pasar una sugerencia de token de identificador

Una aplicación de parte confiable puede enviar un token web JSON (JWT) entrante 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 reclamació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 una sugerencia de token de identificador.
  2. Cree o use un objeto de configuración de MSAL existente PopupRequest o RedirectRequest con atributos extraQueryParameters.
  3. Agregue el id_token_hint parámetro 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 la perspectiva del usuario, los usuarios permanecen en el dominio durante el proceso de autenticación, en lugar de redirigirse al nombre de dominio de Azure AD B2C b2clogin.com.

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

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

El siguiente Código JavaScript 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 siguiente Código JavaScript 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"],
      ...
    },
  ...
}

Configurar el 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 puede proporcionarle un control personalizado sobre el nivel de detalle y si se registran los datos personales y organizativos.

Se recomienda crear una devolución de llamada de registro de MSAL y proporcionar una manera de que los usuarios envíen registros cuando tengan problemas de autenticación. MSAL proporciona estos niveles de detalle de registro:

  • Error: se ha producido un error y se generó un error. Este nivel se usa para depurar e identificar problemas.
  • Advertencia: no se ha producido necesariamente un error o error, pero la información está pensada para diagnósticos e identificación de problemas.
  • Info: MSAL registra eventos destinados a propósitos informativos y no necesariamente para la depuración.
  • Detallado: este es el nivel predeterminado. MSAL registra los detalles completos del comportamiento de la biblioteca.

De forma predeterminada, el registrador de MSAL no captura ningún dato personal o organizativo. La biblioteca le 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, Infoy Verbose.
  • piiLoggingEnabled habilita la entrada de datos personales. Valores posibles: true o false.

El siguiente fragmento de código 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