Прежде чем вы, ребята, вам нужно создать простое приложение Spotify, чтобы получить client_id на портале разработчиков Spotify. Если у вас уже есть учетная запись Spotify, не беспокойтесь. Если у вас нет учетной записи, вы должны зарегистрироваться. Хорошо, мы откроем приборную панель. После этого мы нажмем область Новое приложение. Это простые шаги. После создания приложения вы увидите свой очень-очень скрытый идентификатор клиента. Сохрани это. Мы выполнили первый шаг.

Прежде чем мы начнем программировать, вы должны проверить мой репозиторий Spotify на Github.

Создать простой класс

Мы будем работать над классами JavaScript. Я создам класс с именем Spotify.

class Spotify {
  //
}

Мы почти завершили наш проект :). Так или иначе. Я собираюсь создать метод конструктора для легкой инициализации и некоторых свойств.

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');
    }
}

Мы будем использовать это свойство в будущем. Нам нужен client_id и действительный адрес обратного вызова, который вы указали на портале разработчика. Например, наши коды будут такими:

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 = `access_token=${localStorage.getItem('access_token')}`;
                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!