Spotify를 통합하는 방법 Mendix: 2부 | Mendix

메인 컨텐츠로 가기

Spotify를 통합하는 방법 Mendix: 2 부

In 이 시리즈의 제 1 부, 클라이언트 자격 증명 인증에 대해 다루었고, Spotify의 검색 API를 사용하여 Spotify의 콘텐츠 라이브러리를 검색하는 방법을 다루었습니다.

이 시리즈의 두 번째 부분에서는 사용자가 프로필 데이터를 읽고 변경하고 사용자 기기에서 음악을 재생할 수 있도록 하는 승인 코드를 얻기 위해 승인 코드 흐름을 사용하는 방법에 대해 설명합니다.

인증 코드 흐름으로 인증

이 방법은 사용자를 Spotify로 보내 앱에 Spotify 데이터에 대한 액세스 권한을 부여하는 방식으로 작동합니다. 이는 Spotify에 Scopes라고 알려진 권한 목록을 제공하여 수행되며, 이는 앱에 필요한 액세스 권한을 정의합니다.

전체 가이드를 보려면 방문하세요. Spotify의 문서 페이지.

가능한 한 간단하게 요약하자면, Spotify로 리디렉션하는 특수 리디렉션 URL을 만들어야 합니다. 거기서 사용자는 자신의 계정에 대한 액세스를 승인할 수 있고, Spotify는 사용자를 앱으로 다시 리디렉션합니다. 여기서 URL에서 특수 코드를 추출할 수 있습니다. 딥링크 모듈.

제가 만든 URL은 다음과 같습니다.

https://accounts.spotify.com/authorize?response_type=code&client_id='+$ClientID+'&scope='+$scope+'&redirect_uri=https://localhost:8080/link/spotifyauthentication&state='+$state+'&show_dialog='+toString(@MyFirstModule.ShowDialog
$ClientID = 클라이언트ID
$State = 나중에 데이터를 검색하는 데 사용되는 임의의 4자리 정수
$ShowDialog = true 또는 false (true이면 사용자가 리디렉션될 때마다 승인 대화 상자가 표시되고 false이면 자동으로 승인됨)
$Scope = 공백으로 구분된 URL 인코딩 범위 목록
(‘urlEncode('user-modify-playback-state user-read-playback-state user-read-private user-read-email user-read-currently-playing')

각 API 요청에 필요한 범위는 해당 엔드포인트에 대한 설명서에 표시됩니다. 범위에 대해 자세히 알아보려면 다음을 참조하세요. Spotify 가이드 주제에.

나노플로에서 Open URL 작업을 사용하여 사용자를 리디렉션했습니다.

nanoflow에서 URL 열기 작업

사용자가 승인하면 Spotify는 특수 리디렉션 URL을 통해 사용자를 다시 앱으로 리디렉션합니다. 내 앱에서는 URL을 여러 조각으로 나누고 마이크로플로우의 매개변수를 기반으로 사용자의 고유한 권한 부여 코드를 추출하는 딥 링크 설정이 있습니다.

Spotify 인증

그런 다음 앱은 해당 코드를 가져와 동일한 마이크로플로에서 개인 토큰으로 교환합니다. 이 마이크로플로는 딥 링크를 처리합니다. 해당 개인 토큰은 Spotify에 연결된 기기에서 음악을 재생하고 재생 목록을 수정하는 등 해당 사용자를 대신하여 API 호출을 하는 데 사용할 수 있습니다.

Location: https://accounts.spotify.com/api/token
HTTP Method: POST
Header: Content-Type 'application/x-www-form-urlencoded'

Body:
grant_type=authorization_code&code=XXX_Your_Auth_Code_XXX&redirect_uri=XXX_YourAppURL_XXX&client_id=XXX_YourClientID_XXX&client_secret=XXX_YourClientSecret_XXX

Response:
{
"access_token": "XXX_USER_ACCESS_TOKEN_XXX",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "XXX_REFRESH_TOKEN_XXX",
"scope": "user-modify-playback-state user-read-email user-read-private"
}

나중에 사용할 수 있도록 토큰을 저장해 두세요.

개인 토큰을 사용하여 음악 재생

사용자를 위한 개인 토큰이 있으면, 그들에게 요청을 하는 것은 아주 간단합니다. Spotify에 연결된 모든 기기에서 음악을 재생하려면 간단히 요청을하다 음악 재생 종료 지점으로 이동합니다.

재생하려면 사용자 토큰과 컨텍스트 URI를 제공해야 합니다(컨텍스트 URI는 하나 이상의 트랙, 앨범 또는 아티스트에 대한 것일 수 있음).

이 시리즈의 1부에서 설명한 검색 API를 사용하여 이를 얻고 아래와 같이 URI를 Play Request API에 전달하면 됩니다.

Location: https://api.spotify.com/v1/me/player/play
HTTP Method: PUT
HTTP Header: Authorization 'Bearer '+$PersnalSpotifyToken/Access_token
HTTP Header: Content-Type 'application/json'

Body:
'{
"context_uri": "'+$ArtistAlbum/Uri+'",

//anything below here is optional, only context_uri is required
"offset": {
"position": '+$Tracks/Track_number+'
},
"position_ms": 0
}'

또한, 음악을 재생할 기기를 지정하려면 기기 ID의 URL에 옵션 쿼리 문자열을 전달할 수 있습니다.

장치 목록 가져오기

사용자의 장치 목록을 가져오는 것은 다음과 같습니다. 간단한 GET 요청다음과 같이

Location: https://api.spotify.com/v1/me/player/play
HTTP Method: PUT
HTTP Header: Authorization 'Bearer '+$PersnalSpotifyToken/Access_token
HTTP Header: Content-Type 'application/json'

응답의 경우 가져오기 매핑을 적용하고 다음 JSON 구조를 사용합니다.

{
"devices": [
{
"id": "string",
"is_active": false,
"is_private_session": false,
"is_restricted": false,
"name": "Kitchen speaker",
"type": "computer",
"volume_percent": 59,
"supports_volume": false
}
]
}

다음에 재생할 장치 목록을 저장합니다.

장치 간 재생 전송

재생을 전송하려면 간단히 요청하세요. 재생 전송 엔드포인트에 이전 요청에서 얻은 장치 ID를 제공합니다.

Location: https://api.spotify.com/v1/me/player/play
HTTP Method: PUT
HTTP Header: Authorization 'Bearer '+$PersnalSpotifyToken/Access_token
HTTP Header: Content-Type 'application/json'

Body:
'{
"device_ids": [
"XXX_Your_Device_ID_XXX"
]
}'

최종 생성물

최종 제품 공개

마지막으로, 사용자가 현재 재생 중인 트랙과 기기 목록에 대한 모든 데이터를 보고 음악이나 트랙을 검색할 수 있는 간단한 UI를 만들었습니다. 코드를 다운로드할 수 있습니다. 여기 Github에서.

이 2부작 시리즈를 재미있게 읽으셨기를 바랍니다. Spotify에는 더 많은 엔드포인트와 탐색할 수 있는 기능이 있는 광범위한 API가 있습니다. 즐거운 창작 되세요!

언어를 선택하세요