Video Summary and Transcription
Este masterclass cubre la implementación de autenticación en una aplicación JavaScript utilizando Node y React. Explora los conceptos de autenticación y acceso de usuario, autenticación basada en tokens y la implementación de llamadas API para inicio de sesión y acciones. El masterclass también cubre la creación de middleware para validación y la implementación de inicio de sesión social. Concluye con una discusión sobre la gestión de sesiones, la construcción de formularios con flujos, la personalización de pantallas y métodos de autenticación, y las próximas versiones y participación de la comunidad.
1. Introducción a la Autenticación en JavaScript
En esta sesión, cubriremos cómo facilitar la autenticación en una aplicación JavaScript utilizando Node y React. Discutiremos conceptos de autenticación, codificaremos la parte de autenticación y proporcionaremos requisitos previos para la sesión. Siéntanse libres de hacer preguntas e interactuar con nosotros.
Hola a todos, nuevamente. Mi nombre es Asaf, y en la próxima hora o tal vez un poco menos, cubriré cómo facilitar la autenticación en una aplicación JavaScript estándar que está escrita en una aplicación Node y React. Mi premisa para esta sesión es que tendrán la capacidad de agregar autenticación en poco tiempo a cualquier aplicación, y tendrán una mejor comprensión de las partes móviles de la autenticación y cómo hacerlo de manera segura y con una buena experiencia de usuario.
Entonces, lo que vamos a cubrir en la próxima sesión, vamos a hablar un poco sobre algunos conceptos de autenticación. Y luego vamos a pasar directamente a codificar la parte de autenticación en la aplicación que tenemos. Solo para mencionar los requisitos previos, asumo que tienen una comprensión básica de JavaScript, React, Node y Express. Pueden manejarlo, incluso si no están familiarizados con uno de esos conceptos, pero se recomienda. Y también, si desean revisar el código de plantilla y utilizar la misma aplicación que voy a utilizar, deben tener una cuenta de GitHub. Publicaré el un repositorio de código abierto para la aplicación de plantilla. Pueden usarlo. Y, si desean, pueden escribir el código en cualquier IDE. Yo voy a usar VS Code. Esto es si desean codificar y también Node 18 o superior. Un segundo. Quiero ver el chat aquí. Entonces, si tienen alguna pregunta, siéntanse libres de escribirlas en el chat. Intentaré responder allí y espero ver el chat. Pero siéntanse libres de hacer preguntas, hacer una pausa, encender su micrófono. Lo que les resulte más cómodo. También tengo un colega aquí y él también puede responder.
2. Introducción a la Autenticación y Descripción de la Aplicación
En esta parte, Assaf se presenta y habla sobre Descope, una plataforma que admite varios métodos de autenticación. Explica que la aplicación en la que están trabajando carece de autenticación y establece un plazo de una hora para implementarla. El plan incluye desglosar el concepto de autenticación, diseñar la arquitectura, codificar los lados del cliente y del servidor, y dejar tiempo para depurar. Assaf también describe brevemente la aplicación en la que trabajarán, que es una aplicación simplista con una página de panel que muestra información sobre el consumo de helados.
las preguntas. Antes de comenzar, algunos detalles rápidos sobre mí. Mi nombre es Assaf. Trabajo en Descope. Descope tiene una plataforma increíble que puede ayudar a cada desarrollador a construir una autenticación segura y sin fricciones. Básicamente, admitimos todos los métodos de autenticación disponibles. Apoyamos tanto aplicaciones B2B, aplicaciones empresariales, como aplicaciones de consumidores. Nos enfocamos más en la autenticación sin contraseña y tenemos múltiples enfoques para integrarse con el servicio de autenticación, ya sea sin código o con algo de código o utilizando la API. Si lo desean, pueden leer más, pueden buscar Descope en Google o ir a descope.com y nos encontrarán allí. Además de eso, mi experiencia, además de discutir mucho con el equipo de producto, escribo en GoLang y en JavaScript y TypeScript, y en mi tiempo libre, me encanta jugar Frisbee y aprender sobre astronomía, y también soy fanático del Real Madrid, gran partido hoy, eso es todo sobre mí.
Entonces, la historia es la siguiente. Estamos aquí en la reunión de planificación de sprint y tenemos una aplicación simple, pero no tiene ninguna autenticación, así que necesitamos que lo hagan, y tienen una hora para hacerlo, tal vez un poco menos porque hablé un poco extensamente antes. Entonces, lo que vamos a hacer, vamos a desglosar el concepto de autenticación. Vamos a tener un diseño arquitectónico sobre qué sucede dónde en la aplicación, qué sucede en el frontend, qué sucede en el backend. Vamos a codificar el lado del cliente, vamos a codificar el lado del servidor y en el tiempo libre, probablemente dejaremos unos minutos para tomar café y depurar. Antes de comenzar, quiero mostrarles la aplicación que tenemos. Esta es una aplicación muy simplista. Espero que esté funcionando. No, no lo está. Compartiré la información sobre el repositorio, etc., más adelante. Solo quiero mostrarles lo que tenemos y lo que vamos a construir. Tenemos una aplicación muy simplista. Esta aplicación tiene dos páginas, la página del panel. La página del panel muestra información. El concepto de la aplicación es brindarle información sobre su consumo de helados. No importa realmente. Los datos no importan realmente. Puede ser cualquier aplicación.
3. Autenticación y Acceso de Usuario
Tenemos algunos paneles de control que queremos proteger con autenticación. El objetivo es asegurar que solo los usuarios autenticados puedan acceder a la información. La autenticación es el proceso de identificar a un usuario y prevenir el acceso no autorizado. Implica demostrar la identidad a través de factores como información biométrica o contraseñas. Una vez que la aplicación verifica la prueba, puede proporcionar acceso a los datos solicitados o realizar la acción solicitada. A continuación, exploraremos el protocolo entre el navegador y el servidor, centrándonos en el envío de credenciales por parte del navegador.
Tenemos aquí algunos paneles de control que básicamente muestran información dedicada al usuario. En esta parte, queremos protegerla mediante la autenticación, para que solo una persona autenticada pueda acceder a esta información. También tenemos una página de inicio de sesión. Actualmente, esta página de inicio de sesión solo muestra un formulario muy simplista. Y este es el diseño que tenemos. Y queremos facilitar la autenticación, para que cada vez que iniciemos sesión, podamos acceder solo si estamos autenticados. Bien, voy a volver a la presentación. Y perdón. Así que comencemos desglosando lo que vamos a hacer. Básicamente, voy a describir. Perdón, déjenme ir a pantalla completa. Quiero dar un resumen breve sobre qué es la autenticación en pocas palabras. Básicamente, es el proceso de identificar a un usuario que intenta acceder a una aplicación o un recurso de un sistema en particular. Entonces, el objetivo de este proceso es asegurarse de que el usuario sea quien dice ser. Y prevenir, probablemente lo más importante en la seguridad de aplicaciones, es prevenir el acceso no autorizado a un recurso. Digamos que el usuario intenta acceder a la aplicación como vimos antes, para obtener la información del panel. Entonces, Alice, tráeme los datos, la aplicación básicamente responderá, generalmente con un código HTTP 401, que significa acceso no autorizado. Intentémoslo de nuevo con un proceso de autenticación. Entonces, Alice dice, hey, soy yo. Pero aquí hay una prueba. Una prueba puede ser cualquier factor de autenticación, si has oído hablar de este concepto. La información biométrica es algo que soy, o una contraseña es algo que sé, o tal vez un código de un solo uso que se envía a tu teléfono, generalmente algo que tengo como un teléfono. Este es el concepto general de los factores de autenticación. Y una vez que la aplicación verifica que la prueba es válida, puede devolver los datos o realizar la acción que el usuario solicita. Ese fue el concepto general de un usuario y un servidor. Quiero profundizar un poco más y comenzar describiendo el protocolo entre el navegador y el servidor, y quiero ir un nivel más profundo. Por lo general, lo que sucede es que el navegador envía credenciales, generalmente serán el nombre de usuario y la contraseña.
4. Proceso de Autenticación
Para autenticar a un usuario, el servidor valida sus credenciales y crea un token. El navegador almacena este token y lo envía con cada solicitud posterior. Antes de responder, el servidor valida el token.
Puede ser un proceso un poco más complejo. De acuerdo, tráeme el correo electrónico. Voy a enviarte un enlace de código al correo electrónico, y luego haz clic en el correo electrónico, y esta será la prueba que discutimos antes. Luego, el servidor valida esas credenciales. Después de eso, generalmente crea algún tipo de token que representa a este usuario o esta sesión. Bien, el navegador generalmente almacena este token en un mecanismo local, tal vez una cookie o un almacenamiento local o en memoria. Y luego, en cada solicitud posterior, el navegador enviará este token junto con la solicitud. Y luego, cada vez antes de que el servidor responda a la respuesta del navegador,
5. Procesos de Autenticación
En términos generales, existen dos procesos principales en la autenticación: autenticación y validación. La autenticación es el proceso inicial donde se autentica al usuario y se le asigna un token. Por otro lado, la validación se realiza en las solicitudes posteriores para evitar autenticar en cada solicitud. Hay dos formas de implementar tokens: sesiones en el servidor y tokens en el cliente, siendo estos últimos los que suelen utilizar JWT. En una sesión en el servidor, el servidor administra la sesión almacenando la información del usuario en una base de datos y utilizando IDs de sesión. Este enfoque proporciona un mayor control sobre la sesión.
primero validará el token o la sesión y devolverá los datos. Ok, entonces, en general aspecto, hay dos. En términos generales, aquí hay dos procesos principales. El primer proceso es la parte de autenticación donde se autentica al usuario. Esto generalmente se hace una vez. Digamos que quieres mostrar un formulario de inicio de sesión como vimos antes. Y luego el usuario obtiene el navegador un token que será válido por un período de tiempo más largo, como 10 minutos, 30 días, etc. Y la segunda parte es la validación. Esto generalmente se hace para algunos servicios. No queremos que cada solicitud requiera alguna autenticación. Si vas a cualquier aplicación y abres la herramienta de desarrollo verás inmediatamente 30 solicitudes. Y no queremos autenticar en cada solicitud. Queremos autenticar una vez y usar el mismo token. Así que tenemos dos formas de implementar los tokens. Una de ellas es usando lo que se llama una sesión en el servidor. Básicamente, esto significa que el servidor es responsable de administrar la sesión. Es un mecanismo con estado. Y la otra opción son los tokens en el cliente. Si has oído hablar del concepto de JWT, este mecanismo suele utilizar JWT para este enfoque. Vamos a dar una descripción a alto nivel de ambos. Entonces, si hablamos de una sesión en el servidor, esto significa que el servidor es responsable de administrar la sesión. Entonces básicamente, se ejecutará el mismo diagrama que antes, pero con un poco más de detalles. Como antes, el usuario proporciona credenciales, luego el servidor las valida. Si el usuario está autenticado, el servidor generalmente almacenará la información del usuario o de la sesión del usuario en la base de datos, y identificará esta sesión mediante el ID de sesión. Puede ser almacenando el nombre de usuario, correo electrónico del usuario, la hora de inicio de sesión en la base de datos, en una determinada base de datos, y devolverá el ID de sesión que se almacenó en la base de datos al navegador. El navegador almacenará el ID de sesión, y lo enviará en la siguiente solicitud. Luego, el servidor básicamente realizará una consulta en la base de datos para ver si el ID de sesión está en la base de datos, y si es así, utilizará esta información para identificar al usuario. Este enfoque es lo que se llama con estado. Tiene algunos pros y contras. El principal beneficio es que cuando la sesión es manejable, el servidor puede revocar una sesión de manera muy sencilla eliminando el ID de sesión de la
6. Enfoques de Autenticación y Validación de Tokens
El principal problema con la escala del primer enfoque es que requiere que el servidor consulte la base de datos en cada solicitud. El segundo enfoque es usar tokens en el cliente, donde el servidor crea un token de objeto JSON (Jot) firmado con una clave privada. El cliente almacena el Jot y lo envía con cada solicitud, y el servidor lo valida con una clave pública. Sin embargo, puede ser difícil invalidar un token una vez que se ha creado.
base de datos. Básicamente, el servidor tiene más control sobre la sesión. El principal problema con este enfoque es la escala, porque esto significa que en cada solicitud, el servidor necesita consultar la base de datos. Y aunque usemos una memoria rápida y sofisticada como Redis o memcache, sigue siendo relativamente lento, y si hablamos de una aplicación a gran escala con una arquitectura de microservicios, este enfoque no escalará. El segundo enfoque es usar lo que se llama tokens en el cliente, y así como antes, el usuario proporciona las credenciales y el servidor las valida, y luego el servidor crea un Jot. Un Jot es básicamente un objeto JSON que está firmado de manera criptográfica con una clave privada. Esta clave privada solo se almacena en el lado del servidor, no se comparte con ninguna otra entidad. Y luego, como antes, el cliente devuelve el Jot y lo almacena, y el servidor envía el Jot al servidor, y luego el servidor valida el Jot con una clave pública. Entonces, si pensamos en la arquitectura de microservicios, solo un servicio necesita hacer el trabajo duro de firmar el Jot con una clave privada. Y cualquiera que tenga una clave pública puede validar el Jot. Esto es algo que tiene la mayoría de las aplicaciones modernas, debido a las consideraciones de escala, utilizan este enfoque.
7. Implementación de Autenticación basada en Tokens
La forma sin estado del protocolo dificulta la invalidación de un token una vez que está en circulación. Un video en YouTube llamado Sesión versus Token del canal FireShip proporciona más información. Implementaremos el enfoque de token del cliente en nuestra aplicación, utilizando Dscope como servicio de autenticación. El navegador enviará las credenciales al servicio de autenticación, que las validará y creará un JWT. El JWT se almacenará en el navegador y se enviará con cada solicitud al servidor, que lo validará utilizando una clave pública descargada. Implementaremos la autenticación de contraseña de un solo uso y el inicio de sesión social, y utilizaremos el SDK de Dscope para el proceso de inicio de sesión.
Y la desventaja es que la aplicación sin estado, la forma sin estado de este protocolo, ha sido difícil, más difícil, diría yo, invalidar un token, porque una vez que el token está en circulación, cualquiera que necesite validarlo puede hacerlo con la clave pública. Es muy difícil una vez que has creado un jot, es desafiante invalidarlo.
Bien. Solo quiero mencionar que hay un video muy interesante en YouTube llamado Sesión versus Token del canal de YouTube FireShip, que en general es un gran canal, y sobre este tema, recomiendo encarecidamente verlo. Si hay alguna pregunta, no dudes en hacerla en el chat o aquí. Voy a continuar.
Entonces vamos a implementar en nuestra aplicación que vimos antes, vamos a implementar el segundo enfoque, el token del cliente. Y quiero describir la arquitectura general de nuestra aplicación en términos de componentes. Tenemos una aplicación de escritorio en React, pero el servidor que vimos antes en realidad está compuesto por varias partes. Tiene el servidor de la aplicación, que será una aplicación de nodo muy sencilla. Y tendrá un servicio de autenticación. Esto es tradicionalmente algo que es, diría yo, complejo de hacer. Y puedes usar un proveedor de SaaS como Dscope para no tener que ocuparte de todo el envío de correos electrónicos y la firma con una clave privada y la rotación de claves y muchas complejidades que normalmente, cuando escribes una aplicación, prefieres centrarte en lo tuyo. Así que es muy recomendable utilizar algún tipo de servicio de autenticación. En este taller, vamos a usar Dscope como servicio de autenticación. Y quiero repetir el proceso, pero esta vez con la separación de lo que va desde el navegador al servicio de autenticación y lo que va desde el servidor al servicio de autenticación. El navegador enviará, cada vez que quiera comunicarse, las credenciales directamente. Realizará la autenticación directamente en el servicio de autenticación. El servicio de autenticación validará las credenciales y creará un JWT, que devolverá al navegador y este lo almacenará en el almacenamiento local o en una cookie. Y luego vamos a almacenar el JWT y enviarlo en cada solicitud del panel de control que vimos antes. Y el servidor validará el JWT con la clave pública que descargará del servicio de autenticación. Esta descarga se realiza básicamente una vez, es un proceso muy ligero. Y eso es todo. Solo para reiterar lo que vamos a hacer. Primero vamos a implementar el cliente. Vamos a construir el formulario de OTP y el inicio de sesión social, vamos a implementar básicamente la autenticación de contraseña de un solo uso, que enviará la autenticación, un código de un solo uso al correo electrónico del usuario. También puede ser un teléfono, pero para simplificar, vamos a usar el correo electrónico. Y vamos a implementar lo que se llama inicio de sesión social, como iniciar sesión a través de Google o Facebook o cualquier otro. Y luego vamos a usar el SDK de Dscope para hacer la parte de inicio de sesión. Y luego vamos a enviar el JWT al servidor,
8. Resumen del Código y Creación de Cuenta
Vamos a implementar un mecanismo de cierre de sesión y potencialmente un huevo de Pascua. Disculpas si las cosas son más lentas debido a la codificación frente a una audiencia. Puedes revisar el código en el repositorio de GitHub. El código incluye una aplicación cliente con un panel de control y un componente de inicio de sesión, y un servidor node simplista. Para comenzar, clona el repositorio, instala las dependencias y ejecuta la aplicación. A continuación, crea una cuenta en la plataforma de servicio de autenticación para gestionar usuarios. Una vez registrado, se creará un proyecto y podrás acceder a la consola de Dscope para la gestión de usuarios y autenticación.
luego el servidor validará el JWT. Y al final, vamos a implementar un mecanismo de cierre de sesión. Y si tenemos tiempo, también vamos a tener un huevo de Pascua, pero no puedo prometerlo. Así que sí, vamos a empezar a codificar. Vi un meme el otro día, cuando la diferencia entre cuando programas solo y cuando programas cuando alguien está mirando tu código. Así que disculpas si las cosas van un poco más lentas de lo habitual.
Si quieres, voy a ejecutar el código y repasar las cosas paso a paso, pero si prefieres, puedes ir al repositorio de GitHub que estoy compartiendo ahora mismo, y puedes revisar el código, la rama, perdón, llamada Zero to Auth Start. Y este será el punto de partida de nuestra aplicación. Voy a hacer una revisión muy rápida del código aquí. Básicamente tenemos una aplicación cliente con un directorio SRC, y tenemos dos componentes principales. Tenemos el componente del panel de control y tenemos el componente de inicio de sesión. No voy a... Disculpas, algo se apagó en mi computadora. De acuerdo, y tenemos los dos componentes que mostramos antes en los ejemplos, y en el backend, tenemos un solo archivo index que básicamente se ejecuta en un servidor node muy simplista, y el panel de control básicamente consultará las cuatro rutas GET que tenemos aquí, y devolverán los data, y este es básicamente el recurso que queremos proteger. Un segundo. Permíteme hacer una preparación rápida aquí.
De acuerdo, lo primero que debes hacer después de clonar el repositorio en tu aplicación es ejecutar npm install. Esto instalará todas las dependencias también en las subcarpetas, y luego puedes ejecutar npm run dev. Esto abrirá inmediatamente la aplicación. Puedes interactuar con ella. Puedes ir a la página de inicio de sesión tanto con login como haciendo clic en el botón de cierre de sesión que actualmente no hace nada. La primera parte que queremos hacer es crear una cuenta en la plataforma de servicio de autenticación. Para ello, puedes ir a scope.com. Esto será necesario para crear un proyecto porque eventualmente queremos que los usuarios básicamente en el servicio de autenticación cada aplicación se representa con un proyecto. Así que básicamente queremos crear un proyecto para poder gestionar usuarios en el servicio de autenticación. Puedes registrarte aquí. Yo ya estoy registrado. Verás un formulario aquí que mostrará básicamente puedes registrarte tanto con el enlace como con Google. Y una vez que te registres se creará un proyecto para ti y puedes hacer clic en el botón vamos allá y serás redirigido a la consola de Dscope. Este es el lugar donde puedes gestionar todos tus usuarios y autenticación. Podría hablar sobre esta consola y sus capacidades durante uno o dos días.
9. Configuración del Proveedor de Autenticación y ID del Proyecto
Te animo a que investigues por ti mismo las increíbles capacidades. Enfócate en cumplir el cronograma del sprint. Ve a la página del proyecto y copia el ID del proyecto. Instala el SDK de React de Scope en la carpeta del cliente para simplificar la comunicación con el servicio de autenticación. Agrega el proveedor de autenticación al componente raíz de la aplicación e incluye el ID del proyecto. Ejecuta npm install nuevamente.
Así que te animo a que vayas e investigues por ti mismo. Hay muchas capacidades increíbles, pero prefiero enfocarme en cumplir el cronograma de nuestro corto sprint. Y lo único que quiero hacer aquí es ir a la página del proyecto y copiar el ID del proyecto. Lo usaré en un corto tiempo para identificar la aplicación aquí en frente. Disculpa, cuando el navegador y el servidor se comunican con el servicio de autenticación, podemos identificar el proyecto, el proyecto específico. De acuerdo. Disculpa, déjame volver al código. Lo primero que voy a hacer es detener la aplicación. Voy a entrar en la carpeta del cliente y voy a instalar el SDK de React de Scope. Esto simplificará toda la comunicación con el servicio de autenticación. De acuerdo. Una vez que lo instale, básicamente puedo empezar a usarlo. De acuerdo. Podemos ver que ya está agregado al paquete. Podemos ver que está agregado al paquete. Un segundo. Sí, está agregado aquí al paquete. Y voy a ir al componente de la aplicación, el componente raíz de la aplicación, y voy a importar el proveedor de autenticación del SDK de React de Scope. Esto agregará todo lo que necesito para, déjame hacerlo rápidamente. Así el ID reconocerá, un segundo. De acuerdo. Vamos a darle un poco de tiempo. Y ahora lo que voy a hacer es agregar el proveedor de autenticación. Voy a envolver toda mi aplicación con el proveedor de autenticación. Y voy a agregar el ID del proyecto que copié antes. Y segundo, lo tengo por aquí. Sí.
10. Implementación de Llamadas API para el Formulario de Inicio de Sesión
Voy a implementar las llamadas API detrás del formulario de inicio de sesión de la página. Actualmente, no ocurre nada cuando se envía el formulario. Agregaré el código necesario para manejar las llamadas API y mostrar la respuesta.
De acuerdo. Permíteme ejecutar nuevamente npm install. Debería ser suficiente. De acuerdo. Creo que necesitas agregar from. Input from. Gracias. No hay problema. Antes mencioné cuando codificas y alguien más está mirando. Gracias. Gracias, Eric. Lo aprecio.
Entonces, sí. Podría debug esto durante otros 15 minutos. Gracias. Esto básicamente inyectará todo lo que necesitamos para usar el SDK. Y ahora la segunda parte, básicamente puedo, ¿sabes qué? Vamos a ejecutarlo. Y no creo que vayamos a ver ningún cambio. Todo aquí es igual. Y ahora voy a implementar. Voy a ir a la página de inicio de sesión. Y ahora mismo la página de inicio de sesión tiene... Lo siento. La página de inicio de sesión tiene un formulario simple. Tal vez abra las DevTools de Chrome. Así podemos ver qué sucede en el lado. De acuerdo. Si necesitamos... Así que ahora mismo no tenemos nada aquí. Vamos a implementar las llamadas API detrás de esto. Así que ahora mismo, cuando hago esto, básicamente no ocurre nada, ¿de acuerdo? Solo imprime mis detalles. Y voy a agregar algo aquí.
11. Implementación del Uso de la API para Acciones
Voy a implementar el uso de la API para esas acciones. Utilizaré el ámbito para importar automáticamente los métodos necesarios para OTP. El registro o inicio de sesión se basará en si el usuario existe. Si el REST.OK no está OK, lanzaré un nuevo error con el error de respuesta. En la segunda parte del formulario, agregaremos una llamada a OTP.verify.email con el correo electrónico y el código.
Y no ocurrirá nada... No sucede nada. Solo se imprime. Voy a implementar el uso de la API para esas acciones.
Así que ahora mismo voy a ir a... Tengo los botones del teléfono que... Cuando el teléfono termine, esto se ejecutará. Y básicamente voy a agregar aquí otro paso llamado... Voy a eliminar esto. Y voy a agregar aquí... Disculpa. Antes, voy a usar el ámbito. Y esta es la mejor manera, por cierto, de dar la idea de importar automáticamente lo que necesitas. Así que voy a usar los métodos disponibles para OTP. Registro o inicio de sesión básicamente, si el usuario existe, es inicio de sesión. Y si no, se creará un usuario. Y voy a usar el correo electrónico. Y voy a proporcionar el correo electrónico aquí. Y si el REST.OK, básicamente, si no está OK, lanzaré un nuevo error con el error de respuesta. Lo siento, olvidé hacer wait. Y OK. Y creo que esto... OK, ¿dónde está la advertencia? Oh, from.email, voy a agregar este SDK. OK. Así que acabo de agregar una llamada al SDK que creamos anteriormente.
Y si el usuario en la segunda parte del formulario, vamos a agregar otra llamada para básicamente tomar el código que el usuario está ingresando, y vamos a llamar a OTP.verify.email con el correo electrónico y el código. OK, entonces, olvidé tomar el correo electrónico aquí. Este es el problema. OK. OK.
12. Almacenamiento de Correo Electrónico e Implementación del Backend
Almacenamos el correo electrónico utilizando el hook useState y procedemos a verificarlo. Hay un error en el código, pero lo solucionamos. Después de iniciar sesión, podemos ver el correo electrónico en la pestaña de red. Copiamos el código del correo electrónico e intentamos ejecutar la aplicación nuevamente. Finalmente, logramos iniciar sesión, pero la protección del backend aún no está implementada.
Entonces, vamos a almacenar el correo electrónico para el próximo paso utilizando esto, el hook useState. Y luego vamos a llamar a la verificación del correo electrónico. Todavía tengo un error. Código. Sí. Form.code. Y creo que me falta solo el correo electrónico aquí. Correcto. Creo que esto será suficiente. Permítanme copiar y pegar aquí. Entonces, ¿a dónde debemos ir? De acuerdo. Creo que no necesito actualizarlo. Estoy iniciando sesión. Verás que esta vez tarda un poco más. Y si vamos, déjame borrar todo desde aquí. Vamos a la pestaña de red, vamos a ver que hay una solicitud, el Servicio Disco. Veamos si obtuve el correo electrónico. Obtuve el correo electrónico. Voy a copiar y pegar el código del correo electrónico. Voy a, creo que estoy... Intentemos ejecutar esto nuevamente. De acuerdo, creo que tengo algo mal en el código de mi aplicación. Supongo que necesitas formar ese correo electrónico. Creo que necesito esperar. Eso es. Una última vez. De acuerdo, lo logramos. Y veamos qué sucede ahora mismo. Ahora mismo, básicamente si queremos, no es realmente interesante, pero podemos ver que el usuario ha iniciado sesión y básicamente aún no ha cambiado nada porque aún no hemos protegido esto en el lado del backend. Entonces agreguemos la implementación del backend.
13. Creación de Middleware para Validación
En esta parte, instalaremos el disco node SDK y crearemos un middleware para la validación. La función del middleware recibirá una solicitud, una respuesta y una función next. Extraerá el encabezado de autorización, obtendrá el token de sesión y lo validará utilizando la función validate JOT del SDK. Si se produce una excepción, devolverá un código de estado 401 con un error. De lo contrario, llamará a la función next.
Y voy a ir al archivo index.psx. Y antes de eso, voy a detener y voy a ir a la carpeta del servidor y voy a instalar el disco node SDK. Esto facilitará, esto nos ayudará a comunicarnos con el servicio de autenticación en el backend.
Y lo único que necesitamos hacer es básicamente introducir un middleware que se utilizará cada vez que hagamos esas llamadas, este middleware debe realizar la parte de validación. Entonces, lo primero que queremos hacer es crear un SDK. Básicamente, voy a importar la función scope clients del SDK de node. Y esto nos ayudará a facilitar la comunicación desde el SDK.
Y ahora vamos a escribir el middleware. El middleware es básicamente una función. Permítanme desactivar el copilot. De acuerdo. Básicamente, es una función que recibe una solicitud, una respuesta. De acuerdo. Y la función next. De acuerdo. Y la función, básicamente lo que hace, si puede ejecutar alguna lógica, y si la lógica falla, puede devolver 401. De lo contrario, llamará a la función next, que puede ser cualquier función que se defina aquí. Entonces, lo que vamos a hacer, vamos a agregar, vamos a obtener el encabezado de autorización de la cabecera de la solicitud.
De acuerdo, déjenme solo, por lo general, vamos a editar de una manera muy estándar, y vamos a obtener el JOT de sesión de ese encabezado, que básicamente reemplaza bearer por nada, básicamente eliminando el prefijo bearer. Y vamos a validar este JOT, ¿de acuerdo? Entonces vamos a llamar a la función validate JOT del SDK con ese JOT de sesión. Esta función lanzará un error en caso de una excepción. Entonces, básicamente queremos capturar una excepción. Y si se produce la excepción, vamos a devolver el código de estado 401 con tal vez con un error. Tal vez podamos hacer algo como nuevo error. Lo siento. De acuerdo. Y también podemos imprimir en la consola la excepción. De acuerdo. De lo contrario, simplemente llamaremos a next. De acuerdo.
14. Uso de la Fila Intermedia e Implementación de Inicio de Sesión Social
Necesitamos enviar el token de sesión en cada solicitud. El SDK de Dhiscope tiene una funcionalidad para esto. La aplicación ahora devuelve la información y los tokens de sesión se presentan en el encabezado de autorización. Implementamos el proceso de inicio de sesión en dos pasos y agregamos el middleware en el servidor. También implementamos la parte de inicio de sesión social, que es similar a la implementación de OTP.
Y lo único que queda es básicamente usar esta fila intermedia.
De acuerdo. Voy a iniciar la aplicación nuevamente y veamos qué sucede.
De acuerdo. Entonces podemos ver que todas nuestras solicitudes devuelven 401.
De acuerdo. Entonces lo que necesitamos hacer es enviar el token de sesión en cada solicitud.
Entonces vamos a básicamente ir a la página del panel. Este es el lugar que dispara la solicitud para obtener la información y vamos a agregar un encabezado y en el encabezado, vamos a agregar el encabezado de autorización.
Vamos a hacer algo como Bearer y aquí vamos a querer pasar el token de sesión.
Entonces el SDK de Dhiscope tiene una funcionalidad para esto, obtener el token de sesión y podemos usarlo.
Vamos a iniciar.
De acuerdo, veamos la aplicación ahora mismo.
Y puedes ver que ahora la aplicación devuelve la información.
Podemos ver que la solicitud, si vamos a los encabezados de la solicitud, podemos ver que en el encabezado de autorización, se presentan los tokens de sesión, que es la cadena alfanumérica larga aquí.
Y este fue el proceso de autorización de extremo a extremo en general.
Entonces agregamos en el inicio de sesión, agregamos el proceso de inicio de sesión en dos pasos, que es enviar el correo electrónico y verificar el código.
Y luego usamos esta sesión, la enviamos al servidor y agregamos el middleware en el servidor.
En los últimos minutos que tenemos, también quiero implementar la parte de inicio de sesión social.
Y el inicio de sesión social es probablemente muy similar a OTP en términos de implementación.
Permítanme copiar y pegar la implementación de una rama que tengo en el sitio.
Entonces no vamos a dedicar mucho tiempo a esto.
Y vamos a ir al inicio de sesión y aquí en el botón de inicio de sesión social con Google, básicamente vamos a reemplazar esta implementación como básicamente vamos a ir al SDK que importamos del uso de este alcance y vamos a llamar a la parte de Google.
Esto manejará, esto iniciará el proceso de OAuth y vamos a tomar la URL de respuesta y redirigir al usuario a esa respuesta.
Y la otra parte que falta aquí es que básicamente vamos a agregar un useEffect y el useEffect aquí se encargará de lo que sucede cuando el usuario regresa de Google.
Entonces básicamente vamos a obtener el código de permítanme importar antes y vamos a usar el userSearchParams de react router dom.
Y aquí vamos a obtener el código del userSearchParams y vamos a hacer el intercambio.
Entonces OAuth básicamente se compone de dos procesos.
Inicias el proceso cuando el usuario hace clic en el botón, esto redirigirá al usuario a Google.
Y cuando el usuario regrese a la página, lo vamos a redirigir aquí.
Parámetros de búsqueda, SDK, Cierre de sesión y Preguntas y respuestas
Permítanme agregar los parámetros de búsqueda y el SDK para navegar. Iremos a Google, redireccionaremos de vuelta y aún realizaremos el inicio de sesión. El cierre de sesión se maneja en el lado del front-end. Importa el SDK, llama a SDK logout para limpiar la caché del navegador. Implementamos el formulario, llamamos al servicio de autenticación API para JOT, agregamos el token de sesión a las solicitudes e implementamos un middleware para validar el JOT. ¿Alguna pregunta? Eric pregunta sobre el uso de los servicios de AWS vs. Disco. Si una aplicación requiere interacción del usuario, un servicio como Disco puede simplificar la gestión de JWT y sesiones.
Permítanme agregar los parámetros de búsqueda y el SDK y navegar aquí. Veamos qué sucede aquí. Vamos a ir a Google. Esto me redirigirá automáticamente a Google, ¿de acuerdo? Y una vez que haya completado la llamada, me redirigirá de vuelta. Y pueden ver que aún puedo realizar el inicio de sesión.
Lo último que quería cubrir es la parte de cierre de sesión. El cierre de sesión se realiza solo en el lado del front-end. Podemos ir a la barra de navegación donde está el botón de cierre de sesión. Y aquí tenemos básicamente una función de cierre de sesión solo para la navegación. Vamos a importar el SDK de Use The Scope. Vamos a importar Use The Scope y obtener el SDK. Y simplemente vamos a llamar a SDK logout. Básicamente, eso es todo. Esto llamará al cierre de sesión y también limpiará automáticamente todo lo que se requiere de la caché del navegador. Entonces, ahora mismo no puedo ver ningún data. Si quiero ver los data, necesito completar el inicio de sesión nuevamente, y podré ver los data.
Para resumir lo que hemos hecho, hemos implementado el formulario en el front-end. Llamamos al servicio de autenticación API para obtener el JOT, y en cada solicitud a nuestro servicio, agregamos el token de sesión. Y en el servicio simplemente implementamos un middleware que valida el JOT y devuelve 401 si la validación del JOT falla. Creo que eso es todo por mi parte, y dejaré de compartir. Y quiero escuchar si tienen alguna pregunta.
Sí, Eric aquí. Gracias por la presentación. Tengo una pregunta. Principalmente trabajo en entornos donde tienen plataformas como AWS. ¿Cuándo eliges usar los servicios de AWS? ¿Cuándo estás usando algo como Disco? Permíteme entender eso. Permíteme asegurarme de entenderte correctamente. Estás preguntando, entonces si estás usando AWS como en qué servicio de AWS estás usando. Bueno, estamos usando AWS, es la plataforma donde implementamos nuestras aplicaciones, pero también usamos los servicios nativos de AWS, y hay múltiples servicios de AWS que se pueden usar para la autorización y autenticación como Cognito, y también están usando Azure para la autenticación. Pero estoy buscando cuándo voy a usar, en una organización así, cuándo voy a usar la autorización estándar de la plataforma que están proporcionando, o cuándo voy a usar algo como Disco. Entonces, creo que eventualmente, si estás implementando alguna aplicación que requiere interacción del usuario, necesitas tener, necesitas tener algún tipo de interacción con el usuario. Entonces, un servicio como Disco puede simplificar todo el proceso de gestión de JWT y gestión de sesiones.
Gestión de sesiones y construcción de formularios con flujos
El proceso de gestión de sesiones implica tokens de actualización y una capa adicional de autorización. Para la autenticación de usuarios, considera usar un servicio como Dscal. The Scope ofrece una función llamada flujos, que simplifica la construcción de formularios y la gestión de métodos de autenticación. Puedes elegir el tipo de aplicación y los métodos de autenticación, como la biometría y el inicio de sesión social. The Scope generará automáticamente un formulario y un flujo personalizables para que los uses.
Por ejemplo, existe todo un proceso del que no hemos hablado, sobre cómo se actualiza la gestión de sesiones, porque la sesión es muy corta, tiene una duración muy corta, es muy efímera, es válida por 10 minutos y no quieres que el usuario se autentique cada 10 minutos. Por lo tanto, existe un token de actualización y hay otra capa de autorización encima de eso y la gestión de inquilinos, etc. Entonces, si tienes alguna lógica empresarial que requiere autenticación de usuario, te animo a usar un servicio como un servicio de autenticación como Dscal. Y si necesitas, por ejemplo, gestionar infraestructura, instancias de EC2, etc. Probablemente las capacidades básicas de AWS sean suficientes pero si un usuario interactúa con el producto, te animo a usar algo como Dscal.
De acuerdo, gracias. De nada. Así que, si tienes más preguntas, no dudes en preguntar. Quiero mostrarte una última cosa. Aquí, viste que me rompí los dedos mientras intentaba implementar el formulario de la interfaz de usuario, etc. Quiero mostrarte otro enfoque que ofrece The Scope llamado flujos. Básicamente, lo que ves... Perdón. Permíteme completar mi inicio de sesión con... Google en nuestra consola. Así que, construir formularios y gestionar otros métodos de autenticación de autorización es difícil. Por ejemplo, si quieres usar la biometría, necesitas entender el protocolo. The Scope realmente simplifica esto para ti. Puedes construir un formulario en la interfaz de usuario de The Scope. Tenemos un asistente muy bueno que puedes utilizar. Básicamente, puedes elegir qué aplicación quieres construir. Por ejemplo, quiero construir una aplicación para consumidores. Y luego quieres elegir qué método de autenticación quieres que experimente tu usuario. Por ejemplo, quiero que mis usuarios experimenten la biometría y el inicio de sesión social. Y puedo tener otra autorización de autenticación si quiero introducir la autenticación multifactor. Simplemente voy a omitirlo. Y luego The Scope construirá automáticamente para ti un formulario y todo el flujo. Y esto se puede personalizar más adelante y puedes empezar a usarlo, ¿de acuerdo? Inmediatamente, ¿de acuerdo? Así que acabo de crear un nuevo proyecto. Elegí los métodos y puedo empezar a usarlos básicamente en poco tiempo. Así que puedes ver que bajo la superficie The Scope construyó todo el flujo para ti.
Personalización de pantallas y métodos de autenticación
Puedes personalizar las pantallas y el estilo de tu aplicación dentro del alcance, eligiendo diferentes colores y logotipos. Ofrece una experiencia de arrastrar y soltar e integración de código sencilla. El alcance admite varios métodos de autenticación, como el inicio de sesión social y la biometría. Crea una experiencia personalizada para tu proyecto y te permite controlar el recorrido del usuario. Si tienes alguna pregunta adicional, no dudes en preguntar. También es compatible con React Native.
Aquí están las pantallas que puedes personalizar. Puedes personalizar el estilo, todo. ¿Lo estás compartiendo? Perdón, ¿estás compartiendo? Porque estoy viendo Visual Studio. Disculpas. No hay problema. Gracias. También vi la palabra clave flujo allí así que pensé que era lo mismo, pero está bien. Gracias.
Cuando te registras en el alcance, puedes crear un proyecto que creamos para ti. Y lo que quería mostrarte es que otro enfoque que admite el alcance es el desarrollo sin código y puedes crear toda la experiencia de inicio de sesión y el recorrido del usuario dentro del producto y personalizarlo aquí con un alto nivel de personalización. Puedo elegir qué tipo de aplicación quiero construir. Si quiero que sea una aplicación para consumidores o para empresas, de acuerdo. Y puedo elegir qué método de autenticación quiero que mis usuarios experimenten. Por ejemplo, quiero que experimenten el inicio de sesión social y la biometría, de acuerdo. Y sin autenticación multifactor, simplemente lo voy a omitir. Y en poco tiempo, el alcance creó una experiencia personalizada para mi proyecto. Y luego solo tengo que hacer clic en siguiente y automáticamente creará toda la experiencia para mí. Esto es como una aplicación de demostración y puedes ver cómo integrarlo en una aplicación de React, en el backend de Node o en el backend de Go, o Python, etc. Y luego puedes personalizarlo aún más... Puedes personalizarlo de varias formas. Por ejemplo, puedes elegir todo el estilo de las páginas. Por ejemplo, voy a usar diferentes colores y puedo elegir un logotipo diferente para mi aplicación. Y se aplicará automáticamente en mi pantalla y puedo controlar y ver exactamente cuál es el recorrido del usuario que experimenta mi usuario, la pantalla, la acción, etc. Esto es altamente personalizable y básicamente puedes lograr cualquier cosa con solo una experiencia de arrastrar y soltar y con solo unas pocas líneas de código simples, puedes integrarlo en tu aplicación.
Eso es todo. Gracias por unirte. Y si tienes alguna pregunta adicional, estaré aquí y fue un placer. Muchas gracias. Esto también es posible si estás trabajando con React Native. Entonces, ¿crear las pantallas y luego también se puede usar en la aplicación de React Native? Una muy buena pregunta.
Próximas versiones y participación de la comunidad
Estamos a punto de lanzar un SDK dedicado para React Native en las próximas semanas. Únete a nuestra comunidad en diskop.com para comunicarte con el equipo de DiskOp. Gracias a todos por su tiempo.
Esto es, estamos a punto de lanzar un SDK dedicado, una mejora dedicada para React Native. Sí, esto estará disponible, la parte de React Native estará disponible en las próximas semanas aproximadamente.
Si estás interesado, puedes ir a diskop.com y unirte a nuestra comunidad. Es como un espacio de trabajo de Slack donde puedes preguntar cualquier cosa. Y esta es una forma muy agradable de comunicarte con el equipo de DiskOp.
De acuerdo, genial. Veo que Abhishek acaba de compartir el enlace. Si quieres unirte. Gracias. Sí. Gracias. Gracias a todos. Fue un placer. Y gracias por su tiempo. Y lo disfruté mucho y nos vemos la próxima vez.
Comments