🎧 Spotify API

Voor week 2 heb ik gewerkt met de Spotify api en React. Ik heb gekozen om dit met React te doen omdat ik hier graag meer over wil leren aangezien dit steeds vaker word gebruikt, ook gebruiken ze React vaak bij het bedrijf waar ik werk en ik wil hierom ook graag meer kennis hierover op doen om aan leukere projecten te kunnen werken in de toekomst.
Een voorbeeld van een data fetch met de Spotify web sdk is als volgt:

   const getCurrentPlayingTrack = async (token) => {
    let response = await fetch("https://api.spotify.com/v1/me/player", {
      method: "get",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
        Authorization: "Bearer " + token,
      },
    });
    if (response.ok) return response.json();
    else return null;
  }

Dit stukje code returned het liedje dat op dat moment word afgespeeld op de user zijn Spotify. Een verwachte output zou als volgt kunnen zijn:

actions: {disallows: {…}}
context: null
currently_playing_type: "track"
device: {id: '762ad308878c6de05333f9da6f37664ceae754bc', is_active: true, is_private_session: false, is_restricted: false, name: 'MacBook Air van Davey', …}
is_playing: true
item: {album: {…}, artists: Array(1), available_markets: Array(0), disc_number: 2, duration_ms: 314893, …}
progress_ms: 300684
repeat_state: "off"
shuffle_state: false
timestamp: 1636016074822

Authentication

Om de Spotify API te kunnen gebruiken en data op te kunnen vragen heb je een bearer token nodig, om deze te krijgen moet een gebruiker inloggen. Ik heb dit op een simpele manier opgelost en React hiervoor gebruikt om state changing te zien. Wanneer een gebruiker inlogt op de applicatie word hij teruggestuurd naar dezelfde url maar dit keer met parameters, vervolgens heb ik een functie gemaakt die deze parameters uit elkaar haalt zodat deze bruikbaar zijn. Voor nu gebruik ik alleen de access_token en doe ik niks met de expire time om een refresh token op te halen simpelweg omdat ik hier geen tijd meer voor had.

Spotify developer dashboard

Om Spotify api calls te kunnen maken moet je de applicatie registreren bij Spotify. Dit is erg makkelijk, je maakt een project aan en vervolgens krijg je credentails zoals een clienId van Spotify. Deze credentials moet je in je code verwerken om calls te maken. Verder is het enige wat je nog moet doen is een redirect toevoegen aan het developer dashboard zodat spotify weet waar hij de gebruiker heen moet sturen als de authenticatie goed is.