ACTIVIDAD 6

ENTREGA FINAL DEL PROYECTO

WALTER GARCÍA SALAZAR

CÓDIGO: 100107707

Profesor
JOSE CASTRO

CORPORACIÓN UNIVERSITARIA IBEROAMERICANA

FACULTAD DE INGENIERÍA
INGENIERÍA DE SOFTWARE VIRTUAL
BOGOTÁ D.C.
2023 1
 1. RECOLECCIÓN DE REQUISITOS

Para crear un sistema informático de tipo SSO (single sign-on), que permite un inicio de sesión y
perfilamiento centralizado, usando como usuario los correos corporativos de la empresa y su
modelo de autenticación, se identifican los siguientes requisitos.

Seguridad:

● Implementación de estándares de cifrado robustos para proteger la comunicación.

● Manejo seguro de credenciales y almacenamiento encriptado de contraseñas.
● Prevención de ataques comunes como la inyección de código y la falsificación de
solicitudes entre sitios (CSRF).
● Protección contra amenazas como la suplantación de identidad (spoofing) y la
denegación de servicio (DoS).

Autenticación:

● Soporte para múltiples métodos de autenticación (contraseña, autenticación de dos

factores, biometría, etc.).
● Integración con estándares de autenticación como OAuth 2.0 o OpenID Connect.
● Gestión segura de sesiones de usuario.

Autorización:

● Implementación de un sistema de control de acceso basado en roles (RBAC) para

gestionar permisos.
● Asignación flexible de roles y permisos a usuarios y grupos.
● Registro de actividades de autorización para auditoría.

Integración:

● Capacidad para integrarse con una variedad de sistemas de información y aplicaciones.

● Adopción de estándares de integración como APIs RESTful.
● Compatibilidad con estándares de la industria para la interoperabilidad.

2
Interfaz de Usuario:

● Interfaz de administración intuitiva para la gestión centralizada de usuarios, roles y

permisos.
● Panel de control para supervisar las actividades de autenticación y autorización.
● Personalización de la interfaz para adaptarse a las necesidades específicas del usuario.

Escalabilidad:

● Diseño modular que permita la escalabilidad para manejar un crecimiento en el número

de usuarios y sistemas conectados.
● Gestión eficiente de recursos para optimizar el rendimiento.

Notificaciones y Alertas:

● Sistema de notificaciones para informar sobre eventos importantes, como intentos de

acceso no autorizados.
● Configuración de alertas para responder rápidamente a posibles amenazas.

Documentación:

● Documentación clara y completa que describa la arquitectura, los requisitos del sistema y
los procedimientos de implementación.
● Manuales de usuario y administrador para facilitar el uso y la administración del sistema.

Pruebas:

● Plan de pruebas exhaustivas que incluya pruebas de seguridad, pruebas de rendimiento

y pruebas de interoperabilidad.
● Implementación de pruebas de penetración para identificar posibles vulnerabilidades.

Cumplimiento Normativo:

● Asegurarse de que el sistema cumpla con regulaciones y normativas de seguridad y

privacidad relevantes.

3
 2. DISEÑO RÁPIDO

La plataforma estará compuesta por varios módulos: aplicaciones, roles, permisos y usuarios,
contará con un módulo de reportes y conexión al modelo de BI de la organización para generar
data analítica.

La plataforma estará soportada bajo una infraestructura en la nube, garantizando su

disponibilidad y escalabilidad. A nivel de software, la plataforma será un aplicativo web que
conecte con una API y almacene la información en una base de datos.

El sistema, en el módulo usuario, deberá permitir la validación de usuarios con el directorio activo
de la empresa
El sistema deberá permitir que los usuarios puedan acceder a las aplicaciones de acuerdo a los
permisos que tengan.
Los usuarios deben autenticarse una vez a cada aplicación a la que tengan permisos.
Si el usuario ingresa la contraseña errónea a la aplicación, el sistema debe volver a pedirle la
contraseña.
Usuario autenticarse a las aplicaciones, las credenciales deben ser encriptadas bajo algún
algoritmo para aumentar la seguridad.

3. CONSTRUCCIÓN DE PROTOTIPO FUNCIONAL

Control de acceso basado en roles

Un control de acceso basado en roles (RBAC) define el acceso en forma de roles y sus tareas
asociadas. Un rol es un conjunto de derechos y capacidades que definen lo que un usuario
puede hacer. Puede pensar en roles como filtros: agrega usuarios a los roles para aplicar
permisos. Por ejemplo, un rol de Cuentas por cobrar tendrá acceso a herramientas y datos de
cuentas por cobrar, mientras que un rol de Cuentas por pagar no lo tendrá.

Hay dos enfoques en los que puede modelar RBAC: central o jerárquico.

RBAC central

Core RBAC está diseñado mediante la definición de roles: grupos de usuarios con características
comunes. Designa tareas específicas para cada rol definido por el usuario, lo que permite a los
4
usuarios realizar diferentes tareas en función de su(s) rol(es) asignado(s). Un administrador
específico es responsable de definir usuarios, roles y permisos.

Diseño basado en modelos

En un diseño basado en modelos, puede usar entidades de base de datos para representar
roles, permisos, usuarios y sus asociaciones relacionadas.

5
En la figura anterior, puede ver que las principales entidades que participan en el modelado
RBAC incluyen las siguientes:

● El usuario almacena la información del usuario

● El rol almacena información relacionada con el rol
● UserRole almacena el mapeo de roles de usuario
● El permiso almacena las acciones y los recursos en los que se puede realizar la acción.
● RolePermission almacena la asociación de cada rol a su(s) permiso(s) asociado(s)

6
Construcción de una API en Node.js para autenticación utilizando Express y Passport, dos
bibliotecas populares para construir aplicaciones web en Node.js y gestionar la autenticación.

Instalación de dependencias

Asegúrate de tener Node.js y npm instalados. Luego, crea un nuevo proyecto y agrega las
dependencias necesarias:
bash
Copy code

npm init -y
npm install express passport passport-local passport-jwt jsonwebtoken bcrypt

Configuración de Express y Passport:

Crea un archivo app.js para la configuración básica de tu aplicación:

javascript

const express = require('express');

const passport = require('passport');

const LocalStrategy = require('passport-local').Strategy;
const JwtStrategy = require('passport-jwt').Strategy;
const { ExtractJwt } = require('passport-jwt');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

const app = express();

const PORT = 3000;

app.use(express.json());
app.use(passport.initialize());

// Configuración de la estrategia local (usuario/contraseña)

passport.use(new LocalStrategy(
7
(username, password, done) => {
// Aquí deberías validar las credenciales con tu base de datos
// y llamar a done(null, usuario) si las credenciales son válidas
}
));

// Configuración de la estrategia JWT

const jwtOptions = {
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
secretOrKey: 'tu_secreto_secreto', // Cambia esto a una clave segura en producción
};

passport.use(new JwtStrategy(jwtOptions, (payload, done) => {

// Aquí deberías validar el payload del token y llamar a done(null, usuario) si es válido
}));

// Rutas para autenticación

app.post('/login', passport.authenticate('local', { session: false }), (req, res) => {
const token = jwt.sign({ sub: req.user.id }, jwtOptions.secretOrKey);
res.json({ token });
});

app.get('/protected', passport.authenticate('jwt', { session: false }), (req, res) => {

res.json({ message: 'Acceso autorizado' });
});

app.listen(PORT, () => {
console.log(`Servidor escuchando en el puerto ${PORT}`);
});
Este código configura Passport con una estrategia local (usuario/contraseña) y una estrategia
JWT. Las rutas /login y /protected están protegidas por autenticación.

Conexión a la base de datos:

Implementa las funciones para conectar a tu base de datos y validar las credenciales en la
estrategia local.

8
Mejoras y Seguridad:

Implementa el almacenamiento seguro de contraseñas utilizando bcrypt.

Personaliza las respuestas de error según las necesidades de tu aplicación.
Refina las estrategias de Passport según los requisitos de tu sistema.

INTERFAZ

9
10
 4. EVALUACIÓN

La evaluación de un prototipo de software de autenticación y autorización es fundamental para

garantizar su eficacia y seguridad. Aquí hay algunos aspectos clave que puedes considerar
durante la evaluación:

Seguridad:
Pruebas de Penetración: Realiza pruebas de penetración para identificar posibles
vulnerabilidades y asegurarte de que el sistema sea resistente a ataques.
Cifrado: Verifica que la comunicación entre los componentes esté cifrada de manera adecuada.
Manejo de Contraseñas: Evalúa la seguridad en el almacenamiento y manejo de contraseñas,
asegurándote de que se utilicen técnicas seguras como el hash de contraseñas.
Funcionalidad:

Autenticación:
Verifica que el sistema autentique a los usuarios de manera efectiva utilizando diferentes
métodos, como contraseñas, autenticación de dos factores, etc.

11
Autorización:
Asegúrate de que el sistema otorgue acceso adecuado basado en roles y permisos asignados.
Interoperabilidad:

Integración:
Comprueba la capacidad del sistema para integrarse con otros sistemas de información de
manera eficiente.
Estándares: Asegúrate de que el software cumple con estándares de la industria para la
interoperabilidad.

Usabilidad:
Interfaz de Usuario: Evalúa la interfaz de usuario para asegurarte de que sea intuitiva y fácil de
usar, especialmente en la administración de usuarios y permisos.
Experiencia del Usuario: Considera la experiencia general del usuario durante el proceso de
autenticación.

Rendimiento:
Pruebas de Rendimiento: Realiza pruebas para evaluar el rendimiento del sistema bajo cargas
de trabajo variables.

Escalabilidad:
Verifica la capacidad del sistema para escalar y manejar un crecimiento en el número de
usuarios.

5. REFINAMIENTO

● REST con Swagger

Swagger es un conjunto de herramientas de software de código abierto para diseñar, construir,

documentar, y utilizar servicios web RESTful. Fue desarrollado por SmartBear Software e incluye
documentación automatizada, generación de código, y generación de casos de prueba.

La documentación de las APIS en swagger es un estándar de desarrollo en equipos distribuidos,

ya que automatiza una parte de la tarea de la documentación y permite que los equipos front
conozcan los métodos y contratos de las API que tienen que implementar, así estas no tenga un
funcionamiento al 100%, esta práctica se conoce como mockear. 12
Los equipos de back también usan el swagger para verificar el funcionamiento de sus métodos,
sin recurrir a herramientas de terceros como postman, básicamente generan colecciones de
CURL que permiten simular los llamados entre front y back, la gran ventaja de swagger es correr
desde el navegador y poder adjuntar más información de los métodos expuestos como medios
de autenticación o lógica de negocio.

https://api-auth.bancointernacional.com.ec/swagger/#!/External/ApiExtClaimsPost

Este ejemplo de swagger es expuesto por el banco internacional de ecuador y es usado por los
desarrolladores que tengan procesos de integración con la entidad, es una buena práctica usar
versionamiento sobre el swagger para poder tener todo el tracking de los cambios en métodos y
contratos que normalmente tienen un API.

● ReactJS.

Es una librería open source de JavaScript para desarrollar interfaces de usuario. Fue lanzada en
el año 2013 y desarrollada por Facebook, quienes también la mantienen actualmente junto a una
comunidad de desarrolladores independientes y compañías.

Hoy en día muchas empresas de primer nivel utilizan React para el desarrollo de sus
aplicaciones, y es que entre ellas podemos encontrar Facebook, Instagram y el cliente web de
WhastApp (todas propiedad de Facebook), y otras como AirBnb, Uber, Netflix, Twitter, Reddit o
Paypal.

React JS es hoy en día una de las librerías más usadas a nivel de front en Colombia, esto
basado para mi en los siguientes puntos:
- Es la evolución natural de los desarrolladores que venimos de tecnologías .net como asp
o C#, al dar el mismo manejo MVC a nivel de patrón de arquitectura.
- La posibilidad de poder saltar a Reac Native y generar aplicaciones móviles
multiplataforma.
- La gran cantidad de plugins y librerías de terceros, gracias a la gran comunidad de
desarrollo que lo soporta.

En mi experiencia profesional he trabajado varios sistemas en React, de tamaños medianos y

grandes, teniendo buenos resultados a nivel gráfico y de rendimiento.

13
 ● Hooks (useState, useContext, useEffect, useReducer).

Los Hooks son una nueva incorporación en React 16.8. Le permiten usar el estado y otras
características de React sin escribir una clase.

Tradicionalmente, en React.js, se necesitaban componentes basados ​en clases para utilizar

métodos de ciclo de vida y estado debido a la naturaleza de cómo React.js interactúa con
JavaScript como una biblioteca de interfaz de usuario. Sin embargo, con las versiones más
recientes de React.js, los programadores que trabajan en el front-end con React.js ahora pueden
crear componentes funcionales con hooks, que tienen similitudes con los componentes basados
​en clases, pero son:

Más fácil de probar: aunque no tiene tanta influencia en los proyectos personales como en las
aplicaciones implementadas públicamente y de alta disponibilidad, las pruebas son una parte
vital del ciclo de vida de desarrollo de software de cualquier organización. Ya sea que se
presente en forma de servicios de integración/desarrollo continuo como CircleCI o TravisCI o
directamente de probar la funcionalidad individual con bibliotecas como Jest o Selenium, los
enlaces hacen que probar los componentes de React.js sea mucho más fácil que si estuvieran
basados ​en clases.

Más fácil de leer: esto es especialmente útil para proyectos con muchos miembros del equipo.
Aunque uno puede suponer que hay lenguajes de diseño, métodos y guías de estilo particulares
que un equipo podría seguir con respecto a cómo construir la interfaz de usuario, eliminar la
grasa de una arquitectura de componentes basada en clases permite a los ingenieros volver a
escribir programas que se sientan en el núcleo del lenguaje JavaScript en lugar de abstraer
cosas innecesariamente.

Más cerca del JavaScript tradicional: como se mencionó anteriormente, escribir componentes
funcionales reduce la escritura de "funciones especiales" (clases) en JavaScript. No es que
escribir componentes basados ​en clases en JavaScript sea algo malo, ya que JavaScript
técnicamente se puede usar como un lenguaje orientado a objetos debido a su enfoque
multiparadigma, pero se debe a la forma en que JavaScript maneja las clases y el objeto que se
instancia a partir de tales declaraciones de clase. Aquí es donde entran en juego los patrones y
principios subyacentes de JavaScript, como la cadena de prototipos y la herencia, que aunque
no están cubiertas en el alcance de este artículo, son características muy importantes de
JavaScript para conocer. Otra cosa es que si usa componentes basados ​en clases, siempre tiene
14
que extenderse desde una clase React.js incorporada, mientras que los componentes
funcionales son funciones de JavaScript puras donde React.js reconoce el JSX y los ganchos a
través de importaciones.

Menos código intensivo: esto también podría caer bajo el mismo paraguas que "Más fácil de
leer", pero mi intuición me dice que divida esto en su propio punto basado en un paradigma en
ingeniería de software que he mencionado anteriormente; abstracción. Aunque normalmente
tiene que cambiar algo de rendimiento por la implementación de la abstracción, es el oxígeno el
que alimenta la evolución de un producto la mayoría de las veces. Tomar algo, en nuestro código
de caso, que alguna vez fue intrincado, de escasa capacidad y duplicado en muchas instancias y
convertirlo en una solución que es más fácil de implementar, ofrece una mejor experiencia de
ingeniería en general y produce lo mismo, si no más favorable, enfoque que iteraciones
anteriores es la tesis detrás del ciclo de vida de cualquier producto. React.js no es una
excepción.

● Context API.

La API de contexto de React es una forma en que una aplicación de React produce de manera
efectiva variables globales que se pueden pasar. El contexto también se promociona como un
enfoque más fácil y ligero para la gestión del estado utilizando Redux.

La API de contexto es una característica nueva agregada en la versión 16.3 de React que
permite compartir el estado en toda la aplicación (o parte de ella) de forma ligera y sencilla.

React.createContext() es todo lo que necesitas. Devuelve un consumidor y un proveedor.

Provider es un componente que, como sugiere su nombre, proporciona el estado a sus hijos.
Contendrá el store y será el padre de todos los componentes que puedan necesitar esa tienda.
El consumidor como tal es un componente que consume y utiliza el estado.

● Peticiones HTTP con Axios.

Axios es una librería cliente HTTP basada en promesas que se puede usar tanto en Node JS
como en el navegador; por lo que podremos configurar y realizar solicitudes a un servidor y
recibiremos respuestas fáciles de procesar.
Nos ayuda en el envío de peticiones asíncronas HTTP, así ayudándonos a realizar las
operaciones CRUD. 15
Normalmente Axios es la librería estándar en javascript para construir proxy, generar peticiones y
materializar la data de respuesta al trabajar aplicaciones cliente web y servidor servidor rest, con
Axios podemos realizar peticiones HTTP básicas (GET, POST, PUT, DELETE) siempre
respetando el estándar html, de trabajar los contratos en formato JSON y manejar los estados de
respuesta HTTP y ss headers de seguridad.
● Rutas y navegación.

Realizar navegación en la aplicación, es tan sencillo como entender la documentación de React

Router DOM. La navegación consiste en definir rutas, para que un componente sea visualizado
al dirigirse a la ruta en el navegador. También podemos navegar entre rutas, a través de enlaces
y hooks, para enviarle un estado asociado al componente navegado.

Gracias a la librería react-router-dom, podemos crear rutas fijas, por ejemplo, para mostrar
formularios, listas o tablas de datos, entre otros. También podemos crear rutas dinámicas, para
mostrar los datos de un cliente específico, un producto identificado, alguna orden o contrato, etc.

Debemos entender que cuándo deseemos implementar un sistema de navegación, lo primero es

determinar qué tipo de sistema de ruteo queremos, si la navegación física del navegador usando
BrowserRouter, una navegación de ruta fija con hash variable usando HashRouter, una
navegación en memoria con MemoryRouter o demás estilos como estáticas y demás que
encontraremos en la documentación. Lo siguiente será definir cada ruta en nuestro Switch y
determinar el componente o los componentes que se mostrarán bajo la ruta mediante Route.
Esto nos permitirá darle riqueza a nuestra aplicación, y atacar problemáticas comunes como las
de la siguiente lista.
● Definir una ruta que muestre una lista o tabla de datos.
● Definir una ruta que muestre un formulario para agregar nuevos datos a la lista o tabla.
● Definir una ruta que detalle un elemento de la lista o tabla de datos.
● Definir una ruta que edite un elemento de la lista o tabla
● Definir una ruta que muestre los datos públicos de un elemento de la lista, recibiendo los
parámetros desde la url, como el identificador y token de acceso.
● Definir rutas seguras que requieran un token de acceso provisto sobre la url o bajo el
estado de navegación.

Así, podremos ir extendiendo la lista anterior, con problemáticas comunes entre una aplicación y
otra, para ir consolidando hooks y demás componentes reutilizables de un proyecto a otro.

16
 6. ENTREGA

En el siguiente github presentó la versión mvp del sistema con funcionalidades de CRUD,
autenticación, autorización y persistencia.

https://github.com/wgarcia43/logapp

7. DIAGRAMA DE CLASES

Usuario:

Representa un usuario en el sistema.

Contiene atributos como idUsuario, nombreUsuario, y contrasena.
Tiene un método autenticar() que puede ser utilizado durante el proceso de inicio de sesión.
17
Proveedor:

Representa un proveedor de servicios externo que participa en el SSO.

Contiene atributos como idProveedor, nombreProveedor, y urlAutenticacion.
Tiene un método autenticar() que devuelve una instancia de la clase Sesion.

SistemaSSO:

Representa el sistema central de Single Sign-On.

Contiene una lista de proveedores (proveedores) y una lista de sesiones activas (sesiones).
Tiene métodos para autenticar usuarios con proveedores externos (autenticar()) y cerrar
sesiones activas (cerrarSesion()).

Sesion:

Representa una sesión activa después de la autenticación exitosa.

Contiene atributos como idSesion, usuario, fechaInicio, y fechaExpiracion.
La clase Sesion está asociada a la clase Usuario para representar la relación entre un usuario y
su sesión.

18
19
 8. DICCIONARIO DE DATOS

Entidad: Usuario
Descripción: Representa a un usuario registrado en el sistema.
Atributos:
idUsuario (identificador único del usuario)
nombreUsuario (nombre de usuario único)
contrasena (contraseña del usuario)
Métodos:
autenticar(): Método utilizado durante el proceso de inicio de sesión.
Proveedor:

Entidad: Proveedor
Descripción: Representa un proveedor de servicios externo que participa en el SSO.
Atributos:
idProveedor (identificador único del proveedor)
nombreProveedor (nombre del proveedor)
urlAutenticacion (URL de autenticación del proveedor)
Métodos:
autenticar(): Método que realiza la autenticación del usuario y devuelve una sesión.
Sesion:

Entidad: Sesion
Descripción: Representa una sesión activa después de una autenticación exitosa.
Atributos:
idSesion (identificador único de la sesión)
usuario (referencia al Usuario asociado)
20
fechaInicio (fecha y hora de inicio de la sesión)
fechaExpiracion (fecha y hora de expiración de la sesión)
Métodos:
No hay métodos definidos en el diccionario, pero podría haber métodos para gestionar la sesión.
SistemaSSO:

Entidad: SistemaSSO
Descripción: Representa el sistema central de Single Sign-On.
Atributos:
proveedores (lista de proveedores externos)
sesiones (lista de sesiones activas)
Métodos:
autenticar(usuario, proveedor): Método que autentica a un usuario con un proveedor externo y
devuelve una sesión.
cerrarSesion(sesion): Método que cierra una sesión activa.

9. VIDEO

https://www.youtube.com/watch?v=n40fOiIGdyA

21
 BIBLIOGRAFÍA

Gual Ortí, J. (2016). Fundamentos del modelado y prototipado virtual en el diseño de

productos.. D - Universitat Jaume I. Servei de Comunicació i Publicacions. Capítulo 2 y 3
páginas 3 a la 5.

Suárez, E. C. (2017). Prototipo, Contexto e Ingeniería del Software. Estudios de Postgrado,

en Sistemas de Información, 2-20.

22