AspNet MVC with Spotify

In the last week, I had to create a project to consume the Spotify API. I googled/binged how to do it with AspNet MVC, but found just a few resources for .net, even more using MVC. So I here to share how I consumed from Spotify API with AspNet MVC.

To consume the Spotify API, the first thing we got to do is to create a Spotify Application. Access https://developer.spotify.com/ to do it.

Provide an Application Name and Description:

After create the application, Spotify will provide us a clientid, and will ask us a Redirect URI.

The Redirect URI is the address that Spotify will send us the token to authenticate each call to the API.

At first, let’s leave it blank. We will return later.

OK, let’s begin with the authentication part. If you’re going to consume tracks, playlists or user profile you will need to be authenticated, but we have first to choose the authentication methods we will use. Spotify gives us three ways to authenticate.

For this project, we will use “Implicit Grant Flow”.

If you want to know more, you can see on this link: https://developer.spotify.com/web-api/authorization-guide/

Great, now let’s begin to code!


In the code!

Create an empty MVC project and create a controller “Home” with an Index Action and View

Let’s run our app to see if it works.

Excellent, now for authentication we will create a login button that will be a link to our project authenticate with Spotify. In the href attribute we will get a Viewbag property called AuthUri.

In our controller let’s set out Viewbag property.

Explaining the variables above:

  • The “clientId” value is the clientid of your project.
  • “redirectUri” is the redirect Uri we will set in our Spotify Application.
  • Scope is what our project will ask permission to access your Spotify account.

But as you can see, the scope object doesn’t exist, let’s create it. (The complete code you can get at my Github)

Great, now we have our login link set up. After hit the link, Spotify will automatically ask us if we want to let our app consume from our account.

If you say yes Spotify will redirect us to another page, which will be? The uri we define in our Redirect URI.

Let’s do it. Let’s get the URI our iis is upping our app, and let’s create a new action to handle the redirect from Spotify.

After we confirm our app can consume from our Spotify account, Spotify will redirect to this Redirect URI with the token id we need.

But there’s a gotcha there.

Spotify gives us the token as a parameter, and not a query string. Unfortnetly, server side doesn’t get URL values after the anchor tag.

To get values after anchor tag, the easiest way is to put some “olive oil*” in our code with this JavaScript below

With this script we replace our anchor with a question mark, transforming our parameter in a query string.

Now we just add these as parameters in our action, and voila.

There are our token and other values.

After this, we can make a call to get our playlists names.

I’ll show this in the next post…

Why Olive Oil*?

In Brazil put Olive Oil in the code is a slang, wich means, introduce bad code in the app

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.