Configuracion

1 Seguridad
1.1 Aplicativo
Abrir el proyecto ATPOS
En la terminal correr la aplicacion react con npm start
Correr el archivo src/server -node src/server (el servidor que envia correos de
confirmacion)
1.2 Enviar 100 peticiones
Parar proyecto ATPOS para que el puerto 3000 vuelvo a estár libre
Abrir el proyecto Heurisitca

Correr test-api.js en otro terminal

2 Disponibildad
Abrir el proyecto ATPOS
En la terminal correr la aplicacion react con npm start
En la aplicacion colocar la ruta localhost3000/order

Documentacion

1 Seguridad

1.1 Aplicacion Seguridad:Login.js

Importaciones:
React, useState y useEffect de "react": Se importan para utilizar React y sus hooks de estado y
efecto.
ReCAPTCHA de "react-google-recaptcha": Se importa para utilizar el componente de
reCAPTCHA de Google en el formulario de inicio de sesión.
useNavigate de "react-router-dom": Se importa para navegar entre páginas en la aplicación.
axios de "axios": Se importa para realizar solicitudes HTTP a servicios externos.
"./login.css": Se importa el archivo de estilos CSS para este componente.

Variables de estado:

llave: Almacena la llave ingresada por el usuario.

showCaptcha: Controla la visualización del reCAPTCHA.
loading: Indica si se está cargando alguna solicitud.
recaptchaValidated: Indica si el reCAPTCHA fue validado correctamente.
deviceInfo: Almacena información sobre el dispositivo del usuario.
blocked: Indica si el usuario está bloqueado.
blockInfo: Almacena información sobre el bloqueo.
ip: Almacena la dirección IP del usuario.

Hooks:

useNavigate: Se utiliza para navegar entre las páginas de la aplicación.

useEffect: Se utiliza para ejecutar código cuando se monta el componente y cuando cambian
sus dependencias.

Funciones:

isBlocked: Verifica si el usuario está bloqueado.

getDeviceInfo: Obtiene información sobre el dispositivo y la dirección IP del usuario.
isWindows10: Verifica si el dispositivo es una computadora con Windows 10.
handleSubmit: Maneja la acción de enviar el formulario.
handleRecaptchaChange: Maneja la validación del reCAPTCHA.
sendConfirmationEmail: Envía un correo electrónico de confirmación al usuario.
LoadingSpinner: Componente que muestra un spinner de carga.

Estructura de la vista:

Muestra un spinner de carga si la variable de estado "loading" es verdadera.

Muestra un mensaje de error si la variable de estado "blocked" es verdadera.
Muestra el formulario con los siguientes elementos:
a. Logo de la compañía.
b. Input para ingresar la llave.
c. Botón para enviar el formulario.
d. Componente ReCAPTCHA si "showCaptcha" es verdadero.
Muestra la información del dispositivo si está disponible.

Como y cuando se bloquea por ip

El bloqueo por IP en este código se realiza mediante una condición específica dentro de la
función handleSubmit. Cuando un usuario intenta enviar el formulario, el código verifica si la
llave ingresada es correcta y si el dispositivo del usuario cumple con ciertos criterios. Si la
dirección IP del usuario es igual a "191.156.151.88" y su dispositivo no es Windows 10,
entonces se considera que el usuario está bloqueado por IP.

Veamos cómo sucede esto en el código:

En este fragmento de código, se comprueba si la llave ingresada es igual a "Adm123*@", y si

es así, se verifica si el dispositivo es Windows 10 o si la dirección IP es igual a
"191.156.151.88". Si se cumple alguna de estas condiciones, se muestra el ReCAPTCHA.

Si el dispositivo no es Windows 10 y la dirección IP es "191.156.151.88", entonces se establece

el estado blocked en verdadero, se muestra un mensaje de bloqueo, y se guarda la información
del bloqueo en el almacenamiento local del navegador (localStorage). De esta manera, si el
usuario intenta acceder nuevamente, el sistema lo reconocerá como bloqueado y mostrará el
mensaje de bloqueo sin necesidad de realizar la verificación de IP y dispositivo nuevamente.

1.2 API para enviar 100 peticiones al esquema de seguridad:

1.2.1 HeuristicaController:
Este código define un controlador de NestJS llamado HeuristicaController, que tiene un solo
endpoint de tipo POST llamado "check". Esta función verifica si un usuario tiene acceso al
sistema basándose en una serie de criterios. el código forma parte de una API de backend y el
controlador es responsable de manejar las solicitudes entrantes.

Importaciones:

Body, Controller, HttpStatus, Post, Res de '@nestjs/common': Se importan para crear un

controlador de NestJS, manejar las solicitudes HTTP y definir los métodos de los endpoints.
Response de 'express': Se importa para manejar la respuesta HTTP.

Controlador y Endpoint:

@Controller('heuristica'): Define el controlador con la ruta base 'heuristica'.

@Post('check'): Define un método POST para el endpoint 'check' en el controlador.

Función checkAccess:

Parámetros:

data: Una cadena de texto que contiene información sobre el acceso del usuario.
res: Un objeto Response de Express para manejar la respuesta HTTP.

Variables y constantes:

dispositivoDiferente, ipDiferente, captchaCompletado, correoConfirmado,

preguntaSeguridadRespondida, tiempoSeguridadCorrecto: Se extraen del parámetro 'data' y se
convierten en valores booleanos.
porcentajeSuplantacion: Lleva el conteo del porcentaje de suplantación del usuario.
faseDeteccion: Lleva el registro de la fase de detección actual en la que se encuentra el
proceso.
esAdministrador: Determina si el usuario es administrador basado en los valores de 'data'.
pasos: Un array que contiene funciones que evalúan las condiciones necesarias para
determinar si se debe aumentar el porcentaje de suplantación.

Lógica:

Recorre el array de funciones "pasos" y evalúa cada función en orden.

Si una función devuelve verdadero, se incrementa el porcentaje de suplantación en 50 y se
actualiza la fase de detección.
Si el porcentaje de suplantación llega a 100, se envía una respuesta HTTP con un estado 401
(No autorizado) e información adicional sobre la fase de detección y el tipo de usuario.
Si el porcentaje de suplantación no llega a 100, se envía una respuesta HTTP con un estado
200 (OK) e información sobre el tipo de usuario.

En resumen, este controlador de NestJS maneja una única solicitud POST en la ruta
'heuristica/check' y verifica si un usuario tiene acceso al sistema basado en varios criterios. Si el
porcentaje de suplantación llega al 100%, se niega el acceso. De lo contrario, se concede el
acceso y se devuelve información sobre el tipo de usuario.

1.2.2 Test-api.js

Este código en test-api.js es un script de prueba que se ejecuta de forma autónoma y realiza
solicitudes al controlador HeuristicaController para verificar su funcionamiento. Utiliza datos de
prueba almacenados en un archivo data y registra los resultados de las autenticaciones y
desautorizaciones de administradores y suplantadores.

Importaciones:

axios: Biblioteca para realizar solicitudes HTTP.

chalk: Biblioteca para dar formato a la salida en la consola (no se utiliza en el código
proporcionado).
AsciiTable: Biblioteca para crear tablas ASCII en la consola.
data: Archivo que contiene los datos de prueba (arrays binarios).

Variables:

admAutenticaciones, admDesautorizaciones, suplantadoresAutenticaciones,

suplantadoresDesautorizaciones: Contadores para las autenticaciones y desautorizaciones de
administradores y suplantadores.
sumaFaseDeteccion, desautorizadas, autenticaciones: Contadores para la suma de las fases
de detección, desautorizaciones y autenticaciones totales.
table1, table2: Tablas ASCII para mostrar los resultados en la consola.

Función anónima auto-ejecutable:

Recorre el array de datos de prueba data.binaryArray.

Realiza una solicitud POST al endpoint 'heuristica/check' del controlador HeuristicaController
con cada elemento del array de datos de prueba.
Si la solicitud es exitosa, registra la información en la tabla1 y aumenta los contadores de
autenticaciones para administradores y suplantadores según corresponda.
Si la solicitud arroja un error, registra la información en la tabla1 y aumenta los contadores de
desautorizaciones para administradores y suplantadores según corresponda. También suma la
fase de detección del error a sumaFaseDeteccion.
Calcula el promedio de la fase de detección dividiendo sumaFaseDeteccion por
desautorizadas.
Agrega los totales a la tabla2.
Muestra las tablas en la consola.

En resumen, test-api.js es un script de prueba que realiza solicitudes al controlador

HeuristicaController con datos de prueba almacenados en un archivo data. Registra y muestra
los resultados en tablas ASCII en la consola. Esto permite evaluar el desempeño del
controlador y su capacidad para detectar y bloquear suplantadores.

2 Disponibilidad

Aplicacion Disponibildad:

Para acceder a la aplicacion de disponibilidad hay que pasar primero por el esquema de
seguridad, está aplicacion se encuentra en la ruta “/order“

Order.js

Componente React llamado OrderView, que permite al usuario ver, editar y guardar un pedido
de productos. El componente utiliza Firebase Firestore para guardar los pedidos en la nube
cuando el usuario está en línea, y el almacenamiento local del navegador (localStorage)
cuando el usuario está desconectado.

Se importan las dependencias necesarias, incluyendo React, useState, useEffect, useNavigate

de react-router-dom y las funciones de Firebase para manejar Firestore.

Se define un array productsData con datos de productos de ejemplo.

Se inicializa la instancia de Firebase y se crea una referencia a la colección 'pedidos' en

Firestore.

Dentro del componente OrderView:

a. Se declaran estados para manejar los productos, el estado de conexión y la cantidad de
solicitudes.
b. Se configura un efecto (useEffect) para escuchar los eventos de conexión y desconexión y
actualizar el estado de conexión (isOnline) en consecuencia.
c. Se define la función handleQuantityChange para actualizar las cantidades de los productos.
d. Se define la función handleSave para guardar los pedidos en Firestore o localStorage según
si el usuario está en línea o no. Esta función también maneja múltiples solicitudes de guardado
en paralelo.
e. Se define la función removeProduct para eliminar un producto del pedido.
f. Se calcula el total del pedido.
g. Se renderiza la interfaz de usuario con una tabla que muestra los productos del pedido, sus
cantidades y precios, y botones para editar las cantidades y guardar el pedido.
Cuando el usuario hace clic en el botón "Guardar", la función handleSave se ejecuta.
Dependiendo del estado de conexión, guarda el pedido en Firestore o localStorage.

Si el usuario está en línea, la función saveRequest crea un nuevo documento en la colección

'pedidos' de Firestore con el pedido actual. Si el usuario está desconectado, la función
saveRequest guarda el pedido en localStorage. Luego, la función processRequests maneja las
múltiples solicitudes de guardado en paralelo, según el valor de requestCount. Por cada
solicitud, se llama a saveRequest con un retraso incremental de 500ms.

En resumen, este componente React permite a los usuarios ver, editar y guardar pedidos de
productos. Utiliza Firebase Firestore para guardar los pedidos en la nube cuando el usuario
está en línea y localStorage cuando el usuario está desconectado. Además, maneja múltiples
solicitudes de guardado en paralelo.