Spotify for Developers – Web Scripting

Many think of Spotify as simply an app. It is better to think of Spotify as an internet content provider. They allow users to search and download the digital content on their servers, and create user profiles and playlists.

Like many internet service providers, they care less about which app you use to interface with their service, and care more about growing a user base which uses their service. To that end, they provide various libraries and APIs that allow independent IOS, Android, and Web applications to access their servers. Developer documentation for these resources can be found at https://developer.spotify.com.

The Spotify Web API

The Spotify Web API allows web site developers to push and pull data from the Spotify servers. This includes:

Information about artists, albums and tracks
User profile information and playlists
Music that users have saved in their Spotify music library

Registering Your Web App

In order to use the Web API we must first register our app with Spotify by navigating to the Spotify Dashboard and pressing CREATE A CLIENT ID. When registering an app, you will agree to Spotify’s terms of service, indicate the type of app you are creating (choose Website), and specify whether or not the app will be used for commercial purposes (choose Non-commercial).

After you have registered your app, you’ll notice a green box on the dashboard that includes a client id. We’ll use this id when sending authentication requests to the server.

When a user navigates to your Spotify web app, your app will redirect the browser to a Spotify authentication web page. The Spotify page will ask the user to log in. After the user logs in, Spotify will redirect the browser back to your site. To ensure that no one mischievous is using your client id, Spotify requires us to register the URL of our web app.

To register your web app’s URL, navigate back to the dashboard and click on your app’s green box. Then press EDIT SETTINGS. Scroll down to Redirect URI and add the URL for your web app.

Now that we’ve registered our app, it’s time to code.

Receiving User Authorization

Per the Spotify Authorization Guide, “calls to the Spotify Web API require authorization by your application user.” In this tutorial we are assuming you are creating a client-side application solely with JavaScript. In this case, we will use the Implicit Grant Flow to get the user’s authorization.

The Implicit Grant Flow requires you to send information about about your app and information about the permissions you are requesting from the user to https://accounts.spotify.com/authorize. You’ll do this by redirecting the browser. When the browser is redirect to the Spotify site, Spotify will display a user login screen and ask the user to grant your app the permissions you requested. If the user agrees, then Spotify will redirect the browser’s window back to your domain, specifically to the Redirect URI you specify. When the browser’s window is redirected back to your app, the URL will include an access token (and other information) in the fragment part of the URL. You will use the access token when requesting information from Spotify.

Redirecting to https://accounts.spotify.com/authorize

In order to receive authorization from the user, Spotify needs some information. Specifically, Spotify needs to know:

your client id
the URL that Spotify should redirect the browser back to if the user agrees to grant your app the permission your request
the types of permissions (also called scope)
a response type

This data is appended to https://accounts.spotify.com/authorize as a query string. In the example below we compose a query string and append it to the Spotify URL.

let host = "https://accounts.spotify.com/authorize";
let client_id = "abcdefghijklmnopqrstuvwxyz1234567890";
let redirect_uri = "http://n0code.net/work/teaching/courses/csci240/demo/spotify-elvis.html";
let scope = "user-read-private user-read-email";
let response_type = "token";

let new_loc = host +
  "?client_id=" + encodeURIComponent(client_id) +
  "&redirect_uri=" + encodeURIComponent(redirect_uri) +
  "&scope=" + encodeURIComponent(scope) +
  "&response_type=" + response_type;

Notice that when we concatenate the strings we call encodeURIComponent(). This replaces certain special characters in the string with escape sequences.

After we have a complete Spotify URL we can redirect the browser to the Spotify site using window.location.

window.location = new_loc;

When Spotify receives your request, the browser will display a Spotify login screen and permission request. If the user grants your app the permissions you requested, Spotify will redirect the browser to the URL you specified in the redirect_url string.

Getting the Access Token

When Spotify redirects the browser back to your site, it will include in the URL an access token and other information. That information will be included in the fragment part of the URL. You can get the fragment (a.k.a. hash) part from window.location.hash.

The hash contains the access token (and other information) as attribute-value pairs so you’ll need to parse the hash to get the access token. The code below separates the attribute-value pairs from the has and puts them in an object named params.

var hash = window.location.hash.substring(1);
var params = {};
hash.split('&').map(pair => {
  let temp = pair.split('=');
  params[temp[0]] = temp[1]
});

Your access token can now be accessed from params.access_token.