‫-: Ahora finalmente es el momento de usar la API de
‫inicio de sesión que creamos en
‫las secciones anteriores y hay un montón de
‫cosas que hacer aquí para que el front-end interactúe con el back-end.
‫Y entonces estamos haciendo esto en conferencias separadas.
‫De todos modos, comencemos ahora.
‫Y así es como va a funcionar.
‫Entonces, vamos a permitir que los usuarios inicien sesión en
‫nuestro sitio web mediante una solicitud HTTP o una llamada ATEX, como
‫a muchas personas les gusta llamarlo también.
‫Y estamos haciendo esa solicitud HTTP al punto final de la API de inicio
‫de sesión que implementamos antes de usar
‫los datos que el usuario proporciona en este formulario que tenemos aquí.
‫Por lo tanto, recuerde que nuestra API enviará una
‫cookie que se almacenará automáticamente en el navegador.
‫Y también se devuelve automáticamente
‫con cada solicitud posterior.
‫Y como verás, esta es una clave
‫fundamental para que nuestro sistema de autenticación funcione.
‫Pero de todos modos,
‫dado que estamos haciendo esta solicitud HTTP
‫en el navegador, por supuesto, volveremos a trabajar en el lado del cliente.
‫Pero de todos modos, dado que
‫estamos haciendo una solicitud HTTP en el navegador, seguiremos trabajando
‫en el código de secuencia de comandos de trabajos del lado del cliente.
‫Así como hicimos con la implementación de Mapbox.
‫¿Bien?
‫Así que sigamos adelante y creemos un nuevo archivo aquí.
‫Y eso es público, js, y un archivo nuevo, al que llamaré
‫inicio de sesión. js y en
‫el siguiente video, de hecho, vamos a
‫agrupar todos estos archivos JavaScript
‫separados que estamos creando aquí para
‫el front-end en un gran paquete.
‫¿Bien?
‫Pero por ahora, centrémonos en hacer que esta funcionalidad
‫de inicio de sesión funcione.
‫Pero de todos modos, comencemos ahora agregando un detector de
‫eventos, escuchando el evento de envío en nuestro formulario de inicio de sesión, ¿de acuerdo?
‫Entonces, nuestro formulario de inicio de sesión tiene esta clase de formulario aquí.
‫Bien, ahora seleccionemos esto para el
‫elemento y luego, escuchemos el evento de envío.
‫Espero que esté familiarizado con este tipo de lógica
‫en el JavaScript del lado del cliente.
‫Y, con suerte, esto no es nada nuevo para ti.
‫Entonces, document. querySelector, que usamos
‫para seleccionar en función de la clase.
‫Agregue entonces ese nombre
‫de Selector, y ahora agregue EventListener, escuchando el evento de envío.
‫Básicamente, un evento en el que el navegador se activará
‫cada vez que un usuario haga clic en el botón enviar en el formulario.
‫Luego agregue la función
‫de recopilación, tendremos acceso a ese evento en sí, ¿de acuerdo?
‫Entonces, la tercera cosa que
‫hacemos es decir evento. preventDefault.
‫¿Okey?
‫Entonces esto evita que el formulario cargue cualquier otra página.
‫A continuación, obtengamos el valor del
‫correo electrónico y la contraseña que ingresa el usuario.
‫Y estos son, en este elemento, con el correo electrónico de
‫identificación y la contraseña de identificación, ¿de acuerdo?
‫Entonces, estos dos
‫campos de entrada y obtengamos también estos datos.
‫(escribiendo en un teclado) Así que documento,
‫obtenga el elemento
‫por ID.
‫Correo electrónico, y luego usamos la propiedad de
‫valor para alcanzar ese valor.
‫No nodeValue, solo valor.
‫Dupliquemos esta línea, ¿de acuerdo?
‫Entonces, ahora hagamos el inicio de
‫sesión real en una función separada, ¿de acuerdo?
‫Ahora llegamos aquí, este
‫error de eslint y eso es nuevamente
‫porque tenemos eslint solo configurado para no código JS.
‫Así que, en realidad, deshabilitemos eso como lo hicimos aquí.
‫Así que coge este fragmento de código.
‫¿Bien?
‫Y ahora, como decía,
‫creemos esa función de inicio de sesión.
‫Así y así,
‫y esta función va a aceptar un
‫correo electrónico y una contraseña.
‫Y antes
‫que nada, veamos si este código realmente funciona.
‫Así que vamos a alertar,
‫así que básicamente crea una ventana de alerta.
‫Y con este correo electrónico y contraseña.
‫¿Bien?
‫Ahora, por supuesto, también debemos volver a
‫llamar a esta función con el correo electrónico y la contraseña.
‫Y finalmente, también debemos incluir este archivo de inicio de
‫sesión en nuestra plantilla base, ¿de acuerdo?
‫Y nuevamente, como estaba diciendo al principio,
‫en el siguiente video,
‫vamos a agrupar todo este código de front-end
‫aquí en un gran archivo JavaScript.
‫¿Bien?
‫Eso es mucho mejor para el
‫rendimiento y también es una mejor experiencia de desarrollador para nosotros.
‫De todos modos, esto debería estar funcionando ahora.
‫Recarguemos esta página aquí.
‫Entonces tengo que completar, validar aquí,
‫de todos modos, Chrome ni siquiera me permitirá enviar el formulario.
‫Muy bien, aquí recibimos nuestra alerta
‫con el correo electrónico que
‫acabamos de ingresar y luego
‫la contraseña,
‫supongo, no aparece porque especificamos dos valores allí.
‫Entonces, en su lugar, especifiquemos un objeto aquí y veamos
‫si funciona nuevamente.
‫(escribiendo en un teclado) Bueno, supongo que intenta
‫convertir ese objeto
‫en una cadena aquí.
‫Está bien, pero aquí realmente no importa.
‫Por lo general, estoy más acostumbrado a usar Console. log en lugar de alert.
‫¿Bien?
‫Pero de todos modos, estoy seguro de que ahora está funcionando aquí.
‫Y ahora sigamos adelante y creemos esta función.
‫Entonces, para hacer estas solicitudes HTTP para el inicio
‫de sesión,
‫usaremos una biblioteca muy popular llamada Axios, ¿de acuerdo?
‫Y en el siguiente video vamos
‫a descargar esta biblioteca de NPM y agruparla con
‫todos nuestros otros
‫scripts, pero por ahora, usémosla desde un CDN.
‫Entonces, vamos a Google Axios
‫CDN, ¿de acuerdo?
‫Luego, continúe y copie este aquí, y
‫luego, en nuestro
‫script base, pongámoslo aquí en el primero, ¿de acuerdo?
‫Entonces, esto
‫expondrá un objeto Axios al alcance global, que
‫luego podemos usar en nuestra función de inicio de sesión, ¿de acuerdo?
‫Entonces ahora podemos decir Axios, y
‫luego pasar las opciones para nuestra solicitud.
‫Primero que nada, digamos que estamos haciendo una post-solicitud.
‫Entonces, necesitamos una URL.
‫¿Bien?
‫Así que obtengamos eso de Postman.
‫Entonces, esta es nuestra URL aquí.
‫Y también, por
‫supuesto, agregaremos el host allí.
‫Entonces aquí, por supuesto, es http y luego el
‫host local básicamente.
‫Y, entonces, esta
‫es nuestra entrada de inicio de sesión, y
‫ahora necesitamos especificar los datos que
‫estamos enviando junto con la solicitud en el cuerpo.
‫¿Bien?
‫Y eso es correo electrónico: correo electrónico.
‫Y así, como ya sabe, podemos eliminar este correo electrónico.
‫¿Okey?
‫Entonces se llama correo electrónico aquí,
‫porque nuestro punto final espera que los datos se llamen correo electrónico, ¿verdad?
‫Entonces eso es lo que tenemos aquí en el cuerpo.
‫Necesitamos especificar una propiedad llamada correo electrónico
‫y otra llamada contraseña.
‫Y eso es exactamente lo que
‫estamos haciendo aquí, pero luego tiene el mismo nombre que este parámetro aquí.
‫Entonces, basta con decir correo electrónico
‫y lo mismo se aplica a la contraseña.
‫¿Okey?
‫Ahora, Axios aquí devuelve una promesa y,
‫por lo tanto, usemos una
‫espera única para esperar a que vuelva ese valor.
‫Así que espere aquí, y luego asíncrono aquí.
‫Ahora, tenga en cuenta que este es un código orientado
‫al cliente y solo los
‫navegadores más modernos pueden ejecutar una única función de
‫espera, pero en este curso, realmente no voy a entrar en eso.
‫¿Okey?
‫De todos modos, guardemos el resultado de esta esperando la
‫promesa en la variable de resultado.
‫Y luego, para ver el resultado,
‫digamos consola. resultado del registro.
‫¿Okey?
‫Ahora, una cosa que realmente me gusta de Axios
‫es el hecho de que arrojará un
‫error cada vez que recibamos un error de nuestra entrada de API.
‫Entonces, digamos que hay una contraseña incorrecta y,
‫por lo tanto, el servidor enviará un 403
‫y, básicamente, un error.
‫Por tanto, siempre que haya
‫un error, Axios también lo activará.
‫Y eso es muy útil porque, con eso, ahora podemos
‫usar un bloque try catch.
‫¿Okey?
‫Básicamente, para hacer un poco de manejo de errores aquí
‫en el lado del cliente.
‫Entonces, por ejemplo,
‫cuando el usuario ha iniciado sesión correctamente,
‫entonces desea mostrar algún mensaje que diga
‫eso, y tal vez alguna otra
‫lógica, pero si no, bueno, entonces vamos a ingresar al
‫bloque de
‫captura, y luego podemos , realice alguna otra acción basada en el error.
‫(escribiendo en un teclado) Entonces, echemos un
‫vistazo al error también.
‫Y solo para asegurarme, también quiero registrar el correo electrónico y la
‫contraseña en la consola.
‫Entonces, intentemos eso aquí.
‫Recargue nuestra
‫página, (escribiendo en un teclado) Y estoy ingresando
‫una contraseña incorrecta ahora, ¿de acuerdo?
‫Prueba uno, dos, tres, cuatro, cinco.
‫Echemos un vistazo a nuestra consola aquí también.
‫Y obtenemos este error aquí desde mapbox, js, pero no
‫se preocupe por eso.
‫Lo arreglaremos un poco más tarde.
‫Pero por ahora, echemos un vistazo a lo que sucede aquí.
‫Y aquí tenemos un buen error, ¿de acuerdo?
‫Y entonces, en realidad, cuando tenemos que echar un vistazo aquí es
‫un error. respuesta.
‫Y luego señalar los datos.
‫Bien, y encontrará esto aquí en la documentación de Axios en caso
‫de que se esté preguntando de dónde viene.
‫¿Bien?
‫Permítanme seguir adelante y copiar este correo
‫electrónico porque no es tan bueno escribirlo siempre manualmente.
‫Y ahora, de hecho, obtenemos aquí un error muy bien formateado.
‫¿Okey?
‫Y este es básicamente exactamente el código
‫jsen que enviamos desde nuestro servidor.
‫¿Derecha?
‫Entonces, esto es exactamente
‫lo mismo que hemos estado viendo en Postman.
‫Entonces obtenemos nuestro error completo, el mensaje y también la pila.
‫Y entonces vemos que probablemente no proporcionamos el correo
‫electrónico y la contraseña correctamente por alguna razón.
‫Así que retrocedamos, echemos un vistazo.
‫Oh, hice algo extraño aquí donde pasé un objeto
‫con el correo electrónico
‫y la contraseña.
‫Y creo que eso es de antes,
‫cuando trató de hacer esa
‫alerta y supongo que lo hice en el lugar equivocado.
‫Y es por eso que en realidad vimos undefined aquí.
‫Y aquí tenemos este objeto.
‫Básicamente, el correo electrónico era todo este objeto
‫y la contraseña no estaba definida.
‫¿Okey?
‫Así que ahora, esto debería solucionarlo,
‫vuelva a cargarlo.
‫Ah, ahora obtenemos este error correcto que
‫realmente estábamos esperando.
‫Entonces ahora es un correo electrónico o
‫contraseña incorrectos porque especifiqué una contraseña incorrecta, ¿de acuerdo?
‫Pero ahora, eliminemos los cinco para
‫luego probar uno, dos, tres, cuatro, debería ser correcto.
‫Entonces, iniciemos sesión
‫y ahora obtenemos una respuesta de 200.
‫Entonces, uno exitoso.
‫Así que abramos esto
‫y lo que realmente nos interesa son los datos.
‫Así que básicamente respuesta. data porque aquí
‫es
‫donde se encuentra nuestra respuesta jsen.
‫Entonces aquí, obtenemos
‫estos datos aquí, y también obtenemos el estado y el token.
‫Y entonces, este es nuestro token web jsen correcto correspondiente
‫a este usuario que inició sesión.
‫Ahora bien, lo realmente interesante
‫es echar un vistazo a nuestras cookies.
‫Y lo hacemos en Google Chrome al
‫menos haciendo clic en este
‫icono aquí y luego aquí abajo, tienes las cookies.
‫Y también dice que nuestra conexión no es
‫segura y
‫eso es simplemente porque no estamos usando HTTPS en este
‫momento, pero eso no importa.
‫Lo que importa aquí es que ahora
‫tenemos esta cookie y, de hecho, se llama
‫jsen web token, y tiene exactamente el jsen web token
‫que vemos aquí.
‫Entonces, esto es solo el final, básicamente, de la
‫cadena, así que ven que esto es igual a lo que tenemos aquí.
‫Y es esta cookie aquí, que realmente
‫nos permitirá construir toda esta autenticación.
‫Nuevamente, porque el navegador no enviará esta cookie
‫junto con cada nueva solicitud.
‫Y déjame mostrarte en nuestro back-end.
‫Así que volvamos allí y vayamos a la aplicación. js.
‫Y ahora estamos de vuelta en nuestra nota, o
‫de hecho en nuestro código Express.
‫Ahora, para poder acceder realmente a
‫las cookies que se encuentran en nuestra solicitud.
‫En Express, necesitamos instalar cierto middleware.
‫Y entonces necesitamos instalar eso desde un paquete NPM.
‫Y eso es de nuevo, ven a nuestra
‫otra terminal y
‫luego NPM instala el analizador de cookies.
‫¿Okey?
‫Entonces, básicamente, este paquete analizará todas las
‫cookies de la solicitud entrante.
‫cookieParser.
‫¿Bien?
‫Y ahora usémoslo cerca de este analizador corporal.
‫¿Okey?
‫Entonces estos dos son muy similares.
‫Este primero analiza los datos del cuerpo
‫y el segundo analiza los datos de las cookies.
‫Y ahora, si en este middleware aquí,
‫podemos usar request. galletas.
‫Y ahora, para cada
‫solicitud, siempre mostraremos todas las cookies en la consola.
‫Entonces, si ahora volvemos a cargar esta página, o
‫realmente cualquier otra página, permítanme
‫abrir esta aquí en una nueva pestaña.
‫Entonces, si ahora regresamos, deberíamos ver esa cookie aquí.
‫Y, de hecho, aquí está.
‫Entonces, esta es la cookie que se
‫envió a nuestra aplicación al cargar esa página en el navegador.
‫Y si
‫vuelvo a hacer eso, verás otro, ¿verdad?
‫Asi que aqui esta.
‫Y ahora podemos usar esto para proteger nuestra ruta.
‫Muy bien, probemos eso.
‫¿Okey?
‫Pero antes de
‫que podamos hacer eso, necesitamos en
‫nuestro controlador apagado para agregar eso aquí también.
‫Entonces, en este momento, solo estamos leyendo el token web
‫jsen del encabezado de autorización.
‫¿Derecha?
‫Y solo si comienzan con este portador, ¿de acuerdo?
‫Así que para el token al portador.
‫Pero ahora, básicamente, también queremos leer el
‫token web jsen de una cookie.
‫Entonces, lo que podemos hacer aquí es básicamente un otro si, así que
‫si no hubiera un token en el encabezado de autorización,
‫bueno, echemos un vistazo a las cookies.
‫Así que solicítalo. galletas. token web jsen.
‫Entonces JWT, que es el nombre de la
‫cookie y, por lo tanto, en el objeto de
‫cookies, habrá una propiedad llamada JWT.
‫Así que esto de aquí, ¿verdad?
‫Entonces, si esto existe,
‫bueno, entonces el token debería ser exactamente eso.
‫Así que solicítalo. galletas. jwt.
‫Bueno.
‫Y ahora, con esto, también podemos
‫autenticar a los usuarios en función de los tokens enviados a través
‫de cookies y no solo en el encabezado de autorización.
‫Excelente.
‫Y solo para probar esto, protejamos una de
‫nuestras rutas aquí en la vista.
‫Y lo haré con esta página de detalles del recorrido, ¿de acuerdo?
‫Así que eso es
‫solo para probar porque, por supuesto, no tiene mucho sentido,
‫pero solo quería mostrarles que, tal como está ahora, nuestro inicio
‫de sesión ya está funcionando.
‫Así que importemos el authController aquí.
‫(escribiendo en un teclado) Y
‫luego, como antes, edite aquí en esta ruta.
‫Entonces authController. proteger.
‫Y esto no es nada nuevo en este momento.
‫Y luego, solo si el usuario está conectado, podemos
‫ir a getTour.
‫Excelente.
‫Entonces, lo que voy a hacer ahora es básicamente eliminar esta cookie primero
‫solo para mostrarle lo que sucede cuando un usuario que
‫no ha iniciado
‫sesión intenta acceder a esa ruta ahora.
‫Entonces, básicamente, si eliminamos esta cookie, es como cerrar la
‫sesión del usuario, ¿verdad?
‫Entonces, si echa un vistazo a nuestros
‫recorridos, entonces debería verse bien.
‫Pero, si ahora intentamos acceder a esta
‫página, deberíamos obtener un error.
‫Y de hecho, ahí está, diciendo que no ha iniciado sesión.
‫Lo suficientemente justo.
‫Así que retrocedamos e iniciemos sesión.
‫¿Okey?
‫Así que, aquí vamos.
‫Y luego, en el futuro, por supuesto, también implementaremos algunas ventanas de alerta
‫aquí y
‫todas esas cosas buenas.
‫Pero por ahora, nuevamente, hagámoslo funcionar.
‫Y entonces ves que volvemos
‫a tener nuestra linda galleta aquí, ¿de acuerdo?
‫Entonces, ahora intentemos acceder a esta ruta protegida.
‫Y de hecho, ahora funciona.
‫Fantástico, eso ya es genial, ¿verdad?
‫Ahora, idealmente, cuando un usuario está conectado, no queremos
‫mostrar estos botones aquí, sino
‫como un menú de usuario o una imagen del usuario.
‫Entonces, básicamente, muestra
‫que ese usuario está realmente conectado, ¿verdad?
‫Así que hagámoslo en el siguiente video, junto con unir todos
‫nuestros archivos JavaScript
‫en el front-end como estaba explicando anteriormente.
‫Así que no espere, pasemos directamente al siguiente.
‫Te veo allí.