24.03.15 #66일차 (Spotify API , SDK 재생 플레이어 구현 성공 #1)

📌 개요

카카오 로그인 API 를 구현했던 목적이 Spotify API를 활용하기 위해 OAuth 2.0 인증 및 인가 코드, 엑세스 토큰, SDK에 대한 이해를 위함이었다.

삽질도 많이하고 이해하지 못했던 부분을 찾아가며 겪었던 과정을 남겨보려고 한다.

아직 완벽하지 않은 구현이고 수정해야 할 것, 실수한 부분들도 있겠지만 연동을 목표로 작성 해보았다.

React, Node.js를 쓰지 않고 구글링과 GPT의 도움을 받고 구현을 했다.

• 특히 GPT가 없었다면 구현 조차 못했지 싶다ㅎ

*시작하기 전 중요 사항

스포티파이의 API를 이용하여 음악을 재생하고 플레이어를 만들고 싶다면 프리미엄 결제를 해야한다.

결제 안하면 플레이어는 못만들어요ㅠ
(현재 한달 무료)

📝 과정

카카오 API는 처음엔 복잡하긴 했어도 한글로 되어있어서 차근차근 따라가면 시간이 걸리더라도 구현이 가능하다고 생각하는데 Spotify는 해외 서비스이다보니 접근하기 어려웠고,
간단하게 보고 따라 할 수 있는 Java Spring 기반의 자료가 많지 않았고 복잡한 과정들이 많았다.

스포티파이 개발자 공식 홈페이지에서는 Javascript를 사용하고 있지만 React, Node.js 등 현재 내가 사용하지 못하는 라이브러리와 플랫폼을 사용하고 있어서 Ajax, Javascript, jQuery만 사용해서 구현을 하느라 시간을 정말 많이 잡아먹었다.

그래서 최대한 간단하게 구현을 목적으로 핵심적인 부분들을 남겨보려고 한다.

1. 스포티파이 개발자 공식 홈페이지 앱 등록하기

우선 첫번째로 공식 홈페이지에서 앱을 등록 해야 한다.

• 스포티파이 개발자 홈페이지

로그인 후 우측에 내 프로필을 클릭하고 Dashboard로 들어가고 Create app을 누른다.

1. App name - 앱 이름을 사용하고 싶은 이름으로 정해주고
2. App description - 앱 설명
3. Website - 로컬 주소
4. Redirect URI(중요) - 후에 다시 설명 할 인가 코드를 받을 주소이다. 이곳으로 Response를 요청해서 코드를 받을 수 있다.

스크롤을 내리면 어떤 API와 SDK를 사용 할 것인지 체크하는 박스에 나는 이렇게 체크했다.

2. 순서

이제 본격적으로 들어가기 전 어떤 순서가 있는지 알아보자.

(그만 알아보자.)

우리가 해야 할 순서는 이렇게 된다. 여기에서는 순서만 보면 됨.

1. 인가 코드

   • 스포티파이에 <a>하이퍼 링크로 client_id, response_type, redirect_uri, scope(중요) 를 함께 보내주어 인증 요청을 보내고 Request로 인가 코드를 받고 토큰을 받을 페이지로 넘겨준다.

2. 토큰

   • Ajax post 방식으로 클라이언트 ID와 비밀번호, Request 파라미터로 받은 인가 코드 , 토큰을 받을 Redirect URI, grant_type(중요하지 않음)까지 보내주고 토큰을 얻는다.

3. SDK 설치

   • SDK 설치 및 플레이어를 생성하고 플레이어 함수에 받은 토큰을 전달해준다.

3. 인가 코드 받기(Authorization Code)

여기에서 궁금해 지는것. 인가 코드 왜받음??

• 사용자 정보가 필요한 API를 구현하려면 내가 구현할 웹에 사용자 정보를 넘겨주어야 하는데 사용자 정보의 약관을 동의한 코드가 인가 코드이다.

스포티파이의 인증 순서도 카카오 API와 크게 다르지 않아서 인가 코드를 받고 엑세스 토큰을 발급 받는것까지는 어렵지 않았다.

	@RequestMapping("/usr/home/SpotifyAPI")
	public String SpotifyAPI() {

		
		return "/usr/home/SpotifyAPI";
	}

Controller에 약관 동의를 위해 로그인 페이지가 필요하기 때문에 매핑을 해주고 (로그인 버튼이 있는 페이지. 로그인을 직접 하는 페이지가 아님.)

<a id="" href="https://accounts.spotify.com/authorize?client_id=1440fd0b1217439f81573cf6470a1a51&response_type=code&redirect_uri=http://localhost:8081/usr/home/SpotifyRedirect&scope=user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming">
스포티파이 로그인 버튼
</a>

로그인을 위한 페이지는 버튼 하나만 달랑 있어도 된다.

하지만 여기에서 정말 중요한 부분은 하이퍼링크 href에 있다.

https://accounts.spotify.com/authorize 는 인가 코드를 요청하고 권한 승인을 위한 로그인 페이지이고 여기에 추가적으로 client_id, response_type, redirect_uri, scope 를 파라미터로 보내주어야 한다.

인가코드 요청을 위한 파라미터

1. client_id - 앱을 등록했던 홈페이지로 가서 등록했던 내 앱에 들어가면 Settings에 Client ID가 있다. 이걸 복붙하면 된다.

2. response_type - code로 고정

3. redirect_uri - 인가 코드를 받을 내 웹 페이지를 말한다. (여기에서 헷갈리면 안되는게 로그인 버튼이 있는 페이지로 등록하면 안된다. 다른 새로운 페이지가 있어야함.)
   • 로그인에 성공하면 다른 페이지로 돌아가야 하는데 그 돌아갈 페이지의 주소가 바로 redirect_uri

4. scope - 요청 선택 사항이고, 한마디로 권한 승인 범위이다. 나는 이걸 모르고 첫 시도때 scope를 빼고 요청을 보냈다가 영문도 모른채 하루를 날렸다.
   • scope 없이 요청을 보내도 인가 코드를 잘 보내주는데, 그 이유는 스코프를 제외한 위의 세가지 정보는 필수 사항이지만 스코프는 선택 사항이기 때문이다.
     • 스코프를 빼고 보내면 기본적인 정보만 받아 올 수 있도록 허용하기 때문에 우리가 목표로 하고있는 재생 플레이어를 만들기 위해서는 사용자에 대한 권한을 따로 스코프로 보내주어야 한다.

scope=user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming

• redirect_uri 뒤에 scope를 넣어주었고 유저에 대한 권한과 스트리밍까지 가능한 권한 범위이다.
  • 띄어쓰기로 각각 구분하고 있다.

위의 하이퍼링크를 참고하여 요청하면 된다.

• 

css 처리를 하지 않아서 볼품없지만 방금 만든 페이지로 이동해서 로그인 버튼을 누르게 되면

이렇게 로그인 페이지로 넘어가게 되고 로그인 후 권한 승인을 마치게 되면 인가 코드를 받을
Redirect URI로 넘어가게 된다.

	@RequestMapping("/usr/home/SpotifyRedirect")
	public String SpotifyRedirect(@RequestParam String code, Model model) {
		
		model.addAttribute("code", code);
		
		return "/usr/home/SpotifyRedirect";
	}

Redirect URI는 우리가 앱을 등록할때 설정했던 주소이고 Controller에서 매핑을 하고 인가 코드를 받을 파라미터를 매개변수로 받아야 한다. (인가 코드는 String 문자열 형태)

• 받은 인가 코드를 model을 이용해 jsp에서 사용 할 수 있게 addAttribute() 해주었다.

정상적으로 페이지를 이동했다면 인가코드가 잘 넘어왔는지 가장 먼저 확인해보자.

• 
  model로 넘겨준 인가 코드를 html 요소로 넣어주고 홈페이지로 이동해보자
• 

^-^

4. 엑세스 토큰(Access Token) 받기

웹페이지에 잘 나오는걸 확인했다면 이제 인가 코드를 이용하여 토큰을 받아야 한다.

토큰을 받는 즉시 재생 플레이어를 생성하기 위해 Ajax로 비동기처리를 해주었다.

토큰을 받기 위해 보내야 할 파라미터

clientId - 앱을 등록했던 홈페이지로 가서 등록했던 내 앱을 들어가면 Settings에 Client ID가 있다 이걸 복붙하면 된다.

clientSecret - 마찬가지로 앱을 등록했던 홈페이지로 가서 등록했던 내 앱을 들어가면 Settings에 가려져 있다. View를 누르면 나오는데 이걸 복붙하면 된다.

grant_type - authorization_code 로 값 고정.

code - 우리가 웹페이지에서 확인한 인가 코드이다.

redirect_uri - Ajax로 요청을 보내고 토큰을 받을 Redirect URI (Ajax를 구현할 현재 페이지와 동일)

<script>
// 필요한 변수들을 설정합니다.
var clientId = '1440fd0b1217439f81573cf6470a1a51'; // 스포티파이 애플리케이션의 클라이언트 ID
var clientSecret = '62e108fbf0fa47c88f7957ba663187a4'; // 스포티파이 애플리케이션의 클라이언트 시크릿
var redirectUri = 'http://localhost:8081/usr/home/SpotifyRedirect'; // 스포티파이 토큰을 받을 리다이렉트 URI
var authorizationCode = `${code }`; // 스포티파이로부터 받은 인가 코드. jQuery로 값을 넣어줬기 때문에 ` 백틱으로 감싸주어야 한다.

// Ajax 요청을 보낼 URL을 설정합니다.
var url = 'https://accounts.spotify.com/api/token';

• 요청을 보낼 데이터의 값을 알맞게 채워주고

var data = {
  grant_type: 'authorization_code',
  code: authorizationCode,
  redirect_uri: redirectUri,
  client_id: clientId,
  client_secret: clientSecret
};

• url을 제외하고 데이터를 data 변수에 묶어주었다.

$.ajax({
  url: url,
  type: 'POST',
  data: data,
  success: function(response) {
    // 요청이 성공하면 response 객체에서 액세스 토큰을 가져옵니다.
    var accessToken = response.access_token;
     console.log("엑세스 토큰 잘 나오나? : " + accessToken);
  }
    error: function(error) {
    // 요청이 실패한 경우 에러 처리를 수행합니다.
    console.error('액세스 토큰 요청 실패:', error);
  }
});

• POST 방식으로 요청을 보내고 요청이 성공했다면 response 객체에 접근하여 엑세스 토큰을 가져올 수 있다.

^-^

• 콘솔에 찍어서 잘 넘어왔는지 확인해보자.

다음으로

토큰까지 출력에 성공했다면 절반 이상 온듯하다

이제 API를 활용하여 SDK로 재생 플레이어를 구현할 준비가 모두 끝났다.

글이 길어질듯 하니 다음 글에 SDK 해보겠음!