Spotify Chrome 확장 프로그램: 음악 컨트롤러 | 5단계

Spotify Chrome 확장 프로그램 - 비즈니스 로직

이는 사용자의 Spotify 세션을 제어할 수 있는 ReactJS로 구동되는 Spotify Chrome 확장 프로그램을 구축하는 다단계 프로젝트의 5단계입니다.

1단계를 찾을 수 있습니다.

이 튜토리얼에서는 사용자가 Google 크롬 확장 프로그램의 작동 방식을 알고 있다고 가정합니다. 더 알아보기 .

Spotify 개발자 콘솔에 등록하여 시작하겠습니다.

우리가 사용할 인증 흐름은 AUTH FLOW WITH PKCE라고 합니다.

우리는 토큰을 새로 고칠 수 있기를 원하므로 증명 키와 함께 인증 코드 흐름을 사용할 것입니다.

이 흐름에는 세 단계가 있습니다.

인증 코드 받기

인증 코드를 사용하여 액세스 토큰을 가져옵니다

.

액세스 토큰이 만료되면 토큰을 새로 고칩니다

.

인증 코드를 가져오기 위한 지침을 따르고 요청할 적절한 URI를 구성합니다.

확장 기능의 background.js에서 이 모든 논리를 처리할 것입니다.

여기에서는 요청 URL에 대한 모든 매개변수를 보유할 변수를 생성합니다.

우리는 이 모든 것을 하나의 긴 URL 문자열(oauth2_url)로 통합합니다.

...
const CLIENT_ID = encodeURIComponent('<client_id from spotify console'),
RESPONSE_TYPE = encodeURIComponent('code'),
REDIRECT_URI = encodeURIComponent(chrome.identity.getRedirectURL()),
CODE_CHALLENDGE_METHOD = encodeURIComponent('S256'),
SCOPE = encodeURIComponent('user-modify-playback-state user-read-playback-state'),
SHOW_DIALOG = encodeURIComponent('true');
...

CODE_VERIFIER = rand_string().repeat('5');
const code_challenge = base64urlencode(await sha256(CODE_VERIFIER));
STATE = encodeURIComponent('meet' + rand_string());

const oauth2_url =
    `https://accounts.spotify.com/authorize
?client_id=${CLIENT_ID}
&response_type=${RESPONSE_TYPE}
&redirect_uri=${REDIRECT_URI}
&code_challenge_method=${CODE_CHALLENDGE_METHOD}
&code_challenge=${code_challenge}
&state=${STATE}
&scope=${SCOPE}
&show_dialog=${SHOW_DIALOG}`;
...

액세스 토큰에 대한 인증 코드를 거래합시다.

적절한 URL에 대한 Fetch 호출을 사용하여 인증 코드를 전달하기만 하면 됩니다.

return fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `client_id=${CLIENT_ID}&grant_type=authorization_code&code=${code}&redirect_uri=${chrome.identity.getRedirectURL()}&code_verifier=${CODE_VERIFIER}`
})
...

토큰이 만료되면 새로 고침 토큰을 사용하여 다른 토큰을 요청합니다.

액세스 토큰을 받으면 새로 고침 토큰도 받습니다.

새로 고침 토큰을 사용하여 새 액세스 토큰을 요청할 수 있습니다.

return fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `client_id=${CLIENT_ID}&grant_type=refresh_token&refresh_token=${REFRESH_TOKEN}`
})

이제 Spotify의 API에 액세스할 수 있으므로 사용을 시작할 수 있습니다.

API 문서의 지침을 따르면 간단합니다.

Pause the music.

Play the music.

Next track.

Previous track.

Current track details.


다음은 API를 사용하는 방법의 예입니다.

PLAY API를 사용하여 음악 트랙을 시작하는 기능입니다.

가져오기 요청의 헤더에서 액세스 토큰을 보내는 방법에 주목하십시오.

function play () {
    return fetch(`https://api.spotify.com/v1/me/player/play`, {
        method: 'PUT',
        headers: {
            'Authorization': `Bearer ${ACCESS_TOKEN}`
        }
    })
        .then(res => {
            if (res.status === 204) {
                return 'success';
            } else {
                throw new Error('fail');
            }
        });
}

이 자습서의 나머지 부분에서는 서로 다른 API 호출을 처리하는 별도의 함수를 코딩하는 것과 관련됩니다.

그 방법을 보려면 아래 비디오 자습서를 참조하십시오.

다음 단계에서 우리는 이 전체 프로젝트를 통합할 것입니다.

우리는 프런트엔드와 백엔드를 병합할 것입니다.

이 단계here에 대한 소스 파일을 찾을 수 있습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

사이버펑크 2077에서 영감을 받은 Spotify 컨트롤러 구축 - 5단계