Aplicación Web para el análisis, gestión y visualización del directorio activo

Aplicación Web para el Análisis, Gestión y Visualización del Directorio Activo Estudiante: Sampayo Rodríguez, Eder Director/Directora: Gojenola Galletebeitia, Koldobika Curso: 2023-2024 Fecha: 26 de junio de 2024 GRADO EN INGENIERÍA INFORMÁTICA DE GESTIÓN Y SISTEMAS DE INFORMACIÓN TRABAJO FIN DE GRADO Trabajo Fin de Grado Eder Sampayo Rodríguez Resumen: Este documento contiene la memoria del Trabajo de Fin de Grado (TFG) de Eder Sampayo Rodríguez, estudiante de Ingeniería Informática de Gestión y Sistemas de Información en la Escuela de Ingeniería de Bilbao de la Universidad del País Vasco (UPV/EHU). El proyecto es una aplicación web que tiene como objetivo ayudar al análisis, gestión y visualización del Directorio Activo. Esta herramienta está diseñada para facilitar a los administradores de sistemas la gestión de los recursos del Directorio Activo de manera más eficiente, visual e intuitiva. La aplicación permite obtener métricas del Directorio Activo en un panel que muestra la información de los objetos, desbloquear usuarios, gestionar y visualizar detalladamente los usuarios y grupos, comparar y categorizar los usuarios de 2 grupos y los grupos de 2 usuarios, exportar los datos obtenidos y registrar todos los cambios realizados desde la aplicación al Directorio Activo en una base de datos. El sistema está compuesto por un Front-End desarrollado en Angular, un Back-End en .NET Core y una base de datos en SQL Server, todos ellos integrados con el Directorio Activo y desplegados en un servidor con IIS. Además, se utilizan librerías como AG-Grid, Chart.js y ApexCharts.js para la visualización de datos, y SweetAlert2 para la gestión de notificaciones. El tutor de este proyecto es Koldobika Gojenola Galletebeitia, profesor del departamento de Lenguajes y Sistemas Informáticos en la Escuela de Ingenieros de Bilbao. Palabras Clave: Directorio Activo, Aplicación Web, Análisis de Datos, Gestión de Datos, Visualización de Datos Trabajo Fin de Grado Eder Sampayo Rodríguez Abstract: This document contains the Final Degree Project report (TFG) of Eder Sampayo Rodríguez, a student of Computer Engineering in Management and Information Systems at the School of Engineering of Bilbao, University of the Basque Country (UPV/EHU). The project is a web application aimed at assisting in the analysis, management, and visualization of Active Directory. This tool is designed to make Active Directory resource management more efficient, visual, and intuitive for system administrators. The application allows for obtaining metrics from Active Directory in a dashboard that displays information about objects, unlocking users, managing and viewing users and groups in detail, comparing and categorizing users between 2 groups and groups between 2 users, exporting obtained data, and logging all changes made from the application to Active Directory into a database. The system consists of a Front-End developed in Angular, a Back-End in .NET Core, and a SQL Server database, all integrated with Active Directory and deployed on a server with IIS. Additionally, libraries such as AG-Grid, Chart.js, and ApexCharts.js are used for data visualization, and SweetAlert2 for notification management. The supervisor of this project is Koldobika Gojenola Galletebeitia, a professor in the Department of Languages and Computer Systems at the School of Engineering of Bilbao. Key Words: Active Directory, Web Application, Data Analysis, Data Management, Data Visualization Trabajo Fin de Grado Eder Sampayo Rodríguez Laburpena: Dokumentu honetan Eder Sampayo Rodríguez-en Gradu Amaierako Lanaren (TFG) memoria jasotzen da, Bilboko Ingeniaritza Eskolako Informatika Ingeniaritzako ikaslea Euskal Herriko Unibertsitatean (UPV/EHU). Proiektua web aplikazio bat da, Direktorio Aktiboaren analisia, kudeaketa eta bistaratzea laguntzeko helburua duena. Tresna hau administratzaile sistemei Direktorio Aktiboaren baliabideen kudeaketa errazteko diseinatuta dago, baliabideak eraginkorrago, ikusgarriago eta intuitiboago kudeatzeko. Aplikazioak Direktorio Aktibotik metrikak lortzen ditu panel batean objektuen informazioa erakusten, erabiltzaileak desblokeatzen, erabiltzaile eta taldeak zehatz ikusten eta kudeatzen, bi taldeko erabiltzaileak eta bi erabiltzaileko taldeak alderatzen eta kategorizatzen, lortutako datuak esportatzen eta aplikaziotik Direktorio Aktiboan egindako aldaketak datu-base batean erregistratzen ditu. Sistema Angular-en garatutako Front-End batez, .NET Core-ko BackEnd batez eta SQL Server datu-base batez osatuta dago, guztiak Direktorio Aktiboarekin integratuta eta IIS duen zerbitzarian instalatuta. Gainera, AG-Grid, Chart.js eta ApexCharts.js liburutegiak erabiltzen dira datuak bistaratzeko eta SweetAlert2 jakinarazpenen kudeaketarako. Proiektu honen tutorea Koldobika Gojenola Galletebeitia da, Bilboko Ingenieritza Eskolako Hizkuntzak eta Sistema Informatikoak sailako irakaslea. Gako-hitzak: Direktorio Aktiboa, Web Aplikazioa, Datuen Analisia, Datuen Kudeaketa, Datuen Bistaratzea Trabajo Fin de Grado Eder Sampayo Rodríguez Resumen Gráfico | Graphical Abstract | Laburpen Grafikoa Figura 1. Resumen Gráfico |Graphical Abstract |Laburpen Grafikoa. Índices Índice Abreviaturas ................................ 17 Memoria ................................... 1 1 Introducción ............................... 1 1.1 Antecedentes ............................. 1 1.2 Conceptos .............................. 2 2 Planificación ............................... 6 2.1 Objetivos del Proyecto ....................... 6 2.1.1 Objetivos Generales: ..................... 7 2.1.2 Objetivos Técnicos: ..................... 8 2.2 Beneficios que aporta el proyecto .................. 9 2.2.1 Beneficios económicos .................... 9 2.2.2 Beneficios de tiempo ..................... 9 2.2.3 Beneficios auditoría del Directorio Activo ......... 10 2.2.4 Beneficios de comunicación ................. 10 2.3 Análisis del estado del arte ..................... 10 2.3.1 Active Directory Users and Computers .......... 10 2.3.2 ManageEngine ADManager Plus .............. 11 2.4 Alcance del Proyecto ........................ 13 2.5 Metodología seguida en el desarrollo del trabajo ......... 14 2.5.1 Metodología Ágil Scrum .................. 14 2.5.2 Kanban ............................ 14 2.5.3 Combinación de Scrum y Kanban ............. 14 2.6 División de Sprints ......................... 15 2.7 Gestión de las tareas con Kanban ................. 15 2.8 Planificación temporal ....................... 16 2.9 Diagrama de Gantt/cronograma .................. 18 2.10 Análisis de riesgos .......................... 19 3 Análisis y Diseño ............................ 20 3.1 Análisis ................................ 20 3.2 Diseño ................................ 22 3.2.1 Diseño del Front-End .................... 22 3.2.2 Diseño del Back-End .................... 24 3.2.3 Diseño de la Base de Datos ................. 26 3.2.4 Conexión entre el Front-End y el Back-End ........ 27 3.2.5 Conexión entre el Back-End y el Directorio Activo . . . . 29 6 Trabajo Fin de Grado Eder Sampayo Rodríguez 3.2.6 Conexión entre el Back-End y SQL Server ......... 31 3.2.7 Conexión entre todas las tecnologías ............ 33 4 Herramientas Utilizadas ....................... 34 4.1 Entornos de desarrollo ....................... 34 VS Code y VS 2022 ............................ 34 4.2 Herramientas del Front-End .................... 35 Angular .................................. 35 AG-Grid .................................. 35 SweetAlert2 ................................ 36 4.3 Herramientas del Back-End ..................... 37 .NET .................................... 37 Active Directory ............................. 37 SQL Server ................................ 38 IIS ..................................... 39 4.4 Herramientas de gestión de proyectos ............... 40 Trello ................................... 40 GitHub .................................. 40 4.5 Herramientas de documentación .................. 41 Overleaf .................................. 41 4.6 Herramientas de diseño y planificación .............. 42 Lucidchart ................................. 42 GanttPRO ................................. 42 Miro y Canva ............................... 43 5 Desarrollo ................................ 44 5.1 Desarrollo Front-End ........................ 44 5.1.1 Componentes y Enrutamiento ............... 44 5.1.2 Servicios ........................... 46 5.1.3 Gestión de los accesos - AuthGuard ............ 46 5.1.4 Compartir datos entre componentes ............ 47 5.1.5 Solicitudes HTTP desde el Front-End al Back-End . . . . 48 5.1.6 Gestión de la caché ..................... 52 5.1.7 Interceptor .......................... 53 5.1.8 AG-Grid ........................... 54 5.1.9 SweetAlert2 ......................... 55 5.1.10 Gráficos ........................... 58 5.1.11 Variables de entorno ..................... 60 5.1.12 Almacenamiento local y cifrado .............. 61 5.2 Desarrollo Back-End ........................ 63 5.2.1 Controladores ........................ 63 ÍNDICE Trabajo Fin de Grado Eder Sampayo Rodríguez 5.2.2 Servicios ........................... 64 5.2.3 Conexión al Directorio Activo ............... 64 5.2.4 Conexión a la base de datos ................ 69 5.2.5 Interfaces e Inyecciones ................... 72 5.2.6 Middlewares ......................... 74 5.2.7 Variables de configuración ................. 75 5.3 Interfaz gráfica de la aplicación ................... 76 5.3.1 Boceto de la interfaz .................... 76 5.3.2 Diseño final ......................... 83 5.4 Despliegue en IIS .......................... 83 5.4.1 Fichero web.config del Front-End .............. 84 5.4.2 Manual de despliegue .................... 84 6 Conclusiones .............................. 85 6.1 Objetivos alcanzados ........................ 85 6.2 Posibles mejoras futuras ...................... 85 6.3 Tiempos finales ........................... 87 6.4 Reflexión personal .......................... 90 Bibliografía ................................. 91 Anexo I: Descripción de las tareas del proyecto .......... 1 Gestión .................................. 1 Formación ................................. 3 Desarrollo ................................. 6 Pruebas .................................. 8 Documentación .............................. 10 Anexo II: Descripción de los Sprints del proyecto ......... 13 Sprint 1: Interfaz, Análisis y Diseño ................... 13 Sprint 2: Menú de Navegación, Autenticación y Autorización ..... 13 Sprint 3: Dashboard ........................... 14 Sprint 4: Combinación de Grupos .................... 15 Sprint 5: Usuarios ............................. 15 Sprint 6: Grupos ............................. 16 Sprint 7: Logs ............................... 17 Sprint 8: Fusión de Usuarios de Grupos ................. 18 Sprint 9: Despliegue y Pruebas ...................... 19 Anexo III: Descripción de los riesgos del proyecto ......... 21 Riesgos de Gestión ............................ 21 Riesgos Humanos ............................. 22 ÍNDICE 40 Riesgo de mala gestión de los datos sensibles. ........... 24 41 Riesgo de falsas alarmas por pruebas. ............... 25 42 Riesgo de imposible integración entre tecnologías. ........ 26 43 Riesgo de mal rendimiento. ..................... 26 44 Riesgo de complejidad. ....................... 27 45 Tabla de puertos para desarrollo y producción .......... 31 46 Requisitos de Hardware y Software para ejecutar aplicaciones Angular 17 y .NET Core 8 en IIS. ................. 52 Abreviaturas Trabajo Fin de Grado Eder Sampayo Rodríguez Abreviaturas AD Directorio Activo / Active Directory SPA Aplicación de Página Única / Single-Page Application PWA Aplicación Web Progresiva / Progressive Web Application IIS Internet Information Services BBDD Base de Datos DB Base de Datos / Database MS Microsoft OU Unidad Organizativa / Organizational Unit TI Tecnologías de la Información EDT Estructura de Desglose del Trabajo CORS Compartir Recursos entre Distintos Orígenes / Cross-Origin Resource Sharing HTTP Protocolo de Transferencia de Hipertexto / Hypertext Transfer Protocol HTTPS Protocolo de Transferencia de Hipertexto Seguro / Hypertext Transfer Protocol Secure URL Localizador Uniforme de Recursos / Uniform Resource Locator URI Identificador Uniforme de Recursos / Uniform Resource Identifier SSL Capa de Sockets Seguros / Secure Sockets Layer LDAP Protocolo Ligero de Acceso a Directorios / Lightweight Directory Access Protocol API Interfaz de Programación de Aplicaciones / Application Programming Interface ÍNDICE DE TABLAS Trabajo Fin de Grado Eder Sampayo Rodríguez IDE Entorno de Desarrollo Integrado / Integrated Development Environment MVC Modelo-Vista-Controlador SO Sistema Operativo SWAL SweetAlert LINQ Consulta Integrada en el Lenguaje / Language Integrated Query CSV Valores Separados por Comas / Comma-Separated Values HTML Lenguaje de Marcado de Hipertexto / Hypertext Markup Language CSS Hojas de Estilo en Cascada / Cascading Style Sheets SCSS Sassy CSS TS TypeScript SQL Lenguaje de Consulta Estructurada / Structured Query Language XML Lenguaje de Marcado Extensible / Extensible Markup Language VS Visual Studio NPM Administrador de Paquetes de Node / Node Package Manager CLI Interfaz de Línea de Comandos / Command Line Interface ORM Mapeo Objeto-Relacional / Object-Relational Mapping REST Transferencia de Estado Representacional / Representational State Transfer DOM Modelo de Objetos del Documento / Document Object Model JSON Notación de Objetos de JavaScript / JavaScript Object Notation AES Estándar de Encriptación Avanzada / Advanced Encryption Standard ÍNDICE DE TABLAS Trabajo Fin de Grado Eder Sampayo Rodríguez SaaS Software como Servicio / Software as a Service LLM Modelo de Lenguaje de Gran Tamaño / Large Language Model GPT Transformador Generativo Preentrenado / Generative Pre-trained Transformer IA Inteligencia Artificial TFG Trabajo de Fin de Grado ÍNDICE DE TABLAS Memoria Trabajo Fin de Grado Eder Sampayo Rodríguez Memoria 1. Introducción En el entorno actual de las organizaciones, gestionar de manera eficiente la infraestructura tecnológica y los recursos humanos es crucial. Dentro de este marco, el Directorio Activo (AD) [1] es esencial para la gestión centralizada de todos los usuarios, permisos, equipos y otros recursos esenciales de la infraestructura TI. El Directorio Activo no solo ayuda a la administración, sino que también contribuye a la gestión de la seguridad y el accesos a los datos. Sin embargo, a medida que aumenta la complejidad de esta estructura, se hace cada vez más complicado cumplir con los estándares de seguridad. Este Trabajo de Fin de Grado presenta una aplicación web innovadora para optimizar la administración del Directorio Activo de una empresa. La aplicación no solo es capaz de analizar el estado de salud del AD, sino que también mejora su gestión y proporciona herramientas avanzadas de visualización y búsqueda, con el objetivo de tener un rápido acceso a todos los datos de interés para los administradores. A lo largo de este documento, se mostrará cómo se ha desarrollado el proyecto, abarcando su gestión, funcionalidades, diseño, tecnologías e implementación. La figura 1muestra un resumen gráfico del proyecto. 1.1 Antecedentes Este proyecto se ha desarrollado durante las prácticas de empresa en Petronor, donde me propusieron la idea de realizar una aplicación web para analizar, gestionar y visualizar su Directorio Activo. La idea me pareció muy interesante, ya que el Directorio Activo es ampliamente utilizado en la mayoría de empresas hoy en día. De hecho, aproximadamente un 90 % de las empresas incluidas en el Fortune 1000 lo utilizan [2]. Asimismo, lo vi como una oportunidad para aprender a desarrollar una aplicación web desde cero, abarcando su diseño, implementación y despliegue, además de que el poder estar en un proyecto es algo que me hacía bastante ilusión. Página 1 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 1.2 Conceptos Antes de comenzar, es importante explicar los conceptos que se abordarán a lo largo del proyecto. Conviene entender cada uno de ellos para asegurar la total comprensión del trabajo: Front-End: Es la parte de una aplicación con la que los usuarios interactúan directamente, abarcando el diseño, la estructura y el comportamiento de la interfaz de usuario. Back-End: Es la parte de una aplicación que maneja la lógica del servidor, las bases de datos y la integración con otros servicios; no es visible para el usuario final. Modelo-Vista-Controlador: Es un patrón de diseño de software que separa una aplicación en tres componentes interconectados: Modelo (datos), Vista (interfaz de usuario) y Controlador (lógica de negocio). Componente Angular: Es una parte modular y reutilizable de la interfaz de usuario en una aplicación Angular. Define la vista y la lógica asociada, permitiendo construir interfaces complejas mediante la combinación de múltiples componentes. Servicio Angular: Es una clase en Angular que proporciona una funcionalidad específica, usualmente compartida entre varios componentes (reutilización), y facilita la gestión de lógica empresarial y la comunicación con APIs. Los servicios se usan frecuentemente para manejar tareas como llamadas a APIs, manipulación de datos o compartir información entre componentes. También se utilizan para autorizar accesos a partes de la aplicación web (guardias). Directiva Angular: Las directivas en Angular son instrucciones que se pueden utilizar en código HTML para modificar el comportamiento o el aspecto de los elementos del DOM (Document Object Model). Son una forma de agregar funcionalidades dinámicas a un HTML. Rutas Angular: Las rutas en Angular se utilizan para gestionar la navegación dentro de una aplicación de una sola página (SPA). Permiten cargar diferentes componentes y vistas en función de la URL actual, sin tener que recargar la página completa. Endpoint: Es una URL específica donde un servidor espera recibir solicitudes 1.2 Conceptos Página 2 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez y proporcionar respuestas, actuando como punto de acceso a una API. Controlador: Es un componente que maneja las solicitudes entrantes, procesa la lógica de negocio y devuelve las respuestas adecuadas a las vistas o al cliente. Servicio Back-End: Es un servicio que se encarga de gestionar la lógica del lado del servidor, interactuando con bases de datos, APIs y otros servicios para procesar datos. Repositorio: Es un componente que proporciona una abstracción sobre la capa de persistencia, permitiendo operaciones de almacenamiento, recuperación y manipulación de datos en una BBDD. Contexto de BBDD:Es una clase que gestiona la conexión y las operaciones entre una aplicación y la base de datos, generalmente en el marco de un ORM (Object-Relational Mapping). Entity Framework: Es un ORM (Mapeador Objeto-Relacional) de Microsoft para .NET que facilita el acceso y manejo de bases de datos relacionales. Middleware: Es un software que actúa como intermediario en la comunicación entre el Front-End y el Back-End, gestionando el flujo de datos y las solicitudes. Linktree: Es una herramienta que permite crear una página única con múltiples enlaces, facilitando compartir varios recursos a través de una sola URL, comúnmente usada en perfiles de redes sociales. Framework: Es una estructura de soporte y conjunto de herramientas y bibliotecas que facilita el desarrollo de software, proporcionando soluciones predefinidas y prácticas recomendadas. API RESTful: Es una aplicación o servicio web que sigue los principios de REST para su diseño e implementación. Una aplicación RESTful utiliza URIs para identificar recursos, métodos HTTP para realizar operaciones sobre esos recursos, y formatos de representación (como JSON oXML) para transmitir datos entre el cliente y el servidor. Usuario bloqueado: Es un estado de una cuenta de usuario en el que se impide temporalmente el acceso debido a actividades sospechosas o violaciones de políticas. 1.2 Conceptos Página 3 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Usuario deshabilitado: Es un estado de una cuenta de usuario en el que se ha revocado el acceso de manera permanente o indefinida, generalmente por razones administrativas. Usuario con cuenta expirada: Es una cuenta de usuario que ya no puede acceder a los servicios porque ha superado una fecha límite de validez establecida. Controlador de Dominio: Es un servidor que gestiona la autenticación y autorización de usuarios y recursos dentro de una red, aplicando políticas de seguridad y acceso. Bosque, Árbol, Dominio: Son estructuras jerárquicas en servicios de directorio: un bosque es un conjunto de árboles, un árbol es un conjunto de dominios, y un dominio es un grupo de recursos administrados. Unidad Organizativa: Es una estructura dentro del AD que organiza y administra recursos de red, como usuarios, grupos y dispositivos, según la estructura jerárquica de la organización. Las unidades organizativas permiten aplicar políticas de seguridad y administrativas de manera eficiente al agrupar recursos relacionados. Autenticación y Autorización: La autenticación verifica la identidad de un usuario, mientras que la autorización determina los permisos y acceso a recursos que tiene ese usuario. Git: Es un sistema de control de versiones distribuido que permite a los desarrolladores gestionar y mantener un historial de cambios en el código fuente de un proyecto. Variable de entorno: Es un valor dinámico que afecta al funcionamiento de una aplicación, el cual se puede configurar. Interfaz de clase: Conjunto de métodos y propiedades que define el comportamiento público de una clase en programación orientada a objetos. Sirve como especificación para las clases que la implementan, garantizando ciertas funcionalidades. Logs: Registros detallados de eventos, acciones o mensajes generados durante la ejecución de un sistema. Útiles para seguimiento, diagnóstico, análisis y auditoría. 1.2 Conceptos Página 4 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Gestionar equipos y unidades organizativas (OUs) Establecer políticas y permisos Realizar búsquedas y aplicar filtros Al ser una herramienta nativa de Microsoft, se integra perfectamente con el Directorio Activo y otras soluciones de la empresa. El objetivo de nuestra aplicación es que sea capaz de convivir con esta, por lo que no se va a intentar reemplazarla, sino que se añadirán funcionalidades y métricas de análisis que la aplicación de Microsoft no puede ofrecer. Por ejemplo, esta aplicación no cuenta con un Dashboard, ni tiene la capacidad de categorizar usuarios de un grupo o grupos de un usuario. Aún así, sí que cuenta con filtros de búsqueda como nuestra aplicación, aunque estos filtros son poco intuitivos y complicados de usar, por lo que se competirá en ese aspecto. Figura 2. Foto de la aplicación ‘Active Directory Users and Computers’ 2.3.2 ManageEngine ADManager Plus ADManager Plus [4] (Figura 3) es una herramienta comercial de terceros creada por ManageEngine que ofrece una gama más amplia de funcionalidades en comparación con las herramientas nativas de Microsoft. Esta herramienta se podría considerar como una competidora directa, por lo que es importante comprender qué ofrece y cuáles son sus características: Gestión de usuarios, grupos, equipos y contraseñas 2.3 Análisis del estado del arte Página 11 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Generación de informes sobre el estado del AD Interfaz intuitiva En el caso de esta herramienta, no ofrece la posibilidad de categorizar usuarios de un grupo o grupos de un usuario, funcionalidad que ahorraría bastante trabajo administrativo. Por el contrario, sí que ofrece un análisis estado de salud del AD en un Dashboard, por lo que para competir contra ello, se ofrecerá la posibilidad de acceder a la información de los datos obtenidos en nuestro Dashboard, además de poder exportarlos. Figura 3. Foto de la aplicación ‘ManageEngine ADManager Plus’ 2.3 Análisis del estado del arte Página 12 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 2.4 Alcance del Proyecto El alcance de este proyecto abarca todas las tareas que hay que realizar para llevar a cabo el trabajo en su totalidad. Para ello, se ha desarrollado una estructura de desglose de trabajo (EDT), donde podemos diferenciar entre las tareas principales y sus subtareas (Figura 4): Figura 4. Diagrama EDT 2.4 Alcance del Proyecto Página 13 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez La descripción de las tareas se encuentra en el Anexo I (sección 6.4). 2.5 Metodología seguida en el desarrollo del trabajo Para la gestión del proyecto, se emplea una combinación de la metodología ágil Scrum individual [5] y el enfoque Kanban [6]. Esta combinación aprovecha lo mejor de ambos enfoques para gestionar eficazmente el trabajo, permitiendo adaptabilidad a los cambios y manteniendo una entrega continua de la aplicación. 2.5.1 Metodología Ágil Scrum La metodología ágil Scrum es un marco de trabajo que se enfoca en la colaboración, la adaptabilidad y la entrega continua. Aunque está diseñada para equipos, se adaptará a mi situación individual (Personal Scrum). Esta metodología se organiza en Sprints, que son periodos de tiempo cortos y fijos en los que se lleva a cabo una parte del desarrollo del proyecto. Durante cada Sprint, se planifican, desarrollan, prueban y entregan funcionalidades de la aplicación. 2.5.2 Kanban Kanban es un enfoque visual para gestionar el trabajo, que se basa en el principio de flujo continuo. Se utilizará un tablero Kanban para visualizar el flujo de trabajo y las tareas pendientes, en progreso, en revisión y completadas. 2.5.3 Combinación de Scrum y Kanban La combinación de Scrum yKanban permite gestionar eficazmente el proyecto. Se utilizan los principios de Scrum, como los Sprints y las reuniones diarias, para establecer objetivos claros y realizar un seguimiento regular del progreso. Además, se aprovechan el enfoque visual y el flujo continuo de Kanban para gestionar las tareas de manera flexible y adaptarse a los cambios en el proyecto. Esta combinación garantiza una entrega continua de valor al proyecto, manteniendo la adaptabilidad necesaria para enfrentar los desafíos que puedan surgir durante el desarrollo. 2.5 Metodología seguida en el desarrollo del trabajo Página 14 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 2.6 División de Sprints La división de los Sprints se encuentra en el Anexo II (sección 6.4). 2.7 Gestión de las tareas con Kanban Para desarrollar los tableros Kanban, se ha utilizado Trello.Trello [7] es una herramienta de gestión de proyectos online que utiliza tableros para organizar tareas. Cada tablero en Trello representa un proyecto o una parte de un proyecto y está dividido en listas, que a su vez contienen tarjetas individuales que representan tareas a las que puedes adjuntar una descripción, archivos, etc. Estas tarjetas pueden moverse entre listas según su estado o progreso. Para este proyecto, se han creado 4 tableros: Desarrollo del Front-End Desarrollo del Back-End Despliegue Documentación Asimismo, se han creado 4 listas en cada tablero: To Do Doing In Review Done A continuación, se muestra un ejemplo de un tablero en Trello (Figura 5): 2.6 División de Sprints Página 15 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 5. Trablero en Trello 2.8 Planificación temporal En la siguiente sección se muestran las tareas mencionadas anteriormente, junto con una estimación de horas que llevará completarlas. Esta planificación es importante para garantizar que el proyecto avanza de manera eficiente y se completa dentro de los plazos estimados. Tareas Estimación Gestión 16 horas 1.1 Definición del tema del proyecto 2 horas 1.2 Definir objetivos del proyecto 2 horas 1.3 Planificar las tareas a realizar 4 horas 1.4 Elegir las tecnologías 2 horas 1.5 Reuniones con los interesados 6 horas Formación 27 horas 2.8 Planificación temporal Página 16 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 2.1 Formación en Directorio Activo 5 horas 2.2 Formación en Angular 10 horas 2.3 Formación en .NET / C# 4 horas 2.4 Formación en MS SQL Server 1 hora 2.5 Formación en IIS 2 horas 2.6 Formación en integración tecnologías 5 horas Desarrollo 193 horas 3.1 Boceto de la interfaz 3 horas 3.2 Análisis 3 horas 3.3 Diseño 4 horas 3.4 Implementación 180 horas 3.5 Despliegue 3 horas Pruebas 30 horas 4.1 Obtención y visualización de datos 6 horas 4.2 Acciones de usuario 10 horas 4.3 Acciones de administrador 8 horas 4.4 Despliegue 6 horas Documentación 70 horas 5.1 Redacción de la memoria 50 horas 2.8 Planificación temporal Página 17 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.2 Corrección de fallos de la memoria 5 horas 5.3 Preparación de la defensa 15 horas TOTAL 336 horas Tabla 1: Estimación de tiempos. 2.9 Diagrama de Gantt/cronograma A continuación, se muestra la planificación del proyecto a través de un diagrama de Gantt (Figura 6), donde podemos observar el tiempo estimado que llevará completar cada tarea, en un intervalo de semanas: Figura 6. Diagrama de Gantt Es importante mencionar que este proyecto se realizará durante el horario de prácticas, en una jornada laboral de 6-7 horas. Aún así, no se invertirá 2.9 Diagrama de Gantt/cronograma Página 18 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez todo el horario de las prácticas en el proyecto. También se dedicarán horas fuera del horario laboral, sobre todo para la documentación. 2.10 Análisis de riesgos Antes de comenzar con la elaboración, es necesario identificar y gestionar todos los riesgos que puedan surgir, con el objetivo de elaborar planes para minimizar su efecto sobre el proyecto. Estos riesgos podrían retrasar el proyecto, paralizarlo o incluso impedirlo en el peor de los casos. Se ha desarrollado un diagrama con los tipos de riesgos del proyecto (Figura 7), además de una documentación de cada uno de ellos: Figura 7. Diagrama de riesgos La descripción de los riesgos se encuentra en el Anexo III (sección 6.4). 2.10 Análisis de riesgos Página 19 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 3. Análisis y Diseño Una vez definidos los objetivos y planificado las tareas por realizar, es el turno de realizar un análisis y diseño de la aplicación que se va a desarrollar. En esta sección, se van a definir los casos de uso de la aplicación, además del diseño de cada una de las tecnologías y la integración entre ellas. Es importante realizar un riguroso análisis y diseño por las siguientes razones: Reducción de Costos y Tiempos: Tener un esquema planificado evita la necesidad de sobrepensar, teniendo más claro desde el inicio la base que hay que seguir. Mejora de la Calidad del Sistema: Al identificar todos los elementos del sistema y cómo se van a comunicar, se tienen en cuenta factores como la seguridad, la escalabilidad y el rendimiento, lo cual aumenta su calidad. Flexibilidad y Adaptabilidad: El poder contar con un diseño inicial permite incorporar nuevas funcionalidades o realizar modificaciones con más rapidez. Mantenimiento Futuro: Un análisis y diseño bien documentados facilitan el mantenimiento, la realización de mejoras y la corrección de errores en la aplicación. 3.1 Análisis Durante esta fase de análisis, se mostrarán los casos de uso de la aplicación. Los casos de uso son una técnica para describir las interacciones entre usuarios y el sistema. Cada caso de uso describe una secuencia de acciones, mostrando cómo se inicia la interacción, qué acciones realiza el usuario y cómo responde el sistema: Página 20 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Como en cualquier Log (registro de actividad), necesitamos una fecha y hora, la operación que se ha realizado y los detalles de esa operación. Además, añadimos quién ha sido el responsable de esa acción, el cual es detectado automáticamente por el sistema, y si su operación sobre el AD ha sido correcta o no, para el caso de que no tenga permisos o haya ocurrido algún error. Por último, registramos el usuario afectado y el grupo afectado. En ciertos casos, las acciones afectarán a los 2 a la vez, pero siempre afectarán a uno de ellos como mínimo. Por ejemplo, las acciones de inserción de un usuario a un grupo, afectan a las 2 personas. Un desbloqueo de un usuario, en cambio, solo afecta al usuario en particular. 3.2.4 Conexión entre el Front-End y el Back-End La conexión entre el Front-End y el Back-End es fundamental para el funcionamiento de la aplicación en su conjunto. Para lograr esta comunicación, se utiliza una arquitectura de tipo cliente-servidor, donde el Front-End actúa como cliente y el Back-End como servidor. Angular realiza solicitudes HTTP al Back-End para obtener o enviar datos. Para esto, Angular utiliza su módulo HttpClient, que proporciona métodos para realizar peticiones HTTP como GET, POST, PUT y DELETE. Por otro lado, el Back-End desarrollado en .NET Core expone APIs RESTful, que son endpoints accesibles a través de HTTP. Estos endpoints son gestionados por controladores que procesan las solicitudes entrantes, ejecutan la lógica de la aplicación y devuelven las respuestas correspondientes. La comunicación entre el Front-End y el Back-End se basa en intercambios de datos en formato JSON, un formato ligero y fácil de leer que es ampliamente utilizado en aplicaciones web. 3.2 Diseño Página 27 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 12. Diagrama de Conexión entre el Front-End y el Back-End 3.2 Diseño Página 28 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Como se puede observar en el diagrama (Figura 12), se ha creado un controlador Back-End por cada servicio Front-End que se quiere comunicar con él, donde los 2 tienen el mismo nombre. Esto se ha hecho para facilitar la legibilidad y mantenimiento del sistema, ya que establece una clara correspondencia entre los componentes de cada tecnología. 3.2.5 Conexión entre el Back-End y el Directorio Activo La conexión entre el Back-End y el Directorio Activo (Figura 13) se realiza a través de la API ‘System.DirectoryServices.AccountManagement’ de .NET dentro de los servicios del Back-End. Esta API utiliza el protocolo LDAP, y proporciona una interfaz de programación que simplifica la interacción con el Directorio Activo, permitiendo operaciones de búsqueda, modificación y autenticación de una forma más sencilla. 3.2 Diseño Página 29 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 13. Diagrama de Conexión entre el Back-End y el Directorio Activo 3.2 Diseño Página 30 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 3.2.6 Conexión entre el Back-End y SQL Server La conexión entre .NET Core y SQL Server se establece a través del Entity Framework Core, una tecnología de mapeo objeto-relacional (ORM) que simplifica el acceso y la manipulación de datos en la base de datos. Entity Framework Core utiliza un modelo de datos basado en clases de C# para representar la estructura de la BBDD. Estas clases o modelos se mapean a tablas en la BBDD, y los atributos de los modelos se corresponden con las columnas de las tablas. Este enfoque facilita el desarrollo al permitir la interacción con la BBDD utilizando objetos y consultas en lenguaje LINQ, en lugar de escribir directamente consultas SQL. A través del contexto de base de datos, que es una instancia de la clase DbContext, el Entity Framework Core facilita la comunicación entre la aplicación y la BBDD, lo que permite realizar operaciones en ella. El diagrama de conexión entre el Back-End y SQL Server (Figura 14) muestra esta interacción: 3.2 Diseño Página 31 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 14. Diagrama de Conexión entre el Back-End y SQL Server 3.2 Diseño Página 32 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 3.2.7 Conexión entre todas las tecnologías Para terminar, se muestra un diagrama donde se tienen en cuenta todos los diagramas anteriores y se obtiene una conexión total de la aplicación web. En este diagrama (Figura 15), se puede apreciar que se sigue el modelo clienteservidor, donde el cliente es la parte anterior a la solicitud HTTP y el servidor la posterior. Figura 15. Diagrama de Conexión entre todas las tecnologías 3.2 Diseño Página 33 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 4. Herramientas Utilizadas Para realizar el desarrollo, despliegue y documentación de este proyecto, se han utilizado las siguientes herramientas y tecnologías. Cada una de ellas tendrá una descripción de qué es y las razones por y para las que se ha utilizado: 4.1 Entornos de desarrollo VS Code y VS 2022 ¿Qué son? Visual Studio Code (VS Code) es un editor de código fuente gratuito y multiplataforma de Microsoft. Visual Studio 2022 (VS 2022) es un entorno de desarrollo integrado (IDE) creado por Microsoft. ¿Por qué y para qué se utilizan? Visual Studio Code se utiliza para el desarrollo del Front-End. Se ha elegido porque es muy versátil y porque cuenta con una amplia gama de extensiones para Angular, Typescript y todo lo relacionado con el desarrollo web. Visual Studio 2022 se utiliza para el desarrollo del Back-End. Se ha elegido porque cuenta con soporte completo y nativo para .NET Core y herramientas avanzadas para el manejo de bases de datos. Figura 16. Logo de Visual Studio Code Figura 17. Logo de Visual Studio 2022 Página 34 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 4.2 Herramientas del Front-End Angular + + ¿Qué es? Angular es un framework de desarrollo web de código abierto mantenido por Google. Permite la creación de aplicaciones web de una sola página (SPA) y aplicaciones web progresivas (PWA). Es una combinación de HTML,CSS y Typescript y sigue el patrón de arquitectura MVC (ModeloVista-Controlador). Angular proporciona herramientas para crear interfaces de usuario interactivas y dinámicas, gestionar el enrutamiento de la aplicación, realizar solicitudes HTTP, etc. ¿Por qué y para qué se utiliza? Angular se ha elegido para el desarrollo del Front-End y para la comunicación con el Back-End. La razón es que es un framework muy robusto y completo, organizado en componentes (lo cual favorece la modularidad y la reutilización de código), y ofrece características interesantes como el enrutamiento. Figura 18. Logo de Angular Figura 19. Logo de HTML Figura 20. Logo de CSS Figura 21. Logo de Typescript 4.2 Herramientas del Front-End Página 35 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez AG-Grid ¿Qué es? AG-Grid [8] es una biblioteca de tablas de datos con múltiples características, diseñada para los principales frameworks de JavaScript. Destaca por su alta velocidad y rendimiento, así como por su amplia gama de características, incluyendo filtrado, ordenación, agrupación, paginación y edición de datos. ¿Por qué y para qué se utiliza? Estas tablas se utilizarán para mostrar en el Front-End todos los datos obtenidos desde el Back-End. Como se ha comentado anteriormente, estas tablas ofrecen flexibilidad, rendimiento, soporte para grandes conjuntos de datos y funcionalidades avanzadas, y al tener que mostrar grandes conjuntos de datos, lo último que queremos es perder rendimiento en la aplicación. Figura 22. Logo de Ag-Grid SweetAlert2 ¿Qué es? SweetAlert2 (SWAL) es una biblioteca de JavaScript que proporciona ventanas modales (pop-ups) personalizables para mostrar mensajes de alerta, confirmación, advertencia o información en aplicaciones web. Es una mejora respecto a los diálogos de alerta nativos del navegador, ya que ofrece una mayor flexibilidad en cuanto a diseño y funcionalidad. 4.2 Herramientas del Front-End Página 36 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez GanttPRO ¿Qué es? GanttPRO es una herramienta en línea para la creación de diagramas de Gantt, utilizados en la gestión de proyectos para visualizar y planificar tareas, plazos y recursos. Ofrece una interfaz intuitiva y colaborativa que facilita la creación y gestión de proyectos. ¿Por qué y para qué se utiliza? Se utiliza por su facilidad de uso, por su diseño personalizable y para desarrollar el diagrama de Gantt del proyecto. Figura 32. Logo de GanttPRO Miro y Canva ¿Qué son? Miro y Canva son plataformas online que permiten realizar diseños con facilidad. Además, cuentan con funcionalidades para crear diseños de páginas web y otras aplicaciones. ¿Por qué y para qué se utilizan? Se utilizan para crear el boceto de la interfaz de la aplicación, además de ser 2 de las herramientas más potentes e intuitivas del mercado. Figura 33. Logo de Miro Figura 34. Logo de Canva 4.6 Herramientas de diseño y planificación Página 43 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5. Desarrollo En este apartado se explica todo el desarrollo del proyecto, desde la implementación de cada tecnología hasta la comunicación entre cada una de ellas. 5.1 Desarrollo Front-End Como se ha comentado en el apartado 4, el Front-End se ha desarrollado con el framework Angular. A continuación, se explican las partes más relevantes del desarrollo: 5.1.1 Componentes y Enrutamiento Componentes Los componentes son la parte visual de la aplicación. Se pueden entender como ‘piezas’ que se unen y componen la página web, y estas van variando dependiendo de la ruta seleccionada, sin necesidad de recargar la página. Podemos categorizar como los siguientes tipos de componentes: Compartidos: Se muestran en todas las rutas de la aplicación. Específicos: Se muestran en rutas específicas de la aplicación. Los componentes compartidos incluyen elementos como la barra de navegación, y los específicos son los que proporcionan funcionalidades e información de cada ruta (Figura 35): Página 44 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 35. Diferencia entre componentes compartidos y específicos en Angular Enrutamiento Para poder navegar por las distintas rutas de la aplicación, debemos definir esas rutas en el fichero app.routes.ts (Figura 36) [10]. Figura 36. Rutas del Front-End Como podemos ver, existe un componente asociado a cada ruta, el cual se carga gracias a la directiva <router-outlet>. Esta directiva de HTML está directamente asociada al enrutador, y es el lugar donde se insertan los componentes correspondientes a cada ruta. 5.1 Desarrollo Front-End Página 45 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.1.2 Servicios Los servicios son una parte esencial para la comunicación y la gestión de datos entre los componentes. Estos se han utilizado en el proyecto para lo siguiente: Gestionar los accesos (AuthGuard) Compartir datos Realizar peticiones HTTP al Back-End Gestionar la caché de cada componente Durante los siguientes apartados, se explicará cómo se ha implementado cada una de estas características. 5.1.3 Gestión de los accesos - AuthGuard Para poder utilizar la aplicación web, es necesario estar autenticado como un usuario de la empresa y pertenecer a un grupo de Directorio Activo creado específicamente para esta aplicación. Para controlar estos accesos, se ha creado un Guardia de Autenticación (AuthGuard) [11]. Este guardia es utilizado a la hora de definir el enrutamiento (Figura 36), donde se asocia una función que comprueba si el usuario tiene el acceso permitido o no (Figura 37). 5.1 Desarrollo Front-End Página 46 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 37. AuthGuard del Front-End Como se puede ver, el guardia comprueba el atributo isLoggedIn del servicio AuthService, y con este decide si permitir el acceso o no. El valor del atributo está determinado por la autenticación del usuario, la cual se realiza en el Back-End buscando al usuario en el Directorio Activo. 5.1.4 Compartir datos entre componentes Cuando la función de un componente padre es mostrar a uno de sus componentes hijos dependiendo del valor de una variable, es importante que se notifique al padre sobre las acciones que se realizan desde los hijos. Por ejemplo, el componente Usuarios tiene 2 hijos/pantallas: Usuarios Grupos de un usuario seleccionado El padre tiene que estar atento de cuándo se selecciona un usuario en el primer hijo, para justo después enviar sus grupos al segundo hijo, además de hacer invisible al primero y visible al segundo. Para gestionar esto, debemos declarar un Subject en el servicio (Figura 38). Este es un tipo de Observable que permite tanto emitir eventos como suscribirse a ellos. 5.1 Desarrollo Front-End Página 47 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 38. Declaración de un objeto Subject Por otro lado, en el componente padre, tenemos que suscribirnos a los cambios (Figura 39). Con esto conseguimos que cada vez que cambiemos el atributo del servicio desde los hijos, el padre se de cuenta. Figura 39. Suscripción a un objeto Subject desde un componente 5.1.5 Solicitudes HTTP desde el Front-End al Back-End Para comunicar el Front-End con el Back-End, se ha utilizado el protocolo HTTP [12]. Los tipos de solicitudes que se han utilizado son GET y POST, de las cuales se dará un ejemplo posteriormente. Para realizar las solicitudes, será necesario configurar un controlador en el Back-End [13], con sus respectivas rutas para la recepción de datos, para que posteriormente los servicios del Front-End puedan comunicarse con él. A continuación, se explica el proceso paso a paso: Configuración del Controlador del Back-End En primer lugar, debemos hacer que nuestro controlador herede de la clase ControllerBase (Figura 40), una clase base de ASP.NET Core que proporciona las funcionalidades que necesitamos. 5.1 Desarrollo Front-End Página 48 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 40. Herencia de un controlador del Back-End Posteriormente, configuramos la ruta base del controlador (Figura 41): Figura 41. Configuración de la ruta base de un controlador del Back-End Por último, asociamos a un método del controlador un tipo de solicitud y una ruta (Figura 42): Figura 42. Configuración de la ruta de un método del Back-End Envío de solicitud GET desde el Front-End al Back-End Como hemos comentado anteriormente, los datos se envían desde un servicio Angular. En este caso, vamos a poner el ejemplo del servicio Combinar: 5.1 Desarrollo Front-End Página 49 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 43. Envío de una petición GET con parámetros En este ejemplo (Figura 43), enviamos una solicitud GET a la URI ‘servidor/combinar/obtenerGrupos’. Utilizamos una variable de entorno para establecer la URI del servidor, ya que las direcciones son distintas en desarrollo y en producción. Se explica en más detalle en la sección 5.1.11. Para recibir la petición y los parámetros en el Back-End, debemos tener configurado un método con una ruta que coincida (Figura 44): Figura 44. Recepción de una petición GET con parámetros 5.1 Desarrollo Front-End Página 50 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Envío de solicitud POST desde el Front-End al Back-End Este es un caso muy parecido, aunque la forma de acceder a los datos en el Back-End cambia. Por un lado, definimos un body y realizamos la solicitud desde el Front-End (Figura 45): Figura 45. Envío de una petición POST Por otro lado, recibimos la solicitud en el Back-End (Figura 46). Los parámetros del cuerpo se reciben mediante el atributo FromBody en un objeto que debemos definir (en este caso, ExpulsarDelGrupoRequest). Sus atributos deben coincidir con la estructura del cuerpo que se envía desde Angular (mayúsculas incluidas). Figura 46. Recepción de una petición POST 5.1 Desarrollo Front-End Página 51 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Configuración del CORS Para habilitar este intercambio de peticiones, nos falta uno de los pasos más importantes. La configuración del CORS es fundamental para permitir el envío de peticiones desde un origen a otro distinto al de la propia página. El CORS se configura en el Startup del Back-End (Figura 47). Por un lado, en el método ConfigureServices, añadimos una política de CORS con los orígenes, credenciales, cabeceras y métodos a aceptar. Por otro lado, en el método Configure, activamos la política que acabamos de crear. Figura 47. Configuración y uso del CORS 5.1.6 Gestión de la caché La caché es gestionada en los componentes principales de la aplicación para mejorar la fluidez y la experiencia del usuario. Para explicar esta característica, se va a utilizar el ejemplo del servicio de Logs (Figura 48): 5.1 Desarrollo Front-End Página 52 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 57. Gráfico de Donut en la pantalla de Dashboard Figura 58. Gráfico de barras en la pantalla de Dashboard Figura 59. Gráfico de área en la pantalla de Logs 5.1 Desarrollo Front-End Página 59 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez El último gráfico es especial (Figura 59), ya que se ha implementado la funcionalidad de añadir filtros en los datos que recibe. En este caso, obtenemos todos los Logs en la aplicación, categorizados por ejecuciones correctas o fallidas sobre el AD, y a través de los filtros del gráfico podemos filtrar de la siguiente manera: Mostrar la cantidad de Logs mensuales en un intervalo de 1 año. Mostrar la cantidad de Logs diarios ocurridos durante el mes de un año. 5.1.11 Variables de entorno Es importante definir las variables de entorno en Angular [15] para que la aplicación sepa comportarse en un entorno de desarrollo y en otro de producción. Por defecto, Angular CLI crea 2 archivos de entorno: Desarrollo: environment.development.ts Producción: environment.ts En las siguientes figuras (60 y61) se puede ver qué variables se han utilizado en cada entorno. En este caso, la única variable que cambia es la dirección del API del Back-End, siendo el de desarrollo al local y el de producción a la dirección del servidor: Figura 60. Variables de entorno en desarrollo Figura 61. Variables de entorno en producción 5.1 Desarrollo Front-End Página 60 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.1.12 Almacenamiento local y cifrado Como se ha comentado en el apartado 5.1.9.4, la aplicación deja almacenadas las credenciales introducidas por última vez, con el objetivo de ahorrar tiempo a la hora de realizar muchas operaciones en una misma sesión. Para ello, hacemos uso del Session Storage [16], un tipo de almacenamiento web que permite a las aplicaciones web guardar datos durante la sesión de navegación. Es decir, una vez se cierra la pestaña, los datos se eliminan. En las figuras 62 y63 se muestra un ejemplo de cómo se guardan y recuperan los datos: Figura 62. Añadir credenciales al Session Storage Figura 63. Recuperar credenciales del Session Storage Al estar almacenando datos sensibles, es importante almacenarlos de forma segura. Para ello, se utiliza el algoritmo AES (Advanced Encryption Standard) [17] para cifrar y descifrar las credenciales antes de almacenarlas en el Session Storage. Aquí está el proceso: Generación de la clave secreta La clave secreta se utiliza para cifrar y descifrar las credenciales. Esta clave secreta es aleatoria para cada sesión, lo que elimina la necesidad de rotarla, y se almacena en la instancia del servicio (Figura 64). 5.1 Desarrollo Front-End Página 61 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 64. Generación aleatoria de la clave de encriptación Cifrado y descifrado de datos Como el Session Storage es accesible desde las herramientas del navegador, las credenciales se almacenan encriptadas en él (Figuras 65 y66), evitando que sean visibles para cualquier usuario o software malicioso que quiera inspeccionar el almacenamiento. Figura 65. Ejemplo de encriptación de credenciales Figura 66. Ejemplo de desencriptación de credenciales 5.1 Desarrollo Front-End Página 62 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.2 Desarrollo Back-End El Back-End de este proyecto se ha desarrollado con el framework .NET. Este abarca toda la lógica de negocio y las conexiones con otros 3 servicios (Angular, SQL Server y el Directorio Activo). A continuación, se explican las partes más relevantes del desarrollo: 5.2.1 Controladores En el apartado 5.1.5.1, ya hemos dado una pequeña introducción a los controladores de .NET Core. Aún así, nos falta mencionar cómo devolver una respuesta al Front-End. Para ello, utilizamos la interfaz de IActionResult, que permite a un método de acción devolver diversos tipos de respuestas HTTP. Para entenderlo mejor, vamos a observar uno de los métodos que más respuestas maneja (Figura 67): Figura 67. Ejemplo de respuesta HTTP 5.2 Desarrollo Back-End Página 63 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Como se ve en los return de la figura 67, podemos devolver el tipo de respuesta que deseemos junto a un mensaje. Incluso podemos especificar el código de respuesta que queremos devolver al Front-End, como se puede ver en el último return. Esto posteriormente podemos manejarlo en el Front-End, para que si la respuesta es OK mostrar el icono de éxito, y en caso contrario mostrar el icono de error (ejemplos en las figuras 52 y53). 5.2.2 Servicios Los servicios en .NET implementan la lógica de negocio de la aplicación, además de realizar operaciones de acceso a los datos y otras funcionalidades que pueden ser reutilizadas a lo largo de un proyecto. Asimismo, ofrecen características como la encapsulación de código, la inyección de dependencias integrada y la reutilización de código. En este proyecto, los servicios son imprescindibles para las siguientes operaciones: Conexión al Directorio Activo Generación de Logs Conexión a la base de datos Generación y lanzamiento de excepciones Durante los siguientes apartados, se explicará cómo se ha implementado cada una de estas características. 5.2.3 Conexión al Directorio Activo Para realizar la conexión al AD utilizamos la librería ‘System.DirectoryServices.AccountManagement’. Esta librería proporciona una interfaz para interactuar con servicios de directorio, simplificando la gestión de usuarios, grupos y otras entidades dentro del AD. Dentro de esta forma de acceso al AD, contamos con 2 tipos de clases para la búsqueda y manipulación. En el Back-End, se utilizan los 2 métodos, ya que cada una cuenta con sus ventajas y desventajas: 5.2 Desarrollo Back-End Página 64 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Clases PrincipalContext,UserPrincipal yGroupPrincipal La clase PrincipalContext proporciona un contexto principal que representa el dominio. Permite establecer la conexión con el AD y realizar operaciones de búsqueda y manipulación de objetos. Las clases UserPrincipal y GroupPrincipal son utilizadas para representar usuarios y grupos dentro del AD y realizar operaciones sobre ellos. Estas clases (Figura 68) ofrecen una forma más orientada a objetos de interactuar con los objetos del AD, lo que simplifica el proceso de administración y gestión de usuarios y grupos en aplicaciones .NET. Ventaja principal: Cuentan con una interfaz para cada tipo de objeto del AD, lo que las hace muy fácil de usar, además de contar con una sintaxis más sencilla. Desventaja principal: Cuando queremos ver los atributos de un objeto, se obtienen todos sus atributos por defecto. Esto afecta al rendimiento con conjuntos de datos muy grandes. 5.2 Desarrollo Back-End Página 65 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 68. Ejemplo de búsqueda de atributos de usuarios con PrincipalContext y UserPrincipal 5.2 Desarrollo Back-End Página 66 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Clases DirectoryEntry yDirectorySearcher La clase DirectoryEntry proporciona una representación genérica de un objeto en el AD. Permite acceder a los atributos y métodos de un objeto, como su nombre, tipo, y pertenencia a grupos. La clase DirectorySearcher, por otro lado, facilita la búsqueda de objetos en el AD mediante filtros de búsqueda. Permite realizar consultas más avanzadas y específicas para encontrar usuarios, grupos u otras entidades en el directorio activo. Estas clases (Figura 69) son más flexibles y permiten un mayor control sobre el proceso de búsqueda en comparación con las clases PrincipalContext, UserPrincipal yGroupPrincipal, pero requieren un manejo más detallado de los objetos y la manipulación de los resultados de la búsqueda. Ventaja principal: Permiten hacer consultas más selectivas, lo que mejora exponencialmente el rendimiento. Al poder especificar qué atributos necesitamos cargar, nos aseguramos que solo se van a recorrer esos atributos durante las búsquedas, evitando la sobrecarga y el tiempo de procesamiento. Desventaja principal: La sintaxis es un poco más compleja, y pueden ofrecer menos integración con otras partes del framework. 5.2 Desarrollo Back-End Página 67 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 69. Ejemplo de búsqueda de atributos de usuarios con DirectoryEntry y DirectorySearcher 5.2 Desarrollo Back-End Página 68 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 81. Middleware de autorización del Back-End En los demás casos, si la petición se hace sin credenciales, se devuelve el código de estado 401 (No Autorizado). 5.2.7 Variables de configuración Para terminar con la implementación del Back-End, vamos a explicar esta última característica. Las variables de configuración son propiedades que se utilizan en las operaciones de la aplicación. Al ser propiedades estáticas, se puede acceder a ellas sin necesidad de crear una instancia de la clase. Estas variables permiten centralizar la configuración y facilitar su modificación, evitando tener que hacer cambios en múltiples lugares del código. Estas son las que se han utilizado (Figura 82): 5.2 Desarrollo Back-End Página 75 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 82. Variables de configuración del Back-End 5.3 Interfaz gráfica de la aplicación En esta sección, se enseñará el boceto inicial de la interfaz de la aplicación, mostrando el concepto principal y la idea de un diseño centrado en el usuario y fácil de usar. Posteriormente, veremos cuál ha sido el resultado final, con la aplicación ya implementada. 5.3.1 Boceto de la interfaz Antes de comenzar el desarrollo, es importante realizar un diseño previo con el que todos los interesados estén de acuerdo. La figura 83 es el diseño de la pantalla principal (Dashboard), el cual obtendría un análisis completo de los datos más relevantes del Directorio Activo: 5.3 Interfaz gráfica de la aplicación Página 76 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 83. Boceto del Dashboard La figura 84 es la pantalla de Usuarios, donde se obtendrán todos los datos de los usuarios de la empresa, se mostrarán en una tabla y se podrán aplicar filtros y ordenación. Dentro de esta pantalla también se podrán ver los grupos de un usuario seleccionado: 5.3 Interfaz gráfica de la aplicación Página 77 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 84. Boceto de la pantalla de Usuarios La pantalla de Grupos (Figura 85) es parecida a la de Usuarios, se muestra a continuación: 5.3 Interfaz gráfica de la aplicación Página 78 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 85. Boceto de la pantalla de Grupos La figura 86 es la pantalla de Fusionar. Para acceder a esta pantalla, como paso previo, deberemos seleccionar 2 grupos, para categorizar los usuarios de cada grupo y poder ver de una forma intuitiva los usuarios en común y los que no: 5.3 Interfaz gráfica de la aplicación Página 79 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 86. Boceto de la pantalla de Fusionar La pantalla de Combinar (Figura 87) es muy parecida a la de Fusionar, solo que es el proceso inverso. En este caso, deberemos seleccionar 2 usuarios, y se mostrarán los grupos de cada uno de ellos. La forma de categorizar es distinta, porque debemos tener en cuenta los grupos de fuera de la OU local, ya que no tenemos permisos sobre ellos: 5.3 Interfaz gráfica de la aplicación Página 80 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 87. Boceto de la pantalla de Combinar Por último, la pantalla de Logs (Figura 88) se vería así: 5.3 Interfaz gráfica de la aplicación Página 81 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 88. Boceto de la pantalla de Logs Por un lado, tenemos el gráfico de cantidad de ejecuciones correctas y fallidas, donde podemos aplicar filtros para ver cada mes del año seleccionado, o bien el año por completo. Por otro lado, tenemos una tabla AG-Grid, donde se muestran todos los Logs generados por la aplicación. En esta tabla se pueden aplicar filtros, ordenación y exportar el resultado. 5.3 Interfaz gráfica de la aplicación Página 82 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.3.2 Diseño final Comparando el boceto de la interfaz y el diseño final, se va a poder ver que los 2 siguen la misma base, como la forma de navegación y la distribución de los componentes, aunque el diseño final es mucho más minimalista y profesional. A continuación, se explican diferencias relevantes: Los colores del Dashboard cambian completamente, ya que en el boceto el estilo es bastante simple y monótono. Asimismo, en el diseño final, cada uno de los gráficos se rodea por un marco con el objetivo de mejorar la experiencia visual del usuario, además de introducir una pequeña línea con color en la parte baja de los botones superiores. En todos los componentes que no son el Dashboard cambia la forma de mostrar las tablas, ya que el diseño de una tabla AG-Grid es completamente distinta. Aunque no se vea en el diseño, la aplicación cuenta con animaciones, pantallas de carga y las anteriormente mencionadas alertas SWAL, con intención de mejorar la experiencia del usuario. Existen partes de la aplicación de las que no se ha desarrollado un boceto, como ver los grupos de un usuario (pantalla de Usuarios), ver los usuarios de un grupo (pantalla de Grupos) y la selección de usuarios o grupos en las pantallas de Fusionar yCombinar. Esto es porque eran pantallas muy simples que no requerían confirmación previa de los interesados. El gráfico de área de la pantalla de Logs también cambia por completo. En este caso, se ha utilizado el ejemplo de AmpleAngular basado en la librería ApexCharts, el cual se ha tenido que adaptar a la selección de años, meses de un año y a las distintas entradas de datos. Las pantallas con el diseño final se pueden consultar en el manual de usuario (Anexo VI, sección 6.4). 5.4 Despliegue en IIS Para poner la aplicación en marcha en un Windows Server, utilizaremos Internet Information Services (IIS). IIS es un servidor web que puede manejar aplicaciones web, servicios web y sitios web. Los pasos específicos para desplegar la aplicación se describen en las siguientes subsecciones. 5.4 Despliegue en IIS Página 83 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez 5.4.1 Fichero web.config del Front-End Este fichero es crucial para completar la configuración del comportamiento del servidor en un entorno de producción. En nuestro caso, este fichero configura el manejo de las rutas de Angular [19], y aunque no es completamente necesario (ya que esto es configurable desde el IIS Manager), el disponer de un fichero web.config automatiza este proceso desde un principio, lo que hace la aplicación fácilmente desplegable en cualquier otro servidor. En la figura 89 se muestra el fichero de configuración: Figura 89. Fichero de configuración web.config del Front-End 5.4.2 Manual de despliegue El manual de despliegue se encuentra en el Anexo VII (sección 6.4). 5.4 Despliegue en IIS Página 84 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez Bibliografía [1] Quest Software. ¿Qué es Active Directory? ¿Cómo funciona? 2024. url: https://www.quest.com/mx-es/solutions/active-directory/whatis-active-directory.aspx. [2] Frost & Sullivan. Active Directory Holds the Keys to your Kingdom, but is it Secure? 2020. url:https://www.frost.com/frost-perspectives/ active-directory-holds-the-keys-to-your-kingdom-but-is-itsecure/. [3] Microsoft Corporation. Active Directory Users and Computers. 2024. url: https : / / learn . microsoft . com / en - us / troubleshoot / windows - server/system-management-components/remote-server-administrationtools. [4] ManageEngine. ADManager Plus. 2024. url:https://www.manageengine. com/products/ad-manager/. [5] Claire Drumond. ¿Qué es scrum y cómo empezar? 2024. url:https: //www.atlassian.com/es/agile/scrum. [6] Max Rehkopf. ¿Qué es un tablero de kanban? 2024. url:https://www. atlassian.com/es/agile/kanban/boards#:~:text=%22Kanban%22% 20es%20una%20palabra%20japonesa,el%20mundo%20trabaje%20en% 20sinton%C3%ADa.. [7] Trello. ¿Qué es Trello? 2024. url:https://trello.com/es/tour. [8] AG Grid Ltd. Angular Data Grid. 2024. url:https://ag-grid.com/ angular-data-grid/getting-started/. [9] SweetAlert2. A beautiful, responsive, customizable, and accessible (WAIARIA) replacement for JavaScript’s popup boxes. 2024. url:https:// sweetalert2.github.io/. [10] Arseniy Tomkevich. Enrutamiento de Angular en 5 minutos (Spanish). 2023. url:https : / / medium . com / @jsmuster / enrutamiento - de - angular-en-5-minutos-spanish-dfbadc2c1cb7. [11] Jaydeep Patil. Auth Guards in Angular. 2023. url:https://medium. com/@jaydeepvpatil225/auth-guards-in-angular-6960950b3c6c. [12] Bytebantz. Angular’s 17 HttpClient Complete Tutorial. 2024. url:https: //javascript.plainenglish.io/angulars-17-httpclient-completetutorial-ef0c02fd945f. [13] Rick Anderson y Kirk Larkin. Tutorial: Creación de una API web con ASP.NET Core. 2024. url:https://learn.microsoft.com/es-es/ aspnet/core/tutorials/firstwebapi?view=aspnetcore8.0& tabs=visual-studio. 6.4 Reflexión personal Página 91 de 92 Trabajo Fin de Grado Eder Sampayo Rodríguez [14] Mohsinogen. Angular 17: HTTP Interceptors guide. 2024. url:https:// medium.com/@mohsinogen/angular-17-http-interceptors-guide417e7c8ffada. [15] Angular. Building and serving Angular apps. 2024. url:https://angular. io/guide/build. [16] Alexis Mora. ¿Qué es y cómo utilizar localStorage y sessionStorage? 2019. url:https://ed.team/blog/que-es-y-como-utilizar-localstoragey-sessionstorage. [17] Juan Beresiarte. Cifrado y descifrado con Crypto.js. 2023. url:https: //dev.to/beresiartejuan/cifrado-y-descifrado-con-cryptojs3h5g. [18] SanBen. How to authorize CORS preflight request on IIS with Windows Authentication. 2018. url:https://stackoverflow.com/questions/ 49450854/howtoauthorizecorspreflightrequestoniiswith-windows-authentication. [19] Noor Saifi. How to deploy Angular, ASP.NET Core WebAPI to IIS on Shared Hosting. 2021. url:https://www.codementor.io/@noorsaifi/ how-to-deploy-angular-asp-net-core-webapi-to-iis-on-sharedhosting-1dytrihj56. [20] TRAN Ngoc Thach. Integrate Angular and ASP.NET Core Web-Api into Microsoft IIS. 2019. url:https://thachngoctran.medium.com/ integrate-angular-and-asp-net-core-web-api-into-microsoftiis-31a9e414874f. 6.4 Reflexión personal Página 92 de 92 Anexos Trabajo Fin de Grado Eder Sampayo Rodríguez Anexo I: Descripción de las tareas del proyecto En este anexo se describen las tareas mencionadas en el diagrama EDT (Figura 4) del proyecto. Gestión Este apartado es la base del trabajo, y no planificar correctamente las siguientes tareas puede llevar a malentendidos con los interesados, retrasos de tiempo y costes adicionales. 1.1. Definición del tema del proyecto Descripción Identificar y establecer claramente el objetivo, alcance y propósito del proyecto. Determinar qué se va a abordar, por qué es importante y qué se espera lograr al acabar el proyecto. Salidas / Entregables Correo o reunión explicando en qué consiste el proyecto y las ideas relacionadas con él. Recursos necesarios Ninguno. Precedencias Ninguna. Tabla 3: Definición del tema del proyecto. 1.2. Definir objetivos del proyecto Descripción Establecer claramente lo que se quiere lograr al finalizar el proyecto, proporcionando una dirección clara y específica para el trabajo a realizar. Salidas / Entregables Documento con los objetivos que se van a abordar. Recursos necesarios Ninguno. Página 1 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Precedencias 1.1 Tabla 4: Definir objetivos del proyecto. 1.3. Planificar las tareas a realizar Descripción Organizar y estructurar las actividades necesarias para alcanzar los objetivos del proyecto, teniendo en cuenta el orden de prioridad y su estimación de tiempo. Salidas / Entregables Documento con las tareas establecidas, además de la descripción, estimación temporal y precedencias de cada una. Recursos necesarios Herramientas de documentación (p. ej. LaTeX) Precedencias 1.2 Tabla 5: Planificar las tareas a realizar. 1.4. Elegir las tecnologías Descripción Seleccionar las herramientas, plataformas y recursos tecnológicos para desarrollar y ejecutar las tareas establecidas. Salidas / Entregables Lista de tecnologías seleccionadas, justificación de la elección, plan de integración de tecnológicas. Recursos necesarios Objetivos del proyecto Precedencias 1.2 Tabla 6: Elegir las tecnologías. Página 2 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez 1.5. Reuniones con los interesados Descripción Mostrar periódicamente a los interesados (tutor y futuros usuarios de la aplicación) los avances que se van logrando a lo largo del proyecto. Salidas / Entregables Informes de progreso, retroalimentación de los interesados, posibles ajustes en el enfoque del proyecto. Recursos necesarios Tiempo, espacio para la reunión (físico o virtual), herramientas de presentación (software, proyector, etc.) Precedencias Ninguna. Tabla 7: Reuniones con los interesados. Formación Estas tareas sirven para obtener los conocimientos y habilidades necesarias para poder desarrollar el proyecto de forma eficiente. 2.1. Directorio Activo Descripción Entender qué es el Directorio Activo, su función en un entorno de red y cómo se organiza la información dentro de él. Conocer los atributos de cada tipo de objeto y cómo explotar esa información. Comprender los distintos roles y permisos del AD. Salidas / Entregables Ninguno. Recursos necesarios Servicios de Directorio Activo de Microsoft. Precedencias Ninguna. Tabla 8: Formación en Directorio Activo. Página 3 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez 2.2. Angular Descripción Aprender a desarrollar aplicaciones web dinámicas utilizando el framework Angular. Comprender los conceptos fundamentales como componentes, servicios, enrutamiento, interceptores, guardias de ruta y comunicación con un Back-End. Salidas / Entregables Ninguno. Recursos necesarios Herramientas de desarrollo de Angular (Angular CLI, IDE). Precedencias 1.4. Tabla 9: Formación en Angular. 2.3. .NET / C# Descripción Adquirir habilidades en el desarrollo de aplicaciones Back-End utilizando el framework .NET Core y el lenguaje de programación C#. Comprender los conceptos de MVC, REST API, manejo de datos, seguridad y autenticación. Salidas / Entregables Ninguno. Recursos necesarios Herramientas de desarrollo de .NET (Visual Studio, .NET Core SDK). Precedencias 1.4. Tabla 10: Formación en .NET / C#. Página 4 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez 2.4. MS SQL Server Descripción Aprender a utilizar Microsoft SQL Server como BBDD para aplicaciones empresariales. Comprender cómo gestionar la seguridad de los datos, además de poder acceder a una BBDD mediante C# con LinQ. Salidas / Entregables Ninguno. Recursos necesarios SQL Server Management Studio y Visual Studio. Precedencias 1.4. Tabla 11: Formación en MS SQL Server. 2.5. IIS Descripción Familiarizarse con Internet Information Services (IIS) como servidor web para alojar aplicaciones Angular y ASP.NET Core. Aprender a configurar sitios web, implementar seguridad y gestionarla mediante CORS. Salidas / Entregables Ninguno. Recursos necesarios Servidor con IIS instalado. Precedencias 1.4. Tabla 12: Formación en IIS. 2.6. Integración de las tecnologías Página 5 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Descripción Integrar todas las tecnologías aprendidas (Directorio Activo, Angular, .NET / C#, MS SQL Server, IIS) en una aplicación web completa. Aprender a comunicar el Front-End con el Back-End, gestionar la autenticación y autorización, obtener y modificar datos del AD a través del Back-End y realizar operaciones en una BBDD SQL Server por medio del Back-End. Salidas / Entregables Ninguno. Recursos necesarios Todas las herramientas y recursos mencionados en las formaciones individuales. Precedencias 2.1, 2.2, 2.3, 2.4, 2.5 Tabla 13: Formación en la integración de las tecnologías. Desarrollo En esta etapa se lleva a cabo la implementación de las funcionalidades planificadas en los objetivos y alcance del proyecto. 3.1. Boceto de la interfaz Descripción Crear un diseño preliminar de la apariencia de la aplicación, con el fin de visualizar el resultado final y planificar cómo gestionar las funcionalidades de la interfaz de usuario. Salidas / Entregables Dibujo con el resultado del diseño provisional. Recursos necesarios Ninguno. Precedencias 1.2, 1.3, 1.5, 2.2 Tabla 14: Boceto de la interfaz. Página 6 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez 3.2. Análisis Descripción Analizar qué funciones debe ofrecer la aplicación para satisfacer las necesidades de los usuarios, identificando todos los casos de uso y teniendo en cuenta la interfaz provisional. Salidas / Entregables Documento con los casos de uso identificados. Recursos necesarios Boceto de la interfaz Precedencias 3.1 Tabla 15: Análisis. 3.3. Diseño Descripción Definir la arquitectura de la aplicación, estructurando qué clases o componentes crear y cómo interactuarán entre ellas. Diseñar la base de datos y los esquemas de comunicación entre el Front-End y el Back-End. Salidas / Entregables Documento con los distintos componentes, servicios, controladores y repositorios. Recursos necesarios Herramientas de diseño de software. Precedencias 3.2 Tabla 16: Diseño. 3.4. Implementación Página 7 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Tareas Título Sidebar Navbar Autenticación y autorización de usuarios Guardia de autenticación Resultados Aplicación con capacidad de navegación entre rutas en un SPA y control de acceso a las rutas. Fechas 22/03/2024 – 29/03/2024 Tabla 27: Sprint 2: Menú de Navegación, Autenticación y Autorización. Sprint 3: Dashboard Objetivo Desarrollar el componente ‘Dashboard’ y todos los subcomponentes necesarios para mostrar toda la información necesaria sobre usuarios, inicios de sesión, grupos, sistema. Tareas Servicios para obtener los datos del Back-End Botones personalizados •Vista previa de la cantidad •Acceso a la información •Poder filtrar y exportar la información Chart de usuarios Informes •Usuarios •Inicios de sesión •Grupos •Sistema Funcionalidad de desbloqueo de usuarios Página 14 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Resultados Componente de Dashboard funcional. Fechas 29/03/2024 – 09/04/2024 Tabla 28: Sprint 3: Dashboard. Sprint 4: Combinación de Grupos Objetivo Desarrollar el componente ‘Combinar’, pudiendo elegir a un usuario de referencia y a otro usuario al que asignar los grupos. Mostrar de una forma visual, intuitiva y detallada los grupos en común, no comunes y los grupos sobre los que no se tiene control. Tareas Servicio para obtener nombre completo y cuenta de los usuarios Mostrar la información en una tabla en el subcomponente de selección Seleccionar 2 usuarios y enviarlos al subcomponente de combinación Servicio para obtener grupos de los 2 usuarios seleccionados Mostrar grupos en una tabla Categorizar grupos con colores Servicios •Adición de grupos •Eliminación de grupos Resultados Componente de Combinación de Grupos funcional. Fechas 09/04/2024 – 19/04/2024 Tabla 29: Sprint 4: Combinación de Grupos. Página 15 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Sprint 5: Usuarios Objetivo Desarrollar el componente ‘Usuarios’, donde se puedan mostrar los atributos más relevantes sobre los usuarios del Directorio Activo y aplicar filtros de ordenación y búsqueda. Tareas Tabla y la definición de columnas Funcionalidades de la tabla •Ordenación •Filtro de datos •Poder exportar la información Servicio para obtener atributos de usuarios Ajustar la anchura de las columnas dependiendo de la longitud de los datos Obtener grupos de un usuario en otra tabla •Ordenación •Filtro de datos •Poder exportar la información Resultados Componente de Usuarios funcional. Fechas 19/04/2024 – 26/04/2024 Tabla 30: Sprint 5: Usuarios. Sprint 6: Grupos Objetivo Desarrollar el componente ‘Grupos’, donde se puedan mostrar sus atributos más relevantes. Si se clica en uno de los grupos, se deben mostrar todos los usuarios que pertenecen a él, y tiene que ser posible eliminar a un usuario del grupo. Página 16 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Tareas Tablas y definiciones de columnas Funcionalidades de las tablas •Ordenación •Filtro de datos •Poder exportar la información Servicio para obtener atributos de grupos y usuarios de un grupo en otra tabla Ajustar la anchura de las columnas dependiendo de la longitud de los datos Poder eliminar un usuario de un grupo Resultados Componente de Grupos funcional. Fechas 26/04/2024 – 03/05/2024 Tabla 31: Sprint 6: Grupos. Sprint 7: Logs Objetivo Desarrollar el componente ‘Logs’, donde se puedan mostrar todas las modificaciones e intentos de modificación que se hacen desde la aplicación sobre el AD. Almacenar esos Logs en una BBDD SQL Server. Mostrar los Logs en una tabla donde se pueda aplicar ordenación y filtros de búsqueda. Mostrar en un gráfico la cantidad de ejecuciones que se han hecho a lo largo del tiempo, y poder filtrarlas por meses y años. Página 17 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Tareas Generar Logs desde el Back-End Almacenar Logs en la BBDD Implementar tabla de Logs •Ordenación •Filtro de datos •Poder exportar la información Mostrar los Logs en la tabla del Front-End Gráfico de área •Definición •Recepción de datos •Mostrar Logs mensuales de un año •Mostrar Logs diarios de un mes •Poder seleccionar por mes y año Resultados Componente de Logs funcional. Fechas 03/05/2024 – 13/05/2024 Tabla 32: Sprint 7: Logs. Sprint 8: Fusión de Usuarios de Grupos Objetivo Desarrollar el componente ‘Fusionar’, pudiendo elegir a un grupo de referencia y a otro grupo al que añadir los usuarios. Mostrar de una forma visual, intuitiva y detallada los usuarios en común y no comunes. Página 18 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Tareas Servicio para obtener nombre y descripción de los grupos Mostrar esa información en una tabla en el subcomponente de selección Seleccionar 2 grupos y enviarlos al subcomponente de fusión Servicio para obtener usuarios de los 2 grupos seleccionados Mostrar usuarios en una tabla Categorizar usuarios con colores Servicios •Adición de usuarios Resultados Componente de Fusión de Usuarios de Grupos funcional. Fechas 13/05/2024 – 22/05/2024 Tabla 33: Sprint 8: Fusión de Usuarios de Grupos. Sprint 9: Despliegue y Pruebas Objetivo Despliegue de la aplicación en un Windows Server mediante IIS y testeo de funcionalidades de usuario y administrador. Tareas Configurar el servidor Construcción •Front-End •Back-End Despliegue Testeo •Obtención de datos •Acciones de usuario •Acciones de administrador Página 19 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Resultados Aplicación desplegada y testeada en un servidor. Fechas 22/05/2024 – 03/06/2024 Tabla 34: Sprint 9: Despliegue y Pruebas. Es importante recalcar que existen muchas formas de dividir los Sprints. Una posible alternativa podría haber sido asegurarse de obtener todos los datos necesarios de todos los componentes desde el Back-End inicialmente, para luego ajustarlos en el Front-End. Aún así, se ha preferido dividirlos de esta forma porque es más intuitivo, y el poder avanzar componente a componente permite un desarrollo más iterativo e incremental. Además, como se ha comentado anteriormente, cada funcionalidad tenía un orden de prioridad, por lo que era importante desarrollar el proyecto de esta forma. Página 20 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Anexo III: Descripción de los riesgos del proyecto A continuación, se explican en detalle los riesgos del proyecto especificados en el diagrama de riesgos (Figura 7): Riesgos de Gestión 1.1. Mala planificación Descripción Dar prioridad a tareas que realmente no son tan importantes y tener una mala estimación los tiempos. Prevención Planificar adecuadamente los objetivos del proyecto. Ser realista con el tiempo requerido de cada tarea, y priorizar siempre las bases del proyecto. Plan de contingencia Revisión de la planificación inicial, reajuste de tiempos y corrección de desviaciones. Probabilidad Media Impacto Medio Tabla 35: Riesgo por mala planificación. 1.2. Mala comprensión de los objetivos Descripción Puede surgir cuando hay ambigüedad o falta de claridad sobre lo que se espera lograr. Esto puede llevar a malentendidos con los interesados y entregas que no satisfacen sus necesidades. Prevención Realizar preguntas frecuentes a los interesados, e ir mostrando las entregas periódicamente. Página 21 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Plan de contingencia Revisión exhaustiva de los objetivos del proyecto. Reunión con todas las partes interesadas para aclarar malentendidos. Probabilidad Baja Impacto Medio Tabla 36: Riesgo por mala comprensión de los objetivos. Riesgos Humanos 2.1. Problemas personales Descripción Existe la posibilidad de que surjan problemas personales, como enfermedades, conflictos familiares o situaciones personales difíciles. Prevención Mantener una buena gestión del tiempo y establecer límites entre el trabajo y la vida personal. Plan de contingencia Ajustar la planificación y reevaluar las prioridades para manejar la carga de trabajo. Buscar apoyo externo en situaciones muy difíciles. Probabilidad Baja Impacto Medio Tabla 37: Riesgo por problemas personales. 2.2. Falta de conocimiento Página 22 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Descripción La falta de conocimiento o experiencia dificulta el avance del proyecto, sobre todo al no estar familiarizado con las tecnologías. Prevención Realizar una buena fase de formación, la cual será la base del desarrollo. Plan de contingencia Buscar información en Internet y pedir ayuda a los compañeros de trabajo. En el peor de los casos, hablar con los interesados y realizar un cambio de tecnologías. Probabilidad Alta Impacto Alto Tabla 38: Riesgo por falta de conocimiento. Riesgos de Seguridad de la Información 3.1. Mala gestión de acceso a los datos Descripción La mala gestión de acceso a los datos puede conducir a la exposición de información sobre usuarios, grupos y sistemas del Directorio Activo a personas no autorizadas. Prevención Establecer medidas de acceso a la aplicación, utilizando sistemas de autenticación robustos y autorizando solo a las personas establecidas por la organización. Plan de contingencia Implementar medidas inmediatas para contener el acceso no autorizado y notificar a la organización. Probabilidad Muy baja Página 23 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez ha empezado a funcionar correctamente. Página 30 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Anexo V: Manual de instalación A continuación, se presenta un manual de instalación de la aplicación, donde instalaremos el software necesario, adaptaremos el código fuente a nuestro entorno, instalaremos las dependencias del Front-End y el Back-End, y desplegaremos la aplicación en un entorno de desarrollo. Prerrequisitos Antes de comenzar con la instalación, asegúrate de tener instalados los siguientes programas y herramientas: Node.js y npm: Se pueden descargar desde la página oficial de Node. Angular CLI: Una vez instalado Node, se debe ejecutar el siguiente comando en la consola: $ npm install -g @angular/cli .NET SDK: Se puede descargar desde la página oficial de Dotnet (Microsoft). Además, se deben tener los puertos correctos abiertos y configurados tanto en el entorno de desarrollo como en el de producción. Se muestra una tabla con los puertos de cada tecnología: Puertos Servicio Desarrollo Producción Front-End 4200 443 Back-End 7103 7103 Tabla 45: Tabla de puertos para desarrollo y producción Estos puertos pueden cambiarse en los ficheros angular.json del FrontEnd y launchSettings.json del Back-End. Página 31 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Instalación del Front-End (Angular) Paso 1: Ubicarnos en la carpeta del Front-End $ cd AD-front Paso 2: Instalar las dependencias de Angular $ npm install Paso 3: Configurar el entorno Para realizar este paso, contamos con las variables de entorno, compuestas por los 2 ficheros environment del proyecto Angular (Figuras 90 y91). Se deberá adaptar a los puertos y direcciones configuradas: Figura 90. Variables de entorno en desarrollo Figura 91. Variables de entorno en producción Paso 4: Ejecutar la aplicación en el entorno de desarrollo $ ng serve Si hubiera un error relacionado con la versión de Angular CLI, se debe ejecutar el siguiente comando para usar la versión local: Página 32 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez $ npx ng serve El Front-End estará disponible en https://localhost:4200 para el usuario. Instalación del Back-End (.NET Core) Paso 1: Ubicarnos en la carpeta del Back-End $ cd AD-back Paso 2: Instalar las dependencias del proyecto $ dotnet restore Paso 3: Configurar el entorno Para ello, debemos adaptar los siguientes 2 ficheros a nuestras necesidades (Figuras 92 y93): Configuracion.cs Página 33 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 92. Variables de configuración del Back-End appsettings.json En este fichero, se deberá cambiar el string de conexión a la base de datos si es necesario: Figura 93. Cadena de conexión para la base de datos en el Back-End Paso 4: Ejecutar la aplicación en el entorno de desarrollo $ dotnet run --launch-profile https O bien se puede ejecutar el Back-End desde Visual Studio 2022, a través del botón de Run con https seleccionado. El Back-End estará disponible en https://localhost:7103 para el Front-End. Página 34 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Anexo VI: Manual de usuario En este apartado, se mostrará cómo utilizar la aplicación web. Es importante recordar que una vez desplegada la aplicación, únicamente se necesita un navegador web y los permisos necesarios para acceder a ella, es decir, el usuario debe pertenecer al grupo de Directorio Activo asociado a la aplicación web. Inicio de sesión Antes de poder navegar por la aplicación, es necesario autenticar al usuario. Es por ello que una vez accedes a la aplicación, esta obtiene el usuario de Windows y comprueba si pertenece al grupo de la aplicación (Figura 94). No es necesario introducir ninguna credencial de usuario. Figura 94. Pantalla de carga del inicio de sesión Si nos autenticamos correctamente, además de aparecer una notificación confirmándolo, podremos ver en la parte superior derecha de la pantalla (header) nuestro nombre completo (Figura 95): Figura 95. Nombre completo del usuario en el header Navegación Una vez realizado el inicio de sesión, se habilita la navegación en la aplicación. Para ello, contamos con una barra lateral izquierda, donde podemos Página 35 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez ver todas las rutas posibles en la aplicación, apareciendo subrayada en azul la ruta actual en la que nos encontramos (Figura 96): Figura 96. Barra lateral de navegación Pantalla de Dashboard La pantalla que se carga automáticamente es el Dashboard (Figura 97). Esta pantalla cuenta con un análisis del Directorio Activo, exponiendo información sobre usuarios, inicios de sesión, grupos y sistema: Página 36 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 97. Pantalla de Dashboard A continuación, se muestra cada uno de los componentes ampliados: Página 37 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Figura 98. Gráfico de tipos de usuario Figura 99. Informes de usuario Figura 100. Informes de sistema Figura 101. Informes de inicio de sesión Figura 102. Informes de grupos Página 38 de 70 Trabajo Fin de Grado Eder Sampayo Rodríguez Acceso a botón de datos En la parte superior del Dashboard, contamos con unos botones para obtener más información sobre los datos. Por ejemplo, si queremos ver los usuarios que nunca han iniciado sesión, debemos pulsar sobre el siguiente botón (Figura 103): Figura 103. Ejemplo de botón de datos del Dashboard Y se nos abre una tabla con toda la información (Figura 104), en la que podemos aplicar filtros y ordenación, y una vez terminado exportarla a un CSV: Figura 104. Ejemplo de tabla de datos en el Dashboard Página 39 de 70