Compartir vía

Tutorial: Creación de una aplicación web de Node.js para que los usuarios inicien sesión

  • Artículo

Este tutorial es la parte 2 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 Microsoft Entra. En la parte 1 de esta serie, registró una aplicación y configuró los flujos de usuario en el inquilino externo. En este tutorial, creará un proyecto Node.js(Express) y organizará todas las carpetas y archivos que necesite. Habilite el inicio de sesión en la aplicación que prepara aquí. Las vistas de esta aplicación web Node.js(Express) usan handlebars.

En este tutorial, aprenderás lo siguiente;

  • Crear un proyecto de Node.js
  • Instalar dependencias
  • Agregar vistas de aplicación y componentes de interfaz de usuario

Requisitos previos

Creación del proyecto Node.js

  1. En la ubicación que prefiera de su equipo, cree una carpeta para hospedar su aplicación de nodo, como ciam-sign-in-node-express-web-app.

  2. En su terminal, cambie el directorio a la carpeta de su aplicación web Node, como cd ciam-sign-in-node-express-web-app, luego ejecute el siguiente comando para crear un nuevo proyecto Node.js:

    npm init -y

    El comando init -y crea un archivo package.json predeterminado para el proyecto de Node.js.

  3. Cree carpetas y archivos adicionales para conseguir la siguiente estructura de proyecto:

        ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

Instalar las dependencias de la aplicación

Para instalar la identidad requerida y los paquetes npm relacionados con Node.js, ejecute el siguiente comando en su terminal

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

Creación de los componentes de la interfaz de usuario de la aplicación

  1. En el editor de código, abra el archivo views/index.hbs y agregue el siguiente código:

        <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

    En esta vista, si el usuario está autenticado, mostramos su nombre de usuario y vínculos para visitar los puntos de conexión /auth/signout y /users/id; de lo contrario, el usuario debe visitar el punto de conexión /auth/signin para iniciar sesión. Más adelante en este artículo definimos las rutas rápidas para estos puntos de conexión.

  2. En el editor de código, abra el archivo views/id.hbs y luego agregue el siguiente código:

        <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

    Esta vista se usa para mostrar las notificaciones de token de identificador que Microsoft Entra External ID devuelve a esta aplicación después de que un usuario haya iniciado la sesión correctamente.

  3. En el editor de código, abra el archivo views/error.hbs y luego agregue el siguiente código:

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    Usamos esta vista para mostrar todos los errores que se produzcan cuando se ejecuta la aplicación.

  4. En el editor de código, abra el archivo views/layout.hbs y luego agregue el siguiente código:

        <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

    El archivo layout.hbs está en el archivo de diseño. Contiene el código HTML que necesitamos en toda la vista de la aplicación.

  5. En el editor de código, abra public/stylesheets/style.css, archivo, y agregue el siguiente código:

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Paso siguiente

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