저번에 이어서 내가 할 일은 accessToken을 이용하여 음악을 재생시키는 것이다. 추가로 react-spotify-web-playback 라이브러리를 같이 사용할 것이다. 즉, 설치를 해야 한다.
react-spotify-web-playback 설치
npm i react-spotify-web-playback 설치 (본문 맨 마지막에 링크)
Spotify developer 사이트에서 Web API를 찾아보면 정말 정말 종류가 많다. 나는 이중에서 search API를 사용해서 음악을 재생시켜 볼 것이다. 우선 사용은 간단하다. 내가 실제로 작성한 코드이다. 검색할 단어와 token을 매개변수로 전달하고 함수를 호출시키면 된다.
주의할 점은 토큰의 유효시간이 1시간이라는 것(추후에 refresh기능을 만들어야 함)과 계정이 premium이여야 한다. 다행이도 1달 무료로 사용해도 적용이된다.
export async function searchTrack(searchQuery: string, token: string) {
try {
const res = await fetch(
`https://api.spotify.com/v1/search?q=${searchQuery}&type=track&limit=10`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
const data = await res.json();
return data;
} catch (error) {
console.log(error);
}
}데이터 API 요청 결과
실제 응답 데이터 중 일부이고 내가 추출해서 사용한 부분을 체크해 봤다. 이미지, 앨범 이름, 노래 제목, uri(노래 재생에 필요)이다. 자신이 어떤 데이터가 필요한지에 따라서 유동적으로 useState, useContext 등 상태 데이터를 관리하면 될 것 같다.
플레이어 사용 방법
아래 코드는 일부분이고 필요한 데이터가 있다는 전제하에 코드를 작성한다. 코드도 정말 간단하다. 우리가 가지고 있는 토큰을 token 프롭스에 전달하고 uris는 재생할 uri를 전달하면 된다. 나는 렌더링 한 목록을 클릭할 경우 const [currentTrack, setcurrentTrack] = useState(""); 이용하여 값이 바뀌게 해주었다. styles은 공식 문서를 보고 어떤 값이 어디에 적용되는지 보면 끝이다.
import SpotifyPlayer from "react-spotify-web-playback"; // 파일 상단에 import
{token ? (
<SpotifyPlayer
token={token}
// uris={searchResults.map((item: { uri: string }) => item.uri)}
uris={[currentTrack]}
styles={{
bgColor: "#333",
color: "#fff",
sliderColor: "#1cb954",
sliderHandleColor: "#fff",
trackArtistColor: "#ccc",
trackNameColor: "#fff",
}}
play
/>
) : (
<></>
)}
문제해결 (Trouble Shooting)
역시 무난하게 지나갈 수는 없는 것 같다. 에러가 발생하였다.
이게 무슨 에러일까하고 google에 nextauth spotify scope 검색하였다. 알아보니 말 그대로 scope 없다는 것인데 이 scope가 뭐냐면 공식 문서에서 "스코프는 타사 앱을 사용하는 Spotify 사용자에게 공유하기로 선택한 정보만 공유될 뿐 그 이상은 공유되지 않는다는 확신을 제공한다."라고 말하고 있다. 간단하게 말하면 사용자에게 노래를 재생할 수 있게 한다거나 사용자 이메일 정보를 얻는다거나 등 권한의 범위라고 보면 될 것 같다.
scope 설정 하기
그렇다면 어떻게 scope를 설정할까? 초기에 생성했던 providers authorization 옵션을 사용하면 된다. 기본 값은 user-read-email(사용자의 이메일 주소에 대한 읽기 액세스 권한)이기 때문에 에러가 발생하는 것이다. next-auth 공식 문서에서도 "자신의 사용 사례에 맞게 옵션을 재정의할 수 있다"라고 말하고 있다. authorizatin 말고도 다른 여러 가지 옵션이 있다.
import Spotify from "next-auth/providers/spotify";
import type { NextAuthConfig } from "next-auth";
export default {
providers: [
Spotify({
clientId: process.env.SPOTIFY_CLIENT_ID,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
authorization:
"https://accounts.spotify.com/authorize?scope=user-read-email,user-read-private,streaming,user-modify-playback-state,user-read-currently-playing,user-read-playback-state",
}),
],
} satisfies NextAuthConfig;
내가 적용한 scope의 의미
sreaming: Spotify 트랙의 재생을 제어합니다. 이 범위는 현재 웹 재생 SDK에서 사용할 수 있습니다. 사용자는 Spotify Premium 계정이 있어야 합니다.
user-read-email: 사용자의 이메일 주소에 대한 읽기 액세스 권한입니다.
user-read-private: 사용자의 구독 세부정보(사용자 계정 유형)에 대한 읽기 액세스 권한입니다.
user-modify-playback-state: 사용자의 재생 상태에 대한 쓰기 액세스
user-read-playback-state: 사용자의 플레이어 상태에 대한 읽기 액세스 권한입니다. 이게 없으면 Spotify API: Error 401, "no token provided" 에러 발생
user-read-currently-playing: 사용자가 현재 재생 중인 콘텐츠에 대한 읽기 액세스 권한입니다.
이렇게 다 적용하면 플레이어가 정상적으로 화면에 나타나고 노래를 재생할 수 있다.
결과 화면
