Comment intégrer Spotify dans Mendix: Partie 2 | Mendix

Passer au contenu principal

Comment intégrer Spotify dans Mendix: Partie 2

In la première partie de cette série, nous avons abordé l'authentification des informations d'identification du client et la manière de rechercher dans la bibliothèque de contenu de Spotify à l'aide de leur API de recherche.

Dans la deuxième partie de cette série, nous parlons de l'utilisation de leur flux de code d'autorisation pour obtenir un code d'autorisation permettant à l'utilisateur de lire et de modifier les données de son profil, y compris la lecture de musique sur les appareils de l'utilisateur.

Authentifiez-vous avec le flux de code d'autorisation

Cette méthode consiste à envoyer l'utilisateur à Spotify pour autoriser votre application à accéder à ses données Spotify. Pour ce faire, Spotify reçoit une liste d'autorisations appelées Scopes, qui définissent l'accès requis par votre application.

Pour un guide complet, visitez Page de documentation de Spotify.

Pour résumer cela aussi simplement que possible, vous devez créer une URL de redirection spéciale qui redirige vers Spotify. Là, l'utilisateur peut approuver l'accès à son compte, et Spotify redirigera l'utilisateur vers votre application, où vous pourrez extraire un code spécial de l'URL à l'aide de l' Module de liens profonds.

Voici l'URL que j'ai créée pour cela :

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 client
$State = Tout entier aléatoire à 4 chiffres, utilisé pour récupérer des données ultérieurement
$ShowDialog = vrai ou faux (si vrai, une boîte de dialogue s'affiche pour que l'utilisateur approuve à chaque fois qu'il est redirigé, si faux, l'approbation est automatique)
$Scope = une liste de portées codées par URL, séparées par des espaces
(‘urlEncode('user-modify-playback-state user-read-playback-state user-read-private user-read-email user-read-currently-playing')

Les portées nécessaires pour chaque demande d'API sont affichées dans la documentation de ce point de terminaison. Pour en savoir plus sur les portées, reportez-vous à Guide de Spotify sur le sujet.

Dans un nanoflow, j'ai utilisé l'action Ouvrir l'URL pour rediriger l'utilisateur :

Action Ouvrir l'URL dans nanoflow

Une fois l'approbation obtenue, Spotify redirige l'utilisateur vers votre application via une URL de redirection spéciale. Dans mon application, j'ai configuré un lien profond, qui décompose l'URL en plusieurs parties et en extrait le code d'autorisation unique de l'utilisateur en fonction des paramètres du microflux.

Authentification Spotify

L'application récupère ensuite ce code et l'échange contre un jeton personnel dans le même microflux, qui gère le lien profond. Ce jeton personnel peut être utilisé pour effectuer des appels API au nom de cet utilisateur, par exemple pour écouter de la musique sur ses appareils connectés à Spotify et modifier des listes de lecture.

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

Assurez-vous de conserver le jeton pour une utilisation ultérieure.

Utiliser le jeton personnel pour écouter de la musique

Une fois que vous avez un jeton personnel pour l'utilisateur, il est assez simple de lui faire des demandes. Pour écouter de la musique sur n'importe quel appareil connecté à Spotify, il suffit faire une demande jusqu'au point de terminaison de la lecture de musique.

Nous devons fournir le jeton utilisateur et un URI de contexte pour jouer (un URI de contexte peut être pour une ou plusieurs pistes, un album ou un artiste).

Vous pouvez les obtenir en utilisant l'API de recherche décrite dans la première partie de cette série et en transmettant l'URI à l'API de demande de lecture comme indiqué ci-dessous :

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

De plus, si vous souhaitez spécifier sur quel appareil vous souhaitez écouter de la musique, vous pouvez transmettre une chaîne de requête d'option dans l'URL pour l'ID de l'appareil.

Obtenir la liste des appareils

Pour obtenir la liste des appareils de l'utilisateur, il faut requête GET simple, comme montré ici:

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'

Pour la réponse, choisissez d'appliquer un mappage d'importation et d'utiliser la structure JSON suivante :

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

Enregistrez la liste des appareils pour transférer la lecture suivante.

Transférer la lecture entre les appareils

Pour transférer la lecture, il suffit de faire une demande au Transférer la lecture point de terminaison et lui fournir l'ID de périphérique obtenu dans la demande précédente.

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

Le produit final

La révélation du produit final

Enfin, j'ai créé une interface utilisateur simple pour que l'utilisateur puisse voir toutes les données de sa piste en cours de lecture et de sa liste d'appareils, ainsi que rechercher de la musique ou des pistes. Vous pouvez télécharger le code de Github ici.

J'espère que vous avez apprécié la lecture de cette série en deux parties. Spotify dispose d'une API complète avec de nombreux autres points de terminaison et fonctionnalités à explorer. Bonne création !

Choisissez votre langue