Auth Lab
Así entra tu cliente con su cuenta de Google o Microsoft, sin que tu app vea nunca su contraseña.
En vivo. Corre en tu navegador.
Como lo ve tu cliente
Un ejemplo de la vida real: Imagina el portal de clientes de una inmobiliaria. La persona toca «Entrar con Google», confirma y vuelve al portal ya identificada, y el portal nunca ve su contraseña.
Por dentro
Qué hace, en términos técnicos
Recorre paso a paso el flujo de inicio de sesión OAuth 2.0 con PKCE que usan Google, GitHub o Microsoft, y genera las llaves reales con la criptografía de tu navegador.
- Tecnologías
- oauth4webapi
- WebCrypto
- TypeScript
Arquitectura
1.Tu app, en el navegador
Crea el code_verifier, el code_challenge, el state y el nonce con WebCrypto, y arma la URL de autorización con oauth4webapi.
2.Servidor de autorización de ejemplo
Corre en la misma página con llaves reales. Emite el code, comprueba el PKCE en el canje y firma el id_token.
3.Verificación del id_token
Firma con la llave pública, emisor, audiencia, vigencia y nonce, como lo haría el backend de tu app.
En cifras
- pasos del flujo Authorization Code con PKCE
- 6
- ataques que puedes intentar y ver rechazados
- 4
El código
Decisiones
- DEC-011: Lab guiado por certificaciones (se abre en otra pestaña)
- DEC-017: Login propio del panel, con un middleware estilo OAuth 2.0 (se abre en otra pestaña)
Registradas en docs/DECISIONES.md, con su contexto y las alternativas descartadas.
Entra al portal
- Pide entrar
- Da tu permiso
- Vuelve con un pase
- Comprueba el pase
En el portal de clientes
Portal de clientes
Entra con una cuenta que ya tienes, sin crear otra contraseña.
El portal no ve tu contraseña.
En esta demo, los tres botones llevan al mismo servidor de ejemplo, que corre en tu navegador con llaves reales.
En el servicio donde está tu cuenta
Aquí aparece la pantalla de tu cuenta cuando tocas «Entrar con…».
De vuelta en el portal
Aquí vuelves ya identificado cuando das tu permiso.
¿Y si alguien intenta colarse?
Prueba los cuatro trucos contra tu inicio de sesión y mira cómo el portal los rechaza.
Primero entra al portal: cada truco se prueba contra tu inicio de sesión.
Te cuela una respuesta preparada por él
Cambia la marca que el portal guardó al pedir entrar (el state), como si la respuesta viniera de otro lado.
Manda el código sin el secreto
Usa un secreto inventado (el verifier) para cambiar el código por un pase.
Cambia el correo por el de un administrador
Edita el pase para hacerse pasar por otra persona.
Usa un pase de otro inicio de sesión
Reutiliza un pase válido y bien firmado, pero de otra visita.
- Preparar
- Pedir permiso
- Iniciar sesión
- Volver a tu app
- Canjear el código
- Verificar tokens
Paso 1 de 6Tu app prepara la solicitud
Antes de enviarte a iniciar sesión, tu app crea cuatro valores al azar con la criptografía de tu navegador y los guarda en tu sesión.
Ninguno es una contraseña. Sirven para comprobar más adelante que cada respuesta pertenece a esta solicitud y no a una copiada o inventada por otra persona.
- Tu app, sin enviar nada: crea el verifier, el challenge, el state y el nonce.
Lo que tu app guarda en tu sesión
Generando valores con la criptografía de tu navegador…
Espera un momento: tu navegador está generando los valores.
¿Lo quieres para tu negocio?
Esto es parte de lo que construyo en el servicio de aplicativos web. Mira qué incluye o calcula un presupuesto de referencia para tu caso.
¿Te interesa cómo está hecho? Míralo por dentro
Cómo funciona
Cada paso muestra qué viaja, quién lo envía y por qué es seguro.