Spotify Authentication with JavaScript

Hi guys. In this post I will show how to use Spotify API with JavaScript. So this post will be about Spotify Authentication with JavaScript. In last post I wrote about Parcel.

Spotify Authentication with JavaScript


Spotify Authentication with JavaScript

Before you guys, you have to create a simple spotify app to get client_id on Spotify Developer portal. If you have already a Spotify account don’t worry. If you dont have an account, you have to register. Okay we’re gonna open dashboard.  After that we’re gonna click New App area. These are simple steps. After create app, you’ll see your very very hidden client id. Save it. We completed first step.

Before we star coding, you should check my Spotify repository on Github.

Create Simple Class

We’ll work on JavaScript classes. I’ll create a class that name called Spotify.

We almost completed our project :). Anyway. I’m gonna create constructor method to easy initialize and some properties.

We’ll use this properties in future. We need client_id and valid callback address that you declared on developer portal. For example our codes will be like this:

It looks so pretty. After that I’m gonna write most important method. It name will be login.

There are two ways to use login method. First and simpliest way:

You just passed html element’s class as an argument. If you wonder about what is the authentication url or if you want to hide login button you should use callback function. For example:

We used pop-up screen in this method. Because we don’t want to leave current page. Did you see this.checkToken(); statement? We’ll use this statement to close pop-up and we’ll save access token to localStorage. Okey let’s we write our checkToken method:

We done! This is very very simple tutorial. You can develop your own library. As I said you can check my repository. There are many methods in my repository. If you wonder about how to use this access tokent you can check my repository.

If you have a question please, leave a comment

Thanks for reading!