Spotifyを統合する方法 Mendix: パート2 | Mendix

メインコンテンツへスキップ

Spotifyを統合する方法 Mendix: パート2

In このシリーズのパートXNUMXでは、クライアント資格情報の認証と、Spotify の検索 API を使用して Spotify のコンテンツ ライブラリを検索する方法について説明しました。

このシリーズのパート 2 では、認証コード フローを使用して、ユーザーがプロファイル データの読み取りや変更 (ユーザーのデバイスでの音楽の再生など) を行えるようにするための認証コードを取得する方法について説明します。

認可コードフローで認証する

この方法は、ユーザーを Spotify に送信して、アプリに Spotify データへのアクセスを許可することで機能します。これは、アプリに必要なアクセスを定義する「スコープ」と呼ばれる権限のリストを Spotify に提供することで行われます。

詳しいガイドについては、 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 ガイド 件名に。

ナノフローでは、「URL を開く」アクションを使用してユーザーをリダイレクトしました。

ナノフローで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 つ以上のトラック、アルバム、またはアーティスト用になります)。

これらは、このシリーズのパート 1 で説明した Search 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 があります。創作を楽しんでください!

言語を選択してください