Configuración de las opciones de autenticación en una aplicación de página única mediante Azure AD B2C

  • Artículo

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 una aplicación de página única (SPA).

Antes de empezar, familiarícese con el artículo Configuración de la autenticación en una aplicación web de ejemplo.

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 un dominio personalizado y el identificador de inquilino en la dirección URL de autenticación, siga las instrucciones que se indican en Habilitación de dominios personalizados. Busque el objeto de configuración Biblioteca de autenticación de Microsoft (MSAL) y cambie authorities y knownAuthorities para usar el nombre de dominio y el identificador de inquilino personalizados.

El código JavaScript siguiente muestra el objeto de configuración 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 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"],
      ...
    },
  ...
}

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 para almacenar el elemento login_hint y pase este objeto al método MSAL loginPopup() .

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

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 para almacenar el elemento extraQueryParameters y pase este objeto al método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

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 para almacenar el elemento extraQueryParameters y pase este objeto al método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

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 para almacenar el elemento extraQueryParameters y pase este objeto al método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

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 un perfil técnico de sugerencias de token de identificador.

  2. Cree un objeto para almacenar el elemento extraQueryParameters y pase este objeto al método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Protección de la redirección de cierre de sesión

Después del cierre de sesión, se redirige al usuario al URI especificado en el parámetro post_logout_redirect_uri, independientemente de las direcciones URL de respuesta que se hayan especificado para la aplicación. Sin embargo, si se pasa un valor de id_token_hint válido y la opción Requerir token de identificador en solicitudes de cierre de sesión está activada, Azure AD B2C comprueba que el valor de post_logout_redirect_uri coincida con uno de los URI de redirección configurados de la aplicación antes de realizar la redirección. Si no se configuró ninguna dirección URL de respuesta coincidente para la aplicación, se muestra un mensaje de error y no se redirige al usuario.

Para admitir un URI de redireccionamiento de cierre de sesión protegido, siga estos pasos:

  1. Cree una variable accesible globalmente para almacenar el valor de id_token.

    let id_token = "";

  2. En la función handleResponse de MSAL, analice el valor id_token de objeto authenticationResult en la variable id_token.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. En la función signOut, agregue el parámetro id_token_hint al objeto logoutRequest.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

En el ejemplo anterior, el elemento post_logout_redirect_uri pasado a la solicitud de cierre de sesión tendrá el formato https://your-app.com/. Esta dirección URL debe agregarse a la dirección URL de respuesta del registro de aplicación.

Deshabilitación del cierre de sesión único

El cierre de sesión único de Azure AD B2C usa el cierre de sesión del canal frontal de OpenId Connect para realizar solicitudes de cierre de sesión a todas las aplicaciones en las que el usuario ha iniciado sesión mediante Azure AD B2C.

Estas solicitudes de cierre de sesión se realizan desde la página de cierre de sesión de Azure AD B2C, en un Iframe oculto. Los Iframes hacen solicitudes HTTP a todos los puntos de conexión de cierre de sesión del canal frontal registrados para las aplicaciones que Azure AD B2C ha registrado como iniciadas.

El punto de conexión de cierre de sesión de cada aplicación debe llamar al método MSAL logout() . También debe configurar explícitamente MSAL para que se ejecute dentro de un Iframe en este escenario estableciendo allowRedirectInIframe en true.

El ejemplo de código siguiente establece allowRedirectInIframe en true:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Pasos siguientes

Aprenda más sobre las opciones de configuración de MSAL.js.