V09 — Configuración TOTP

Wireframe baja fidelidad · flujo completo: escanear QR / manual / preview / confirmación

Mobile — Modal con estados secuenciales

Se abre desde "Añadir código TOTP" en V07. Requiere permiso de cámara en iOS/Android.
Estado 1: Selección de método
✕
Configurar TOTP
⚠️

Consideración de seguridad

Guardar códigos 2FA en el mismo lugar que las contraseñas reduce la separación de factores. Úsalo solo cuando sea más importante la conveniencia que la seguridad máxima.

⌗
Añadir autenticación 2FA
Elige cómo quieres configurar el código TOTP
¿Dónde encuentro el código?
En la app o sitio donde activas 2FA, busca la opción "Usar app de autenticación" y muestra el código QR o la clave secreta.
Advertencia de seguridad destacada desde el inicio — decisión informada.
Estado 2a: Escaneando QR (cámara activa)
←
Escanear código QR
Centra el código QR en el recuadro
Detección automática — al reconocer QR válido, pasa directamente al estado 3 (preview).
"←" vuelve al estado 1 (selección de método).
Estado 2b: Entrada manual
←
Introducir clave TOTP

Introduce la clave secreta que te proporciona el servicio. Suele ser una cadena de letras y números.

Clave secreta
Formato esperado:
Base32 sin espacios. Ejemplo: JBSWY3DPEHPK3PXP
(Los espacios se eliminarán automáticamente)
Validación: mínimo 16 caracteres, solo A-Z y 2-7. "Continuar" deshabilitado hasta validación correcta.
Estado 3: Preview del código generado
✕
Verificar código TOTP
Guardar
✓
Código configurado correctamente
Verifica que el código coincida con el que muestra el servicio
482 913
18s
El código cambia cada 30 segundos
Etiqueta del servicio (opcional)
Al guardar, este código se almacenará cifrado dentro de la entrada. Podrás verlo en la vista de detalle (V06).
Countdown visual actualizado en tiempo real — se regenera automáticamente cada 30s.
"Guardar" confirma y vuelve a V07 con TOTP configurado.
Estado 2a-alt: Permiso de cámara denegado
←
Permiso de cámara
📷

Acceso a la cámara denegado

Para escanear códigos QR necesitamos acceso a tu cámara. Por favor activa el permiso en la configuración de tu dispositivo.

Si el usuario deniega el permiso de cámara, se ofrece acceso directo a configuración del sistema o fallback a entrada manual.

Desktop — Popover secuencial desde V07

Mismo flujo que mobile pero en popover. Si no hay cámara disponible, solo ofrece entrada manual.
Desktop: Selección de método (sin cámara)
Configurar TOTP
✕
⚠️

Consideración de seguridad

Guardar códigos 2FA en el vault reduce la separación de factores. Úsalo solo cuando la conveniencia sea prioritaria.

⌗
Añadir autenticación 2FA
Introduce la clave secreta del servicio
Clave secreta TOTP
Formato: Base32, 16+ caracteres (A-Z, 2-7)
Desktop sin cámara = solo entrada manual. Si hay webcam disponible, se puede añadir opción de escaneo.
Desktop: Preview del código generado
Verificar código TOTP
✕
✓
Código configurado
Verifica que coincida con el servicio
482 913
18s
Etiqueta (opcional)
El código se almacenará cifrado en la entrada
Countdown se actualiza cada segundo — generación local vía RFC 6238 (TOTP estándar).

Estados de error y edge cases

Validaciones y feedback ante inputs inválidos.
Error: Clave inválida (entrada manual)
←
Introducir clave TOTP
Clave secreta
⚠️ Formato inválido. Usa solo letras A-Z y números 2-7.
Validación en tiempo real — mensaje de error inline con borde rojo.
Error: QR no reconocido
←
Escanear código QR
⚠️ Código QR no válido o no es un TOTP
Error temporal (desaparece tras 3s) — permite reintentar sin cerrar la cámara.