Question

我正在使用以下两个文件。

位于本地服务器上的

index2.html文件正在调用JavaScript文件，该文件也位于本地计算机上

fetch-ajax3.js-位于本地服务器上的JavaScript文件，由用于验证和授权API调用以及检索数据并将其发布到控制台中的功能和方法组成。

我不确定要在重定向URI中输入什么。有人可以帮忙吗？

解决方案-在Spotify API应用中将回调uri列入白名单之后，我能够解决此问题。

const hash = window.location.hash
.substring(1)
.split('&')
.reduce(function (initial, item) {
  if (item) {
    var parts = item.split('=');
    initial[parts[0]] = decodeURIComponent(parts[1]);
  }
  return initial;
}, {});
window.location.hash = '';

// Set token
let _token = hash.access_token;

const authEndpoint = 'https://accounts.spotify.com/authorize';

// Replace with your app's client ID, redirect URI and desired scopes
const clientId = '';
const redirectUri = '';
const scopes = [
  'user-top-read'
];

// If there is no token, redirect to Spotify authorization
if (!_token) {
  window.location = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join('%20')}&response_type=token&show_dialog=true`;
}

// Make a call using the token
$.ajax({
   url: "https://api.spotify.com/v1/me/top/artists",
   type: "GET",
   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Bearer ' + _token );},
   success: function(data) {
     // Do something with the returned data
     data.items.map(function(artist) {
       let item = $('<li>' + artist.name + '</li>');
       item.appendTo($('#top-artists'));
     });
   }
});

    <html>
      <head>
        <title>Spotify Implicit Grant Template</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel="stylesheet" />
        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
        <script src="./fetch-ajax3.js" defer></script>
      </head>
      <body class="container">
        <h1 class="text-salmon">Spotify Implicit Grant Template</h1>
        <h3>This app uses the implicit grant authorization flow to authenticate users and get user data.</h3>
        <p>
          Here are your top artists on Spotify:
          <ol id="top-artists"></ol>
      </body>
    </html>

Answer 1

将应用程序中的回调网址列入白名单之后，我就可以连接它了。

Answer 2

在Spotify信息中心的应用程序设置中，将URL指定为localhost的Http

Answer 3

您需要在重定向 URI 中添加您的网址，这会将您的网址列入白名单。它对我有用。

无法连接到Spotify Api：错误的URI响应错误

3 个答案: