Auth0 y Vue: Una Combinación Perfecta para el Desarrollo de Aplicaciones Seguras

Rate this content
Bookmark

FAQ

Tyler Clark hablará sobre cómo construir aplicaciones seguras con Vue.js, enfocándose en las mayores amenazas de aplicaciones actuales como los ataques de fuerza bruta, el relleno de credenciales y el phishing, y ofrecerá soluciones para mitigar estos riesgos.

WebAuthn es una API de Autenticación Web que permite autenticaciones seguras sin contraseña, utilizando biometría como huellas digitales o iris. En Vue.js, se puede integrar WebAuthn para mejorar la seguridad mediante la autenticación multifactor sin necesidad de contraseñas.

Las ventajas de usar WebAuthn incluyen un mayor nivel de seguridad al autenticar usuarios mediante biometría, lo que elimina los riesgos asociados con las contraseñas tradicionales. Además, WebAuthn cuenta como autenticación multifactor, simplificando el proceso de login sin reducir la seguridad.

Puedes seguir a Tyler Clark en Twitter bajo el nombre 'I Am Tyler W Clark' y en Edcad.io, donde tiene varios cursos disponibles. También estará disponible en el Discord de la conferencia para preguntas de seguimiento.

Tyler Clark menciona la autenticación biológica a través de WebAuthn y el envío de contraseñas de un solo uso por correo electrónico o mensaje de texto como alternativas a las contraseñas tradicionales para iniciar sesión en aplicaciones.

WebAuthn está integrado en varios navegadores modernos como Chrome, y Tyler Clark menciona que existe un buen soporte en varios navegadores, aunque recomienda revisar el soporte específico del navegador para implementaciones detalladas.

Tyler Clark
Tyler Clark
9 min
15 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hola Vue.js live. Mi nombre es Tyler Clark y hoy daré una charla titulada, Vue.js: Construyendo aplicaciones seguras. Discutiré las mayores amenazas de las aplicaciones hoy en día, incluyendo ataques de fuerza bruta, relleno de credenciales y phishing. También presentaré soluciones como WebAuthn para autenticación sin contraseña utilizando biometría. Como pueden ver aquí, usen la función credentials.create para obtener un desafío de una solicitud al servidor. Luego, pasen la información necesaria sobre el usuario y los tipos de clave pública aceptables al servidor. WebAuthn elimina los flujos basados en contraseñas, creando un par de claves privadas y públicas seguras.

1. Introducción a Vue.js y Seguridad de Aplicaciones

Short description:

Hola Vue.js en vivo. Mi nombre es Tyler Clark y hoy daré una charla titulada, Vue.js: Construyendo aplicaciones seguras. Soy un defensor del desarrollo de personal en Auth0 de Okta con nueve años de experiencia en el campo de la tecnología. Discutiré las mayores amenazas de aplicaciones hoy en día, incluyendo ataques de fuerza bruta, relleno de credenciales y phishing. También presentaré soluciones como WebAuthn para la autenticación sin contraseña utilizando biometría.

Hola Vue.js en vivo. En primer lugar, gracias por tenerme aquí. Me alegra estar aquí y hablar con todos ustedes hoy.

Mi nombre es Tyler Clark y hoy daré una charla titulada, Vue.js: Construyendo aplicaciones seguras. Un breve resumen sobre mí, mi nombre es Tyler Clark nuevamente. Soy un defensor del desarrollo de personal en Auth0 de Okta. He trabajado en el campo de la tecnología durante unos nueve años, principalmente en JavaScript, principalmente en el front-end y back-end, pero he hecho un poco de todo para pequeñas empresas hasta empresas de nivel enterprise. Puedes encontrarme en dos lugares, Twitter en I Am Tyler W Clark, también puedes encontrarme en Edcad.io, tengo varios cursos allí, y estaré en el Discord de la conferencia , así que por favor encuéntrame allí y hazme cualquier tipo de preguntas de seguimiento porque estoy seguro de que tendrás algunas al final de esta charla.

Muy bien, esta es una charla rápida, solo tengo unos siete minutos, así que vamos directo al grano. Seguridad es, bueno, no es algo fácil de hablar, especialmente en un período de tiempo de siete minutos, pero haremos nuestro mejor esfuerzo hoy. Quiero hablar sobre algunas de las mayores amenazas de aplicaciones hoy en día que vemos en muchas de estas brechas que ocurren. Tengo un par de soluciones que puedes agregar y aplicar a través de una aplicación Vue, y al final voy a dar algunos enlaces para profundizar un poco más en esto.

Ahora las tres amenazas de seguridad más comunes en las aplicaciones hoy en día son los ataques de fuerza bruta, el relleno de credenciales y el phishing. Los ataques de fuerza bruta básicamente son una cantidad excesiva de intentos y errores que los hackers utilizan para tratar de adivinar tu contraseña. El relleno de credenciales es cuando has utilizado el mismo identificador de correo electrónico o nombre de usuario y contraseña en un sitio, ese sitio sufre una brecha y luego los hackers toman esa información y tratan de acceder a otras aplicaciones que esos usuarios podrían haber utilizado con las mismas combinaciones y tratan de obtener acceso a ellas. Y el phishing es cuando recibes un correo electrónico que parece ser de Amazon, haces clic en el enlace, parece ser una página de inicio de sesión de Amazon, le das tu nombre de usuario y contraseña, y resulta que no es Amazon y acabas de entregar tu nombre de usuario y contraseña.

Mira, las contraseñas son terribles, todos las odian, por eso cosas como 1Password y estos administradores de contraseñas son tan populares porque es una solución integral, se rellena automáticamente, pero es una lástima que todavía tengamos que usarlas hoy en día. Entonces, ¿cuáles son nuestras opciones hoy como desarrolladores en nuestras aplicaciones Vue? Hay tres que quiero mencionar aquí, pero hoy compartiré el código de esta primera opción, WebAuthn, que utiliza biometría como tu huella digital o tu iris para iniciar sesión en una aplicación. Otra opción común es enviar un correo electrónico o un mensaje de texto que contenga una contraseña de un solo uso que los usuarios luego pueden ingresar en tu pantalla de inicio de sesión que automáticamente inicia sesión en los usuarios. Ambas opciones inician sesión automáticamente sin necesidad de una contraseña, por lo que no hay riesgo de que sea vulnerada.

Entonces, ¿qué es WebAuthn? WebAuthn es una abreviatura de la API de Autenticación Web. Está integrado en plataformas como el navegador. Autenticarse con WebAuthn basado en biometría es equivalente a la autenticación multifactor. Básicamente significa que cuando te autenticas una vez, como puedes ver en la diapositiva aquí, no se necesita una autenticación multifactor adicional. La autenticación multifactor significa que alguien usa una contraseña para iniciar sesión y luego también necesita proporcionar un texto y un código para ingresar. La autenticación requiere múltiples factores para ingresar, pero si usas WebAuthn, eso cuenta para ambos. La autenticación sin contraseña basada en WebAuthn es inatacable, de lo que hablé en esa otra diapositiva. Ahora dije que está integrado en plataformas como Chrome, por lo que no es necesario usar alguna solución de identidad como Auth0 para poder usar esto en tu aplicación hoy en día. Está integrado en Chrome. Se utiliza el objeto Navigator.

2. Registro y Autenticación de WebAuthn

Short description:

Como puedes ver aquí, utiliza la función credentials.create para obtener un desafío de una solicitud al servidor. Luego, pasa la información necesaria sobre el usuario y los tipos de clave pública aceptables al servidor. Después de que el usuario complete el registro, puede iniciar sesión y volver a autenticarse proporcionando una afirmación generada por el método .credentials.get del objeto navigator.

Como puedes ver aquí, utiliza la función credentials.create pasando un código, que te mostraré aquí en un momento. Y podrías estar pensando, ¿cuál es el soporte en esto? Como usar Safari. Tienes usuarios en Edge o Internet Explorer. Aquí tienes un vistazo rápido al soporte del navegador para WebAuthn.

Muy bien, vamos directo al código aquí porque se me está acabando el tiempo. Digamos que tenemos dos botones aquí. Tenemos un botón de registro y un botón de inicio de sesión que estamos usando en nuestro componente. Tiene una función de registro e inicio de sesión.

Primero, hablemos sobre la función de registro. De inmediato, verás que estamos obteniendo un desafío de una solicitud al servidor aquí. Esta es una solicitud al servidor que nosotros controlamos. Un desafío es básicamente solo bytes generados aleatoriamente. Se utiliza para prevenir ataques de reproducción. Esto aquí, este await navigator es de lo que acabo de hablar. Esto está integrado en el navegador, está en el objeto window. Y este es el objeto navigator que proporciona este credentials.create. Verás que dentro de aquí le pasamos un objeto y hay un RP aquí, básicamente significa parte responsable. Este es el responsable de registrar y autenticar a este usuario en particular que está tratando de crear una cuenta. Dado ese usuario, este objeto de usuario será la información sobre el usuario que está registrándose actualmente.

Verás que hay un nombre, hay un ID y hay un nombre de visualización. Y la última pieza requerida en este objeto es pubkey cred params. Dentro de esto verás que es una matriz de objetos que describe qué tipos de clave pública son aceptables para el servidor. Y luego dentro de eso verás un tipo de clave pública y hay un ALG negativo siete. Ese número define qué tipo de algoritmo de firma se utilizará para crear esto. Y luego después de eso hacemos una publicación en la misma ruta, pero esto es una publicación proporcionando la respuesta devuelta por esta credencial.

Ahora, después de que un usuario haya completado el registro de su cuenta, se hayan ido, hayan vuelto y estén listos para iniciar sesión y volver a autenticarse. Durante esta autenticación, el usuario necesita demostrar que es dueño de la clave privada que registraron inicialmente. Lo harán proporcionando una afirmación. Y esto se genera haciendo .credentials.get en el objeto navigator. Esto recuperará la credencial generada durante el registro con la firma incluida.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.