Spotify Web API - почему недавно созданный плейлист не заполнен выбранными песнями?

Question

В настоящее время я застрял в проекте React на Codecademy - Jamming. Он использует Spotify WEB API для создания и сохранения списка воспроизведения обратно в учетную запись пользователя.

Процесс выглядит следующим образом:

1. Введите поисковый запрос в строке поиска,
2. Нажатие кнопки «Поиск» захватывает токен временного доступа через Поток неявного предоставления и возвращает результаты поиска,
3. Результаты поиска заполняются в списке. результатов
4. Пользователь выбирает песни, добавляя их в столбец «Плейлисты»,
5. Пользователь вводит имя выбранного плейлиста и нажимает кнопку «Сохранить в Spotify»,
6. . Метод POST создает список воспроизведения с выбранным именем и возвращает уникальный идентификатор (Spotify.savePlaylist (); см. Ниже),
7. Уникальный идентификатор используется для заполнения списка воспроизведения выбранными песнями другим методом POST.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю Сохранить в Spotify, плейлист создается в моей учетной записи, но пустой! В довершение всего я получаю следующее сообщение:

Я сконцентрировался в автономном коде (выделенном из приложения React. js) так что нажатие кнопки моделируется функцией savePlaylist () (мне удалось воспроизвести проблему). Приведенный ниже объект Spotify содержит методы для получения токена доступа, поиска песен и (что меня интересует) создания списка воспроизведения, а затем сохранения соответствующих дорожек.

Модуль Spotify. js, который завершается Действия API следующие:

const clientId = '6acd4fb43b3443c190e390753512049d'//Create a working Spotify Web API project to get the client id
const redirectUri = 'https://www.spotify.com/uk/'; //a redirect uri that matches value in the Spotify WEB API project page
let accessToken;

//below are manual entries for the playlist name and tracks (with unique spotify URI)
const playlistTracks = ["spotify:track:6UaHTPaVvS1rasCTUs64N0", "spotify:track:6bC1z4GVrswBEw0D2pOkbT"];
const playlistName = 'StackOverflow Jams II';

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;
        }

        //check for access token match
        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiresInMatch[1]);
            // This clears the parameters, allowing us to grab a new access token when it expires
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token', null, '/');
            return accessToken;
        } else {
            const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
            window.location = accessUrl;
        }
    },

    search(term) {
        const accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        }).then(response => {
            return response.json();
        }).then(jsonResponse => {
            if (!jsonResponse.tracks) {
                return [];
            }
            return jsonResponse.tracks.items.map(track => ({
                id: track.id,
                name: track.name,
                artist: track.artists[0].name,
                album: track.album.name,
                uri: track.uri
            }));
        })
    },

    savePlaylist(name, trackUris) {
        if (!name || !trackUris.length) {
            return;
        }

        const accessToken = Spotify.getAccessToken();
        const headers = { Authorization: `Bearer ${accessToken}` };
        let userId;
        console.log(trackUris);
        console.log(accessToken);

        return fetch('https://api.spotify.com/v1/me', { headers: headers }
        ).then(response => response.json()
        ).then(jsonResponse => {
            userId = jsonResponse.id;
            return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
                headers: headers,
                method: 'POST',
                body: JSON.stringify({ name: name })
            }).then(response => response.json()
            ).then(jsonResponse => {
                const playlistId = jsonResponse.id;
                return fetch(`­https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`,
                    {
                        headers: headers,
                        method: 'POST',
                        body: JSON.stringify({ uris: trackUris }) 
                    })
            })
        })
    }
};

function savePlaylist() {
    Spotify.savePlaylist(playlistName, playlistTracks);
  };

savePlaylist();

Другая незначительная проблема (которая может быть симптомом) - когда я выполняю поиск в первый раз, список треков заполняется, а затем сразу же обновляется страница. На этом этапе страница перенаправления имеет строку запроса, прикрепленную с доступом лексем и временем окончания срока действия, как, например:

http://localhost: 3000 / # access_token = BQB-F1LdIdZSW5zD7P5IIaxRbbO_jkPZL4RFkDGqzI0IDXEMS6J1P7P4MpqN2ogj-P5oNWfA7Lea2sZlI5g9qTHqNSODlBwI3hNiVjyh45pWujsgsGIaDLyjlxI6cB4PhU72Wvu10Kd_UFfDOaBmlhgmUJ8gpNjCjj6QsIEiJ38 & token_type = Bearer & expires_in = 3600

Только когда я снова ищу термин, список дорожек заполняется. Может ли это быть связано?

Answer 1

try - POST https://api.spotify.com/v1/playlists/ {playlist_id} / дорожки
вместо - POST https://api.spotify.com/v1/users/ {user_id} / списки воспроизведения / {playlist_id} / дорожки
когда вы добавляете треки в плейлист. см. сообщение в блоге .