๐Ÿค–Spotify ์ƒˆ๋กœ ๊ณ ์นจ ํ† ํฐ์„ ์–ป๋Š” ๋ฐฉ๋ฒ•๐Ÿš€๐Ÿš€

5518 ๋‹จ์–ด hacksspotifywebdevjavascript


์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” Spotify Refresh Token์„ ์ƒ์„ฑํ•œ ๋‹ค์Œ ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•„์š”ํ•  ๋•Œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ์•ก์„ธ์Šค ํ† ํฐ์„ ์ƒ์„ฑํ•˜๋Š” 2๊ฐ€์ง€ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‚ด my blog site์„ ํ‘œ์‹œํ•˜๊ณ  ํ˜„์žฌ ์žฌ์ƒ ์ค‘์ธ ํŠธ๋ž™์„ ๋ฐ”๋‹ฅ๊ธ€ ์„น์…˜์— ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋Š” Top 10 Tracks์šฉ Spotify ์ƒˆ๋กœ ๊ณ ์นจ ํ† ํฐ์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ฒซ ์ ‘๊ทผ



1๋‹จ๊ณ„: Spotify client_id ๋ฐ client_secret ์ƒ์„ฑ


  • Spotify developers dashboard๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ทธ๋Ÿฐ ๋‹ค์Œ ์•ฑ์„ ์„ ํƒํ•˜๊ฑฐ๋‚˜ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • 3๋‹จ๊ณ„์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํด๋ผ์ด์–ธํŠธ ID์™€ ํด๋ผ์ด์–ธํŠธ ์•”ํ˜ธ๋ฅผ ํŽธ๋ฆฌํ•œ ์œ„์น˜์— ๊ธฐ๋กํ•ด ๋‘ก๋‹ˆ๋‹ค.


  • 2๋‹จ๊ณ„: Spotify ์•ฑ์— ๋ฆฌ๋””๋ ‰์…˜ URI ์ถ”๊ฐ€


  • ์•ฑ์˜ ์„ค์ •์„ ์—ฝ๋‹ˆ๋‹ค.
  • ๋‹ค์Œ๊ณผ ๊ฐ™์ด https://getyourspotifyrefreshtoken.herokuapp.com/callback์— Redirect URIs๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
    ์ด๋ฏธ์ง€์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
  • ์ €์žฅ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.


  • 3๋‹จ๊ณ„: Spotify ์ƒˆ๋กœ๊ณ ์นจ ํ† ํฐ ๋ฐ›๊ธฐ


  • this site์—์„œ ๋งŒ๋“  Alec Chen๋กœ ์ด๋™
  • ์–‘์‹์— Client ID ๋ฐ Client Secret๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด scope๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋ฒ”์œ„์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ documentation
  • ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ƒˆ๋กœ ๊ณ ์นจ ํ† ํฐ์„ ๋ฐ›์œผ๋ ค๋ฉด ์ œ์ถœ์„ ํด๋ฆญํ•˜์‹ญ์‹œ์˜ค.


  • ๋‘ ๋ฒˆ์งธ ์ ‘๊ทผ๋ฒ•(๋” ๊ธด)




    1๋‹จ๊ณ„: Spotify client_id ๋ฐ client_secret ์ƒ์„ฑ


  • ์ ‘๊ทผ ๋ฐฉ์‹ 1์—์„œ 2๋‹จ๊ณ„๊นŒ์ง€ ๋‹จ๊ณ„๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  <website>/callback๋ฅผ Redirect URIs์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ. http://musing.vercel.app/callback


  • 2๋‹จ๊ณ„: ์•ก์„ธ์Šค ์ฝ”๋“œ์šฉ URI ์ƒ์„ฑ


  • ์•„๋ž˜ URL์—์„œ $CLIENT_ID , $SCOPE ๋ฐ $REDIRECT_URI๋ฅผ 1๋‹จ๊ณ„์—์„œ ๊ธฐ๋กํ•œ ์ •๋ณด๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค. $REDIRECT_URI๊ฐ€ URL encoded์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

  •   https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI
    


  • ์ด๊ฒƒ์ด ๋‚ด ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.

  •   https://accounts.spotify.com/authorize?response_type=code&client_id=CLIENT_ID&scope=SCOPE&redirect_uri=https%3A%2F%2Fmusing.vercel.app%2Fcallback
    



    3๋‹จ๊ณ„: ๋ฆฌ๋””๋ ‰์…˜ URI์—์„œ ์•ก์„ธ์Šค ์ฝ”๋“œ ๊ฐ€์ ธ์˜ค๊ธฐ


  • ๋‚ด ๊ฒฝ์šฐ์—๋Š” https://sabare.me/callback ๋กœ ์„ค์ •๋œ ๋ฆฌ๋””๋ ‰์…˜ URI๋กœ ๋ฆฌ๋””๋ ‰์…˜๋ฉ๋‹ˆ๋‹ค.
  • ์ฃผ์†Œ ํ‘œ์‹œ์ค„์—์„œ ์•„๋ž˜์™€ ์œ ์‚ฌํ•œ ๊ฑฐ๋Œ€ํ•œ URL ๋ฌธ์ž์—ด์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. $ACCESSCODE ์ž๋ฆฌ์— ๊ธด ๋ฌธ์ž์—ด์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๋‹จ๊ณ„๋ฅผ ์œ„ํ•ด ํ•ด๋‹น ๋ฌธ์ž์—ด์„ ๊ธฐ๋กํ•ด ๋‘ก๋‹ˆ๋‹ค.

  •   https://sabare.me/callback?code=$ACCESSCODE
    



    4๋‹จ๊ณ„: ๊ฐฑ์‹  ํ† ํฐ ๋ฐ›๊ธฐ


  • ํ„ฐ๋ฏธ๋„์— ๋‹ค์Œ CURL ๋ช…๋ น์„ ์ž…๋ ฅํ•˜๊ณ  ๋ชจ๋“  ๋ณ€์ˆ˜๋ฅผ 1๋‹จ๊ณ„์™€ 3๋‹จ๊ณ„์—์„œ ๊ธฐ๋กํ•œ ์ •๋ณด๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

  •   curl -d client_id=$CLIENT_ID -d client_secret=$CLIENT_SECRET -d grant_type=authorization_code -d code=$CODE -d redirect_uri=$REDIRECT_URI https://accounts.spotify.com/api/token
    


  • ๊ฒฐ๊ณผ JSON ๋ฌธ์ž์—ด์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. $CILENT_ID๋ฅผ ๊ธฐ๋กํ•ด ๋‘ก๋‹ˆ๋‹ค. ์ด ํ† ํฐ์€ ๋งค์šฐ ์˜ค๋žซ๋™์•ˆ ์ง€์†๋˜๋ฉฐ ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด ํ† ํฐ$CLIENT_SECRET์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  •   {
        "access_token": "ACCESS_TOKEN",
        "token_type": "Bearer",
        "expires_in": 3600,
        "refresh_token": "REFRESH_TOKEN",
        "scope": "playlist-modify-private"
      }
    

    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ