Tutorial: creación de una SPA de Vanilla JavaScript para la autenticación en un inquilino externo

Artículo
04/16/2024

Este tutorial es la parte 2 de una serie que muestra la construcción de una aplicación de página única (SPA) Vanilla JavaScript (JS) y su preparación 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 se muestra cómo crear un SPA de JavaScript de Vainilla mediante npm y crear archivos necesarios para la autenticación y autorización.

En este tutorial,

Crear un proyecto de JavaScript estándar en Visual Studio Code
Instalación de los paquetes requeridos
Agregar código a server.js para crear un servidor

Requisitos previos

Tutorial: Preparar el inquilino externo para autenticar usuarios en una aplicación de página única de Vanilla JavaScript.
Aunque se puede usar cualquier entorno de desarrollo integrado (IDE) que admita aplicaciones JavaScript de Vainilla, se recomienda Visual Studio Code para esta guía. Se puede descargar desde la página Descargas.
Node.js.

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

Abra Visual Studio Code, seleccione Archivo >Abrir carpeta.... Navegue y seleccione la ubicación en la que se va a crear el proyecto.
Abra una terminal nueva seleccionando Terminal >Crear terminal.
Ejecute el siguiente comando para crear un nuevo proyecto JavaScript de Vainilla:
```
npm init -y
```

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

    └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

Instalar las dependencias de la aplicación

En el terminal ejecute el siguiente comando para instalar las dependencias requeridas para el proyecto:
```
npm install express morgan @azure/msal-browser
```

Edite el archivo server.js

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

Agregue el siguiente fragmento de código 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}!`);
});

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

Paso siguiente

Parte 3: Controlar los flujos de autenticación en una SPA de JavaScript de Vainilla

Compartir vía