首页 > 解决方案 > 在我的网站上创建 spotify 播放列表关注按钮

问题描述

我想创建一个按钮,用户可以在我的网站上关注 spotify 中的播放列表。我在 developer.spotify.com 中检查了 Web 开发人员 spotify Doc 并创建按钮和一个输入并为 Client ID 创建应用程序,然后将 js 代码放入 site 。当用户单击按钮时,他/她应该登录并且没问题,但之后什么都没有发生,追随者也不会改变。

(function() {
    
    function login(callback) {
        var CLIENT_ID = '02dc3058bff748e5ba6c814b8366edfs5';
        var REDIRECT_URI = 'http://musatamusic.com/demo-submission';
        function getLoginURL(scopes) {
            return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
              '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
              '&scope=' + encodeURIComponent(scopes.join(' ')) +
              '&response_type=token';
        }
        
        var url = getLoginURL([
            'playlist-modify-public'
        ]);
        
        var width = 450,
            height = 730,
            left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2);
    
        window.addEventListener("message", function(event) {
            var hash = JSON.parse(event.data);
            if (hash.type == 'BQD4D9oZwlG2u1cLOcx8P7lJGs63ZA7s0eTKi9O6wI8NmvGEBQI6JCnHAn_jtg_f1_7rWfBF_nD8saECxvAAJbc06ci1p-xa5qMGGWnc3g84byOKPiULBO8J80qEtxxdsJkdZtIH4O9FY7QdHCwq0ODU6fKD9ObazgrrdkxxWz78CMhe6HpaC3jtIkZAaUAog2gjjstbFXnczUxjnNzFAgAs-KUISuHH8F_Fs') {
                callback(hash.access_token);
            }
        }, false);
        
        var w = window.open(url,
                            'Spotify',
                            'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
                           );
        
    }

    function followPlaylist(accessToken, playlistUri) {
        var parts = playlistUri.split(':');
        $.ajax({
            url: 'https://api.spotify.com/v1/users/zcszsah76l94tltmiget761mi/playlists/4ZxTESEv0m00o2kKq47745/followers',
            headers: {
               'Authorization': 'Bearer BQD4D9oZwlG2u1cLOcx8P7lJGs63ZA7s0eTKi9O6wI8NmvGEBQI6JCnHAn_jtg_f1_7rWfBF_nD8saECxvAAJbc06ci1p-xa5qMGGWnc3g84byOKPiULBO8J80qEtxxdsJkdZtIH4O9FY7QdHCwq0ODU6fKD9ObazgrrdkxxWz78CMhe6HpaC3jtIkZAaUAog2gjjstbFXnczUxjnNzFAgAs-KUISuHH8F_Fs'
            },
            method: 'PUT',
            success: function() {
                $(".follow-us").remove();
                $(".popup").append("<p><i class='fas fa-check'></i>THANKS FOR FOLLOWING PLAYLIST</p>");
                $(".popup").append("<a href='#!' class='go'>GO TO SUBMIT</a>");
            },
            dataType: 'html',
            error: function(e) {
                $(".follow-us").remove();
                $(".popup").append("<p style='background:#961818;border-color:#961818;'><i class='fas fa-door-closed'></i>THERE IS A PROBLEM</p>");
            }
        });
    }

    var followButton = document.getElementById('follow-us'),
        playlistUriInput = document.getElementById('playlist-uri');
    
    followButton.addEventListener('click', function() {
        login(function(accessToken) {
            followPlaylist(accessToken, playlistUriInput.value);
        });
    });
    
})();
<input type="text" id="playlist-uri" value="spotify:user:zcszsah76l94tltmiget761mi:playlist:4ZxTESEv0m00o2kKq47745" hidden>
<button class="follow-us" id="follow-us">
   <i class="fab fa-spotify fa-2x"></i>
   FOLLOW ON SPOTIFY
</button>

怎么了???

标签: javascripthtmlapispotify

解决方案


推荐阅读