Usando nuestro access token para obtener nuestros recursos

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

Clase anteriorSiguiente clase

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
https://github.com/glrodasz/platzi-autenticacion/commit/82fdfa4a600a52dbbc1a015859ff00f3aef5c9a9#diff-af83b33641d9badb938fc12d93af2cfdR29

getUserPlaylists
https://github.com/glrodasz/platzi-autenticacion/commit/82fdfa4a600a52dbbc1a015859ff00f3aef5c9a9#diff-af83b33641d9badb938fc12d93af2cfdR51

Más info:
https://developer.spotify.com/documentation/web-api/reference/users-profile/get-current-users-profile/
https://developer.spotify.com/documentation/web-api/reference/playlists/get-list-users-playlists/

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.