Tutorial: Adición de inicio y cierre de sesión en la aplicación web de Node.js

Artículo
10/25/2023

Este tutorial es la última parte de una serie que muestra cómo crear una aplicación web de Node.js y prepararla para la autenticación mediante el Centro de administración de Microsoft Entra. En la parte 2 de esta serie, creó una aplicación web de Node.js y organizó todos los archivos necesarios. En este tutorial, va a agregar el inicio de sesión, el registro y el cierre de sesión a la aplicación web de Node.js. Para simplificar la adición de autenticación a la aplicación web de Node.js, use la Biblioteca de autenticación de Microsoft (MSAL) para Node. El flujo de inicio de sesión usa el protocolo de autenticación OpenID Connect (OIDC), que inicia de forma segura la sesión de los usuarios.

En este tutorial, hará lo siguiente:

Adición de lógica de inicio y cierre de sesión
Visualizar notificaciones de token de identificador
Ejecute la aplicación y pruebe la experiencia de inicio de sesión y cierre de sesión.

Requisitos previos

Ha completado los pasos descritos en Tutorial: Preparación de una aplicación web de Node.js para la autenticación.

Creación de un objeto de configuración de MSAL

En el editor de código, abra el archivo authConfig.js y agregue el siguiente código:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

El objeto msalConfig contiene un conjunto de opciones de configuración que se usan para personalizar el comportamiento de los flujos de autenticación.

El en archivo authConfig.js, reemplace:

Enter_the_Application_Id_Here con el Id. de aplicación (cliente) de la aplicación que registró anteriormente.
Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio del directorio (inquilino). Por ejemplo, si el dominio principal del inquilino es contoso.onmicrosoft.com, use contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
Enter_the_Client_Secret_Here con el valor secreto de aplicación que copió anteriormente.

Si usa el archivo .env para almacenar la información de configuración:

En el editor de código, abra el archivo .env y agregue el siguiente código.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Reemplace los marcadores de posición Enter_the_Application_Id_Here, Enter_the_Tenant_Subdomain_Here y Enter_the_Client_Secret_Here como se explicó anteriormente.

Las variables msalConfig, REDIRECT_URI, TENANT_SUBDOMAIN y POST_LOGOUT_REDIRECT_URI se exportan en el archivo authConfig.js, lo que hace que sean accesibles siempre que necesite el archivo.

Agregar rutas de Express

Las rutas de Express proporcionan los puntos de conexión que nos permiten ejecutar operaciones como iniciar sesión, cerrar sesión y ver notificaciones de token de identificador.

Punto de entrada de la aplicación

En el editor de código, abra el archivo routes/index.js y agregue el siguiente código:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

La ruta / es el punto de entrada a la aplicación. Representa la vista views/index.hbs que creó anteriormente en Compilación de componentes de la interfaz de usuario de la aplicación. isAuthenticated es una variable booleana que determina lo que se ve en la vista.

En el editor de código, abra el archivo routes/auth.js y agréguele el código de auth.js.
En el editor de código, abra el archivo controller/authController.js y agréguele el código de authController.js.
En el editor de código, abra el archivo auth/AuthProvider.js y agréguele el código de AuthProvider.js.

Las rutas /signin, /signout y /redirect están definidas en el archivo routes/auth.js, pero implementa su lógica en la clase auth/AuthProvider.js.

El método login controla la ruta /signin:
- Inicia el flujo de inicio de sesión al desencadenar la primera etapa del flujo de código de autenticación.
- Inicializa una instancia de aplicación cliente confidencial mediante el objeto de configuración MSAL, msalConfig, que puede crear previamente.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  El método getMsalInstance se define como:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- La primera etapa del flujo de código de autorización genera una dirección URL de solicitud de código de autorización y, a continuación, redirige a esa dirección URL para obtener el código de autorización. Esta primera etapa se implementa en el método redirectToAuthCodeUrl. Observe cómo usamos el método getAuthCodeUrl de las MSAL para generar la dirección URL del código de autorización:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  A continuación, se redirige a la propia dirección URL del código de autorización.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
El método handleRedirect maneja la ruta /redirect:
- Establezca esta dirección URL como URI de redirección para la aplicación web en el centro de administración de Microsoft Entra anteriormente en Registro de la aplicación web.
- Este punto de conexión implementa la segunda etapa de usos del flujo de código de autenticación. Usa el código de autorización para solicitar un token de identificador mediante el método acquireTokenByCode de la MSAL.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Después de recibir una respuesta, puede crear una sesión de Express y almacenar la información que desee en ella. Debe incluir isAuthenticated y establecerlo en true:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```

El método logout controla la ruta /signout:

async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}

Inicia la solicitud de cierre de sesión.
Cuando desee cerrar la sesión del usuario de la aplicación, cerrar la sesión del usuario no es suficiente. Debe redirigir al usuario a logoutUri. De lo contrario, el usuario podría autenticarse de nuevo en la aplicación sin volver a escribir sus credenciales. Si el nombre del inquilino es contoso, logoutUri tiene un aspecto similar a https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Visualización de notificaciones de token de identificador

En el editor de código, abra el archivo routes/users.js y agregue el siguiente código:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Si el usuario está autenticado, la ruta /id muestra las notificaciones de token de identificador mediante la vista views/id.hbs. Ha agregado esta vista anteriormente en Compilación de componentes de la interfaz de usuario de la aplicación.

Para extraer una notificación de token de identificador específica, como un nombre determinado:

const givenName = req.session.account.idTokenClaims.given_name

Finalización de la aplicación web

En el editor de código, abra el archivo app.js y agréguele el código de app.js.
En el editor de código, abra el archivo server.js y agréguele el código de server.js.
En el editor de código, abra el archivo package.json y actualice la propiedad scripts a:
```
"scripts": {
"start": "node server.js"
}
```

Ejecute y pruebe la aplicación web

En el terminal, asegúrese de que está en la carpeta del proyecto que contiene la aplicación web, como ciam-sign-in-node-express-web-app.
Ejecute el comando siguiente en el terminal:
```
npm start
```
Abra el explorador web y vaya a http://localhost:3000. Debería ver la página similar a la que aparece en la siguiente captura de pantalla:
Cuando la página termine de cargarse, seleccione el vínculo Iniciar sesión. Se le pedirá que inicie sesión.
En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.
Si elige la opción de registro, después de rellenar el correo electrónico, el código de acceso de un solo uso, la nueva contraseña y más detalles de la cuenta, completará todo el flujo de registro. Verá una página similar a la que aparece en la siguiente captura de pantalla. Verá una página similar si elige la opción de inicio de sesión.
Seleccione Cerrar sesión para cerrar la sesión del usuario de la aplicación web o seleccione Ver notificaciones de token de identificador para ver todas las notificaciones de token de identificador.

Compartir vía

Requisitos previos

Creación de un objeto de configuración de MSAL

Agregar rutas de Express

Punto de entrada de la aplicación

Visualización de notificaciones de token de identificador

Finalización de la aplicación web

Ejecute y pruebe la aplicación web

Consulte también

Recursos adicionales

Compartir vía

Requisitos previos

Creación de un objeto de configuración de MSAL

Agregar rutas de Express

Punto de entrada de la aplicación

Inicio y cierre de sesión

Visualización de notificaciones de token de identificador

Finalización de la aplicación web

Ejecute y pruebe la aplicación web

Consulte también

Recursos adicionales