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

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:

1. 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
   

2. 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.

Uso de un dominio de dirección URL personalizado (opcional)

Use un dominio personalizado para 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 ciamlogin.com.

Siga estos pasos para usar un dominio personalizado:

1. Siga los pasos descritos en Habilitación de dominios de dirección URL personalizados para aplicaciones en inquilinos externos a fin de habilitar la dirección URL de dominio personalizada para el inquilino externo.

2. En el archivo authConfig.js, busque el objeto auth y, después, haga lo siguiente:

   1. Actualice el valor de la propiedad authority a https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Reemplace Enter_the_Custom_Domain_Here por la dirección URL de dominio personalizado y Enter_the_Tenant_ID_Here por el identificador de inquilino. Si no tiene el identificador del inquilino, obtenga información sobre cómo leer los detalles del inquilino.
   2. Agregue la propiedad knownAuthorities con un valor [Escriba_aquí_el_dominio_personalizado].

Después de realizar los cambios en el archivo authConfig.js, si la dirección URL del dominio personalizado es login.contoso.comy el identificador de inquilino es aaaabbbb-0000-cccc-1111-dddd2222eeee, el archivo debe tener un aspecto similar al siguiente fragmento de código:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

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.

Inicio y cierre de sesión

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

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

3. 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

1. En el editor de código, abra el archivo app.js y agréguele el código de app.js.

2. En el editor de código, abra el archivo server.js y agréguele el código de server.js.

3. 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

1. 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.

2. Ejecute el comando siguiente en el terminal:

   npm start
   

3. 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:

   

4. Cuando la página termine de cargarse, seleccione el vínculo Iniciar sesión. Se le pedirá que inicie sesión.

5. 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.

6. 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.

   

7. 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.

Consulte también

• Habilite el restablecimiento de contraseña.

• Configure el inicio de sesión con Google.

• Use el certificado de cliente para la autenticación en la aplicación web de Node.js en lugar de un secreto de cliente.

• Llamada a una API en una aplicación web de Node.js