Configuración de la autenticación en una aplicación web Node.js de ejemplo mediante Azure Active Directory B2C

Artículo
05/03/2023

En este artículo de ejemplo se usa una aplicación de Node.js para mostrar cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a una aplicación web de Node.js. La aplicación de ejemplo permite a los usuarios iniciar sesión, cerrar sesión, actualizar el perfil y restablecer la contraseña mediante flujos de usuario de Azure AD B2C. La aplicación web de ejemplo usa la Biblioteca de autenticación de Microsoft (MSAL) para Node para controlar la autenticación y la autorización.

En este artículo, se realizarán las siguientes tareas:

Registrar una aplicación web en Azure Portal.
Crear flujos de usuario combinados de inicio de sesión y registro, edición de perfiles y restablecimiento de contraseña para la aplicación en Azure Portal.
Actualizar una aplicación Node de ejemplo para usar su propia aplicación y flujos de usuario de Azure AD B2C.
Probar la aplicación de ejemplo.

Prerrequisitos

Node.js.
Visual Studio Code u otro editor de código.
Inquilino de Azure AD B2C. Si aún no ha creado el suyo propio, siga los pasos descritos en Tutorial: Creación de un inquilino de Azure Active Directory B2C y registre el nombre del inquilino.

Paso 1: Configuración de los flujos de usuario

Cuando los usuarios intentan iniciar sesión en la aplicación, esta inicia una solicitud de autenticación para el punto de conexión de autorización mediante un flujo de usuario. El flujo de usuario define y controla la experiencia del usuario. Al completar los usuarios el flujo de usuario, Azure AD B2C genera un token y, después, redirige a los usuarios de vuelta a la aplicación.

Si aún no lo ha hecho, cree un flujo de usuario o una directiva personalizada. Repita los pasos para crear tres flujos de usuario independientes de la manera siguiente:

Un flujo de usuario combinado de inicio de sesión y registro, como susi. Este flujo de usuario también admite la experiencia ¿Olvidó su contraseña?.
Un flujo de usuario de edición de perfiles, como edit_profile.
Un flujo de usuario de restablecimiento de contraseña, como reset_password.

Azure AD B2C antepone el prefijo B2C_1_ al nombre del flujo de usuario. Por ejemplo, susi se convierte en B2C_1_susi.

Paso 2: Registro de una aplicación web

Para permitir que la aplicación inicie sesión con Azure AD B2C, registre la aplicación en el directorio de Azure AD B2C. El registro de la aplicación establece una relación de confianza entre la aplicación y Azure AD B2C.

Durante el registro de la aplicación, especificará el URI de redirección. El URI de redirección es el punto de conexión al que Azure AD B2C redirige al usuario después de que este se autentica con Azure AD B2C. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como identificador de cliente, que permite identificar de forma exclusiva la aplicación. Una vez registrada la aplicación, Azure AD B2C usará el identificador de aplicación y el identificador URI de redirección para crear solicitudes de autenticación.

Paso 2.1: Registro de la aplicación

Para registrar la aplicación web, siga estos pasos:

Inicie sesión en Azure Portal.
Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar al inquilino del Azure AD B2C desde el menú Directorios y suscripciones.
En Azure Portal, busque y seleccione Azure AD B2C.
Seleccione Registros de aplicaciones y luego Nuevo registro.
En Nombre, escriba un nombre para la aplicación (por ejemplo, webapp1).
En Tipos de cuenta compatibles, seleccione Cuentas en cualquier proveedor de identidades o directorio de la organización (para autenticar usuarios con flujos de usuario) .
En URI de redirección, seleccione Web y luego, en el cuadro Dirección URL, escriba http://localhost:3000/redirect.
En Permisos, active la casilla Grant admin consent to openid and offline_access permissions (Conceder consentimiento de administrador a los permisos openid y offline_access).
Seleccione Registrar.
Seleccione Información general.
Anote el Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

Paso 2.2: Creación de un secreto de cliente de la aplicación web

Cree un secreto de cliente para la aplicación web registrada. La aplicación web usa el secreto de cliente para demostrar su identidad al solicitar tokens.

En Administrar, seleccione Certificates & secrets (Certificados y secretos).
Seleccione Nuevo secreto de cliente.
Escriba una descripción para el secreto de cliente en el cuadro Descripción (por ejemplo, clientsecret1).
En Expira, seleccione el tiempo durante el cual el secreto es válido y, a continuación, seleccione Agregar.
Registre el Valor del secreto. Este valor se usará para la configuración en un paso posterior.

Paso 3: Obtención de la aplicación web de ejemplo

Descargue el archivo zip o clone la aplicación web de ejemplo desde GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

Extraiga el archivo de ejemplo en una carpeta. Tendrá una aplicación web con la siguiente estructura de directorios:

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

La carpeta views contiene archivos Handlebars para la interfaz de usuario de la aplicación.

Paso 4: Instalación de dependencias

Abra una ventana de consola y cambie al directorio que contiene la aplicación Node.js de ejemplo. Por ejemplo:
```
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```
Ejecute los siguientes comandos para instalar las dependencias de la aplicación:
```
npm install && npm update
```

Paso 5: Configurar la aplicación web de ejemplo

Abra la aplicación web en un editor de código como Visual Studio Code. 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. Actualice las siguientes propiedades de la configuración de la aplicación:

Clave	Valor
`APP_CLIENT_ID`	Identificador de aplicación (cliente) de la aplicación web que registró en el paso 2.1.
`APP_CLIENT_SECRET`	El valor secreto de cliente de la aplicación web que creó en el paso 2.2
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	Entidad de flujo de usuario de inicio de sesión y registro, como `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`. Reemplace `<your-tenant-name>` por el nombre del inquilino y `<sign-in-sign-up-user-flow-name>` por el nombre del flujo de usuario de inicio de sesión y registro, como `B2C_1_susi`. Obtenga información sobre la Obtención del nombre del inquilino.
`RESET_PASSWORD_POLICY_AUTHORITY`	La entidad de flujo de usuario Restablecer contraseña, como `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>`. Reemplace `<your-tenant-name>` por el nombre del inquilino y `<reset-password-user-flow-name>` por el nombre del flujo de restablecimiento de contraseña, como `B2C_1_reset_password_node_app`.
`EDIT_PROFILE_POLICY_AUTHORITY`	Entidad de flujo de usuario de edición de perfiles, como `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>`. Reemplace `<your-tenant-name>` por el nombre del inquilino y `<reset-password-user-flow-name>` por el nombre del flujo de restablecimiento de contraseña, como `B2C_1_edit_profile_node_app`.
`AUTHORITY_DOMAIN`	Dominio de la entidad de Azure AD B2C, como `https://<your-tenant-name>.b2clogin.com`. Reemplace `<your-tenant-name>` por el nombre del inquilino.
`APP_REDIRECT_URI`	URI de redireccionamiento de la aplicación donde Azure AD B2C devolverá respuestas de autenticación (tokens). Coincide con el URI de redireccionamiento que estableció al registrar la aplicación en Azure Portal, y debe ser accesible públicamente. Deje el valor tal y como está.
`LOGOUT_ENDPOINT`	El punto de conexión de cierre de sesión de Azure AD B2C, como `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000`. Reemplace `<your-tenant-name>` por el nombre del inquilino y `<sign-in-sign-up-user-flow-name>` por el nombre del flujo de usuario de inicio de sesión y registro, como `B2C_1_susi`.

El archivo de configuración final debe ser parecido al ejemplo siguiente:

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Ejecución de la aplicación web de ejemplo

Ahora puede probar la aplicación de ejemplo. Debe iniciar el servidor Node y acceder a él a través del explorador en http://localhost:3000.

En el terminal, ejecute el código siguiente para iniciar el servidor web de Node.js:
```
node index.js
```
En el explorador, vaya a http://localhost:3000. Debería ver la página con el botón Iniciar sesión.

Cuando la página con el botón Iniciar sesión termine de cargarse, seleccione Iniciar sesión. Se le pedirá que inicie sesión.
Escriba las credenciales de inicio de sesión, como la dirección de correo electrónico y la contraseña. Si no tiene una cuenta, seleccione Registrarse ahora para crear una. Después de iniciar sesión o registrarse correctamente, debería ver la página siguiente que muestra el estado de inicio de sesión.

Prueba de la edición de perfiles

Después de iniciar sesión, seleccione Editar perfil.
Escriba los nuevos cambios según sea necesario y, a continuación, seleccione Continuar. Debería ver la página con el estado de inicio de sesión que muestra los nuevos cambios, como Nombre propio.

Prueba del restablecimiento de contraseña

Después de iniciar sesión, seleccione Restablecer contraseña.
En el siguiente cuadro de diálogo que aparece, puede cancelar la operación; para ello, seleccione Cancelar. Como alternativa, escriba la dirección de correo electrónico y, a continuación, seleccione Enviar código de verificación. Recibirá un código de verificación en su cuenta de correo electrónico. Copie el código de verificación en el correo electrónico, escríbalo en el cuadro de diálogo de restablecimiento de contraseña y, a continuación, seleccione Comprobar código.
Seleccione Continuar.
Escriba la nueva contraseña, confírmela y, a continuación, seleccione Continuar. Debería ver la página que muestra el estado de inicio de sesión.

Prueba del cierre de sesión

Una vez que inicie sesión, seleccione Cerrar sesión. Debería ver la página que tiene el botón Iniciar sesión.

Pasos siguientes

Obtenga información sobre cómo personalizar y mejorar la experiencia de autenticación de Azure AD B2C para la aplicación web.
Obtenga información sobre cómo habilitar la autenticación en su propia aplicación web de Node mediante Azure AD B2C.