스포티파이 API 사용하기

 

코드는 아래 주소에 나와 있는 코드를 참고하여 작성하였다.

 

https://github.com/makeratplay/SpotifyWebAPI/

GitHub - makeratplay/SpotifyWebAPI: Simple JavaScript app to make API calls to Spotify

 

https://github.com/spotify/web-api-auth-examples/blob/master/authorization_code/app.js

GitHub - spotify/web-api-auth-examples: Basic examples to authenticate and fetch data using the Spotify Web API

 

 

내가 하고자 하는 것은 내 앱에 spotify API를 통해서

노래 재생 & 플레이리스트 불러오기 등의 기능을 추가하는 것이다.

 

프리미엄 구독이 되어 있는 spotify 계정으로 로그인만 한다면

따로 또 돈을 지불할 필요 없이 위 기능을 내 앱에서도 마음껏 이용할 수 있게 된다!

 

이를 위해서는 spotify에서 제공하는 

Authorization을 먼저 거쳐야 하는데,

이는 spotify API 상 사용자가 본인 계정으로 로그인하여 정보 사용에 동의를 하는 것으로,

동의를 함으로써 spotify에 있는 각종 resources에 접근할 수 있다. 

 

 

Spotify 공식 홈페이지에 나와있는 Authorization Flow는 다음과 같다. 

1) Authorization 요청: client id, response type, redirect uri, state, scope 정보를 갖고

spotify에 로그인 요청을 보내면, spotify 로그인 화면이 뜬다

2) 사용자가 로그인

3) client id, client secret, grant type, code, redirect uri 정보를 갖고 access token을 요청한다

4) access token, refresh token 정보를 받아오고

5) 이를 사용해서 spotify Web API에 정보를 요청한다

6) 정보를 JSON object 형태로 반환한다

 

 

이 모든 것을 하기 전!

 

아래의 링크로 가서

https://developer.spotify.com/dashboard/login

My Dashboard | Spotify for Developers

로그인을 하고, create an app을 누른다음

- Client ID와 Client secret 코드를 받고

- edit settings로 가서 스포티파이 로그인 이후에 redirect할 웹 페이지 주소를 등록해야 한다.

  (e.g. http://localhost:3000/)

 

 

 

 

---

 

 

 

Step 1) Authorization 요청

 

client id, response type, scope 등의 정보를

authorization url("https://accounts.spotify.com/authorize")에 붙여 redirect한다.

 

예시 1.

출처: github makeratplay spotifywebapi

 

예시 2. (node.js 사용)

출처: github spotify

 

- client id, client secret은 spotify에서 create an app으로 받은 코드.

- response type: authorization 후 code로 access token 받기

- redirect uri: authorization 후 이동할 주소

- scope: 이용하고 싶은 사용자의 정보

 

 

참고하여 작성한 내 코드. React로 작성하고 있다.

 

const AUTHORIZE = "https://accounts.spotify.com/authorize"; 

const redirect_uri = <authorization 후 redirect 할 주소. 앞서 언급한 것처럼 미리 등록이 되어있어야 함> 

* scope는 내가 읽어들일 정보들. spotify developers 홈페이지에 가면 종류가 나와 있다.

requestAuthorization

"Continue with Spotify" 버튼을 클릭하면 requestAuthorization 함수가 실행되어

url 변수가 담고 있는 주소(authorization 페이지)로 이동하게 된다.

 

 

 

 

 

Step 2) 로그인

 

동의를 누르면 redirect uri에 등록한 uri로 이동하는데,

해당 uri 뒤에 code가 덧붙여져 있을 것이다. 

이제 이 code를 갖고 access token을 얻는 단계로 넘어가보자.

 

 

 

 

 

Step 3) Request access token

 

다음의 순서로 코드를 짜야한다

- 로그인 후 url에 담겨있는 code 정보를 얻는다 (getCode)

- code, client id 등의 정보를 갖고 access token이 담겨 있는 data를 요청한다

- data를 받아 access token, refresh token을 local storage에 저장한다

 

(1) getCode()

출처: github makeratplay spotifywebapi

 

하나씩 살펴보자면,

window.location.search는 URL의 "?"를 포함한 querystring 부분을 반환한다.

* querystring은 URL에서 "?" 뒤에 붙는 string으로, parameter 전달에 사용된다.

code가 이 querystring에 담겨있으므로, window.location.search를 통해 일단 이 querystring을 얻어야 한다.

 

다음으로 브라우저의 객체인 URLSearchParams는 parameters를 parse하는 역할을 하는데,

querystring에서 'parameter 이름 = 값' 쌍으로 구성되어 있는 문자열을 parse하여

urlParams 메서드[ e.g.) urlParams.get(parameter 이름) ]를 통해 parameter의 값을 얻게 해준다.

 

즉, querystring이 '?q=123'이라면,

위 코드에서 urlParams.get('q')를 하면 '123'을 반환한다.

 

이 getCode() 함수는 참조한 코드와 동일하게 작성했다!

 

 

 

 

 

Step 4) Fetch Access Token

 

다음으로 이렇게 얻은 code와

client id, client secret, redirect uri를 포함하여

access token을 요청해야 한다.

 

참조한 코드에서는 XHR object를 사용하였는데 나는 이를 fetch API로 바꿨다.

 

코드는 다음과 같다.

 

출처: github makeratplay spotifywebapi

 

 

 

fetch API로 바꾼 코드.

const TOKEN = "https://accounts.spotify.com/api/token";

fetch API로 데이터를 요청한다음,

response를 json 형태로 얻고 (response.json())

data에 담긴 access token, refresh token을 localStorage에 저장한다.

그 후 onPageload 함수를 실행시킨다.

 

onPageload 함수는 사실상 웹페이지(앱)에 접속했을 때 가장 먼저 실행되어야 하는 함수이다.

onPageload 함수에서 다음의 세 가지 경우에 따라 이후 실행할 코드를 결정해야 한다.

- localStorage에 access token, refresh token이 이미 저장되어 있는 상태

- 사용자가 spotify 로그인 후 redirect 하여 페이지에 접속한 상태 (하지만 url에 담긴 code가 아직 처리되지 않아 access token, refresh token이 저장되어 있지 않음)

- 마지막으로는 authorization이 되지 않은 상태

 

지금까지 다룬 것은 - authorization 되지 않은 상태 에서의 flow다.

 

참조한 코드를 살펴보자면,

출처: github makeratplay spotifywebapi

1) if (window.location.search.length > 0)

두 번째 경우에 해당한다. url에 code가 담겨있으나 처리되지 않은 상태.

이 경우 code를 처리하는 flow(Step 3)~)로 가야 한다.

 

handleRedirect()를 다음과 같이 작성하면 된다.

 

2) else -> if ( access_token == null)

아직 사용자가 authorization을 하지 않은 상태.

이 경우 authorization url로 이동해야 한다(Step 1)~)

내 코드에서는 Authorization 버튼이 있는 Auth 페이지로 이동하게끔 만들었다.

 

3) else -> else 

access token이 저장되어 있는 상태.

그렇다면 이 access token을 통해 spotify로부터 정보를 받아오면 된다!

이 스텝부터 다시 이어가보자.

 

 

 

 

 

Step 5) Request data

 

정보를 요청하는 기본 코드는 다음과 같다.

헤더를 보면 알 수 있듯 access token을 담아 정보를 요청해야 한다.

출처: github makeratplay spotifywebapi

fetch로 작성한 코드.

 

여기서 어떤 정보를 요청하느냐에 따라 method, url, body가 달라진다.

이는 아래 주소에 자세하게 나와있다!

https://developer.spotify.com/console/

Users Profile | Spotify for Developers

 

예를 들어 곡 검색 기능을 추가하고 싶다면,

위 주소의 'search' 문서로 들어가 살펴보면 된다.

 

 

method = 'GET',

url에는 querystring에 인코딩 된 검색 키워드와, type(track or artist)가 포함되어야 한다.

method가 'GET'이므로 body는 따로 없다(null).

 

따라서 다음과 같이 작성할 수 있다.

 

data.tracks.items에는 검색된 20개의 track에 대한 정보가 array에 담겨 있는데,

이렇게나 많은 정보가... 들어있다.

 

아직 CSS 스타일링은 제대로 못한 버전이지만,

이 정보를 이용하면

다음과 같이 검색된 트랙의 제목, 아티스트, 미리 듣기까지 웹페이지(앱)에 포함시킬 수 있다!!

 

 

 

필자는 코딩 독학 중인 비전공자이기 때문에...

코드가 잘 다듬어지지 않았을 수도,

글에 오류가 있을 수도 있습니다!

그런 부분은 댓글로 남겨주시면 감사하겠습니다:)