Question

我想用Vue SPA（webpack）和Spotify API创建一个应用程序。不幸的是我无法获得身份验证。所以Spotify有一个基本的代码片段，您可以使用它来构建您的应用程序。我尝试使用该代码并重写它，以便我可以将它与Vue一起使用。这不是很好，我有各种各样的问题。我已注册我的应用程序，并保存了我的详细信息，如客户端ID等。

Spotify的原始片段

http://jsfiddle.net/JMPerez/62wafrm7/

问题

代码不记录来自呼叫的响应。来自spotify auth / login的弹出窗口在url中给我一个auth令牌，但也没有关闭。此外，display属性保持为false，因此login / auth函数似乎出现了问题。

代码：

<button class="button is-spotify" :class="{display : display}" @click="getAuth()">Login to Spotify <i class="fa fa-spotify"></i></button>

方法

methods: {

        login(callback) {

            var CLIENT_ID = '3f6be5c8306741c8ab06713da0a92f59';
            var REDIRECT_URI = 'http://localhost:8080/#/account';

            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([
                'user-read-email'
            ]);

          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 == 'access_token') {
                  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);

    },

    getUserData(accessToken) {
        axios({
            method: 'get',
            url: 'https://api.spotify.com/v1/me',
            headers: {
               'Authorization': 'Bearer ' + accessToken
            }
        })
    },

    getAuth() {

            this.login(function(accessToken) {
            this.getUserData(accessToken)
                .then(function(response) {
                    console.log(response);
                    this.display = true;
                });
            });
    }

    } // end of methods

因此，当我从url复制令牌并将其作为数据属性粘贴并单独运行getUserData时，它会返回数据，如下所示：

<button class="button is-spotify" :class="{display : display}" @click="getUserData()">Login to Spotify <i class="fa fa-spotify"></i></button>

getUserData函数

getUserData() {
    axios({
        method: 'get',
        url: 'https://api.spotify.com/v1/me',
        headers: {
           'Authorization': 'Bearer ' + this.accessToken
        }
    }).then(function(response) {
        console.log(response);
    })
}

但实际上并不是我想要的，因为我必须每小时设置一个新令牌，而不是每小时重新验证一次的用户。所以，我想要与基本片段相同的结果。

getAuth() {

    //run login + getUserData
    //maybe something like: get token and set it to this.accessToken


}

Vue - Spotify API Auth。登录问题

0 个答案: