Infografía animada · Seguridad

Autenticar y autorizar: qué pasa al entrar con Google

Autenticar es comprobar quién eres y autorizar es decidir qué puedes hacer. La infografía separa las dos cosas y después sigue, paso a paso, lo que ocurre al pulsar “Continuar con Google” en Recetario, una web inventada para guardar recetas de cocina: quién ve tu contraseña, qué datos recibe la app y qué se gana y qué se cede.

Se puede pausar, avanzar paso a paso con las flechas y elegir la velocidad de lectura. En el móvil se lee mejor a pantalla completa.

Pantalla completa ↗

Cómo está hecha

Las direcciones y los campos son los de Google. accounts.google.com/o/oauth2/v2/auth, oauth2.googleapis.com/token, los parámetros de la petición y los campos del id_token salen de la referencia de OpenID Connect de Google, consultada el 4 de noviembre de 2026. De la misma página sale la indicación de identificar a cada persona por sub y no por su correo, que puede cambiar.
Es el flujo con código y PKCE. Es el que recomienda la guía de buenas prácticas de seguridad de OAuth 2.0 (RFC 9700, enero de 2025) para cualquier app, también las web. El flujo implícito, que devolvía el token en la propia dirección, se desaconseja. El code_challenge de la ventana del paso 6 se calcula de verdad: es SHA-256 del code_verifier en Base64URL, y lo saca un guion en Python (datos.py).
401 y 403 vienen de HTTP. En RFC 9110, 401 se llama “Unauthorized” aunque se usa cuando falta la autenticación; 403 es la respuesta cuando el servidor sabe quién eres y no te deja. Ese nombre de 401 es la misma confusión que explica la infografía.
Lo que se ha simplificado. Recetario es inventada y su dominio termina en .example, reservado para ejemplos. No aparecen la descarga de las claves públicas de Google (jwks_uri) con las que se comprueba la firma ni el access_token que llega junto al id_token, que la app no necesita para dejarte entrar. Apple y Microsoft también usan OpenID Connect. Facebook Login se basa en OAuth 2.0 con un flujo propio y las mismas tres partes.
Un solo fichero, sin bibliotecas. Es un SVG de 1080 × 1350 que dibuja JavaScript. Cada fotograma se calcula a partir del tiempo; por eso la velocidad cambia sin saltos y el vídeo para redes se graba fotograma a fotograma.