Curious about the possibility of displaying Spotify playlists on my website, I investigated the Spotify Web API. Initially, I thought everything seemed quite easy, but then I got to the authentication and authorization section. As it turned out, it is not that simple but after trial and error, I got what I wanted. Here’s what I did.
The result can be found here. Here’s what it looks like:
In order to get this result, we need to call two different endpoints in the Web API:
- Endpoint 1: a list of playlists for a certain user
- Endpoint 2: the details of a playlist
There are two placeholders in this URL that need to be replaced by the user ID you want to query and the playlist ID you want to see. You cannot just navigate to the Web API Uri in your web browser: you will get a 401 error message. To authenticate, you need to pass additional information in the request header. This is where it becomes tricky. As the Spotify Web API’s documentation states, there are a couple of authorization flows to access private user data. In this case for the playlists, the Client Credentials flow is sufficient. The code samples below will use this approach. First of all, you need to have your own Spotify App. This app will generate a client ID and secret for you. You will need this in a minute. The following code will retrieve an access token for your application.
Two clarifications need to be made:
- The encoded ClientId:Secret
- The SpotifyToken class
Take the Client Id and Client secret of your application, we need to encode this first – this site will help you out. Paste the client id and secret in the following format: ClientId:ClientSecret. Copy the encoded result and replace this by the text marked in blue.
Now you have enough information to do the actual web request. This siteis a good tool to do web requests. Let’s take the first Web API endpoint, don’t forget to add a request header with the value you just generated. Do the request and you will retrieve JSON data if all went well. Although not strictly necessary, I thought it was interesting to generate classes of the JSON data. There are a few good free toolsavailable that generate C# classes out of JSON data.Then we can use these set of classes to deserialize the retrieved JSON data from the Web API in the C# code. For this endpoint, the class structure is fairly easy:
Once the serialization is done, we can get the access token. Once we have this token, we can retrieve information from my Spotify user data. Continue reading in the second part of this series.
Where does each section of code go for the MVC project??? Please give me direction for the sections of code and which folder it goes in. :/
It depends on the way you implemented your MVC solution. What I would recommend is to create two additional class libraries, one for the models (no business logic, only domain objects such as the SpotifyToken class) and one for the core business logic (everything I have covered here but the UI). Reference those two projects in your MVC project and then call the entry method from one of your controllers where you want to see your playlists.
Does that work for you?