Usando nuestro access token para obtener nuestros recursos

Clase 19 de 39 • Curso de Autenticación con OAuth

Contenido del curso

Bienvenida e introducción

JSON Web Tokens

OAuth 2.0

Open ID Connect

Preocupaciones con JWT y OAuth 2.0

Haciendo uso de Auth0

Consideraciones para producción

Cierre del curso

39
Cierre del curso
01:48 min

Tomar examen

Comentarios

Emmanuel Octavio Martinez C

student•

Creo que falta una parte, porque no hemos definido la función getUserInfo pero aquí ya aparece de la nada.

Jonathan Jiménez

student•

sí, eso parece, me fijé y en los archivos de la clase anterior ya estaban definidos esos métodos.

Guillermo Rodas

teacher•

Acabo de revisar la grabación y tienes razón. Al parecer se perdio esa parte en la edición.

La funcion getUserInfo y getUserPlaylists lo que hacen es hacer un llamado a los endpoints de spotify incluyendo el access token en sus headers, verificamos que responder correctamente y estos devuelven una promesa.

getUserInfo

getUserPlaylists

Más info:

lucas cartisano

student•

Que vergüenza que no revisen el curso completo antes de subirlo, siempre igual, errores por todos lados, por no revisar

Carlos Enrique Ramírez Flores

student•

Tenia este error!

TypeError: /Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/views/playlists.pug:19
    17|             .card-image
    18|               figure.image
  > 19|                 img(src=playlist.images[0].url)
    20|             .card-content
    21|               h1.title= playlist.name
    22|               h2.subtitle= playlist.owner.display_name

Cannot read property 'url' of undefined
    at eval (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:94:73)
    at eval (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:161:4)
    at template (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:217:190)
    at Object.exports.renderFile (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:427:38)
    at Object.exports.renderFile (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:417:21)
    at View.exports.__express [as engine] (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:464:11)
    at View.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/view.js:135:8)
    at tryRender (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/application.js:640:10)
    at Function.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/response.js:1012:7)

y lo solucione con un if en pug, porque no siempre las playlists tienen una imagen!

extends layout.pug

block hero
  section.hero.is-dark.is-medium.main-hero
    .hero-body
      .container
        h1.title.is-size-1 Felida Music
        h2.subtitle Share and add the best playlists from the community


block content
  .container.main-content
    .columns.is-multiline
      each playlist in playlists.items
        .column.is-one-quarters
          .card
            if playlist.images[0]
              .card-image
                figure.image
                  img(src=playlist.images[0].url)
            .card-content
              h1.title= playlist.name
              h2.subtitle= playlist.owner.display_name
            .card-footer
              .card-footer-item
                a.button.is-primary-is-fullwidth= `${isHome ? 'Ver tracks' : 'Agregar'}`
              .card-footer-item
                a.button.isfullwidth(href='#')
                  i.far.fa-thumbs-up

horacio ortega

student•

buena

lucas cartisano

student•

Una basura el curso, lo arruinaron por no revisar antes de subirlo, es incomprensible, no se puede seguir. Tendré que seguir en youtube

GRACIAS PLATZI!!!

Bayron Mendoza

student•

No me estaba funcionando correctamente porque la playlist que tenía era privada. Pueden establecer la lista como publica, o bien agregar un scope adicional en scopesArray.js Si quieren consultar las playlists privadas del usuario con el que se autentican, agreguen este scope:

"playlist-read-private"

tomado de api Spotify

Victor Israel Torrecillas Garcia

student•

Gran detalle gracias por compartirlo.

Ixchel Garcia

student•

Hola! No he podido pasar mas a allá de esta clase me sale esto y hasta copié y pegué el código del profe porque no sé qué es lo que está pasando:

Ixchel Garcia

student•

Tenía la sospecha que eran por las cookies y efectivamente, cuando imprimo en consola el accessToken en la ruta principal ("/") está como undefined. A nadie mas le ha sucedido esto? Tengo el mismo código del profesor

Ixchel Garcia

student•

Ya lo logre pero no use el código del profe... saque todo del repositorio de spotify. Se los dejo aquí si tienen el mismo problema: https://github.com/spotify/web-api-auth-examples/blob/master/authorization_code/app.js

Lo bueno es que se parece mucho al codigo del profe

Fernando Azuaje

student•

Tengo un problema con el proyecto he hecho todo al pie de la letra pero no me funciona como en el video, ya que la no se me esta almacenando la cookie con el access token,

Guillermo Rodas

teacher•

Hola azu.ref, podrias darme un poco más de información sobre que no es lo que funciona, que error o errores estas teniendo. Tambien podrias darme el link de tu repositorio. Si, ejecutas mi repositorio, tienes el mismo problema?

Jassen Castillo

student•

creo que este curso ya esta en la categoria de muy avanzado y deberia simplificarse xD o sea no soy junior pero a ratos me cuesta seguir al profe demasiado, tal vez usar pug y express para probar cosas simples como Oauth no fue la mejor alternativa, creo que podriamos hacerlo solo con express + html, y muchas de las librerias instaladas ya estan por defecto en express... ojala lo vuelvan a subir en una nueva version

Jhunior Eduardo Guevara Lázaro

student•

pero si pug y express son simples...

Ronnie Dave Cañas Pineda

student•

Al final me queda el sabor de que en la edición se perdió la parte más importante: getUserInfo, getUserPlaylists... etc Una lástima

William Rodriguez

student•

te recomiendo leer los otros comentarios para ver si alguien ya hizo tu pregunta , el profe la respondio con el codigo que hacia falta.

Raul Gomez

student•

la neta el Authorization Code Grant

Flor Dulcinea Peña Campos

student•

Dice que al ponerle en una cookie { httpOnly: true} no se puede leer del lado del cliente, pero si inspecciono el navegador > application > cokkies, ahí me sale la cookie y no debería ¿o si?

Y aparte, ¿cuando se refiere a guardar la cookie del lado del servidor, se refiere a guardarla en una base de datos?

Jonatan Francisco Gonzalez Donis

student•

Como en una pregunta anterior, por temas de concurrencia el cookie-parser no sobreescribe e cookie??

Cual es la mejor forma de almacenar un access_token y un refresh_token de un api como Spotify en estos ejemplos en el server?? Si el server son apis que en algun punto usan los tokens??

También cuales son los metodos que conoces de almacenar el refresh_token para pedir u nuevo token cuando se vence el que se usa?? Manejando el tema de concurrencias.

Guillermo Rodas

teacher•

La mejor manera es en memoria o en una cookie segura del lado del servidor. En el curso de Autenticacíon con Passport hacemos una implementación del almacenamiento de la cookie en el backend.

Luis Antonio Sic Canil

student•

tengo el siguiente error: Missing required parameter: redirect_uri Alguien me podría ayudar?

Gedward Romo

student•

Para quienes tengan un error para terminar la clase, en mi caso hubo una playlist llamada "importedStarred" que tenia el arreglo images vacio, por lo cual saltaba error, solucione de la siguiente manera:

...
const filteredPlaylists = userPlaylists.items.filter(elem => {
      return elem.images.length
    });
    
    res.render("playlists", {
      userInfo, 
      playlists: {items: filteredPlaylists}});
...

ALVARO RODRIGUEZ TAMEZ

student•

Muy buena explicación

Andrés Mauricio Montoya Sánchez

student•

Yo no pago Spotify, asi que no me aparece ninguna :(

William Rodriguez

student•

no necesitas tener la version premium de spotify con la version gratuita puedes crear playlist.

TypeError: /Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/views/playlists.pug:19
    17|             .card-image
    18|               figure.image
  > 19|                 img(src=playlist.images[0].url)
    20|             .card-content
    21|               h1.title= playlist.name
    22|               h2.subtitle= playlist.owner.display_name

Cannot read property 'url' of undefined
    at eval (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:94:73)
    at eval (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:161:4)
    at template (eval at wrap (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:217:190)
    at Object.exports.renderFile (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:427:38)
    at Object.exports.renderFile (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:417:21)
    at View.exports.__express [as engine] (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/pug/lib/index.js:464:11)
    at View.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/view.js:135:8)
    at tryRender (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/application.js:640:10)
    at Function.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/oauth/blog/node_modules/express/lib/response.js:1012:7)

extends layout.pug

block hero
  section.hero.is-dark.is-medium.main-hero
    .hero-body
      .container
        h1.title.is-size-1 Felida Music
        h2.subtitle Share and add the best playlists from the community


block content
  .container.main-content
    .columns.is-multiline
      each playlist in playlists.items
        .column.is-one-quarters
          .card
            if playlist.images[0]
              .card-image
                figure.image
                  img(src=playlist.images[0].url)
            .card-content
              h1.title= playlist.name
              h2.subtitle= playlist.owner.display_name
            .card-footer
              .card-footer-item
                a.button.is-primary-is-fullwidth= `${isHome ? 'Ver tracks' : 'Agregar'}`
              .card-footer-item
                a.button.isfullwidth(href='#')
                  i.far.fa-thumbs-up

...
const filteredPlaylists = userPlaylists.items.filter(elem => {
      return elem.images.length
    });
    
    res.render("playlists", {
      userInfo, 
      playlists: {items: filteredPlaylists}});
...

Usando nuestro access token para obtener nuestros recursos

Bienvenida e introducción

Qué aprenderás sobre autenticación con OAuth

Stack de seguridad para aplicaciones modernas

Autenticación

Autorización

JSON Web Tokens

JSON Web Tokens

Autenticación tradicional vs JWT

Configuración inicial de los proyectos

Firmando un JWT

Verificando nuestro JWT firmado y buenas practicas con JWT

Server-Side vs Client-Side sessions

Protegiendo nuestros recursos con JWT

Habilitando CORS en nuestro servidor

Profundizando el concepto de JWKS

OAuth 2.0

Cómo elegir el flujo adecuado para OAuth 2.0

¿Qué es OAuth 2.0?

Conociendo el API de Spotify

Creando los clientes de Spotify y servicios iniciales

Implementando Authorization Code Grant