스포티파이 web api 사용하기 javascript 자바스크립트 배포
Written by Sangmin on January 27, 2024
스포티파이 웹 api 사용법
1. 스포티파이 아이디가 없다면 아래 페이지에서 계정을 만든다
https://developer.spotify.com/
2. 계정을 만든 후에 대쉬보드에서 Create app으로 등록해준다.
website, redirect uri 는 Localhost:3000으로 적었다. 배포한 후에 변경
만들고 나면 client id 와 client secret을 발급해준다. 그러면 준비완료
3.env 파일에 적어주고 불러오자.
const clientId = process.env.SPOTIFY_CLIENT_ID
const clientSecret = process.env.SPOTIFY_CLIENT_SECRET
// Step 1: Access Token 받기
const tokenResponse = await axios.post(
'https://accounts.spotify.com/api/token',
`grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}
);
const accessToken = tokenResponse.data.access_token;
// Step 2: 키워드로 검색하기
const spotify_search_one = await axios.get('https://api.spotify.com/v1/search', {
headers: {
'Authorization': `Bearer ${accessToken}`,
},
params: {
q: keyword,
type: "album",
limit:10
},
});
// 검색결과를 바탕으로 하나씩 정보 받기
const spotify_search_album_by_id = await axios.get(`https://api.spotify.com/v1/albums/${albumId}`, {
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
console.log(spotify_search_album_by_id.data)
result:
결과는 이렇게 나온다.
{
album_type: 'album',
artists: [
{
external_urls: [Object],
href: 'https://api.spotify.com/v1/artists/24sQuJhQ85ZygDG7sUVUxR',
id: '24sQuJhQ85ZygDG7sUVUxR',
name: 'Verbal Jint',
type: 'artist',
uri: 'spotify:artist:24sQuJhQ85ZygDG7sUVUxR'
}
],
available_markets: [
'AR', 'AU', 'AT', 'BE', 'BO', 'BR', 'BG', 'CA', 'CL', 'CO',
'CR', 'CY', 'CZ', 'DK', 'DO', 'DE', 'EC', 'EE', 'SV', 'FI',
'FR', 'GR', 'GT', 'HN', 'HK', 'HU', 'IS', 'IE', 'IT', 'LV',
'LT', 'LU', 'MY', 'MT', 'MX', 'NL', 'NZ', 'NI', 'NO', 'PA',
'PY', 'PE', 'PH', 'PL', 'PT', 'SG', 'SK', 'ES', 'SE', 'CH',
'TW', 'TR', 'UY', 'US', 'GB', 'AD', 'LI', 'MC', 'ID', 'JP',
'TH', 'VN', 'RO', 'IL', 'ZA', 'SA', 'AE', 'BH', 'QA', 'OM',
'KW', 'EG', 'MA', 'DZ', 'TN', 'LB', 'JO', 'PS', 'IN', 'BY',
'KZ', 'MD', 'UA', 'AL', 'BA', 'HR', 'ME', 'MK', 'RS', 'SI',
'KR', 'BD', 'PK', 'LK', 'GH', 'KE', 'NG', 'TZ', 'UG', 'AG',
... 84 more items
],
copyrights: [
{
text: '2008 김진태 under licence to Genie Music Corporation',
type: 'C'
},
{
text: '2008 김진태 under licence to Genie Music Corporation',
type: 'P'
}
],
external_ids: { upc: '888272064360' },
external_urls: { spotify: 'https://open.spotify.com/album/2Ftf74xZ2KcjdS6ozsK5HB' },
genres: [],
href: 'https://api.spotify.com/v1/albums/2Ftf74xZ2KcjdS6ozsK5HB',
id: '2Ftf74xZ2KcjdS6ozsK5HB',
images: [
{
height: 640,
url: 'https://i.scdn.co/image/ab67616d0000b27350147085c44f89c70e5906b1',
width: 640
},
{
height: 300,
url: 'https://i.scdn.co/image/ab67616d00001e0250147085c44f89c70e5906b1',
width: 300
},
{
height: 64,
url: 'https://i.scdn.co/image/ab67616d0000485150147085c44f89c70e5906b1',
width: 64
}
],
label: '김진태',
name: '누명',
popularity: 21,
release_date: '2008-07-17',
release_date_precision: 'day',
total_tracks: 35,
tracks: {
href: 'https://api.spotify.com/v1/albums/2Ftf74xZ2KcjdS6ozsK5HB/tracks?offset=0&limit=50',
items: [
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object]
],
limit: 50,
next: null,
offset: 0,
previous: null,
total: 35
},
type: 'album',
uri: 'spotify:album:2Ftf74xZ2KcjdS6ozsK5HB'
}
3. 배포를 해보자
API를 이용해서 개발을 완료했다면 이제 배포를 해야한다. 스포티파이 api 다큐먼트에 보면 Development mode가 있고 extended quota mode가 있다. 개발모드는 25명 제한이 있다고한다. 이게 무슨 말이냐면 자신의 앱을 통해 스포티파이 로그인 하는 유저들이 25명 이라는듯하다. (즉, 스포티파이로 로그인하기 기능을 구현할 경우 로그인을 이용할 수 있는 유저 제한이 25명) 내가 만든 앱은 어차피 자료를 요청해서 불러오기만 하면 되는거라서 딱히 상관은 없을 듯 하다.
“Newly-created apps begin in development mode. This mode is perfect for apps that are under construction and apps that have been built for accessing or managing data in a single Spotify account.”
“built for accessing or managing data in a single Spotify account. ” 여기에 해당하기 때문
우선 사용제한이 얼마나 될지는 모르겠지만 올려봤다.