Spotify API 사용해보기(feat. Aceese Token 가져오기)

1. Spotify Developer 접속

먼저, Spotify Developer에 접속한다.

Home | Spotify for Developers

spotify API를 사용하기 위해선 OAuth 2.0 인증을 통해 Access Token을 받아야 한다.

먼저 spotify에 가입한다. 가입을 마치고 메일 인증까지 마쳤다면,
본인의 프로필을 눌러 Dashboard로 이동해주자.

2. 앱 등록하기: Creat App

대시보드로 이동하면 다음과 같은 화면을 볼 수 있다.

여기서 우측 상단의 creat app을 통해 앱을 등록하자.

creat app 에서 필수로 작성해야 하는 항목은 다음과 같다.

• App name
• App description
• Redirect URIs

Redirect URIs?

Redirect URI는 사용자가 Spotify 로그인을 완료한 후, 다시 돌아올 페이지(URL)를 의미한다.

spotify에서 OAuth 2.0을 사용하기 위해선 사용자의 로그인이 필요한데,
로그인을 마친 사용자가 프로젝트의 어떤 사이트로 돌아와야 하는지에 대해 물어보는 것이다.

필자는 현재 개발 단계이기 때문에 localhost 주소를 넣어주었다.
추후 배포가 진행되면 잊지 말고 실제 주소를 넣도록 하자!

앱 생성을 마쳤다면 setting에서 Client ID와 Client secret을 확인할 수 있다.
api를 받아올 때 사용되는 부분이니 잘 기억해두자.

둘 다 민감한 정보이기 때문에 .env 파일을 생성해 저장하고 깃허브에는 업로드 하지 않도록 하자.
.env 파일을 생성하는 방법은 이쪽

3. Access Token 가져오기

이제 본격적으로 spotify 연동을 진행해보자.

Spotify API는 OAuth 2.0 방식으로 진행된다…아무튼 복잡하다는 의미인데…

정리하자면 다음과 같은 과정을 거친다.

1. 프로젝트는 사용자를 spotify에 보낸다.

2. 사용자는 spotify에서 인증(로그인)을 하고 코드가 담긴 URL과 함께 Redirect URI로 돌아온다.

3. 프로젝트는 사용자가 가져온 URI를 가공하여 인증 토큰을 얻어낸다. 이 인증 토큰을 통헤 spotify api의 다양한 기능에 접근할 수 있다.

이제 각 과정을 세부적으로 살펴보자.

1. 사용자를 Spotify로 보냄

프로젝트는 사용자를 Spotify 로그인 페이지로 이동

사용자가 로그인 후 설정한 Redirect URI로 돌아옴

// 사용자 spotify 로그인 
const getSpotifyLoginUrl = (): string => {
  const CLIENT_ID = process.env.REACT_APP_SPOTIFY_CLIENT_ID!;
  const REDIRECT_URI = process.env.REACT_APP_SPOTIFY_REDIRECT_URI!;
  
  // spotify에서 토큰으로 접근할 기능
  const SCOPES = [
    "user-read-private",
    "playlist-read-private",
    "playlist-modify-private",
  ].join("%20");

  return `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=code&redirect_uri=${encodeURIComponent(
    REDIRECT_URI
  )}&scope=${SCOPES}`;
};

2. 사용자가 Spotify에서 인증하고 Redirect URI로 돌아옴

Spotify 로그인 후, 사용자는 Redirect URI로 돌아옴.

이때, URL에 code라는 인증 코드가 포함됨.

// Redirect된 URL에서 Authorization Code 추출
export const getCodeFromUrl = (): string | null => {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get("code");
};

3. 프로젝트가 인증 토큰(Access Token)을 얻음

Spotify API에 code를 보내고 Access Token을 받음.

이 Access Token을 사용해 Spotify API의 다양한 기능(플레이리스트, 추천곡 등)에 접근 가능

// Access Token 요청
export const getAccessToken = async (code: string): Promise<string | null> => {
  const response = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: process.env.REACT_APP_SPOTIFY_REDIRECT_URI!,
      client_id: process.env.REACT_APP_SPOTIFY_CLIENT_ID!,
      client_secret: process.env.REACT_APP_SPOTIFY_CLIENT_SECRET!,
    }),
  });

  const data = await response.json();
  return data.access_token || null;
};

위 과정을 통하여 접근할 구 있는 인증 토큰을 얻어냈다.

세부적인 기능에 대한 내용은 다음 글로…(사실조금지쳣어요)