Compartir a través de

Tutorial: Preparación de una aplicación de página única de JavaScript para la autenticación

Se aplica a:Círculo verde con un símbolo de marca de verificación blanca. inquilinos de personal Círculo verde con un símbolo de marca de verificación blanca. inquilinos externos (más información)

En este tutorial, creará una aplicación de página única (SPA) de JavaScript y la preparará para la autenticación mediante la plataforma de identidad de Microsoft. En este tutorial se muestra cómo crear una SPA de JavaScript mediante npm, crear archivos necesarios para la autenticación y autorización y agregar los detalles del inquilino al código fuente. La aplicación se puede usar para los empleados de un inquilino del personal o para los clientes que usan un inquilino externo.

En este tutorial, aprenderás lo siguiente:

  • Creación de un nuevo proyecto de JavaScript
  • Instalación de paquetes necesarios para la autenticación
  • Crear la estructura de archivos y agregar código al archivo de servidor
  • Adición de los detalles del inquilino al archivo de configuración de autenticación

Prerrequisitos

Creación de un proyecto de JavaScript e instalación de dependencias

  1. Inicie sesión en el Centro de administración de Microsoft Entra como administrador global.

  2. Abra Visual Studio Code, seleccione Archivo >Abrir carpeta.... Navegue y seleccione la ubicación en la que se va a crear el proyecto.

  3. Abra una terminal nueva seleccionando Terminal >Crear terminal.

  4. Ejecute el siguiente comando para crear un nuevo proyecto de JavaScript:

    npm init -y

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

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  6. En el terminal ejecute el siguiente comando para instalar las dependencias requeridas para el proyecto:

    npm install express morgan @azure/msal-browser

Adición de código al archivo de servidor

Express es un marco de trabajo de aplicaciones web para Node.js. Se usa para crear un servidor que hospede la aplicación. Morgan es el software intermedio que registra las solicitudes HTTP en la consola. El archivo de servidor se usa para hospedar estas dependencias y contiene las rutas de la aplicación. La autenticación y autorización se realizan por medio de la Biblioteca de autenticación de Microsoft para JavaScript (MSAL.js).

  1. Agregue el código siguiente al archivo server.js :

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

module.exports = app;

En este código, la variable app se inicializa con el módulo express para servir los recursos públicos. MSAL-browser se sirve como un recurso estático y se utiliza para iniciar el flujo de autenticación.

Adición de los detalles del inquilino a la configuración de MSAL

El archivo authConfig.js contiene las opciones de configuración del flujo de autenticación y se usa para configurar MSAL.js con los valores necesarios para la autenticación.

  1. Abra public/authConfig.js y agregue el código siguiente:

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Reemplace los valores siguientes por los valores del Centro de administración de Microsoft Entra:

    • Busque el Enter_the_Application_Id_Herevalor y reemplácelo por el Id. de aplicación(clientId) de la aplicación que registró en el Centro de administración de Microsoft Entra.
    • Busque el valor Enter_the_Tenant_Info_Here y reemplácelo por el Identificador de inquilino del inquilino de recursos que creó en el Centro de administración de Microsoft Entra.

  3. Guarde el archivo.

Paso siguiente

Control de flujos de autenticación en una SPA de JavaScript