Итак, вам нужны данные из Spotify, будь то данные от конкретного пользователя или плейлист, предоставленный Spotify. Прежде чем вы сможете сделать что-либо из этого, вам нужно перейти на https://developer.spotify.com/ и зарегистрироваться как пользователь / ваше приложение.

В нашем случае у нас просто будет ссылка на данный процесс аутентификации Spotify, который будет просто перенаправлять обратно на любую ссылку, которую вы дадите. Этот вариант в настройках будет выглядеть так:

URI перенаправления, который вы хотите добавить, будет тем URI, к которому вы хотите перейти после того, как пользователь вошел в систему. В этом случае это то место, где находится интерфейс, но после развертывания это будет любой выбранный вами домен.

Оттуда вы должны увидеть идентификатор клиента и возможность показать секрет вашего клиента. Просто запомните, где они находятся, пока они вам понадобятся позже.

Теперь, вернувшись в наше приложение, мы можем добавить кнопку / ссылку, которая приведет нас к конечной точке Spotify. Для нас это будет просто https://accounts.spotify.com/authorize. Я поместил эту ссылку в файл с именем spotify.js в моем проекте.

Следующее, что нам понадобится, это список объемов.

Это в основном сообщает нашему приложению, что пользователь может делать через Spotify API. Поэтому, если мы не включим функцию удаления, пользователь не сможет ничего удалить. Вот список доступных объемов.

Теперь, со всеми нашими частями, мы можем создать URL-адрес, на который мы хотим отправлять пользователя, когда он нажимает кнопку входа в систему.

or

Он начинается с authEndpoint и добавляет всю необходимую информацию после вопросительного знака, причем все, что находится после амперсанда, является еще одной новой частью.

Хорошо, теперь, если мы добавим это в тег ‹a›,

Если мы нажмем на этот тег ‹a›, который я стилизовал под кнопку, он перенесет нас на страницу входа, которая выглядела так:

или, если вы уже вошли в систему с другой вкладки:

Хорошо, отлично, когда кто-то входит в систему, что именно он делает?

Когда мы вернемся к нашему перенаправленному URL-адресу, мы должны увидеть длинную строку с нашим accessToken в ней как «accessToken = whateveryouraccesstokenis».

Чтобы извлечь данные из возвращаемого URL, мы можем использовать эту функцию:

Возвращаемое значение этой функции будет объектом, заполненным данными, извлеченными из URL-адреса, который они вернули нам после того, как мы вошли в систему.

Чтобы на самом деле использовать данные объекта для получения информации из Spotify, сначала нам нужно:

npm install spotify-web-api-js

Это обертка Spotify для React. Это позволяет нам легко взаимодействовать с данными Spotify при наличии правильного токена.

Итак, чтобы на самом деле показать, что мы можем получить что-то от Spotify, используя информацию пользователя, мы можем поместить журналы консоли в ловушку useEffect:

В консоли нашего браузера после входа в систему мы видим:

И просто чтобы проверить, действительно ли вы вошли в систему, вы можете проверить свойство изображений и увидеть, действительно ли это изображение вашего профиля было отправлено обратно.

В пакет spotify-web-api-js включены и другие вещи, которые помогут сделать взаимодействие со Spotify более плавным.

Больше контента на plainenglish.io