In today’s digital age, music plays an integral role in our lives. Whether you’re creating a music discovery platform, a personalized playlist generator, or simply want to add some musical flair to your Django web application, integrating the Spotify API can bring the world of music right to your fingertips.

In this post, we will embark on a journey to explore the integration of the Spotify API with your Django application.

The six quick steps to integrate and experiment with the Spotify API

We will dive into the steps, tools, and techniques required to harness the musical magic of Spotify, enhancing your web app’s functionality and user experience. So, whether you’re building a music-driven project or simply want to expand your Django app’s horizons, let’s get started on this harmonious adventure! 

Step 1: Create Your Spotify Developer Account

To integrate the Spotify API with your django app, you will need one Spotify for developers account. You can create a new one or use your existing one (you can even use your personal Spotify account to create a developer account). After creating your account, access the dashboard, and then we can create a new app:

On this screen, use your app information (name, description, and website). The most important part here is the redirect URI. This will be used to redirect your users after the login fails or succeeds, so, use one endpoint that actually works on your app. 

In this tutorial, I will use one local endpoint, connecting to a django app running on my machine, so I can test the integration without using my app servers.

Step 2: Create a New App in Your Django Project

Let’s create one app for using the Spotify API on our django project. For this, open the folder where manage.py file for your project is located and then run:

$ python manage.py startapp music

I will use the name music, so in the future we can integrate with other platforms (like Apple Music or Tidal, for example).

Step 3: Craft Your Django View

For receiving Spotify information, you will need two endpoints: one where you will request user authorization and other one where Spotify will send the response to your application. For the first one, let’s create one endpoint like this:

To get your Spotify credentials, go to your app and then Settings. The Client ID will be shown on this screen:

Note: There are a lot of different scopes you can use. To check the list, please, refer to the official Spotify documentation.

This is the endpoint that will redirect users to the authorization screen. If you want to identify your user, you can use the rest framework permission class IsAuthenticated (import from rest_framework.permissions), then use the proper user id on the state (you can use some cryptography algorithm here, to avoid showing this information in the request).

Step 4: Create the Callback Endpoint

Now, we need to create one endpoint that will be the Spotify callback (the one you configured on the dashboard). You can use this code to be the callback URI:

You can check the callback URI on your app settings on Spotify:

With those two endpoints, you can already start to receive the user codes from Spotify. Next step is to get the user access tokens, so the user can do operations like search music, artists, albums, etc).

Step 5: Request Spotify Access Token

Now that the user already accepted your request, the app is ready to exchange the authorization code for an Access Token. This can be done by making a POST request to Spotify /api/token endpoint. 

Remember, you should request the user authentication and store this on your database, so when the user requests an access token you just reach Spotify if the token is expired. This can be done using something like this:

Now we have a totally functional integration with the Spotify API. Let’s create some use cases so we can explore some of the cool things the API offers.

Step 6: Dive into the World of the Spotify API

Using the Spotify API is limited to your imagination. You can check the full Spotify API documentation to see all the things we can do. For this tutorial, we will search for one track and for one artist.

First, let’s search for one track. You can use as example the following code:

Now, you can use cURL or Postman to do a request for your endpoint and receive Spotify data as response. In this example I used this cURL request:

curl --location 'http://localhost:8010/api/spotify/search?query=bohemian%20rapsody' \
--header 'Authorization: Token my_api_token

In response, Spotify sent me this (Spotify’s response is large, so I will just show the first items here, with some suppressed fields. You can check the complete response documentation on Spotify docs):

You can see that there is a lot of information on the response, so you can show album/artist images on your application or even put an external link to Spotify player redirecting to the track you want. 

We can also modify our previous code to search for artists too. To do this, we just need to change the type_of_search parameter. Those are the allowed values for this: “album”, “artist”, “playlist”, “track”, “show”, “episode”, “audiobook”.

So, when we change it to “artist”, and we search using this cURL:

curl --location 'http://localhost:8010/api/spotify/search?query=queen' \
--header 'Authorization: Token your_token_here

We will receive some items like this from the Spotify API:

Final words

In this post, we integrated our django project to the Spotify API. With this integration we are able to deliver new functionalities to our users, like search for Spotify data or even share music if you work with social media. We also looked at how Spotify answers requests, showing very structured and complete data. For future implementations, we can expand to other music services like Apple Music or Tidal.