Spotify API를 사용하여 포트폴리오 향상🎼

이것은 그의 영감의 원천이다. 가서 그를 보아라. 그는 매우 멋진 일을 많이 했다!
페이지 아래쪽에서 이 기능을 볼 수 있습니다 here
요약한 바와 같이, 이것은 당신의 사이트에 구성 요소를 설정하는 방법에 관한 블로그 글입니다. 이것은 당신이 주어진 시간에 Spotify에서 들은 내용을 보여 줍니다.
따라서 Spotify API가 우리와 함께 작업할 수 있도록 코드를 작성하기 전에 준비를 해야 합니다.
반드시 고려하십시오. 당신은 내가 이곳에서 전시하는 방식으로 첫 번째 단계를 완성할 수 있지만, 이후에 이것은 당신의 사이트가 어떻게 설립되었는지, 당신의 사이트에서 이 점을 어떻게 전시했는지에 달려 있습니다.내 페이지는 Next로 구성됩니다.js 및 TailwindCSS는 Vercel에서 호스팅됩니다.

Spotify
우리는 세 가지 절차를 통해 이 점을 실현해야 한다.여기서 당신은 이 세 가지 절차를 보게 될 것입니다.다음은 우리가 이 세 가지 절차를 할 것이다.

Spotify 응용 프로그램 만들기

인증

환경 변수

Spotify 응용 프로그램 만들기
첫 번째 단계는 인증 인증서를 받은 다음 API를 사용할 수 있도록 Spotify 응용 프로그램을 만드는 것입니다.

로그인Spotify Developer Dashboard

애플리케이션 생성

필드에 이름과 설명을 추가하고 [만들기]를 클릭합니다.

고객 기밀 정보 표시

우리는 이 비밀을 얻어서 나중에 사용해야 한다!

나중에 이 프로세스에서 사용할 수 있도록 고객 ID와 암호를 복사하여 붙여넣습니다.

편집 설정

URL로 추가http://localhost:3000

URL 리디렉션이란 무엇입니까?

이 단계는 완성되었다!
이제 Spotify가 구성되어 있으므로 요청할 수 있습니다.

창작하다
Spotify API를 사용하여 인증하는 방법은 매우 많습니다. 이것은 사용자의 용례에 따라 가장 실행 가능한 해결 방안이 무엇인지에 달려 있습니다.
우리는 단지 한 번의 허가를 얻기 때문에 Authorization Code Flow를 사용할 것이다.
응용 프로그램이 필요한 범위에 로그인해서 권한을 요청할 것입니다.다음은 URL의 예입니다.client_id와scope를 네 것으로 바꿔라.

https://accounts.spotify.com/authorize?client_id=f42ae57ec93142b0b4017936f75fa65e&response_type=code&redirect_uri=http%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing%20user-top-read

우리는 단지 한 번만 검증할 수 있기 때문에, 우리는 위의 절차에 추가된 redirect_uri 로 바뀔 것이다.
URL에는 값이 저장된 쿼리 매개변수code가 있습니다.

http://localhost:3000/?code=AQA7...FyBs

다음은 검색refresh token이 필요합니다.이를 위해서는 첫 번째 단계에서부터 Base 64 인코딩 문자열을 생성해야 합니다.client id와 secret을 포함합니다.예를 들어 this tool를 사용하여 온라인 인코딩을 할 수 있습니다.형식은 client_id:client_secret여야 합니다.

curl -H "Authorization: Basic <base64 encoded client_id:client_secret>"
-d grant_type=authorization_code -d code=<code> -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

이것은 우리가 필요로 하는 refresh_token 를 포함하는 JSON 응답을 되돌려줍니다.방문권을 취소하지 않으면 이 영패는 valid indefinitetly 이기 때문에 환경 변수에 저장하기를 원합니다.이것refresh_token의 무제한 유효는 우리가 한 번만 검증할 수 있는 원인 중의 하나이다.

환경 변수 추가
API에 안전하게 액세스하려면 각 요청에 비밀을 포함해야 합니다.하지만 우리는 우리의 비밀을 공개적으로 보여주고 싶지도, GitHub에서도 보여주고 싶지 않다.따라서 우리는 환경 변수를 사용해야 한다.
너는 몇 가지 방법으로 이 점을 실현할 수 있지만, 왜냐하면 나는 넥스트를 사용했기 때문이다.나는 js와vercelthis을 사용하여 환경 변수를 정확하게 저장하는 것을 도왔다.

비밀 번호
Spotify API에서 데이터에 액세스하는 데 필요한 두 파일에 대해 설명합니다.위에서 언급한 바와 같이, 나는 그것을 어떻게 당신의 사이트에서 볼 수 있는지 상세하게 토론하지 않을 것이다. 이것은 당신의 사이트 구축 구조와 다르다.단, 나는 당신이 스스로 데이터를 어떻게 표시하는 방법을 찾을 수 있을 것이라고 믿습니다.🤩
spotify.js

import fetch from 'isomorphic-fetch'
import querystring from 'querystring'


// We access our values with enviroment variables,
// we don't want to share these values in our code
const client_id = process.env.SPOTIFY_CLIENT_ID
const client_secret = process.env.SPOTIFY_CLIENT_SECRET
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN

// We encode our client_id and client_secret again to send with the POST request.
// This is a part of the authorization header
const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`

// This function gets the access token so that we can access the API

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
  method: 'POST',
   headers: {
    Authorization: `Basic ${basic}`,
    'Content-Type': 'application/x-www-form-urlencoded',
   },
   body: querystring.stringify({
    grant_type: 'refresh_token',
    refresh_token,
   }),
  })
  return response.json()
}

// We use the afformentioned access token and send it with the request to the API
// this requests gets the currently playing song.
export const getNowPlaying = async () => {
 const { access_token } = await getAccessToken()
 return fetch(NOW_PLAYING_ENDPOINT, {
  headers: {
   Authorization: `Bearer ${access_token}`,
  },
 })
}

지금부터 놀아요.js

import { getNowPlaying } from '@/lib/spotify'

export default async function handler(_, res) {
  const response = await getNowPlaying()

 // Here we handle the request from the API
 if (response.status === 204 || response.status > 400) {
   return res.status(200).json({ isPlaying: false })
 }

 const song = await response.json()

 if (song.item === null) {
   return res.status(200).json({ isPlaying: false })
 }

 const isPlaying = song.is_playing
 const title = song.item.name
 const artist = song.item.artists.map((_artist) => _artist.name).join(', ')
 const album = song.item.album.name
 const albumImageUrl = song.item.album.images[0].url
 const songUrl = song.item.external_urls.spotify

 res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30')

 // We return an obejct containing the information about the currently playing song
 return res.status(200).json({
   album,
   albumImageUrl,
   artist,
   isPlaying,
   songUrl,
   title,
 })
}

결론
요약!
이 세 가지 주요 단계는 Spotify API에 액세스하는 데 필요합니다.
그런 다음 API를 사용하여 웹 사이트에 듣고 있는 내용을 표시할 수 있습니다.

먼저 Spotify 개발자 사이트

에 응용 프로그램 만들기

인증 설정 및 실행

중요한 요소이므로 요청이 수행됩니다

.

환경 변수 설정

당신은 Spotify API를 사용하여 많은 다른 일을 할 수 있습니다. 예를 들어 재생 횟수가 가장 많은 노래를 표시할 수 있습니다.
그러나 이러한 단계는 API에 액세스하여 프로젝트에서 사용할 수 있도록 하는 데 매우 중요합니다.
my webpage 의 밑부분, 꼬리 위에서 이 구성 요소를 볼 수 있습니다
노래 한 곡이 방영되고 있거나, 방영되지 않았거나.