Diagrama de arquitectura de sistemas OAuth 2 Flow

Tech architecture infographic titled "OAuth 2 Flow" using archetype PROTOCOL HANDSHAKE (numbered exchanges). Create a clear executive-friendly how-it-works diagram showing the standard OAuth 2 authorization code flow at a high level, with labeled boxes and directional arrows. Include these components as flat vector boxes with simple icons: Browser — 'End user client initiating login'; Application API — 'Backend that starts OAuth and exchanges code for tokens'; Authorization Server — 'Identity provider handling login and consent'; User Database — 'Stores account and consent records'; Cache — 'Stores temporary state, nonce, session data'; Queue — 'Async events for audit and notifications'. Connect all boxes with arrows showing precise data direction and protocol use. Arrow labels in English only, such as: 'GET /login', '302 redirect to authorization endpoint', 'HTTPS authorization request', 'User credentials + consent', 'Authorization code', 'POST /token', 'Access token + Refresh token', 'JWT access token', 'GET /userinfo', 'User profile JSON', 'Session cookie', 'Audit event'. Show numbered exchanges prominently on arrows: 1 Browser to Application API, 2 Application API to Cache, 3 Application API to Authorization Server, 4 Authorization Server to Browser, 5 Browser to Authorization Server, 6 Authorization Server to User Database, 7 Authorization Server to Browser with authorization code, 8 Browser to Application API callback, 9 Application API to Authorization Server token exchange, 10 Authorization Server to Application API token response, 11 Application API to Cache session storage, 12 Application API to Queue audit event, 13 Application API to Browser authenticated app response. If space allows, optionally show Application API calling a Resource API with 'Bearer JWT' and receiving 'JSON response', but keep the main story focused on OAuth 2 authorization code flow. Each component box must contain: an icon, the canonical English name, and a one-line English role description. Add a numbered legend 1-7 summarizing the lifecycle in simple executive language: 1 User chooses sign-in, 2 App creates temporary state in cache, 3 App redirects browser to OAuth authorization endpoint, 4 User authenticates and grants consent, 5 Authorization server validates user data in DB, 6 App exchanges authorization code for tokens over HTTPS, 7 App creates session and returns authenticated experience. Use technically accurate terminology: OAuth 2, authorization endpoint, token endpoint, authorization code, access token, refresh token, session cookie, HTTPS redirect, HTTP 302, JSON response. Avoid security-claim overstatements and do not frame as an audited reference architecture. Visual style: minimal flat, editorial developer-blog illustration, isometric or flat tech-diagram style, vector-clean infographic layout. Color palette: developer pink and teal with soft neutrals, high contrast labels, calm modern executive mood, clean whitespace, subtle grid alignment, simple arrows, rounded rectangles, small protocol badges. Include a small generic cloud icon around the Authorization Server area, but no real cloud-vendor branding. All text MUST be written in English (array). Every heading, label, caption, legend and metric name in the image must be in English — not English. Spell each English word correctly using English characters and diacritics. Numbers stay as digits, no real cloud-vendor logos (AWS / GCP / Azure) — use generic cloud icons, no watermarks No real cloud-vendor logos (AWS, GCP, Azure) beyond generic cloud icons. Common protocol names (HTTPS, TCP, JWT, OAuth, REST, GraphQL) stay in canonical English form. No security-claim overstatements (do not present diagrams as audited reference architectures).