¿Quiénes son Vue? Autenticación en Vue, Las Partes Importantes

Bueno, no me malinterpreten. En cierto sentido, es bueno que sea intimidante, porque muestra que se toman en serio la responsabilidad de un flujo de trabajo como este, que es importante y debe mantenerse seguro. Pero no necesitan tener miedo al implementarlo en Vue, y se los mostraré. Pero antes de eso, rápidamente, mi nombre es Ramona. Trabajo como defensora del desarrollo en Auth0. Pero además de eso, soy una experta en desarrollo web reconocida por Google, una embajadora de Women Techmakers y una embajadora de Cypress. Y a diferencia de las últimas veces en las que les hablé sobre testing, esta vez quiero hablarles sobre temas relacionados con la seguridad, especialmente cuando se trata de un flujo de trabajo tan sensible como el inicio de sesión. Es igual de importante, si no más importante, que la calidad del software, y está entrelazado.

Entonces, sí, comencemos. Les hice la pregunta, ¿quién son indirectamente cuando se trata de poder ingresar a esta conferencia? Pero responder a la pregunta, ¿quién eres, o quién eres en realidad?, es algo que hacen muchas veces cuando se trata de su vida laboral, su día a día. Pero también cuando se trata del desarrollo web, e incluso en películas, sucede. Como en este cortometraje llamado ¿Quién eres?, dirigido por Julio Poz en 2019. Básicamente, la película trata sobre responder a esta pregunta, e imaginen si alguien la hiciera, responderíamos con toda nuestra historia de vida, lo cual creo que todos aquí sabemos que no es necesario responder, ¿verdad? Entonces, ya sea que se les pregunte quiénes son en la vida real, o si tienen algunos casos dentro de sus aplicaciones donde se debe dar esta respuesta, den una respuesta válida, una respuesta breve pero segura, para que la persona o el servicio que lo solicita pueda estar seguro de que son quienes dicen ser. Pueden estar seguros cuando se trata del proceso de autenticación. Pero definamos qué es realmente la autenticación, para tener un entendimiento compartido, para saber de qué estamos hablando. La primera parte que hice fue buscarlo en el Diccionario Oxford, y ellos dicen que la autenticación es el proceso o acción de demostrar o mostrar que algo es verdadero, genuino o válido. Si lo referimos a la ingeniería de software, como también lo hace Oxford, dicen que es el proceso o acción de verificar la identidad de un usuario o proceso. O en palabras más simples, como yo lo digo, queremos determinar si alguien o algo es quien o lo que dice ser. Y como dije, me enfocaré en los aspectos más importantes aquí. Y esto implica que no es una profundización.

Quiero ayudarte a comenzar en el tema de la autenticación, pero siempre trato de referirme a recursos adicionales mediante un código QR, por ejemplo. Si no puedes tomar una captura de pantalla o una foto de un código QR o escanearlo a tiempo, de todas formas compartiré mis diapositivas más tarde. Así que no te preocupes por eso. Dije que quiero mostrarte las partes más importantes, y esta es una de ellas, en mi caso o en mi opinión.

Primero lo primero, quiero hablar sobre los términos, porque a la gente le gusta mezclarlos, incluyéndome a mí. Espero no hacerlo en esta charla esta vez. Esperemos que no. Pero seamos muy claros en eso. La autenticación es la que se definió anteriormente. Queremos verificar quién es el usuario y validar su identidad antes de otorgar acceso a nuestras funciones, a los recursos protegidos, lo que sea. Y la autorización es algo diferente, aunque están conectados. La autorización significa que debes verificar si el usuario autenticado, es decir, ya sabemos quién es, tiene permiso para ver o hacer estas cosas dentro de tu aplicación. Este proceso es más detallado. Determinaremos los permisos que tiene un usuario o a quién conocemos. Por ejemplo, darles un cierto rol si son administradores, editores, lo que sea. Estos son dos términos diferentes, pero están conectados porque la autenticación es el primer paso para tomar decisiones de autorización. Primero debemos ver quién es la persona y luego, tan pronto como sepamos eso, podemos decidir qué pueden hacer dentro de nuestra aplicación. Pero ¿cómo podemos implementar este flujo en una aplicación de una sola página, especialmente considerando algunas diferencias? ¿Cómo queremos autenticarnos en el servidor en general? Porque hay varias formas, no es solo una forma de autenticación, ¿verdad? Necesitamos decidir tres factores que queremos utilizar. Esto podría ser algo que sabemos, como un nombre de usuario o una contraseña, algo dentro de nuestra aplicación. Podría ser algo que tenemos, como un teléfono celular como el que tengo aquí, una tarjeta de débito o incluso una YubiKey. Algo físico en la mayoría de los casos. O algo que somos, como las huellas dactilares que tenemos o el reconocimiento facial. Esos pueden ser los puntos donde podemos autenticarnos, donde podemos demostrar quiénes somos.

Pero si decidimos sobre eso o si pensamos en autenticación, supongo que esta vista vendrá rápidamente a tu mente, ¿verdad? Es la típica interfaz de inicio de sesión, con un nombre de usuario y una contraseña, solicitándolos. Así que esto se refiere a algo que sabemos, ambos. Y como es solo un factor, llamémoslo autenticación de un solo factor. Pero no tiene que ser algo que sabemos. Puede ser cualquier factor de los tres mencionados anteriormente.

Y como es bastante simple, pensemos en una pequeña demostración, un pequeño ejemplo de código para construir una autenticación simple en Vue. Bien, esta es mi configuración de proyecto para el ejemplo simple. Es un proyecto típico de Vue 3 con Vue Router. Pero hay algunas adiciones, necesitamos un backend, básicamente una base de datos. En mi caso, lo simularé utilizando un servidor express. Y un pequeño adelanto, más adelante usaremos la biblioteca JSON Web Toolkit como dependencia.

En cuanto a la estructura, tendremos las típicas para los proyectos de Vue, como partes separadas de la interfaz de usuario, como una vista de inicio, una vista de inicio de sesión, un panel de control que podría estar protegido más adelante. El enrutador GIS para Vue Router para proteger la ruta del panel de control, por ejemplo, y definir las demás sin protección. Y por último, pero no menos importante, la simulación del backend, que crea todos los usuarios que queremos validar. Puedes echarle un vistazo en StackBlitz. Aquí tienes una instancia que he creado para ti. La fijaré en muchas diapositivas, así que no necesitas escanearla ahora mismo. Y también hay un repositorio de GitHub. Así es la simulación del backend. Es bastante simple. He creado un pequeño servidor express estándar, que contiene una ruta de inicio de sesión.

Antes de echar un vistazo a esta ruta, quiero codificar un usuario simulado. Así que en error con algún usuario en él, ya que no tenemos una base de datos de ningún tipo. Por supuesto, deberías usar una base de datos, pero por ahora quiero mantenerlo simple. Después de tener esto, definiremos dentro de la ruta de inicio de sesión. Obtendremos el usuario que el cliente envió y averiguaremos si está en nuestra simulación de base de datos. Por supuesto, reemplazarás esto con tu creación de base de datos más adelante para obtener los datos del usuario. Pero esto básicamente hará la comprobación de si las credenciales del usuario son válidas o no. Y dependiendo de eso, como se encuentra, veremos si estamos autenticados y enviaremos un código de estado 200 o no. Así que está muy simplificado, lo sé, pero debería ser suficiente por ahora.

Y ahora podríamos echar un vistazo a nuestro enrutador de vista. Donde definiremos las rutas y protegeremos el panel de control estableciendo requires en verdadero en la parte del encabezado de nuestra definición. Estableciéndolo en verdadero y luego yendo a la vista de inicio de sesión donde, supongo, primero accederemos al nombre de usuario o contraseña ingresados por el usuario utilizando el modelo de vista para ello. Luego construiremos la solicitud para el simulador dentro de un bloque try-catch porque a veces pueden ocurrir algunos problemas. Pero vamos a hacerlo.

Así que construiremos la solicitud enviándola mediante Axios. La enviaremos al punto final que creamos para nuestro pequeño simulador de backend. Y sí, agregaremos un encabezado, por lo que estableceremos el tipo de contenido en aplicación JSON para trabajar con él fácilmente. Y agregaremos los data con el nombre de usuario y la contraseña. Sí. Y si la respuesta tiene algunos data en ella. Entonces es exitoso. Estableceremos el inicio de sesión fallido en falso, lo cual proporciona un estilo y un manejo de errores para que todo esté bien. Y podremos navegar al recurso del panel de control sin ser bloqueados. Lo comprobaremos para asegurarnos de que realmente funcione, así que no te preocupes. De acuerdo, si no hay data en él. Estableceremos el inicio de sesión fallido en verdadero. Y eso es todo.