De 0 a Autenticación en una hora con ReactJS

Pero mi nombre es Kevin. Trabajo en Dscope y hoy estoy aquí para presentar nuestro taller de cero a una hora. Este es un taller de React Node.js que realizamos bimensualmente o una vez al mes. Y esta es la tercera edición de esto. Vamos a mostrarles lo fácil que es implementar la autenticación de Dscope en su proyecto de React. Así que hoy tenemos una agenda. Llegaré a eso en un segundo. Primero, un poco sobre mí para presentarme. Así que mi nombre es Kevin. Trabajo en Dscope. Vivo en San Francisco. Fuera del trabajo, me encanta conducir, trabajar en autos, viajar a diferentes países. Me apasiona mucho dar tutorías y ayudar a los niños con matemáticas. Pero sí, para nuestra agenda de hoy, vamos a cubrir dos cosas. Primero, vamos a repasar algunos conceptos básicos de autenticación. Solo para aclarar y asegurarnos de que todos estén en la misma página sobre lo que es la autenticación y así sucesivamente. Y luego vamos a pasar a la codificación de nuestra aplicación de muestra que hemos preparado para el taller de hoy. Así que tenemos una aplicación de muestra con React en el frontend y Node.js en el backend que les voy a mostrar. Para poder seguir esto, hay algunos requisitos previos que debo mencionar. Primero, creo que es útil tener un conocimiento básico de React, Node.js y Express, así como tener una cuenta de GitHub. De hecho, vamos a proporcionar un enlace donde pueden clonar el repositorio que tenemos si aún no lo han hecho. Eso será útil. Y luego un IDE de su elección, yo voy a usar VS Code para la sección de codificación, y Node 18 o superior para ejecutar la aplicación de muestra. Pero yendo al grano, quiero asegurarme de que todos estén en la misma página con lo que realmente es la autenticación. Estoy seguro de que muchos de ustedes, especialmente los ingenieros, ya están familiarizados con esto. Pero la autenticación es una palabra que se usa libremente por mucha gente y a veces se usa indistintamente con la autorización. Entonces, la autenticación, en pocas palabras, es básicamente verificar que eres quien dices ser. La definición que tengo aquí es verificar la identidad de un dispositivo de usuario que intenta acceder a una aplicación o sistema en particular. Y si te imaginas en un aeropuerto y estás pasando por seguridad al principio y muestras tu pasaporte o licencia de conducir, eso es como el primer paso para subir al avión. Y luego la autorización, que generalmente se utiliza junto con la autenticación después, es verificar los derechos de acceso de una persona. Entonces, después de que el usuario ha sido verificado, que dice que es quien dice ser, entonces necesitas verificar si tiene los derechos para hacer o ver una aplicación en particular. Volviendo a la analogía del aeropuerto, eso sería como estar en la puerta y proporcionar tu pase de abordar para subir al avión, porque tal vez eres quien dices ser, pero tal vez no tienes permitido estar en ese avión específico. Solo quiero asegurarme de que entendamos la diferencia entre la autenticación y la autorización. Verán ambas cosas en este taller. Pero si desean obtener más información sobre conceptos específicos de autenticación, pueden visitar nuestro centro de aprendizaje en cscope.com/learn. Tenemos muchos artículos excelentes allí sobre detalles más específicos de cómo funciona, como la estructura de los tokens de acceso JSON, cómo funcionan los servidores de autenticación y autorización en el backend y cosas así. Recomiendo encarecidamente que si están interesados en aprender más sobre la autenticación fuera del alcance de este taller, definitivamente lo revisen.

Ahora que entendemos, ya saben, qué es realmente la autenticación, esta es una descripción general de cómo puede funcionar en un sentido muy básico. Entonces, si están, por ejemplo, intentando iniciar sesión en su cuenta de Gmail o algo así, el navegador, por lo general, el usuario proporcionará credenciales y estas se pasarán del navegador al servidor. El servidor validará esas credenciales. Puede ser una contraseña, puede ser un inicio de sesión de OAuth, algo así. Y luego, una vez que el usuario se haya verificado correctamente, se devolverá alguna forma de token de acceso, generalmente como una cookie, pero también se puede almacenar en el almacenamiento local del navegador. Y luego, en el lado del navegador, todo eso se manejará para que en cada solicitud posterior, si están iniciando sesión en Gmail y luego quieren ver correos electrónicos específicos o cambiar alguna configuración de su bandeja de entrada o algo así, todas esas solicitudes son, ya saben, solicitudes autenticadas o solicitudes que deben ser autenticadas, y ese token de acceso se utiliza para validar que eres quien dices ser y poder hacer eso. Así que, en resumen, los componentes clave de la autenticación son, ustedes saben, yo, el usuario, que está iniciando sesión en Gmail, el dispositivo de escritorio o móvil que estoy usando, mis solicitudes generalmente se enviarán a algún tipo de servidor de aplicaciones, que luego pasará mis credenciales, mi nombre de usuario y contraseña o algo así, a un servicio de autenticación. Eso es lo que hace Dscope. Operamos como un servicio de autenticación, nos encargamos de todo para que, y luego eso se devuelve al dispositivo de escritorio o móvil que está utilizando el usuario, para que no tengan que preocuparse por eso. De hecho, les voy a mostrar cómo usar Dscope, cómo configurar su cuenta, cómo crear su primer flujo y mostrarles lo fácil que es personalizarlo eventualmente. Así que hagamos Dscope a nuestro proyecto. Dscope es nuestra idea de que queremos eliminar la responsabilidad de tener que preocuparse por el aspecto de la autenticación en sus proyectos y nosotros podemos encargarnos de eso y ustedes pueden preocuparse por el resto.

Este enlace aquí abajo, que espero que Chris o Asaf puedan poner en el chat, los llevará a nuestro repositorio que pueden clonar y con el que trabajaremos durante el resto de esta masterclass.

Antes de comenzar con la codificación, la razón por la que dice '¿Qué es Dscope?' es porque realmente queremos mostrarles cómo configurar su cuenta de Dscope, porque necesitaremos hacer eso. Así que empecemos.

Si pueden abrir un navegador web y dirigirse a www.dscope.com para registrarse. Alguien también puede pegar eso en el chat. Esto los llevará a nuestro sitio web principal, que se verá algo así para ustedes. Tengo una ventana de incógnito abierta. Así que no he iniciado sesión. Y luego podrán registrarse con su correo electrónico o con Google o Microsoft, según su preferencia. Y vamos a registrarnos en DCO. Esto nos llevará a nuestra consola donde podemos crear nuestro flujo. Voy a registrarme con correo electrónico, al igual que ustedes. Regístrense para obtener una nueva cuenta allí.

De acuerdo. Y luego tomen esto. Y luego pongan mi nombre. Ahora crear mi cuenta. Aquí simplemente se envía un enlace mágico a su correo electrónico y luego deberían poder ver eso. Gracias por registrarse. La consola de Dscope es una forma rápida. Háganoslo saber a mí, a un miembro del personal o a Chris si tienen algún problema con eso. Pero sí, una vez que se hayan registrado, es un proceso muy sencillo, hagan clic en 'Vamos'. Se abrirá la consola de Dscope. Y como tenemos un proyecto completamente nuevo, los llevará directamente a 'Hola'. En solo unos sencillos pasos, pueden crear recorridos de usuario sin contraseña en menos de 10 minutos. Esta es nuestra guía de inicio. Aquí les haremos dos preguntas sencillas. En realidad, creará una página de inicio de sesión que pueden agregar a sus aplicaciones react o WebJS. Y les proporcionará el fragmento de código para eso. También creará un flujo que luego pueden editar y cambiar para personalizar su autenticación. Solo presionen 'Comenzar'. Y voy a expandir esto. Dirá '¿Quién utiliza su aplicación?'. Empresas o consumidores. Esta es una pregunta sencilla, dependiendo de si desean utilizar inquilinos o no, para el alcance de nuestra aplicación de muestra en particular, creo que los consumidores están bien, no necesitamos preocuparnos demasiado por la autenticación empresarial B2B. Luego les preguntará qué métodos de autenticación desean utilizar. Aquí dice B2C porque seleccionamos consumidores, y pueden elegir hasta dos métodos que aparecerán en la pantalla de inicio de sesión. Voy a seleccionar inicio de sesión social y contraseña de un solo uso. Creo que el inicio de sesión social, como iniciar sesión con Google, es utilizado por muchos sitios web. Es muy fácil de usar, muy simple. Y especialmente si están utilizando Chrome o un navegador donde tienen inicio de sesión de Microsoft o Google, esto sería muy fácil de usar. Y luego la contraseña de un solo uso, porque también es muy sencillo y fácil de enviar una contraseña a su correo electrónico o número de teléfono, y luego les permite iniciar sesión. Luego les preguntará si desean utilizar MFA. MFA es autenticación de múltiples factores. Es una segunda capa de seguridad. Si desean agregar eso, pueden agregar algo como biometría. Pueden agregar un enlace mágico, algo así. Por ahora, nuevamente, para el alcance de nuestra aplicación en particular, no vamos a utilizar esto. También debo mencionar que en nuestra aplicación real, he preparado un flujo diferente. Así que voy a guiarlos a través de esto y mostrarles cómo crearlo.

Pueden usar esto para sus propios proyectos, pero para nuestros proyectos, les mostraré que vamos a usar otro flujo que ya he creado, y les mostraré cómo hacerlo. Es muy sencillo. Pero sigamos adelante con ese MFA por ahora, porque es un flujo bastante sencillo que estamos construyendo aquí.

Luego nos dará varias opciones diferentes para una pantalla de inicio de sesión, y esto se basa en las selecciones que hicimos anteriormente. Podemos seleccionar esta opción. Simplemente dice 'Bienvenido' con el botón continuo de Google y Microsoft. Todo esto es totalmente personalizable. Les mostraré cómo personalizar todo hacia el final. Pero podemos seleccionar esta opción, se ve bien, hagan clic en siguiente.

Y aquí es donde entramos en el meollo del asistente. Después de todas esas preguntas que les hace sobre cómo quieren configurarlo, este es nuestro paquete de resultados finales. Esta es nuestra página de inicio de sesión, que tiene una autenticación completa detrás de ella. Y creará estos cuatro flujos basados en la información que proporcionaron anteriormente. Pueden pensar en un flujo como la estructura de extremo a extremo de cómo funciona su autenticación. Quieren que la primera cosa sea una pantalla de bienvenida como esta, y luego cuando hagan clic en Google, ¿quieren que use OAuth para iniciar sesión? Y luego, a partir de ahí, ¿quieren hacer algo si es un usuario nuevo, hacer algo si es un usuario existente? Esa es la idea de un flujo. Y les mostraré cómo se ve eso en un segundo.

Pero nos vamos a centrar en el registro o inicio de sesión ahora, porque es un solo flujo que combina la funcionalidad de registro e inicio de sesión. Estos otros son obviamente buenos para casos de uso específicos, pero creo que para una aplicación de muestra de servidor, queremos tener todo en un solo flujo. Y luego, cuando hago clic en siguiente, en realidad va a construir todos esos flujos y puedo mostrarles en la pantalla de flujos cómo se ve eso. Al final del asistente de inicio, les dará la página de inicio de sesión real. Este es el componente de React real que van a usar y que está asociado con este proyecto. Este es el que vimos antes. Y este es en realidad un componente de React completo aquí que pueden usar para iniciar sesión y ver la respuesta. Les mostraré eso en el flujo que vamos a usar.

Pero, como pueden ver aquí, estos son los componentes de React que van a necesitar. Este es el envoltorio del proveedor de autor que vamos a poner en nuestro proyecto. Y luego, para nuestro backend, para nuestro servidor, como estamos utilizando un servidor Node.js, este es básicamente el código que vamos a usar para validar la sesión y construir el middleware de autenticación. Permítanme mostrarles rápidamente. Esto es, está bien, sí, lo que queremos hacer es que no podrán ver esto, porque ya he preparado un flujo, pero voy a hacer clic fuera de esto y volver a mi cuenta para mostrarles con qué vamos a trabajar y cómo se ve eso. Pueden seguirlo en su propia pantalla, pero básicamente, aquí es donde dejamos el asistente, y pueden ver que se ve un poco diferente porque lo he personalizado yo mismo. Tengo inicio de sesión con correo electrónico y tengo Google y Microsoft, y pueden ver que no dice esas palabras, y está formateado de manera un poco diferente, aún relativamente simple. Nuevamente, repasaremos el estilo más adelante, pero pueden ver que la única diferencia entre esto y lo que tenían antes es solo este proyecto aquí, y este es el identificador único. No es un secreto, por lo que se puede incrustar en su frontend, pero esto es lo que identifica el proyecto. Esto es lo que asocia sus componentes de Descope de React y todos esos componentes del SDK con este proyecto específico y cómo han configurado su flujo, y el flujo en sí se ve así.

Entonces, espero que puedan ver que no es demasiado pequeño, pero, esencialmente, esto es el inicio hasta el final de cómo funciona su autenticación. Al principio, tenemos una pantalla de bienvenida. Tenemos un botón de continuar con correo electrónico y un botón de Google o Microsoft aquí, y luego, si hacen clic en uno de esos botones de Google o Microsoft, en realidad realiza mucha autenticación, les proporciona la solicitud para iniciar sesión con Google o Microsoft, hace todo eso en la ventana emergente y luego, después de eso, finaliza el flujo y han sido autenticados. De lo contrario, si quieren continuar con correo electrónico y ponen una dirección de correo electrónico y hacen clic en ese botón, entonces simplemente los registrará o iniciarán sesión con correo electrónico. Enviarán un OTP a su correo electrónico. Si son un usuario nuevo, en realidad creará un nuevo usuario en la gestión de usuarios aquí, que les mostraré en un momento. Si son un usuario existente, también proporciona un OTP, pero simplemente finaliza el flujo después. No actualiza su usuario. Y luego puedo mostrarles aquí. Estos son varios usuarios diferentes, pero pueden ver aquí, este es mi usuario específico, y este es el ID de inicio de sesión, que está asociado con nuestro inicio de sesión de OAuth. Entonces, si voy a comenzar y hago clic en iniciar sesión con Google, como no estoy en modo incógnito, y ya he iniciado sesión con Google aquí, si hago clic en eso, verán que me llevará a iniciar sesión con Google. Y esto es lo que realmente va a ir en nuestra aplicación. Y luego vemos el JWT de sesión, el JWT de actualización. Este es el JWT que en realidad es el token de sesión que valida que tenemos una sesión y que estamos autenticados. Esto aquí es solo el JWT de sesión decodificado en base 64.

Así que muestra las reclamaciones y los encabezados. Y luego lo que vamos a hacer es usar todo este código. Y en realidad lo vamos a poner todo en una aplicación. Y les mostraré cómo usar nuestros Hooks de React y todo.

Así que empecemos ahora. Si van a este sitio web, si aún no lo han hecho, vayan a la rama en la que vamos a trabajar, que está sin terminar. Y querrán clonar este repositorio aquí. Luego iré a VS code y les mostraré cómo se ve eso. Una vez que lo hayan clonado, pueden ver aquí, hay una carpeta de cliente. Hay una carpeta de servidor. Y aquí es donde va el archivo readme y todo eso. Si quieren, en casa, si quieren revisar esto, tal vez revisar la grabación y seguirme más tarde, pueden usar el flujo de registro o inicio de sesión que proporcioné. Y les mostraré al final cómo pueden cargarlo en su propia cuenta de VSCO y jugar con él ustedes mismos.

Pero aquí, tenemos el servidor del cliente que funciona en primer lugar. Entonces, una vez que se haya clonado, deberían estar en el directorio raíz aquí con el cliente del servidor. Y en realidad he proporcionado algunos scripts en el archivo package.json que les permitirán ejecutar el servidor y el cliente muy fácilmente. No tendrán que configurar nada. Pero por ahora, pueden ver aquí en el cliente lo que deben hacer es abrir el archivo app.jsx y esto es cómo debería verse. Debería verse como un simple app.jsx sin ninguna mención de Dscope. Dscope debe ser completamente eliminado de esta aplicación. Así que haremos todo nosotros mismos y les mostraré lo fácil que es usar nuestro SDK. Aquí tenemos el terminal, esto es solo una ventana de terminal. Lo que queremos hacer es, antes de copiar el código de la guía de inicio, queremos usar npm install. Esto instalará todos los paquetes que hemos especificado en nuestro archivo package.json y package-lock.json. Así que dejemos que termine y luego. Y luego, una cosa más, quiero proporcionarles el ID del proyecto que vamos a usar. Así que voy a pegarlo aquí, lo enviaré a todos en la reunión. Este es el ID del proyecto, guárdenlo por ahora. Lo usaremos muy pronto. Pero esto inicializará nuestro proveedor de autenticación. Entonces, en el archivo app.jsx principal, esperemos a que termine esto y volvamos a la guía de inicio. La forma en que hemos configurado esta aplicación de React es que queremos tener el proveedor, pero queremos envolver toda la aplicación con este proveedor. Este es el envoltorio de React, pueden colocarlo aquí después de esto. Vamos a colocarlo en nuestro archivo app.jsx justo aquí y envolver toda la aplicación. Y luego tengo, o pueden indentar esto, o tengo el autoindentado con Prettier.

Um, así que lo hará automáticamente. Es solo en mi editor. Um, veamos si está bien. No estoy seguro de qué. Está pasando allí. Um, pero de todos modos, este es nuestro, este es nuestro proveedor de autenticación, uh, este es nuestro envoltorio de proveedor de autenticación. También queremos importarlo aquí para que no obtengamos ningún error del proveedor de. En DSCOPE react SDK. Por lo tanto, este react SDK debe instalarse a través de nuestro NPMI. Forma parte de nuestro archivo package.json. Y luego nuestro proveedor de autenticación aquí. Um, si, si realmente ejecutamos la aplicación, no debería dar ningún error. Uh, si, si lo hemos importado aquí, pero déjame, déjame iniciar esto rápidamente. Disculpen lo que está pasando allí. Sí. De acuerdo. Ahora está funcionando. Uh, tal vez mi editor está un poco extraño hoy. Um, pero de todos modos, así que tenemos, sí, ahora dice que todos los paquetes se han instalado y todo. Espero que eso haya sido un poco más, uh, sin problemas para ustedes. Um, pero, uh, básicamente, todo lo que he hecho hasta ahora en cuanto a agregar algo a esta clase, este proyecto, es importar el proveedor de autenticación. Y, um, y envolver toda nuestra aplicación con este proveedor de autenticación. Um, uh, espero que un lanzamiento suave o Chris pueda ayudarte si estás, si estás confundido al respecto. Y pegué esto en el, uh, en el chat. Entonces, um, lo que quiero hacer es en realidad, quiero ejecutar esta aplicación. Quiero mostrarles cómo se ve. Um, lo primero que quiero hacer es, lo primero que voy a hacer es después de haber instalado todo. Es abrir una segunda ventana de terminal. Ya lo han hecho aquí. Y la razón por la que es porque quiero ejecutar el cliente y ejecutar el servidor. Entonces, lo primero que quieres hacer es ejecutar el servidor y puedes hacer eso ejecutando NPM run server. Entonces puedes ver aquí, tengo este script CD server. No tiene DSM index. Sí. Entonces, el servidor se ejecutará por nosotros. El servidor se encuentra aquí. Y luego, um, luego voy a ir a la segunda ventana de terminal. Y voy a hacer NPM run. Entonces eso servirá el cliente que ya se está ejecutando. Uh, y luego echa un vistazo. Perfecto. De acuerdo. Esta es nuestra aplicación. Esto es, uh, esto es un, uh, esto es, uh, un panel de ingresos. Entonces muestra información de ingresos aquí. Um, te mostraré de dónde se obtienen todos estos data. Lo tenemos codificado en el lado del servidor. Um, pero básicamente tenemos, uh, esto es, hacemos clic en cada uno de estos, estos son rutas específicas en Express. Um, estas son rutas específicas en Express que nos proporcionarán esta información, la devolverán en la respuesta. Aquí tenemos, um, un botón de inicio de sesión.

También vamos a cambiar esto. También vamos a hacer esto dinámico eventualmente y usar nuestro isAuthenticated de React para cambiarlo de inicio de sesión a cerrar sesión, dependiendo de si estás autenticado o no. Te mostraré cómo hacerlo y obviamente hay una amplia variedad de aplicaciones con eso en tus propias aplicaciones, tus propios proyectos.

Pero si hacemos clic en iniciar sesión, me redirige a iniciar sesión. Y no tenemos una página de inicio de sesión. Así que, y lo que quiero hacer es la razón por la que empezamos con el proveedor de autenticación es que ahora que este es nuestro proveedor de toda la aplicación, podemos agregar la página de inicio de sesión de manera muy fluida. No va a hacer nada en términos de autenticar al usuario o crear un trabajo, pero no va a afectar nuestra capacidad de ver ninguna información o proteger ningún dato porque todavía tenemos que desarrollar el middleware o el lado del backend. Pero en la página de inicio de sesión, si vamos a iniciar sesión en JSX, que se encuentra en off sign in, puedes ver aquí, este es nuestro estilo. Y tenemos una fila aquí. He definido esto aquí. Así que entre estos días, todo lo que tenemos que hacer es importar disco de '@dscope/react-sdk'. Lo haré rápidamente. Creo que en el repositorio con el que estás trabajando, necesitarás hacer esto. Ahí está. Este es nuestro componente de React para la página de inicio de sesión. Y lo que puedes hacer es verlo aquí. Esto es lo que vamos a pegar. Así que puedes ver, vas y luego el ID de disco, que es solo este ID en particular, que se vincula al flujo que he construido aquí para que todos lo usen. Recuerda que ya tenemos asociado nuestro ID de proyecto con el proyecto. Así que todo lo que tenemos que hacer es copiar esto aquí, tomar eso. Y luego lo pegamos aquí para que puedas hacer esto, debería ser lo mismo para cualquier proyecto, si tienes el asistente de inicio configurado, puedes copiar y pegar esto. Porque tenemos nuestros diferentes proyectos. ¿Ya lo tienes ahí? Así que está bien hacer esto. También, en caso de que cierres el asistente de inicio, pegaré esto en el chat también. Pero esta es solo nuestra página de inicio de sesión. Y, como puedes ver, porque ya estoy ejecutando el cliente, si vuelvo aquí, nuestra página de inicio de sesión está aquí y es la misma página de inicio de sesión que estábamos viendo en el asistente de inicio al final, o al menos en mi asistente de inicio.

Y, por lo tanto, si abrimos la consola aquí, inicio de sesión. Oh, mira, dice Kevin Gal, Kevin. Él tiene.com. Ahora el problema es que no se redirige de vuelta a la página de inicio y solo muestra en la consola mi nombre y mi correo electrónico. Y la razón es porque tenemos este on success aquí que simplemente muestra en la consola el nombre y el correo electrónico del detalle del usuario. Así que lo que queremos hacer es, ya he tomado la libertad de eliminar esta función de devolución de llamada que es on success, que navegará de vuelta al panel de control, donde está todo ese genial panel de ingresos. Así que todo lo que tenemos que hacer es simplemente, vamos a eliminar este on success. Y luego lo que vamos a hacer es simplemente, um, simplemente decir on success. Oh, lo siento. Espera un segundo más. Necesitamos una función de flecha porque ya la estamos definiendo aquí. Simplemente decimos perfecto. Así que ahora, si inicio sesión de nuevo, actualizo la página, voy a iniciar sesión y luego digo, está bien, registrarse con Google. Vamos a discou.com vuelve a eso.

Genial. Así que sabemos que el flujo está completo. Aquí puedes ver, um, aquí tenemos nuestros, uh, DS y DSR. Estos son nuestros tokens de sesión actualizados aquí. Ya tenemos autenticación. Um, y, um, y, uh, aún no estamos enviando esto con ninguna de las solicitudes ni nada por el estilo. Todavía vamos a codificar todo eso. Pero, uh, bastante sencillo. Pero quiero decir, podrías ver en tal vez, ya sabes, unos minutos agregamos, uh, agregamos una página de inicio de sesión y puedes ver eso simplemente yendo a, uh, localhost:3000/sign-in, puedes ver esa página de inicio de sesión. Ahora, si volvemos al panel de control aquí, verás que todavía dice 'iniciar sesión'. La razón es porque no hemos utilizado el gancho 'isAuthenticated' de React que puede determinar, y puedes incrustar esto en cualquier lugar, en cualquier parte de tu aplicación de React para verificar si quieres realizar alguna lógica para verificar si el usuario está autenticado o no. Entonces, el primer paso que queremos hacer es, uh, permitir al usuario cerrar sesión. Queremos que suceda. No solo queremos decir 'cerrar sesión', queremos tener esa funcionalidad. Así que vamos a ir a la barra de navegación, que está en components/editor/nav-bar.jsx. Y como puedes ver aquí, ya tengo algunas cosas codificadas que no se están utilizando. Tenemos una función de devolución de llamada para cerrar sesión y una función de devolución de llamada para iniciar sesión. Tenemos un popover de cierre de sesión y un popover de inicio de sesión, la única diferencia entre estos dos es el color. Uno dice 'cerrar sesión' y el otro dice 'iniciar sesión'. Verás cómo funcionan en un minuto. Y luego, al hacer clic, apunta a una función diferente. Ahora, la razón de esto es porque cuando iniciamos sesión, lo único que queremos hacer es volver a la página de inicio de sesión. Pero cuando cerramos sesión, también queremos volver a la página de inicio de sesión, pero primero queremos cerrar sesión y lo hacemos con el 'useDisco'. Entonces lo que quieres hacer es importar 'useDisco' de 'he's go react to stk'. Espero que esto les esté quedando claro. Solo voy a importarlo. Y luego así es como lo vamos a hacer, esto es, uh, esto, nuestro inicio de sesión, ahí está, nuestro, lo siento, nuestra función de cierre de sesión está integrada como parte de esto, nuestro 'useDisco'. Entonces, si vamos a crear una constante 'logout' e inicializarla con 'useDisco'. Ahora tenemos una función de cierre de sesión, que podemos usar dentro de un 'await' para cerrar sesión del usuario e invalidar sus segundos. Puedo explicar un poco más después si tenemos tiempo sobre cómo funciona esto y cómo la tecnología puede funcionar con los puntos, pero por ahora, solo voy a mostrarles, así que debajo de 'logout', es lo mismo que 'login'. El usuario, en lugar de ser exactamente lo mismo, simplemente vamos a tener un 'try catch' y el 'try catch' va a cerrar sesión del usuario. Entonces, ya sabes, vamos a, podemos simplemente decir 'console.log(error)' si hay un error, pero si no hay error, todo lo que tengo que hacer es decir, 'Oh, espera, cerrar sesión'. Así que ahora, cuando el usuario, ya sabes, cuando el usuario haga clic en el botón de cierre de sesión, que aún no hemos incrustado, pero cuando el usuario cierre sesión y haga clic en el botón de cierre de sesión, se ejecutará esto rápidamente y simplemente asegurará de invalidar la sesión. Puedes ver que es una función asíncrona aquí que se asegurará de que la sesión se haya invalidado. Y así, uh, ahora puedes ver aquí tenemos un popover de cierre de sesión e inicio de sesión. Estos dos los creé aquí. Lo que queremos hacer ahora es que, en este momento, si te desplazas hacia abajo donde se define el popover aquí, popover de inicio de sesión, verás el contenido. Siempre muestra 'iniciar sesión', ¿verdad? Incluso si estoy conectado o desconectado, no importa, y no hay lógica detrás de eso. Entonces, la forma en que vamos a hacer esto es debajo de aquí. Quieres, en realidad, antes de eso, queremos importar algo llamado 'newSession'. Así es como vamos a asociar y obtener información de sesión actual,.

Entonces esto nos mostraría si el usuario está autenticado, por ejemplo, y luego podemos decir debajo de cerrar sesión, podemos decir, um, cons, uh, podemos decir, uh, en realidad antes de hacer eso, hagamos. Sí. Es un con. Sí. Perfecto. Entonces, um, por lo tanto, esta autenticación es parte del SDK de disco react, pero esto se inicializa con una nueva sesión. Esto determinará la información de sesión actual del usuario, si están conectados o no. Um, y lo que podemos hacer es si volvemos al popover aquí, todo lo que necesito hacer es decir, uh, si no están autenticados este año, debajo del popover. Puedes ver que si no están autenticados, se mostrará este popover de inicio de sesión y, um, lo cual tiene sentido, ¿verdad? Si no están, si no han iniciado sesión, queremos darles la opción de iniciar sesión y mostrar este botón de inicio de sesión verde. Sin embargo, si ya están autenticados. Entonces, si decimos que está autenticado como verdadero, básicamente. Luego copia este código. Puedes copiar este código. Um, y lo único que vamos a cambiar es en lugar del concepto de inicio de sesión para el popover, podemos decir que es el popover de cierre de sesión. Entonces ahora, si volvemos a nuestra aplicación, espero que esto les haya quedado claro. Bueno, estamos haciendo, um, pero básicamente ahora mostrará dos pop overs diferentes, dependiendo de lo que estemos. Y ves, porque ya hemos iniciado sesión, ¿verdad? Iniciamos sesión antes. Ahora muestra cerrar sesión en lugar de iniciar sesión. Y si hago clic en esto, en realidad cerrará la sesión del usuario. Entonces ahora la sesión está invalidada. Y si vuelvo al panel y hago clic aquí, verás que dice iniciar sesión, ¿verdad?, porque ya hemos cerrado la sesión del usuario y la sesión está invalidada. Entonces podemos, por lo tanto, usar la sesión que devuelve su autenticación falsa. Um, y puedes ver aquí, todavía estamos viendo estos data. Entonces esto es un problema, ¿verdad? No queremos mostrar estos data. El objetivo de hacer esto es eventualmente proteger estos data. Um, uh, y hay dos componentes de esto. Primero debemos cambiar la forma en que enviamos la solicitud. Debemos incluir en el encabezado HTTP, uh, en el encabezado de autorización, uh, bear, y luego el token de sesión, que vamos a obtener del SDK de react. Y luego también tenemos que cambiar el backend del servidor de node JS. Uh, que estamos ejecutando para asegurarnos de que la sesión sea válida. Um, así que vamos a hacer ambas cosas. Terminemos rápidamente con el frontend. Entonces, si vas a dashboard.jsx, que está en el componente del panel de control o en realidad, lo siento, solo panel de control y luego dashboard.jsx. Um, puedes ver aquí, este es el panel de control. Este es el, este es el panel principal que estás viendo aquí, y luego, um, ya he codificado mucho, uh, he puesto algunas cosas ya, específicamente si te fijas en este icono de notificación abierta, no te preocupes demasiado por lo que es, básicamente. Um, solo lo tengo para que, uh, si el usuario, uh, si el usuario intenta hacer una solicitud, mostrará un mensaje de error y luego los redirigirá automáticamente de nuevo a, uh, a la página de inicio de sesión. Um, pero aquí puedes ver, ya sabes, navegar con iniciar sesión. Esa es la función de devolución de llamada que estamos usando. Eso no es muy importante. Lo que es importante es esto. Así que cada vez que te muestro, cada vez que hago clic en uno de estos. Abramos la red rápidamente. Estoy obteniendo un 200 y luego envía una solicitud a local host 80. Ahí es donde se encuentra el servicio de gráficos de barras y está devolviendo, está obteniendo toda esta información que luego react procesa y muestra en esa presentación elegante. Entonces lo que queremos hacer es asegurarnos de que esto no vuelva del servidor a menos que el usuario esté autenticado. Por supuesto. Entonces, um, puedes ver aquí, uh, actualmente no hay. Encabezados de autorización. Um, así que queremos incluir eso en nuestras solicitudes GET de Axios, uh, uh, aquí mismo.

Entonces, debajo de esto, si estás familiarizado con Axios, en realidad tenemos, les mostraré, tenemos una segunda sección de validación en nuestra documentación que muestra cómo se usa con fetch, pero si estás familiarizado con Axios, aquí es donde realmente configurarías el encabezado HTTP. Entonces lo que podemos hacer es decir headers. Y luego otra cosa aquí, y si decimos autorización, porque queremos incluir encabezados de autorización y luego el token de sesión bearer. Entonces lo que estoy haciendo aquí es incluir en cada respuesta. Un encabezado de autorización en nuestro encabezado HTTP. Eso es bearer y luego el token de sesión. La cosa es que tengo que definir el token de sesión, ¿verdad? ¿Cómo obtengo el token de sesión después de que el usuario haya iniciado sesión? Lo hacemos con el SDK de Dscope React. Así que aquí arriba, importemos, creo que es obtener token de sesión. Una función simple que podemos llamar y devolverá cualquiera que sea el token de sesión actual, si es válido y si hay una sesión válida. Entonces devolverá el token de sesión aquí. Y luego debajo, podemos debajo de este try, cuando en realidad está llamando y haciendo esa solicitud. Podemos definir aquí session token equals obtener token de sesión. Ahora, puedes ver aquí, está obteniendo el token de sesión si existe. Desde, y está en el bloque try. Entonces está obteniendo el token de sesión si existe y luego en cada solicitud GET que realiza para el permiso, envía el token de sesión con bearer en el encabezado HTTP. Y podemos ver eso si vamos aquí y simplemente actualizamos esta página. Entonces, si hago clic en esto, puedes ver que dice bearer y nada. Ahora, la razón por la que estamos cerrados de sesión, si recuerdas, y no tenemos un token de sesión válido, pero si inicio sesión, Todo esto. Pero cuando ves esto bearer y luego esto es el trabajo real que estamos enviando. Entonces esto es genial, esto es lo que permitirá que esto es lo que esto es lo que Node.js y nuestro backend tomarán, procesarán y utilizarán y realmente utilizarán para verificar la segunda y devolver información.

Así que casi hemos terminado. Les he mostrado cómo usar dinámicamente isAuthenticated y diferentes partes de la aplicación. Les he mostrado cómo agregar la página de inicio de sesión. También les he mostrado cómo agregar el encabezado HTTP con el token de sesión y cómo usar el SDK de React para hacerlo. Ahora terminemos trabajando en el middleware de Node.js. El middleware de autenticación en nuestro servidor. Así que esto es genial. Ahora lo que queremos hacer es hacer clic en un cliente y ir al índice del servidor. Sí, este es nuestro servidor Express real y ya lo hemos repasado antes. Pero si estás familiarizado con Express, aquí es donde se inicializa. Y luego este es el puerto real en el que se está ejecutando, el 8080.

Y aquí, app.listen es donde el servidor realmente comienza y donde escucha las solicitudes en ese puerto específico. Y aquí están todas las rutas que están definidas, estamos usando un enrutador de preparación. Y luego todas estas, como el gráfico de barras, por ejemplo, que les mostré antes, aquí es donde se envía la información en la respuesta. Esta información aquí está definida en un archivo TypeScript bajo la carpeta de datos. Esta es la información que estás viendo en la respuesta de la API. Y otra cosa a tener en cuenta es este Auth Helper que también he creado. Esto es relativamente simple y voy a explicar cómo funciona, pero esto es lo que vamos a usar para ver la solicitud del encabezado de autorización en cada una de nuestras rutas. Entonces, si vamos a hacer eso, queremos importar algunas cosas. Lo primero que queremos importar es el cliente vScope, que es. Eso es lo que vamos a usar para, este es nuestro objeto que vamos a usar para hacer todo lo relacionado con Dscope en nuestro servidor backend. Una de las cosas que vamos a hacer, la cosa más importante es validar la sesión. El cliente vScope tiene funciones incorporadas a las que puedes pasar, validateSession que pasará un segundo token y devolverá una promesa si está validado o no, o si es una sesión válida. Lo otro que queremos hacer es importar la función getToken, lo siento, getToken de vScopeNode SDK. Lo siento, no de vScopeNode SDK, lo siento, de authhelpers.ts. Sí, perfecto.

Entonces, esta es la función que les mostré antes. Esto es lo que realmente va a, pueden ver esto, va a recibir una solicitud. Verificar si hay encabezados de autorización disponibles. Si no los hay, simplemente devolverá una cadena vacía. Y luego la sesión validará y, de lo contrario, devolverá el token real después de 'bear'. Eso es lo que se divide y por qué se divide en función de la cadena vacía.

Entonces, lo primero que tenemos que hacer es si queremos validar la sesión, queremos diseñar un middleware que se encuentre entre nuestra solicitud y nuestra respuesta. Entonces, cuando llegue la solicitud para cada una de estas rutas, queremos usar algo como el middleware aquí, queremos decirle al enrutador que use algún middleware. Y eso se asegurará de que el middleware valide la sesión antes de devolver los datos de respuesta. Eso es solo un concepto en Express. Y básicamente vendrá aquí y luego llamará a la función siguiente. Entonces, en realidad, necesitamos construir este middleware. Este middleware, tenemos fragmentos de código disponibles en nuestra documentación, pero les mostraré una forma sencilla de construirlo ahora mismo. Lo primero que tenemos que hacer, sin embargo, es instanciar nuestros clientes de G-scope. Y lo hacemos con nuestro ID de proyecto. Así que les di esto. Vamos a usar el ID de proyecto que les di. Entonces, si vuelven a su archivo after.jsx, pueden copiarlo desde aquí y fuera del proveedor. Nuevamente, así es como se configura su proyecto y G-scope, cómo se configuran sus flujos asociados con su proyecto Node.js y su proyecto React localmente y en producción. Entonces, nuevamente, esto no es un secreto. No tienes que preocuparte de que esto se exponga. No se puede obtener ninguna información de esto ni información segura. Pero básicamente, lo estoy definiendo aquí para que luego podamos usar la función validateSession, que es una función como parte del cliente de G-scope que nos permitirá simplemente pasar ese token de sesión y devolver una promesa verdadera, básicamente, si funciona o no. Y así, voy a definir este off-middleware aquí. Eso es lo que realmente va a hacer eso. Y luego, como estoy usando TypeScript, tengo que definir los tipos. Pero lo que voy a hacer es simplemente decir solicitud, solicitud, responder, responder, y luego la función siguiente, boom. Y luego, aquí, pasamos la solicitud, respondemos, y la función siguiente. Y en realidad vamos a ejecutar un bloque try catch. Nuevamente, como lo estábamos haciendo con el cierre de sesión. Entonces, vamos a decir try catch, y luego decir E. Y luego lo único que vamos a hacer es simplemente esperar a que ClientsAuth.validateSession. Y luego, la sesión realmente vendrá. El token de sesión se pasará allí, y luego dirá si está bien, es una sesión válida o no. Entonces, si no es una sesión válida, lo que queremos hacer es probablemente devolver algún tipo de código de estado de respuesta HTTP. Así que haremos res.status 401, no autorizado. Y luego, podemos decir aquí, JSON, podemos decir error, nuevo error. Y luego podemos decir. Oh, lo siento, no aquí, no aquí. Una cosa a tener en cuenta aquí es, oh, porque estamos usando un await, también hagamos que esta función sea asíncrona aquí. Así que nos deshacemos de este error aquí. Y luego client auth.validate session, en realidad necesitamos pasar el token de sesión, ¿verdad? Necesitamos obtener ese token de sesión. Y cómo vamos a obtener ese token de sesión es, si recuerdas, se pasó a través de cada una de las solicitudes aquí. Bearer token de sesión. Entonces, cómo vamos a tomar eso es, vamos a llamar a nuestra función get token, que estaba en los Auth Helpers, eso es lo que importamos antes. Y, recuerda, puedes ver que recibe una solicitud. Y simplemente vamos a pasar la solicitud. Entonces, si pasamos la solicitud, irá aquí, en realidad obtendrá el encabezado de autorización, y luego simplemente validará la sesión y verá si funciona. Ahora, si devuelve un 401 No autorizado, simplemente lo haremos devolver. No voy a hacer nada.

Ahora, si funciona, porque estamos usando Express, simplemente podemos decir next, y luego llamará a cada uno de estos y devolverá la información que queremos. Entonces, probemos esto. Ya estamos, sí. Ya estamos usando esto aquí en Auth Middleware, donde comenzamos antes. Ahora, cuando realmente llamo a uno de estos, actualicemos la página. Puedes ver que dice 'cerrar sesión', lo que significa que hay una sesión válida. Puedo ver la información. Obtengo un 200. Ahora, si cierro sesión, y vuelvo al panel, oh espera, espera, lo siento. Sí, puedo iniciar sesión. Oh, lo siento. Tengo que reiniciar mi servidor. Porque no es como React. De acuerdo, mi error. Así que reiniciemos el servidor, porque ahora tenemos que aplicar todos estos cambios que hicimos en el servidor. Y ahora, si vamos aquí, dice 'no autorizado, redirigir a la página de inicio de sesión'. Entonces, y luego debería redirigirnos automáticamente a la página de inicio de sesión. Así que puedes ver aquí, redirige automáticamente. Volvamos y verifiquemos una vez más. Entonces, si vamos a desglose del mercado, puedes ver que no aparece nada, y nos lleva de vuelta a la página de inicio de sesión. Ahora, si inicias sesión. Entonces, si iniciamos sesión ahora, tenemos un nuevo, vamos a la red, tenemos un nuevo token de sesión. Entonces, si hago clic en esto, puedes ver que ahora aparece, y eso es porque tenemos nuestro token de sesión válido aquí. Y puedes ver el cierre de sesión allí. Si volvemos atrás y hacemos otra solicitud aquí, puedo mostrarte cómo se ve porque debería devolver solo una cadena, pero puedes ver aquí, nuestro 401 no autorizado aquí, simplemente devuelve una cadena vacía. Porque en nuestros ayudantes ELF, simplemente devuelve una cadena vacía después de 'bear'. Genial. Muy bien, eso es básicamente todo. Eso es básicamente todo. Permíteme mostrarte rápidamente cómo se ven, cómo tenemos nuestra documentación aquí para hacer la validación de sesión. Entonces, si puedes ver aquí, así es como realmente enviamos un token de sesión al servidor de la aplicación. Aquí se usa Axios, pero es el mismo tipo de idea. Estamos haciendo 'bear' más el token de sesión. Así que hicimos eso. Cuando hicimos la validación de sesión con el backend, en realidad usamos, instanciamos un cliente de Dscope aquí con un ID de proyecto. Y luego validamos la sesión haciendo .validateSession. Olvidé mencionar que en realidad, si vas aquí, podrías haber, podríamos haber copiado esto también directamente desde el asistente de inicio. Así que esa es otra forma fácil de hacerlo. Pero si quieres obtener más información sobre cómo validar la sesión, las diferentes formas en que puedes hacerlo con diferentes frameworks y lenguajes, puedes ir a este sitio web aquí. Te mostrará, lo publicaré en el chat. Sí. Y finalmente hay más información sobre middleware específico. Si quieres usar cookies en lugar de lo que estaba haciendo, puedes buscar middleware aquí u otras funciones de validación de sesión. Todas las funciones que forman parte del objeto cliente de Dscope, el objeto cliente de Dscope que inicializamos con nuestro ID de proyecto aquí, todas las funciones integradas se enumeran en el archivo readme. Así que también lo proporciono aquí. Bueno, supongo que abriré. Solo nos quedan cuatro minutos, pero si tienen alguna pregunta sin respuesta, estaré encantado de responder. Pueden hacerlo en el chat o pueden hablar. Sí.

Muy bien, bueno, gracias a todos por unirse. Espero que haya sido informativo. Y espero que puedan ver lo fácil que es utilizar muchos de estos SDK que tenemos y personalizar sus flujos.

Oh, una cosa más. En realidad, les mostraré, les mostraré rápidamente cómo pueden personalizar esto. Aquí, por ejemplo, si van a los flujos y realmente quieren, para aquellos de ustedes que se quedaron hasta tarde, pueden, pueden ver esto. En realidad, podemos, pueden agregar lo que quieran. Si quieren agregar algo, si quieren agregar, digamos, un número de teléfono o algo así, pueden agregarlo aquí. Y luego, y luego pueden ver si quieren, podemos hacer algo como esto. En realidad, antes, en realidad, no quiero modificar este flujo. Vamos a, vamos a ir a Spinoff, por ejemplo.

Genial. Entonces, si quisieran agregar correo electrónico, por ejemplo, pueden pegar el correo electrónico y luego pueden poner un botón aquí y luego pueden ver, haré esto un poco más grande, pueden ver en realidad hay un nuevo Haz clic aquí. Y luego lo que pueden hacer es ir a Acción, pueden agregar no TP registro de correo electrónico o aquí, arrastrarlo allí y luego arrastrarlo, probablemente sea un poco difícil de ver para ustedes, pero pueden simplemente arrastrarlo al final después de que se haya verificado el OTP, así que ahora tienen, ahora básicamente en solo 10 segundos, agregaron un correo electrónico, autenticación de correo electrónico TP a su aplicación y esto se actualizará automáticamente, porque están utilizando nuestro componente React, se actualizará automáticamente en su aplicación React e incluso pueden cambiar, pueden cambiar la apariencia de todo, pueden cambiar los colores, pueden ir a estilos aquí y cambiar su logotipo y los colores primarios y secundarios y cómo se muestran los errores y todo eso, así que, bastante genial. Pero sí, gracias por unirse y espero verlos nuevamente pronto. Gracias.