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

Artículo
03/26/2023

En este artículo, aprenderá a configurar una aplicación web Node.js de ejemplo para llamar a una API web de Node.js de ejemplo. La API web debe estar protegida por la propia instancia de Azure AD B2C. En esta configuración, una aplicación web, como App ID: 1, llama a una API web, como App ID: 2. Los usuarios se autentican en la aplicación web para adquirir un token de acceso, que luego se usa para llamar a una API web protegida.

Información general

La autenticación basada en tokens garantiza que las solicitudes a una API web van acompañadas de un token de acceso válido.

La aplicación web completa los siguientes eventos:

Para autenticar a los usuarios con Azure AD B2C.
Adquiere un token de acceso con los permisos necesarios (ámbitos) para el punto de conexión de API web.
Pasa el token de acceso como token de portador en el encabezado de autorización de la solicitud HTTP. Usa el formato:

Authorization: Bearer <token>

La API web completa los siguientes eventos:

Lee el token de portador del encabezado de autorización en la solicitud HTTP.
Valida el token.
Valida los permisos (ámbitos) en el token.
Responde a la solicitud HTTP. Si el token no es válido, el punto de conexión de API web responde con un error HTTP 401 Unauthorized.

Introducción al registro de aplicaciones

Para que la aplicación pueda iniciar sesión con Azure AD B2C y llame a una API web, debe registrar dos aplicaciones en el directorio de Azure AD B2C.

El registro de la aplicación web permite que la aplicación inicie sesión con Azure AD B2C. Durante el registro, especifique el URI de redirección. El URI de redirección es el punto de conexión al que se redirige a los usuarios por Azure AD B2C después de completar la autenticación. 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. También generará un secreto de cliente para la aplicación. La aplicación usa el secreto de cliente para intercambiar un código de autorización para un token de acceso.
El registro de API web permite que la aplicación llame a una API web segura. El registro incluye los ámbitos de la API web. Los ámbitos ofrecen una manera de administrar permisos para los recursos protegidos, como la API web. A la aplicación web se le conceden permisos para los ámbitos de la API web. Cuando se selecciona un token de acceso, la aplicación especifica los permisos que desea en el parámetro de ámbito de la solicitud.

Los registros y la arquitectura de la aplicación se describen en el diagrama siguiente:

Diagram of the application registrations and the application architecture for an app with web A P I.

Requisitos previos

Node.js.
Visual Studio Code u otro editor de código.

Paso 1: Configuración del flujo 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 la aplicación web y la API

En este paso, creará los registros de aplicaciones web y de API web, y especificará los ámbitos de la API web.

Paso 2.1: Registro de la aplicación de API web

Siga estos pasos para crear el registro de aplicación de API web (Id. de aplicación: 2):

Inicie sesión en Azure Portal.
Asegúrese de que usa el directorio que contiene el inquilino de Azure AD B2C. Seleccione el icono Directorios y suscripciones en la barra de herramientas del portal.
En la página Configuración del portal | Directorios y suscripciones, busque el directorio de Azure AD B2C en la lista Nombre de directorio y seleccione Cambiar.
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, my-api1). Deje los valores predeterminados para URI de redireccionamiento y Tipos de cuenta admitidos.
Seleccione Registrar.
Una vez completado el registro de la aplicación, seleccione Información general.
Anote el valor Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

Paso 2.2: Configuración de ámbitos

Seleccione la aplicación my-api1 que creó (id. de aplicación: 2) para abrir la página Información general.
En Administrar, seleccione Exponer una API.
Junto a URI de id. de aplicación, seleccione el vínculo Establecer. Reemplace el valor predeterminado (GUID) por un nombre único (por ejemplo, tasks-api) y, luego, seleccione Guardar.

Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.
En Ámbitos definidos con esta API, seleccione Agregar un ámbito.
Para crear un ámbito que defina el acceso de lectura a la API, siga estos pasos:
1. Para Nombre de ámbito, escriba tasks.read.
2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de lectura a la API de tareas.
3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de lectura a la API de tareas.
Seleccione la opción Agregar un ámbito.
Seleccione Agregar un ámbito y agregue una opción que defina el acceso de escritura en la API:
1. Para Nombre de ámbito, escriba tasks.write.
2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de escritura a la API de tareas.
3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de escritura a la API de tareas.
Seleccione la opción Agregar un ámbito.

Paso 2.3: Registrar la aplicación web

Para crear la configuración de la aplicación SPA, haga lo siguiente:

Inicie sesión en Azure Portal.
Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar a su inquilino de Azure AD B2C desde el menú Directorios y suscripciones.
Busque y seleccione Azure AD B2C.
Seleccione Registros de aplicaciones y luego Nuevo registro.
Escriba un nombre para la aplicación (por ejemplo, App ID: 1).
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 redireccionamiento, seleccione Web y, luego, escriba http://localhost:3000/redirect en el cuadro de texto de dirección URL.
En Permisos, active la casilla Conceder consentimiento de administrador para openid y permisos de acceso sin conexión.
Seleccione Registrar.

Paso 2.4: Creación de un secreto de cliente

En la página Azure AD B2C: Registros de aplicaciones, seleccione la aplicación que ha creado, por ejemplo, App ID: 1.
En el menú de la izquierda, en Administrar, seleccione 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 para usarlo en el código de la aplicación cliente. Este valor secreto no se volverá a mostrar una vez que abandone esta página. Use este valor como secreto de aplicación en el código de la aplicación.

Paso 2.5: Concesión de permisos de API a la aplicación web

Si desea conceder permisos a la aplicación (identificador de aplicación: 1), siga estos pasos:

Seleccione Registros de aplicaciones y, luego, la aplicación que creó (identificador de aplicación: 1).
En Administrar, seleccione Permisos de API.
En Permisos configurados, seleccione Agregar un permiso.
Seleccione la pestaña Mis API.
Seleccione la API (identificador de aplicación:2) a la que la aplicación web debe tener acceso. Por ejemplo, escriba my-api1.
En Permiso, expanda Tareas y, a continuación, seleccione los ámbitos que definió anteriormente; por ejemplo, tasks.read y tasks.write.
Seleccione Agregar permisos.
Seleccione Conceder consentimiento de administrador para <el nombre de inquilino>.
Seleccione Sí.
Seleccione Actualizar y compruebe que aparece Granted for... (Concedido para...) en Estado para ambos ámbitos.
En la lista Permisos configurados, seleccione el ámbito y copie el nombre completo del ámbito.

Paso 3: Obtención del código de ejemplo de la aplicación web

En este ejemplo se muestra cómo una aplicación web puede usar Azure AD B2C para el registro e inicio de sesión del usuario. A continuación, la aplicación adquiere un token de acceso y llama a una API web protegida.

Para obtener el código de ejemplo de la aplicación web, puede realizar una de las siguientes acciones:

Descargue un archivo ZIP. Extraerá el archivo ZIP para obtener la aplicación web de ejemplo.

Clone el ejemplo de GitHub ejecutando el comando siguiente:

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

Paso 3.1: Instalación de las dependencias de aplicación

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/call-protected-api
```
Ejecute los siguientes comandos para instalar las dependencias de la aplicación:
```
    npm install && npm update
```

Paso 3.2: Configuración de la aplicación web de ejemplo

Abra la aplicación web en un editor de código como Visual Studio Code. En la carpeta call-protected-api, abra el archivo .env. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C. Actualice la siguiente 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.3.
`APP_CLIENT_SECRET`	El valor secreto de cliente de la aplicación web que creó en el paso 2.4.
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	Entidad de flujo de usuario de inicio de sesión y registro para el flujo de usuario que creó en el paso 1, 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.
`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. Esta dirección URL 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`.

Después de la actualización, el archivo de configuración final debe ser similar al ejemplo siguiente:

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

Paso 4: Obtención del código de ejemplo de la API web

Ahora que ha registrado la API web y ha definido sus ámbitos, configure el código de la API web para que funcione con el inquilino de Azure AD B2C.

Para obtener el código de ejemplo de la API web, haga una de las acciones siguientes:

Descargue un archivo *.zip.

Clone el proyecto de la API web de ejemplo de GitHub ejecutando el comando siguiente:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

También puede ir directamente al proyecto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi en GitHub.

Paso 4.1: Actualización de la API web

En el editor de código, abra el archivo config.json.

Modifique los valores de variable con el flujo de usuario y el registro de aplicación que creó anteriormente:

Para tenantName, use el nombre del inquilino, como fabrikamb2c.
Para clientID, use el id. de aplicación (cliente) para la API web que creó en el paso 2.1.
Para policyName, use el nombre del flujo de usuario de inicio de sesión y registro que creó en el paso 1, como B2C_1_susi.

Después de la actualización, el código debe ser similar al ejemplo siguiente:

config.json:

{
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "93733604-cc77-4a3c-a604-87084dd55348"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Paso 4.2: Instalación de las dependencias de aplicación

Abra una ventana de consola y cambie al directorio que contiene la API web de Node.js de ejemplo. Por ejemplo:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Ejecute los comandos siguientes:
```
npm install && npm update
```

Paso 5: Ejecución de la aplicación web y la API

Ya está listo para probar el acceso de ámbito de la aplicación web a la API web. Ejecute la API web de Node.js y la aplicación web de ejemplo en la máquina local.

En el terminal, vaya a la API web de ejemplo y ejecute el inicio del servidor de API web de Node.js. Por ejemplo:
```
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```
La ventana de la consola muestra el número de puerto donde se hospeda la aplicación.
```
Listening on port 5000...
```
En otra instancia de terminal, vaya a la aplicación web de ejemplo y ejecute el inicio del servidor de aplicación web de Node.js. Por ejemplo:
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js
```
La ventana de la consola muestra el número de puerto donde se hospeda la aplicación.
```
Msal Node Auth Code Sample app listening on port !3000
```
En el explorador, vaya a http://localhost:3000. Debería ver la página con dos botones, Sign in to call PROTECTED API (Iniciar sesión para llamar a la API protegida) y Or call the ANONYMOUS API (O llamar a API anónima).
Para llamar a la API anónima, seleccione Or call the ANONYMOUS API (O llamar a API anónima). La API responde con un objeto JSON con una clave date como:
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
La API anónima es un punto de conexión no protegido en la API web. No necesita un token de acceso para acceder a ella.
Para llamar al punto de conexión de API protegido, seleccione el botón Sign in to call PROTECTED API (Iniciar sesión para llamar a la API protegida). 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 con el botón Call the PROTECTED API (Llamar a la API protegida).
Para llamar a la API protegida, seleccione el botón Call the PROTECTED API (Llamar a la API protegida). La API responde con un objeto JSON con una clave name cuyo valor es el apellido de la cuenta, como:
```
    {"name": "User 1"} 
```

Pasos siguientes

Aprenda a habilitar la autenticación en su propia API web mediante Azure AD B2C.