Compartir por

Tutorial: Configuración de una aplicación web de Node.js para iniciar sesión de los usuarios mediante la plataforma de identidad de Microsoft

Se aplica a: Círculo verde con un símbolo de marca de verificación blanca que indica que el siguiente contenido se aplica a los inquilinos de la fuerza de trabajo. Círculo verde de inquilinos de recursos con un símbolo de marca de verificación blanca que indica que el siguiente contenido se aplica a los inquilinos externos. Inquilinos externos (más información)

En este tutorial, aprenderá a crear una aplicación web node/Express.js que inicie la sesión de los usuarios en una aplicación orientada al cliente en un inquilino externo o empleados de un inquilino de personal. En el tutorial también se muestra cómo adquirir un token de acceso para llamar a Microsoft Graph API.

Este tutorial es la parte 1 de una serie de tres partes.

En este tutorial, lo hará;

  • Configuración de un proyecto de Node.js
  • Instalar dependencias
  • Adición de vistas de aplicaciones y componentes de interfaz de usuario

Prerrequisitos

Creación del proyecto de Node.js

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

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

    npm init -y

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

  3. Cree carpetas y archivos adicionales para lograr 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

Instalación de dependencias de aplicaciones

Para instalar la identidad necesaria y Node.js paquetes npm relacionados, ejecute el siguiente comando en el terminal.

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

Compilación de 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 código siguiente:

        <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 /auth/signout y /users/id puntos de conexión; de lo contrario, el usuario debe visitar el /auth/signin punto de conexión para iniciar sesión. Definimos las rutas rápidas para estos puntos de conexión más adelante en este artículo.

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

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

    Usamos esta vista para mostrar las notificaciones del token de identificador que el id. externo de Microsoft Entra vuelve a esta aplicación después de que un usuario inicie sesión correctamente.

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

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

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

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

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

    El layout.hbs archivo 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 código siguiente:

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

    a {
      color: #00B7FF;
    }

Paso siguiente

Tutorial: Adición de un inicio de sesión de complemento en la aplicación web Node/Express.js.

  • Last updated on