스포티파이 API

드디어 한다.
준비는 완벽하다.
2일동안 이것만 찾아봤다.

공식 문서는 너무 어려워서

여러 velog tistory 뒤졌음.

아무튼 성공.

---

코딩 레츠기릿

이 API를 사용하려면 해당 사이트에서 토큰을 받아줘야 한다.

그리고 그 토큰을 headers에 넣어서 API 호출을 해야
데이터가 받아와지는 아주 야무진 구성이네요.

그럼 일단 토큰부터 받아야겠죠?

토큰 받기

우선 토큰을 받아주는 component를 만들어주기로 함.

여러군데에서 긁어온 코드를 종합해서 만든 제 토큰 코드는

Token.tsx

import axios from 'axios';

const BASE_URL = 'https://accounts.spotify.com/api/token';

export const getAccessToken = async () => {
 const authParam = {
   grant_type: 'client_credentials',
   client_id: "스포티파이 클라이언트 아이디",
   client_secret: "스포티파이 클라이언트 비번",
 };

 try {
   const res = await axios.post(BASE_URL, new URLSearchParams(authParam).toString(), {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
   });
   window.localStorage.setItem('token', res.data.access_token);
   return res.data;
 } catch (error) {
   console.error(error);
   throw error;
 }
};

이렇게 되겠습니다.

이전 글에서 공부했던 async & await, axios 아주 잘 써먹었구요.

코드리뷰

export const getAccessToken = async () => {

프로미스 하나 만들어주고

axios.post(BASE_URL, new URLSearchParams(authParam).toString(), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    });

이렇게 하래요. authParam에는 제 정보 적어주고요.

window.localStorage.setItem('token', res.data.access_token);

윈도우 로컬에 'token'이라는 이름으로 토큰 저장해주기.
이러면 매번 불러올 필요 없자너

이렇게 토큰은 받아왔습니다.
이제 잘 받아와지나 확인한번 해보자구요.

토큰 확인

MusicView.tsx 파일에서
위 Token.tsx파일의 getAccessToken 컴포넌트 불러와주고

getAccessToken();
const token = window.localStorage.getItem('token');
console.log(token);

결과

토큰 아주 잘 불러와졌죠?
모자이크 처리 했읍니다 할필요 없겠지만 암튼

음악 받아오기

이제 토큰 받아왔으니 API 받아와보자고 드디어!!!!

공식문서 들어가면 아주 잘 설명은 해줬는데
너무 설명을 잘 해줘서 저같은 코린이는 못알아먹어요.

결국 다른 벨로그에서 슬쩍 해왔습니다.

const userplaylists = async () => {
      const response = await axios.get("https://api.spotify.com/v1/search", {
        params: {
          q: "BTS",
          type: "album",
          limit: 5,
        },
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      const data = response.data.albums.items;
      setPlayListResult(data);
      setLoading(false);
      console.log(PlayList);
    };

이런 느낌쓰로 작성

코드리뷰

const response = await axios.get("https://api.spotify.com/v1/search", {

API url로 받아오는데 뒤에 추가로

params: {
  q: '쿼리',
  type: "타입",
  limit: "리미트",
},
  headers: {
  Authorization: `Bearer ${token}`,
},

이렇게 params, header을 추가해서 보내줘야 함.

정확한 형식은

공식문서에서 확인가능하십니다.

결과

드디어 앨범, 제목 불러왔네요..
나쁘지 않은 여정이었습니다.