Habilitación de las opciones de autenticación en una aplicación web de Node.js mediante Azure Active Directory B2C
En este artículo se describe cómo habilitar, personalizar y mejorar la experiencia de autenticación de Azure Active Directory B2C (Azure AD B2C) para una aplicación web de Node.js.
Antes de empezar, es importante familiarizarse con los siguientes artículos:
- Configuración de la autenticación en una aplicación web de ejemplo de Node.js
- Habilite la autenticación en su propia aplicación web de Node.js.
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. En la carpeta raíz del proyecto, abra el archivo .env. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C.
En el archivo .env, haga lo siguiente:
- Reemplace todas las instancias de
tenant-name.b2clogin.com
por el dominio personalizado. Por ejemplo, reemplacetenant-name.b2clogin.com
porlogin.contoso.com
. - Reemplace todas las instancias de
tenant-name.onmicrosoft.com
por su identificador de inquilino. Para más información, consulte Uso del identificador de inquilino.
La configuración siguiente muestra la configuración de la aplicación antes del cambio:
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
La configuración siguiente muestra la configuración de la aplicación después del cambio:
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
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:
- Si usa una directiva personalizada, agregue la notificación de entrada necesaria, como se describe en Configuración del inicio de sesión directo.
- Busque el objeto
authCodeRequest
y establezca el atributologinHint
con la sugerencia de inicio de sesión.
Los fragmentos de código siguientes muestran cómo pasar el parámetro de sugerencia de inicio de sesión. Usa bob@contoso.com como valor de atributo.
authCodeRequest.loginHint = "bob@contoso.com"
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
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:
- 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.
- Busque el objeto
authCodeRequest
y establezca el atributodomainHint
con la sugerencia de dominio correspondiente.
Los fragmentos de código siguientes muestran cómo pasar el parámetro de sugerencia de dominio. Usa facebook.com como valor de atributo.
authCodeRequest.domainHint = "facebook.com"
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
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:
- Configure la personalización de idioma.
- Busque el objeto
authCodeRequest
y establezca el atributoextraQueryParameters
con el parámetro adicionalui_locales
correspondiente.
Los fragmentos de código siguientes muestran cómo pasar el parámetro ui_locales
. Usa es-es
como valor de atributo.
authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
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:
- Configure el elemento ContentDefinitionParameters.
- Busque el objeto
authCodeRequest
y establezca el atributoextraQueryParameters
con la parámetro adicional correspondiente.
Los fragmentos de código siguientes muestran cómo pasar el parámetro de cadena de consulta personalizado campaignId
. Usa germany-promotion
como valor de atributo.
authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
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:
- En la directiva personalizada, defina un perfil técnico de sugerencias de token de identificador.
- Busque el objeto
authCodeRequest
y establezca el atributoextraQueryParameters
con el parámetro adicionalid_token_hint
correspondiente.
Los fragmentos de código siguientes muestran cómo definir una sugerencia de token de identificador:
authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
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, en index.js, configure las claves siguientes:
logLevel
permite especificar el nivel de registro. Valores posibles:Error
,Warning
,Info
yVerbose
.piiLoggingEnabled
habilita la entrada de datos personales. Valores posibles:true
ofalse
.
En el siguiente fragmento de código se muestra cómo configurar el registro de MSAL:
const confidentialClientConfig = {
...
system: {
loggerOptions: {
loggerCallback(loglevel, message, containsPii) {
console.log(message);
},
piiLoggingEnabled: false,
logLevel: msal.LogLevel.Verbose,
}
}
};
Pasos siguientes
Aprenda más sobre las opciones de configuración de MSAL.js.