Authorization Code Flow con Spotify paso a paso

Curso de OAuth 2.0 y OpenID Connect: Flujos de Autenticación y Casos de Estudio

Contenido del curso

Introducción a OAuth 2.0 y OIDC

JSON Web Tokens

Open Authorization 2.0

Open ID Connect

OAuth y OIDC en producción

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:06

Authorization Code Flow con Spotify paso a paso

Curso de OAuth 2.0 y OpenID Connect: Flujos de Autenticación y Casos de Estudio

Clase 14 de 25

Clase 14 / 25

Comentarios (17)17 comentarios

Christian Valenzuela

Hace 3 años

Esta es una de las partes que mas llena este curso, ver los ejemplos practicos de cada uno de los flujos y verlos aplicados en aplicaciones reales y grandes.

De verdad, emociona poder entender todas las terminologias y diagramas jaja

Cesar Payro

Hace 3 años

cual extension en vscode hace ese autocompletion tan avanzado? que pone todo el codigo que vas a tipear? (a diferencia del 'default' simple code completion?

Guillermo Rodas

Profesor

Hace 3 años

Es GitHub Copilot, un asistente de IA, es de pago pero hay alternativas como Tabnine o AWS CodeWhisperer.

Alexander Toro

Hace 3 años

Realicé la implementación con Google Oauth 2. las credentials se generan desde el GCP console credentials:

Acá se encuentran los scopes que como aprendimos dependen del servicio que quieras consumir, google tiene muchos servicio, pero en general spreadsheets (excel de google), drive, gmail son algunos de los mas comunes para usar:

La url de autenticación es:

Y la del token:

Fernando Andres Guzman Concha

Hace 10 meses

gracias por esta información!

ntt data

Hace 3 años

Es muy interesante ver como consumir un servidor de autenticación PERO también me interesa ver como crear nuestro propio servidor de autenticación bajo el protocolo OAuth2.0 y que tener en cuenta para ello, espero un curso de esto!

Dany R

Hace 2 años

Julio Bastidas

Hace 2 años

en el caso de que sea un SPA como sería? acá el ejemplo lo hacen con nextjs teniendo en cuenta el SSR, pero según mi pregunta, cuando se hace mediante un SPA cual sería el mejor método??

$Julio Armando Eufraccio$

Julio Armando Eufraccio

Hace 3 años

Hola Profe,

En la parte final, referente a

export default function Home({ accessToken }) { const { response: userProfile } = useFetch(SPOTIFY_ME_ENDPOINT, accessToken);

const playlistUrl = SPOTIFY_PLAYLISTS_ENDPOINT(userProfile?.id); const { response: userPlaylists } = useFetch(playlistUrl, accessToken);

return ( <MainContainer> <Card userPlaylists={userPlaylists} userProfile={userProfile} /> </MainContainer> );

me aparece este error en el /home

Application error: a client-side exception has occurred (see the browser console for more information).

Espero pueda ayudarme. Saludos

Edgar Wilson Vásquez Coronado

Hace 3 años

A alguien mas se le pausa el video a cada momento ?

Guillermo Rodas

Profesor

Hace 3 años

Creo que si cambias de server en las opciones del navegador se puede ver mejor.

Guillermo Rodas

Profesor

Hace 3 años

También a veces ayuda pausar el video por un momento. Parece que no se puede seleccionar la calidad de descarga por defecto y debe estar bajando a mucha calidad, pero solo lo estoy asumiendo, quizas alguien de Platzi nos pueda ayudar por acá.

Angel Javier Sanchez Tenjo

Hace 9 meses

Actores del flujo

Resource Owner → Usuario final
Client → Aplicación externa (Web App del tercero)
Authorization Server → Auth Server
Resource Server → API

Ulqernesh Karvenae

Hace 10 meses

En caso que no les deje localhost intenten con

cambian 3000 por el puerto que lo estan usando

Ulqernesh Karvenae

Hace 10 meses

Documentacion

Hector Rojo

Hace 3 años

Hay alguna clase donde se explique esto mismo usando Python?

Guillermo Rodas

Profesor

Hace 3 años

Hola Hector, las clases de este curso son usando JavaScript, pero si usaras Python, tendrías simplemente que asegurarte de tener un endpoint que pueda hacer un redirect. Deben haber muchos ejemplos en Python puesto que el Authorization Code Flow se puede implementar en cualquier lenguaje.

Alfredo David Sumosa

Hace 3 años

Siguiendo con la pregunta sobre GitHub Copilot, me gustaría saber que opinion personal tienen sobre este tipo de herramientas de IA y como perciben el impacto en la profesión de Ingeniero de Software?

Guillermo Rodas

Profesor

Hace 3 años

Nos están ayudando a ser más eficientes, hay que aprender a usar estas herramientas pero sigue siendo importante entender cómo funciona las cosas para saber qué preguntas hacerle.

Bryan Key

Hace 2 años

Bien, ahora tengo una duda existencial, ya con esa cookie que nos estamos enviando en cada peticion desde el frontend a todos lados en HOME, podemos mandarla tambien a nuestros propios endpoint sacarla y validarla contra un endpoint de Spotify por expiracion o algo?

Bryan Key

Hace 2 años

A mi personalmente no me gusta la forma en la que explican el curso, aunque el profe si tiene razon, ven yo te lo explico como tu tio el que no sabe nada, pero opina:

El flujo es el siguiente: tu tienes tu app puede ser movil;desktop;web;iot etc... Desde ahi digamos que te da flojera usar un email y contraseña, entonces quieres usar los datos en este caso de tu spotify que ya tienes logueado previamente en tu pc... O bueno, te gusta mas esa app para loguearte porque siempre te sabes la contraseña (maybe). Bien, ahora viene lo chido, porque en tu app, cuando le das conectar con Spotify, lo que esta haciendo tu app es IR a un endpoint de espotify y decirle, buenas bro, tengo esta persona, en mi app que existe en tu db y quiere meterse en mi pagina, el se va a loguear y TU dame esos datos con un verificador y un id (cosas no privadas) entonces la persona acepta o declina lo que quiere, y spotify toma esa data la devuelve y cuando el frontend recibe el OK ahora llama a spotify con un callback ahora si a nuestro server, con esos datos NOSOTROS en back autenticamos y ahora si le devolvemos los datos que quiere al cliente. No estan asi asi pero es para que tengas una idea, antes de todo esto, previamente, nuestro servidor debe tener el uso de una cuenta en spotify para poder enlazar una app web con ellos. Ya lo demas es parafraseos. OJO el profe usa SSRendering con Nextjs por eso es que ves que ?que tiene que ver el back con el front? Es por eso... pero tu peudes hacerlo con cualquier cliente front.

No te frustres, repite una y otra vez, ademas explora y equivocate! GO AHEAD. 💚

Carlos Andrés Moreno Jimenez

Hace 2 años

A los que tienen este error en la practica

se soluciona así:

porque: dentro del objeto de la cookie el token viene con clave "accesToken"

y a los que no tenían cuenta de Spotify y apenas la crearon para la practica les recomiendo colocar una imagen de su perfil y una breve descripción o si no agreguen un encadenamiento opcional dentro del Archivo Card.js

Francisco Martin Nacimiento

Hace 3 años

El authorization gran hay que almacenarlo o una vez que se pide el token, el authorization gran ya deja de ser valido?

Por otro lado, en caso de que sea asi, si el token de acceso y refresco vencen, se hace todo el flujo nuevamente? Entiedo que mientras se tengan los tokens sin vencer, se puede seguir teniendo acceso sin la interversion del user (resource owner)

Alejandro Chavez

Hace 3 años

¡ Genial clase !

Recursos

Implementar Authorization Code Flow con Spotify te permite conectar una aplicación web a la API de Spotify usando un backend seguro que intercambia un código por un access token. Esta guía es útil si trabajas con Next.js, OAuth o cualquier servicio que exija un canal seguro para autenticar usuarios.

La lógica detrás de este flujo aplica para casi cualquier proveedor que implemente OAuth 2.0, así que dominarlo con Spotify te abre la puerta a integrar Google, GitHub, Slack y muchos más.

¿Qué necesitas antes de empezar a usar la API de Spotify?

Antes de tocar código, tienes que registrar una aplicación en el portal de desarrolladores. Spotify le llama apps, pero técnicamente en OAuth eso es un client.

Entra a developer.spotify.com, ve al dashboard y autentica con tu cuenta. Crea un nuevo cliente con un nombre descriptivo, por ejemplo auth-code-flow-spotify, acepta los términos y guarda los dos valores que importan: client ID y client secret [01:30].

¿Qué es el client secret y por qué no debo compartirlo? Es la credencial privada de tu aplicación frente al authorization server. Si se filtra, alguien podría suplantar a tu cliente, por eso Spotify permite rotarlo cuando lo necesites.

También debes registrar una redirect URI que coincida con tu aplicación. Si corres el proyecto en local, una ruta válida sería http://localhost:3002/api/callback [02:15].

¿Cómo se guardan las credenciales de forma segura?

Nunca pongas el client ID ni el client secret directamente en el código. Cárgalos como variables de entorno: SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET y la URL de redirección también.

Esto es clave porque el intercambio de código por token corre del lado del servidor, y ahí es donde el backend lee esas variables sin exponerlas al navegador.

¿Por qué Next.js encaja tan bien con Authorization Code Flow?

El proyecto del ejemplo es una web app en React con Next.js. Lo importante es que Next ofrece Route APIs, que funcionan como un backend embebido dentro del mismo proyecto [03:10].

Eso resuelve un requisito crítico de este flujo: el intercambio del código por el access token debe pasar por un canal seguro, nunca desde el navegador.

El index del proyecto tiene un único botón de conectar con Spotify que redirige a la ruta /api/login, donde arranca el flujo real.

¿Cómo se construye el authorization request a Spotify?

En OAuth todo es bastante estándar. Los endpoints del authorization server terminan en authorize cuando piden permiso, y en token cuando intercambian credenciales.

Dentro de login.js, que corre del lado del servidor, defines los scopes según los endpoints que vas a consumir [04:30]:

user-read-private para leer información básica del usuario.
user-read-email para acceder al correo.
playlist-read-private para listar playlists privadas.

Luego construyes un query string con los parámetros que el authorization server exige:

response_type con valor code, porque quieres un código intercambiable.
client_id leído desde las variables de entorno.
scope con los permisos unidos por espacios usando join.
redirect_uri apuntando a tu ruta de callback.

Para serializar todo esto usas el módulo nativo query-string de Node y su método stringify, que arma los parámetros con signos igual y ampersands correctamente [05:40].

¿Qué hace el authorization request? Manda al usuario a Spotify para que vea la pantalla de consentimiento, donde aprueba o rechaza los permisos que tu app solicita.

Al darle clic al botón, verás la pantalla de Spotify pidiéndote permiso con los scopes listados. Cuando aceptas, ocurre el authorization grant: Spotify redirige de vuelta a tu callback con un código en el query.

¿Cómo intercambias el código por un access token?

El archivo callback.js recibe ese código y debe cambiarlo por un access token. Sin esa implementación, Next se queda colgado esperando una respuesta [07:20].

La petición fetch al endpoint token requiere configuración específica:

Método POST según el estándar.
Header content-type igual a application/x-www-form-urlencoded.
Header authorization tipo Basic con las credenciales del cliente.

La autorización Basic se construye codificando en base64 la cadena client_id:client_secret. En el ejemplo se usa una utilidad llamada encode dentro de la carpeta de utilidades del proyecto, que aplica esa codificación de forma sencilla.

En el body de la petición envías otro query string con tres campos: el code que llegó por la URL, el redirect_uri y grant_type igual a authorization_code para indicarle al servidor que quieres canjear ese código por un token [09:00].

¿Cómo entregas el access token al cliente sin exponerlo?

Una vez Spotify devuelve el access token, no lo mandes al navegador como JSON plano. La forma más segura es guardarlo en una cookie httpOnly [10:30].

Esa cookie cumple dos condiciones:

path en la raíz para que esté disponible en toda la app.
httpOnly activado para que solo el backend pueda leerla, evitando ataques desde JavaScript del cliente.

Después, en el endpoint del home, parseas la cookie desde los headers usando una utilidad de cookies, extraes el access token y lo devuelves como data al componente. Con ese token en mano, haces fetch al endpoint /me para traer el perfil y luego al de playlists con el ID del usuario.

¿Cuándo conviene usar Authorization Code Flow?

Es el flujo más común que vas a encontrar en servicios que implementan OAuth 2.0. El único requisito real es que tu cliente pueda ejecutar código del lado del servidor, porque el intercambio del código por el token exige un canal seguro.

Si tu aplicación es 100% frontend, sin backend, este flujo no aplica y tendrás que mirar variantes como Authorization Code con PKCE.

El reto: implementa este mismo flujo con un servicio distinto a Spotify. GitHub, Google o Discord son excelentes candidatos para practicar. ¿Qué proveedor vas a integrar tú?

Resumen

La lógica detrás de este flujo aplica para casi cualquier proveedor que implemente OAuth 2.0, así que dominarlo con Spotify te abre la puerta a integrar Google, GitHub, Slack y muchos más.

¿Qué necesitas antes de empezar a usar la API de Spotify?

Antes de tocar código, tienes que registrar una aplicación en el portal de desarrolladores. Spotify le llama apps, pero técnicamente en OAuth eso es un client.

¿Qué es el client secret y por qué no debo compartirlo? Es la credencial privada de tu aplicación frente al authorization server. Si se filtra, alguien podría suplantar a tu cliente, por eso Spotify permite rotarlo cuando lo necesites.

También debes registrar una redirect URI que coincida con tu aplicación. Si corres el proyecto en local, una ruta válida sería http://localhost:3002/api/callback [02:15].

¿Cómo se guardan las credenciales de forma segura?

Nunca pongas el client ID ni el client secret directamente en el código. Cárgalos como variables de entorno: SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET y la URL de redirección también.

Esto es clave porque el intercambio de código por token corre del lado del servidor, y ahí es donde el backend lee esas variables sin exponerlas al navegador.

¿Por qué Next.js encaja tan bien con Authorization Code Flow?

El proyecto del ejemplo es una web app en React con Next.js. Lo importante es que Next ofrece Route APIs, que funcionan como un backend embebido dentro del mismo proyecto [03:10].

Eso resuelve un requisito crítico de este flujo: el intercambio del código por el access token debe pasar por un canal seguro, nunca desde el navegador.

El index del proyecto tiene un único botón de conectar con Spotify que redirige a la ruta /api/login, donde arranca el flujo real.

¿Cómo se construye el authorization request a Spotify?

En OAuth todo es bastante estándar. Los endpoints del authorization server terminan en authorize cuando piden permiso, y en token cuando intercambian credenciales.

Dentro de login.js, que corre del lado del servidor, defines los scopes según los endpoints que vas a consumir [04:30]:

user-read-private para leer información básica del usuario.
user-read-email para acceder al correo.
playlist-read-private para listar playlists privadas.

Luego construyes un query string con los parámetros que el authorization server exige:

response_type con valor code, porque quieres un código intercambiable.
client_id leído desde las variables de entorno.
scope con los permisos unidos por espacios usando join.
redirect_uri apuntando a tu ruta de callback.

Para serializar todo esto usas el módulo nativo query-string de Node y su método stringify, que arma los parámetros con signos igual y ampersands correctamente [05:40].

¿Qué hace el authorization request? Manda al usuario a Spotify para que vea la pantalla de consentimiento, donde aprueba o rechaza los permisos que tu app solicita.

¿Cómo intercambias el código por un access token?

El archivo callback.js recibe ese código y debe cambiarlo por un access token. Sin esa implementación, Next se queda colgado esperando una respuesta [07:20].

La petición fetch al endpoint token requiere configuración específica:

Método POST según el estándar.
Header content-type igual a application/x-www-form-urlencoded.
Header authorization tipo Basic con las credenciales del cliente.

¿Cómo entregas el access token al cliente sin exponerlo?

Una vez Spotify devuelve el access token, no lo mandes al navegador como JSON plano. La forma más segura es guardarlo en una cookie httpOnly [10:30].

Esa cookie cumple dos condiciones:

path en la raíz para que esté disponible en toda la app.
httpOnly activado para que solo el backend pueda leerla, evitando ataques desde JavaScript del cliente.

¿Cuándo conviene usar Authorization Code Flow?

Si tu aplicación es 100% frontend, sin backend, este flujo no aplica y tendrás que mirar variantes como Authorization Code con PKCE.

El reto: implementa este mismo flujo con un servicio distinto a Spotify. GitHub, Google o Discord son excelentes candidatos para practicar. ¿Qué proveedor vas a integrar tú?

Introducción a OAuth 2.0 y OIDC

Qué aprenderás en OAuth y OpenID Connect

¿Qué es la autenticación?

Autorización y Control de Acceso Basado en Roles

OAuth y OpenID Connect para qué sirve cada uno

Cómo proteger endpoints con tokens en Express

Flujo de Open Authorization y Open ID con Discord

JSON Web Tokens

Estructura y firma de un JSON Web Token

Sesiones vs JWT: qué cambia y cuándo usarlos

Firmado de JSON Web Tokens con Librería JWT en Node.js

Verificar JWT con HS256 y RS256 en Node.js

Open Authorization 2.0

Implementación de flujos OAuth 2.0 con APIs populares

Flujos de autorización en OAuth 2.0

Cómo elegir el flujo correcto en OAuth 2.0

Authorization Code Flow con Spotify paso a paso

PKCE con OAuth 2.0 en la API de Twitter

Implementación de Implicit Flow con Twitch en React

Implementación de Client Credentials Flow en Discord

Implementación de Resource Owner Password Flow con Auth0

Open ID Connect

OpenID Connect sobre OAuth 2.0

Implicit Flow con Form Post en Auth0

Qué es el hybrid flow en OpenID Connect

OAuth y OIDC en producción

Buenas prácticas y riesgos de los JSON Web Tokens (JWT)

Buenas prácticas de OAuth y cuándo no usarlo

Autenticación Rápida con NextAlt y GitHub en Next.js

Qué sigue después de OAuth y OpenID

Authorization Code Flow con Spotify paso a paso

Progreso del curso

Introducción a OAuth 2.0 y OIDC

JSON Web Tokens

Open Authorization 2.0

Open ID Connect

OAuth y OIDC en producción

Recursos

Recursos