So integrieren Sie Spotify in Mendix: Teil 2 | Mendix

Direkt zum Inhalt

So integrieren Sie Spotify in Mendix: Teil 2

In Teil eins dieser Seriehaben wir die Client Credential Authentication behandelt und wie man die Inhaltsbibliothek von Spotify mithilfe der Such-API durchsucht.

Im zweiten Teil dieser Reihe sprechen wir über die Verwendung des Autorisierungscode-Flows, um einen Autorisierungscode für den Benutzer zu erhalten, mit dem dieser seine Profildaten lesen und ändern kann, einschließlich der Wiedergabe von Musik auf den Geräten des Benutzers.

Authentifizieren mit dem Autorisierungscode-Flow

Bei dieser Methode wird der Benutzer zu Spotify weitergeleitet, um Ihrer App Zugriff auf seine Spotify-Daten zu gewähren. Dies geschieht, indem Spotify eine Liste von Berechtigungen, sogenannte Scopes, bereitgestellt wird, die definieren, welchen Zugriff Ihre App benötigt.

Eine vollständige Anleitung finden Sie unter Spotifys Dokumentationsseite.

Um dies so einfach wie möglich zusammenzufassen: Sie müssen eine spezielle Weiterleitungs-URL erstellen, die zu Spotify weiterleitet. Dort kann der Benutzer den Zugriff auf sein Konto genehmigen, und Spotify leitet den Benutzer zurück zu Ihrer App, wo Sie mithilfe des folgenden Codes einen speziellen Code aus der URL extrahieren können: Deep Link Modul.

Hier ist die URL, die ich dafür erstellt habe:

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 = Client-ID
$State = Jede beliebige 4-stellige Ganzzahl, die zum späteren Abrufen von Daten verwendet wird
$ShowDialog = Wahr oder Falsch (Bei „Wahr“ wird bei jeder Weiterleitung ein Dialog zur Genehmigung durch den Benutzer angezeigt, bei „Falsch“ erfolgt eine automatische Genehmigung)
$Scope = eine Liste von URL-codierten Bereichen, getrennt durch Leerzeichen
(‘urlEncode('user-modify-playback-state user-read-playback-state user-read-private user-read-email user-read-currently-playing')

Die für jede API-Anforderung erforderlichen Bereiche werden in der Dokumentation für diesen Endpunkt angezeigt. Weitere Informationen zu Bereichen finden Sie unter Spotifys Leitfaden zu diesem Thema.

In einem Nanoflow habe ich die Aktion „URL öffnen“ verwendet, um den Benutzer umzuleiten:

URL-Aktion in Nanoflow öffnen

Nach der Genehmigung leitet Spotify den Benutzer über eine spezielle Weiterleitungs-URL erneut zu Ihrer App zurück. In meiner App habe ich ein Deep-Link-Setup, das die URL in ihre Teile zerlegt und daraus basierend auf den Parametern für den Mikrofluss den eindeutigen Autorisierungscode des Benutzers extrahiert.

Spotify-Authentifizierung

Die App nimmt dann diesen Code und tauscht ihn im selben Mikrofluss gegen ein persönliches Token aus, das den Deep Link verarbeitet. Dieses persönliche Token kann verwendet werden, um API-Aufrufe im Namen dieses Benutzers durchzuführen, z. B. um Musik auf seinen mit Spotify verbundenen Geräten abzuspielen und Wiedergabelisten zu ändern.

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"
}

Bewahren Sie das Token unbedingt zur späteren Verwendung auf.

Den persönlichen Token zum Abspielen von Musik verwenden

Sobald Sie ein persönliches Token für den Benutzer haben, ist es ganz einfach, Anfragen für ihn zu stellen. Um Musik auf einem mit Spotify verbundenen Gerät abzuspielen, müssen Sie nur eine Anfrage stellen zum Endpunkt zum Abspielen von Musik.

Wir müssen das Benutzertoken und eine Kontext-URI zur Wiedergabe angeben (eine Kontext-URI kann für einen oder mehrere Titel, ein Album oder einen Künstler stehen).

Sie können diese abrufen, indem Sie die im ersten Teil dieser Reihe beschriebene Such-API verwenden und die URI wie unten gezeigt an die Play Request-API übergeben:

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
}'

Wenn Sie zusätzlich angeben möchten, auf welchem ​​Gerät Sie Musik abspielen möchten, können Sie in der URL eine optionale Abfragezeichenfolge für die Geräte-ID übergeben.

Geräteliste abrufen

Um die Geräteliste des Benutzers zu erhalten, ist ein einfache GET-Anfrage, wie hier gezeigt:

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'

Wählen Sie für die Antwort die Anwendung einer Importzuordnung aus und verwenden Sie die folgende JSON-Struktur:

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

Speichern Sie die Geräteliste, um als Nächstes die Wiedergabe zu übertragen.

Übertragen der Wiedergabe zwischen Geräten

Um die Wiedergabe zu übertragen, senden Sie einfach eine Anfrage an die Übertragung der Wiedergabe Endpunkt und stellen Sie ihm die Geräte-ID zur Verfügung, die Sie in der vorherigen Anfrage erhalten haben.

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"
]
}'

Das Endprodukt

Die endgültige Produktvorstellung

Schließlich habe ich eine einfache Benutzeroberfläche erstellt, mit der der Benutzer alle Daten für den aktuell abgespielten Titel und die Geräteliste anzeigen sowie nach Musik oder Titeln suchen kann. Sie können den Code herunterladen von Github hier.

Ich hoffe, Ihnen hat das Lesen dieser zweiteiligen Serie gefallen. Spotify verfügt über eine umfangreiche API mit vielen weiteren Endpunkten und Funktionen, die es zu erkunden gilt. Viel Spaß beim Erstellen!

Wählen Sie Ihre Sprache