wow
International Javascript conference
Propuestas de autenticacion y desarrollo frontend
¡Vamos!
Resumen
- Enfoque en el renderizado reanudable en el servidor en el desarrollo web con Qwik
- Las pruebas de caracterización e instantáneas que aseguran un software confiable y visualmente coherente.
- Las Passkeys nos brindan una nueva capa de seguridad en línea
Índice
Qwik
Refactorizacion
Framework orientado al SSR
Refactorizacion de componentes
Passkeys
Cierre
Que son y como usar
Contextualiza tu tema
01
qwik
Potencia tu Desarrollo Web
Quik, un framework de desarrollo web de vanguardia, agiliza la creación de aplicaciones web siguiendo el concepto de "descargar y ejecutar solo el código que es estrictamente necesario"
INFORME TECH
01
¿Que enfoque tiene Qwik?
Comparativa entre hydratation y Resumable
Hydration (Hidratación):
Es el proceso de convertir componentes o páginas web estáticas en aplicaciones interactivas al agregar datos dinámicos durante la carga inicial. Esto mejora la velocidad de respuesta y la experiencia del usuario
Resumable (Reanudable)
Se centra en la representación de la interfaz de usuario que puede ser pausada y reanudada de manera eficiente en caso de interrupciones, fallos o cambios de estado. Esto mejora la eficiencia y la experiencia del usuario en operaciones de larga duración.
https://qwik.builder.io/docs/concepts/resumable/
Qwik enfocado en el SSR
El renderizado en el lado del servidor (SSR), el servidor genera la página completa antes de enviarla al navegador del usuario, resultando una carga inicial más rápida y una experiencia más amigable para los motores de búsqueda.
https://www.builder.io/blog/speculative-module-fetching
Qwik, un marco web, se distingue por su enfoque en aplicaciones web de inicio casi instantáneo. Al minimizar la ejecución de JavaScript, logra un rendimiento rápido y eficiente, resolviendo así el desafío de la carga de grandes cantidades de código JavaScript en sitios web modernos.
Conclusiones
Qwik se trata de no tener que enviar todo ese JavaScript al cliente a la vez al iniciar la aplicación"
Builder.io
https://qwik.builder.io/docs/concepts/think-qwik/
02
Refactorización de componentes
Enfoque en pruebas
La refactorización de componentes frontend es necesaria en las aplicaciones para mejorar la estructura, el rendimiento y la mantenibilidad del código. No olvidemos las pruebas!
INFORME TECH
Diferentes técnicas de pruebas
Prueba de Funcionalidad
Prueba de Caracterización
Enfoque en el requerimientos
Enfoque en el comportamiento actual
- Se escriben las pruebas enfocadas a la definición de los requerimientos
- Se escribe el código para pasar las pruebas.
Si el código cambia, las pruebas no suelen hacerlo.
- Se escriben las pruebas de los requerimientos actuales.
- Se cambian los requerimientos hasta que las pruebas pasen.
Si las pruebas cambian, el código no lo hace
02
¿Que técnica debemos tomar?
Pruebas de Caracterización
- Se enfocan en comprender y documentar el comportamiento actual de un sistema o componente de software.
- Se utilizan en situaciones con código heredado o evaluación profunda del comportamiento actual del sistema.
- Estas pruebas registran el comportamiento actual y capturan salidas para su documentación y referencia.
- No validan la corrección, sino que establecen una base para futuras mejoras.
02
¿Que técnica debemos tomar?
Pruebas de instantáneas
- Capturan una representación visual del estado de la interfaz en un momento específico y la comparan con un resultado previo.
- Detectan cambios no deseados en la interfaz, como modificaciones visuales o de diseño.
- Son efectivas para mantener la consistencia visual en proyectos ágiles y permiten detectar cambios a lo largo del tiempo.
03
Passkeys
Una alternativa al uso de contraseñas
Hoy exploraremos cómo las Passkeys están transformando la forma en que protegemos nuestras cuentas y datos en línea, proporcionando una capa de seguridad adicional y eliminando la necesidad de contraseñas tradicionales
INFORME TECH
Problemas sobre las contraseñas
La seguridad de la contraseña depende del usuario
Las crean con recuerdos o cosas familiares
La mayoria de las contraseñas
se reutilizan.
Los usuarios tienen multiples cuentas en línea
Recordar
vulnerabilidad
Relaciones
Registro FIDO*
Registro
Nuevas llaves
Aprobación
Registro completo
https://www.passkeys.io/technical-details#passkeys-under-the-hood
Inicio de sesión con FIDO
Seleccion de credenciales
Login
Aprobación del usuario
Login completo
Guia de uso: https://webauthn.guide/#webauthn-api
Implementación: https://webauthn.io/
Beneficios de las Passkeys
Las Passkeys ofrecen una serie de ventajas significativas en términos de seguridad y protección de datos
Prevención del Phishing
Eliminación de contraseñas Tradicionales
Seguridad avanzada
Variedad de Formas de Passkeys
Protección de datos Sensibles
https://webauthn.io/
03
Visualización
Ejemplos de como se implementa *
Se muestra algunas opciones.
La propuesta de diseño
https://webauthn.io/
* https://www.passkeys.io/
03
Diversidad de dispositivos
Se cuenta con una gran variedad de dispositivos
uTrust FIDO2 NFC Security Key
Titan Security Key - Google
Precio $29 USD
Precio $30 USD
Authentrend
Precio $59 USD
Hypersecu Information Systems Inc
Precio $14 USD
https://authentrend.com/atkey-pro/
INFORME TECH
Gracias por su atención
Prevención del Phishing
- Los Passkeys reducen la amenaza del phishing, a diferencia de las contraseñas que a menudo son el objetivo de estos ataques.
- Los atacantes no pueden engañar a los usuarios para que divulguen sus Passkeys, ya que son únicas y difíciles de obtener ilegítimamente.
Login
El servicio en línea desafía al usuario a iniciar sesión con un dispositivo previamente registrado que coincida con la política de aceptación del servicio.
El registro inicia
Se solicita al usuario que elija un autenticador disponible que coincida con la política del servicio en línea.
Variedad de Formas de Passkeys
Los Passkeys pueden tomar múltiples formas, como tarjetas inteligentes, tokens, huellas dactilares, lo que brinda flexibilidad a las organizaciones.
Esto permite elegir la opción más adecuada para sus necesidades.
Linea de tiempo
Login completo
El dispositivo cliente envía la impugnación firmada de vuelta al servicio, que la verifica con la clave pública almacenada e inicia sesión en el usuario.
Protección de datos sensibles
Las Passkeys son especialmente efectivas para proteger datos altamente sensibles, como información financiera o médica.
Ayudan a prevenir el acceso no autorizado y las filtraciones de datos.
Creacion de nuevas llaves
El dispositivo del usuario crea un nuevo par de claves pública/privada único para el dispositivo local, el servicio en línea y la cuenta del usuario.
Aprobación del usuario
El usuario desbloquea el autenticador FIDO utilizando el mismo método que en el momento del registro.
Interacción
Aprobación del usuario
El usuario desbloquea el autenticador FIDO mediante un lector de huellas dactilares, un botón en un dispositivo de segundo factor, un PIN introducido de forma segura u otro método.
Eliminación de contraseñas Tradicionales
Las Passkeys eliminan la necesidad de recordar contraseñas complejas y cambiantes.
Esto simplifica la vida de los usuarios y evita los problemas relacionados con la gestión de contraseñas.
Seguridad Avanzada
- Las Passkeys proporcionan un nivel superior de seguridad en comparación con las contraseñas tradicionales.
- Son difíciles de robar o adivinar, lo que garantiza una mayor protección de datos.
- Son difíciles de replicar o falsificar, lo que aumenta la protección de datos confidenciales.
Registro completo
La clave pública se envía al servicio en línea y se asocia a la cuenta del usuario. La clave privada y cualquier información sobre el método de autenticación local (como medidas biométricas o plantillas) nunca salen del dispositivo local.
Seleccion de credenciales
El dispositivo utiliza el identificador de cuenta del usuario proporcionado por el servicio para seleccionar la clave correcta y firmar la impugnación del servicio.
IJC
Roberto HP
Created on October 21, 2023
temas visto es la convencion
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Hr report
View
Report Human Resources
View
Black Report
View
Tech report
View
Waves Report
View
OKR Shapes Report
View
Professional Whitepaper
Explore all templates
Transcript
wow
International Javascript conference
Propuestas de autenticacion y desarrollo frontend
¡Vamos!
Resumen
Índice
Qwik
Refactorizacion
Framework orientado al SSR
Refactorizacion de componentes
Passkeys
Cierre
Que son y como usar
Contextualiza tu tema
01
qwik
Potencia tu Desarrollo Web
Quik, un framework de desarrollo web de vanguardia, agiliza la creación de aplicaciones web siguiendo el concepto de "descargar y ejecutar solo el código que es estrictamente necesario"
INFORME TECH
01
¿Que enfoque tiene Qwik?
Comparativa entre hydratation y Resumable
Hydration (Hidratación):
Es el proceso de convertir componentes o páginas web estáticas en aplicaciones interactivas al agregar datos dinámicos durante la carga inicial. Esto mejora la velocidad de respuesta y la experiencia del usuario
Resumable (Reanudable)
Se centra en la representación de la interfaz de usuario que puede ser pausada y reanudada de manera eficiente en caso de interrupciones, fallos o cambios de estado. Esto mejora la eficiencia y la experiencia del usuario en operaciones de larga duración.
https://qwik.builder.io/docs/concepts/resumable/
Qwik enfocado en el SSR
El renderizado en el lado del servidor (SSR), el servidor genera la página completa antes de enviarla al navegador del usuario, resultando una carga inicial más rápida y una experiencia más amigable para los motores de búsqueda.
https://www.builder.io/blog/speculative-module-fetching
Qwik, un marco web, se distingue por su enfoque en aplicaciones web de inicio casi instantáneo. Al minimizar la ejecución de JavaScript, logra un rendimiento rápido y eficiente, resolviendo así el desafío de la carga de grandes cantidades de código JavaScript en sitios web modernos.
Conclusiones
Qwik se trata de no tener que enviar todo ese JavaScript al cliente a la vez al iniciar la aplicación"
Builder.io
https://qwik.builder.io/docs/concepts/think-qwik/
02
Refactorización de componentes
Enfoque en pruebas
La refactorización de componentes frontend es necesaria en las aplicaciones para mejorar la estructura, el rendimiento y la mantenibilidad del código. No olvidemos las pruebas!
INFORME TECH
Diferentes técnicas de pruebas
Prueba de Funcionalidad
Prueba de Caracterización
Enfoque en el requerimientos
Enfoque en el comportamiento actual
- Se escriben las pruebas enfocadas a la definición de los requerimientos
- Se escribe el código para pasar las pruebas.
Si el código cambia, las pruebas no suelen hacerlo.- Se escriben las pruebas de los requerimientos actuales.
- Se cambian los requerimientos hasta que las pruebas pasen.
Si las pruebas cambian, el código no lo hace02
¿Que técnica debemos tomar?
Pruebas de Caracterización
02
¿Que técnica debemos tomar?
Pruebas de instantáneas
03
Passkeys
Una alternativa al uso de contraseñas
Hoy exploraremos cómo las Passkeys están transformando la forma en que protegemos nuestras cuentas y datos en línea, proporcionando una capa de seguridad adicional y eliminando la necesidad de contraseñas tradicionales
INFORME TECH
Problemas sobre las contraseñas
La seguridad de la contraseña depende del usuario
Las crean con recuerdos o cosas familiares
La mayoria de las contraseñas se reutilizan.
Los usuarios tienen multiples cuentas en línea
Recordar
vulnerabilidad
Relaciones
Registro FIDO*
Registro
Nuevas llaves
Aprobación
Registro completo
https://www.passkeys.io/technical-details#passkeys-under-the-hood
Inicio de sesión con FIDO
Seleccion de credenciales
Login
Aprobación del usuario
Login completo
Guia de uso: https://webauthn.guide/#webauthn-api
Implementación: https://webauthn.io/
Beneficios de las Passkeys
Las Passkeys ofrecen una serie de ventajas significativas en términos de seguridad y protección de datos
Prevención del Phishing
Eliminación de contraseñas Tradicionales
Seguridad avanzada
Variedad de Formas de Passkeys
Protección de datos Sensibles
https://webauthn.io/
03
Visualización
Ejemplos de como se implementa *
Se muestra algunas opciones.
La propuesta de diseño
https://webauthn.io/
* https://www.passkeys.io/
03
Diversidad de dispositivos
Se cuenta con una gran variedad de dispositivos
uTrust FIDO2 NFC Security Key
Titan Security Key - Google
Precio $29 USD
Precio $30 USD
Authentrend
Precio $59 USD
Hypersecu Information Systems Inc
Precio $14 USD
https://authentrend.com/atkey-pro/
INFORME TECH
Gracias por su atención
Prevención del Phishing
Login
El servicio en línea desafía al usuario a iniciar sesión con un dispositivo previamente registrado que coincida con la política de aceptación del servicio.
El registro inicia
Se solicita al usuario que elija un autenticador disponible que coincida con la política del servicio en línea.
Variedad de Formas de Passkeys
Los Passkeys pueden tomar múltiples formas, como tarjetas inteligentes, tokens, huellas dactilares, lo que brinda flexibilidad a las organizaciones. Esto permite elegir la opción más adecuada para sus necesidades.
Linea de tiempo
Login completo
El dispositivo cliente envía la impugnación firmada de vuelta al servicio, que la verifica con la clave pública almacenada e inicia sesión en el usuario.
Protección de datos sensibles
Las Passkeys son especialmente efectivas para proteger datos altamente sensibles, como información financiera o médica. Ayudan a prevenir el acceso no autorizado y las filtraciones de datos.
Creacion de nuevas llaves
El dispositivo del usuario crea un nuevo par de claves pública/privada único para el dispositivo local, el servicio en línea y la cuenta del usuario.
Aprobación del usuario
El usuario desbloquea el autenticador FIDO utilizando el mismo método que en el momento del registro.
Interacción
Aprobación del usuario
El usuario desbloquea el autenticador FIDO mediante un lector de huellas dactilares, un botón en un dispositivo de segundo factor, un PIN introducido de forma segura u otro método.
Eliminación de contraseñas Tradicionales
Las Passkeys eliminan la necesidad de recordar contraseñas complejas y cambiantes. Esto simplifica la vida de los usuarios y evita los problemas relacionados con la gestión de contraseñas.
Seguridad Avanzada
Registro completo
La clave pública se envía al servicio en línea y se asocia a la cuenta del usuario. La clave privada y cualquier información sobre el método de autenticación local (como medidas biométricas o plantillas) nunca salen del dispositivo local.
Seleccion de credenciales
El dispositivo utiliza el identificador de cuenta del usuario proporcionado por el servicio para seleccionar la clave correcta y firmar la impugnación del servicio.