Getting started with Spotify’s Web API (Part 1)

Recently, I was looking for a fun API to play around with and decided to check out the Spotify API. Spotify have provided a handy quick start guide to help developers get up-and-running with the Web API. They recommend that you use Node.js, so be sure to install it either from Nodejs.org or via Homebrew if you don’t already have it installed, and confirm that it is working correctly before you begin.

Getting started is easy — head to the Spotify for Developers site and register your app, making note of your Client ID and your App Secret. If you do not already have a Spotify account, you will need to create one.

One thing to note is that you will need to add a redirect URI. Spotify uses this link to redirect the user back to your application after they are authorised. In ‘Edit Settings’ under ‘Redirect URIs’ add ‘http://localhost:8888/callback’.

There are three ways to authorise your app with Spotify — Authorisation Code (refreshable user authorisation), Implicit Grant (temporary user authorisation), and Client Credentials Flow (refreshable app authorisation). The easiest way to get a feel for these different flows is to clone down Spotify’s Web Auth API examples and running each of them on your local server. Today I’ll be working with the Authorisation Code flow.

There are only two files on this flow — an index.html file in the ‘public’ folder and an app.js file.

A look through these files reveals that the index.html deals with the login page and with rendering user information on the page. It also contains embedded Javascript, including jQuery ajax API calls, and event listeners and logic relating to obtaining and saving an access token.

The app.js file is relatively long. The guide tells us that it contains code for:

• Creating a server on your local machine
• Handling the user login request
• Specifying the scopes for which authorization is sought
• Performing the exchange of the authorization code for an access token
• Calling the Web API endpoint

On lines 16–18 there are variable declarations for client_id, client_secret and redirect_uri. You will need to replace these variable values with your own credentials. If you haven’t made note of these, you will have to go back to your Spotify for Developers dashboard to grab this information.

var client_id = 'CLIENT_ID'; // Your client id
var client_secret = 'CLIENT_SECRET'; // Your secret
var redirect_uri = 'REDIRECT_URI'; // Your redirect uri

On line 49, there’s the ‘scope’ variable declaration. This tells Spotify which permission we want the user to grant to our application. An explanation of the different scopes available can be found here.

var scope = 'user-read-private user-read-email';

By default, we’re asking for user-read-private , which provides access to a user’s private playlists, and user-read-email which allows read access to a user’s email address.

Now we can have a look at the authorisation process in the browser. Run your app by typing ‘node app.js’. This will start the local server.

node app.js
Listening on 8888

You can then navigate to your localhost, which will default to port 8888.

You should see the following:

If you’re having trouble, check that you haven’t already got something running on that port.

Click the blue button. If you are logged in to Spotify, you’ll see something similar to the below screen. If not, you’ll be prompted to login and then redirected to this screen.

After providing authorisation, you’ll see something like this:

(without the black bars)

Success! The authorisation flow is working and you should be able to see your personal user information. We can now start to have some fun with the various API endpoints.

I want to have a look at my top playlists and render them in the browser, so today I’m interested in the Get A List Of The Current User’s Playlists endpoint. The documentation here is very helpful, and tells me that this endpoint requires the ‘playlist-read-private’ scope, so I’ve added that to my scope variable:

var scope = 'user-read-private user-read-email playlist-read-private';

I’ll also need the API endpoint which is https://api.spotify.com/v1/me/playlists.

I’m using Javascript to query the API, and there is actually already a wrapper which includes helper functions for the API created by JMPerez. So I’ve decided to make use of the wrapper.

The platform provides a huge amount of functionality and a wealth of data for non-commercial use through their API, including audio-analysis of tracks and customisable recommendations.

I add a new button called ‘Get Top Playlists’ to the index page, which sits next to the ‘generate new access token’ button. I need to add an event listener to this button, which triggers an API call when clicked.

document.getElementById('spotify-button').addEventListener('click', function() {
$.ajax({
url: 'https://api.spotify.com/v1/me/playlists',
headers: {
'Authorization': 'Bearer ' + access_token
}

I threw a console log in to have a look at the response object in the console after it is returned.

We can see that the response object includes a property called ‘items’, which contains an array of 20 playlist objects.

Now I have an idea of the structure of the response object, I can write code to render my top playlists on the page and chain it onto my API call.

Part 2 to follow!