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

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.

class Spotify {
  //
}

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

class Spotify {
    constructor({client_id, callback_address}) {
        this.client_id = client_id;
        this.callback_address = callback_address;
        this.generate_url = '';
        this.checkToken();
        this.access_token = localStorage.getItem('access_token');
    }
}

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:

const config = {
    client_id: 'OUR_CLIENT_ID',
    callback_address: window.location.href
}

const spotify = new Spotify(config);

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

class Spotify {
    constructor({client_id, callback_address}) {
        this.client_id = client_id;
        this.callback_address = callback_address;
        this.generate_url = '';
        this.checkToken();
        this.access_token = localStorage.getItem('access_token');
    }

    login(el, callback) {
        let btn = document.querySelector(el);

        let width = 450;
        let height = 730;
        let left = (screen.width / 2) - (width / 2);
        let top = (screen.height / 2) - (height / 2);

        btn.addEventListener("click", () => {

            window.open(this.generateUrl(), 'Spotify', 'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
            
        });
        
        if(callback) {
            let data = {
                btn: btn,
                url: this.generateUrl()
            }
            callback(data);
        }
        
    }

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

spotify.login('.btn');

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:

spotify.login('.btn', (data) => {
    data.btn.style.display = 'none';

    console.log(data.url)
});

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:

checkToken() {
        window.addEventListener('DOMContentLoaded', () => {
            if(window.location.hash) {
                let hash = window.location.hash;
                let access_token = hash.split('#access_token=')[1].split('&')[0];
                localStorage.setItem('access_token', access_token);
                
                window.location.hash = <code>{{EJS0}}</code>;
                window.close();
            }
        })
    }

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!